/* ─────────────────────────────────────────────────────────────────────────
 * Предложка — кабинет. Каркас (сайдбар + топбар + вид) и блоки разделов.
 * ───────────────────────────────────────────────────────────────────────── */

body.app{
  background: var(--bg);
}

.layout{
  display: grid;
  grid-template-columns: 258px minmax(0, 1fr);
  min-height: 100dvh;
  transition: grid-template-columns 280ms var(--ease);
}

/* ── Сайдбар ───────────────────────────────────────────────────────────── */

.side{
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  padding: max(18px, env(safe-area-inset-top)) 12px 16px;
  background: var(--surface);
  box-shadow: 1px 0 0 var(--line-2);
  overflow-x: hidden;
  transition: padding 280ms var(--ease);
}

/* Переключатель темы находится в правой части верхней панели. */
#themeBtn{
  flex: none;
}

.side-head{
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 63px;
  padding: 0 1px 15px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line-2);
}

.side .logo{
  gap: 12px;
  font-size: 20px;
  font-weight: 600;
  white-space: nowrap;
  transition: gap 280ms var(--ease), font-size 280ms var(--ease);
}

.logo-label,
.side-label{
  display: inline-block;
  min-width: 0;
  opacity: 1;
  transform: translateX(0);
  transition: opacity 180ms var(--ease), transform 280ms var(--ease);
}

.side-label{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.side .logo-mark{
  width: 45px;
  height: 45px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 0 0 5px var(--ink);
}

.side .logo-mark svg{
  width: 22px;
  height: 22px;
}

.side-close{
  display: none;
  margin-inline-start: auto;
}

.side-nav{
  display: grid;
  align-content: start;
  gap: 1px;
  min-height: 0; /* иначе flex-родитель не даёт списку сжаться и футер уезжает */
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

.side-nav a{
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 48px;
  padding: 5px 0;
  border-radius: 7px;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  transition: background-color 140ms var(--ease), color 140ms var(--ease),
    gap 280ms var(--ease), padding 280ms var(--ease), font-size 280ms var(--ease);
}

.side-nav a:first-child{
  margin-bottom: 1px;
}

.side-nav a:hover{
  background: var(--surface-2);
  color: var(--ink);
}

.side-nav a[aria-current="page"]{
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 600;
}

/* «Сообщения» использует то же состояние, что остальные пункты меню. */
.side-nav a.side-main{
  color: var(--ink-2);
  font-weight: 500;
  box-shadow: none;
}

.side-nav a.side-main[aria-current="page"]{
  color: var(--brand);
  box-shadow: none;
}

.side-nav a > svg:first-child{
  flex: none;
  box-sizing: content-box;
  width: 18px;
  height: 18px;
  padding: 8px;
  border-radius: 9px;
  background: var(--surface-2);
  color: currentColor;
}

.side-nav a[aria-current="page"] > svg:first-child{
  background: var(--brand);
  color: var(--brand-ink);
  box-shadow: 0 5px 12px color-mix(in srgb, var(--brand) 26%, transparent);
}

.side-section{
  min-height: 18px;
  max-height: 18px;
  line-height: 18px;
  margin: 23px 0 8px;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  overflow: hidden;
  transform: translateX(0);
  transition: max-height 220ms var(--ease), margin 220ms var(--ease), opacity 180ms var(--ease),
    font-size 220ms var(--ease), transform 280ms var(--ease);
}

.side-bell{
  display: grid;
  place-items: center;
  flex: none;
  margin-inline-start: -8px;
  color: currentColor;
  transform: translateX(0);
  transition: width 220ms var(--ease), margin 220ms var(--ease), opacity 180ms var(--ease), transform 280ms var(--ease);
}

@media (min-width: 901px){
  body[data-route="messages"] .layout{
    /* 45px логотип + боковые отступы: знак больше не режется рамкой
     * свёрнутой панели, а область диалогов теряет всего несколько пикселей. */
    grid-template-columns: 70px minmax(0, 1fr);
  }

  body[data-route="messages"] .side-nav a{
    width: 100%;
    min-width: 0;
  }

  body[data-route="messages"] .side-nav a > svg:first-child{
    margin-inline-start: 6px;
  }

  body[data-route="messages"] .logo-label,
  body[data-route="messages"] .side-label,
  body[data-route="messages"] .side-section,
  body[data-route="messages"] .side-bell,
  body[data-route="messages"] .side-nav .count{
    opacity: 0;
    transform: translateX(-18px);
    pointer-events: none;
  }

  body[data-route="messages"] .side-section{
    min-height: 0;
    max-height: 0;
    margin-block: 0;
    font-size: 0;
  }

  body[data-route="messages"] .side-nav a:hover,
  body[data-route="messages"] .side-nav a[aria-current="page"]{
    background: transparent;
  }
}

.side-bell svg{
  width: 18px;
  height: 18px;
}

.side-nav .count{
  margin-inline-start: auto;
  padding: 1px 7px;
  border-radius: var(--r-full);
  background: var(--brand);
  color: var(--brand-ink);
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: 0;
}

/* ── Топбар ────────────────────────────────────────────────────────────── */

.main{
  min-width: 0;
}

.topbar{
  position: sticky;
  inset-block-start: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 68px;
  padding-inline: max(28px, env(safe-area-inset-left), env(safe-area-inset-right));
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  box-shadow: 0 1px 0 var(--line-2);
}

.topbar h1{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -0.025em;
}

.topbar-sub{
  font-size: var(--t-xs);
  color: var(--ink-2);
  letter-spacing: 0;
}

.topbar-heading{
  min-width: 0;
}

body[data-route="subscription"] .topbar{
  height: 88px;
}

body[data-route="subscription"] .topbar-heading{
  flex: 1 1 auto;
}

body[data-route="subscription"] #viewTitle{
  gap: 10px;
  color: var(--brand);
  font-size: 15.5px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

body[data-route="subscription"] #viewTitle > span:last-child,
body[data-route="subscription"] .topbar-sub{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-route="subscription"] .topbar-sub{
  max-width: max(120px, min(920px, calc(100vw - 460px)));
  margin-inline-start: 0;
  margin-top: 3px;
  font-size: 12px;
}

body[data-route="subscription"] .view-title-icon{
  width: 44px;
  height: 44px;
  border-radius: 13px;
}

body[data-route="subscription"] .topbar-actions{
  margin-inline-start: 0;
}

.topbar .search{
  width: min(300px, 32vw);
  margin-inline-start: auto;
}

.topbar .search .input{
  min-height: 38px;
  background: var(--surface);
}

.menu-btn{
  display: none;
}

.view-title-icon{
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  color: var(--brand);
}

.view-title-icon svg{
  width: 19px;
  height: 19px;
}

.topbar-account{
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.topbar-account #themeBtn{
  width: 40px;
  height: 40px;
  border-color: var(--line-2);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-2);
  box-shadow: var(--sh-1);
}

.profile-menu{
  position: relative;
}

.profile-btn{
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: scale 140ms var(--ease), box-shadow 140ms var(--ease);
}

.profile-btn:hover{
  box-shadow: 0 0 0 4px var(--brand-soft);
}

.profile-btn:active{
  scale: 0.95;
}

.profile-btn[aria-expanded="true"]{
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}

.profile-avatar{
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 38px;
  height: 38px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: linear-gradient(145deg, #7aaeff, #1769ff);
  box-shadow: 0 0 0 1px var(--line-2), var(--sh-1);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.profile-avatar img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-avatar-lg{
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  font-size: 16px;
}

.profile-popover{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 95;
  width: 292px;
  padding: 10px;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 18px 44px rgba(28, 42, 68, 0.16), inset 0 0 0 1px color-mix(in srgb, var(--surface) 72%, transparent);
}

.profile-popover[hidden]{
  display: none;
}

.profile-summary{
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  min-height: 72px;
  padding: 8px 10px 10px;
}

.profile-summary > div{
  display: grid;
  min-width: 0;
}

.profile-summary strong{
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-summary > div > span{
  margin-top: 4px;
  color: var(--ink-3);
  font-size: 11.5px;
}

.developer-scenarios{
  margin: 2px 0 10px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--brand) 17%, var(--line-2));
  border-radius: 14px;
  background: color-mix(in srgb, var(--brand-soft) 48%, var(--surface));
}

.developer-scenarios[hidden]{
  display: none;
}

.developer-scenarios-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 650;
}

.developer-scenarios-head em{
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--brand-ink);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.developer-scenario-list{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.developer-scenario-list button{
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
  min-height: 48px;
  padding: 7px 4px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  cursor: pointer;
  transition: border-color 140ms var(--ease), background-color 140ms var(--ease), color 140ms var(--ease);
}

.developer-scenario-list button:hover{
  border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
  color: var(--ink);
}

.developer-scenario-list button[aria-checked="true"]{
  border-color: color-mix(in srgb, var(--brand) 48%, transparent);
  background: var(--brand);
  color: var(--brand-ink);
  box-shadow: 0 5px 12px color-mix(in srgb, var(--brand) 18%, transparent);
}

.developer-scenario-list strong{
  overflow: hidden;
  max-width: 100%;
  font-size: 10.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.developer-scenario-list span{
  overflow: hidden;
  max-width: 100%;
  font-size: 8.5px;
  opacity: 0.76;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-divider{
  height: 1px;
  margin: 2px 8px 10px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

.profile-ws{
  padding: 0 8px 8px;
}

.profile-ws-title{
  display: block;
  padding: 0 8px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.profile-ws-item{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.profile-ws-item[aria-current="true"]{
  background: var(--brand-soft);
  cursor: default;
}

.profile-ws-item:hover:not([aria-current="true"]){
  background: var(--line-2);
}

.profile-ws-name{
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.profile-ws-mark{
  flex: none;
  color: var(--brand);
}

/* Ограничения демонстрационных профилей. Сотрудник не видит разделы,
 * которых нет в выданных правах; бесплатный владелец видит возможности,
 * но платные разделы отмечены замком и открывают понятное ограничение. */
.side-nav a.is-access-hidden,
.side-section.is-access-hidden{
  display: none;
}

.side-nav a.is-plan-locked{
  color: var(--ink-3);
}

.side-nav a.is-plan-locked::after{
  content: "";
  flex: none;
  width: 13px;
  height: 13px;
  margin-inline: auto 8px;
  opacity: 0.72;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='10' width='14' height='10' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='10' width='14' height='10' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.access-restriction{
  display: grid;
  place-items: center;
  min-height: min(590px, calc(100dvh - 120px));
  padding: 30px 20px;
}

.access-restriction-card{
  display: grid;
  justify-items: center;
  width: min(100%, 500px);
  padding: 38px 34px;
  border: 1px solid var(--line-2);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--sh-2);
  text-align: center;
}

.access-restriction-icon{
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 18px;
  border-radius: 17px;
  background: var(--brand-soft);
  color: var(--brand);
}

.access-restriction-card h2{
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 20px;
  letter-spacing: -0.02em;
}

.access-restriction-card p{
  max-width: 390px;
  margin: 0 0 22px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.55;
}

.plan-preview{
  position:relative;
  min-width:0;
  min-height:min(760px,calc(100dvh - 104px));
  overflow:hidden;
  border:1px solid var(--line-2);
  border-radius:22px;
  background:var(--surface-2);
  isolation:isolate;
}

.plan-preview-content{
  min-width:0;
  min-height:inherit;
  padding:2px;
  opacity:.68;
  filter:blur(3px) saturate(.78);
  pointer-events:none;
  user-select:none;
  transform:scale(1.006);
  transform-origin:top center;
}

.plan-preview-shade{
  position:absolute;
  z-index:1;
  inset:0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface-2) 12%,transparent),transparent 38%),color-mix(in srgb,var(--surface-2) 18%,transparent);
  pointer-events:none;
}

.plan-preview-gate{
  position:absolute;
  z-index:2;
  top:28px;
  left:50%;
  display:grid;
  justify-items:center;
  width:min(520px,calc(100% - 32px));
  padding:26px 30px 22px;
  border:1px solid color-mix(in srgb,var(--brand) 20%,var(--line));
  border-radius:20px;
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  box-shadow:0 20px 54px rgba(31,55,105,.18),0 2px 7px rgba(31,55,105,.08);
  text-align:center;
  backdrop-filter:blur(18px);
  transform:translateX(-50%);
}

.plan-preview-icon{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  margin-bottom:12px;
  border-radius:16px;
  background:linear-gradient(145deg,#e7efff,#d9e6ff);
  color:var(--brand);
}

.plan-preview-gate h2{margin:0;color:var(--ink);font-size:22px;font-weight:700;letter-spacing:-.025em}
.plan-preview-gate p{max-width:420px;margin:9px 0 18px;color:var(--ink-2);font-size:13.5px;line-height:1.55}
.plan-preview-cta{min-width:190px}

@media (max-width:640px){
  .plan-preview{min-height:680px;border-radius:18px}
  .plan-preview-gate{top:16px;width:calc(100% - 24px);padding:22px 18px 18px;border-radius:17px}
  .plan-preview-icon{width:48px;height:48px;margin-bottom:10px}
  .plan-preview-gate h2{font-size:20px}
  .plan-preview-cta{width:100%}
}

.profile-logout{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--danger) 18%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--danger) 7%, var(--surface));
  color: var(--danger);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background-color 140ms var(--ease), border-color 140ms var(--ease), scale 140ms var(--ease);
}

.profile-logout:hover{
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
  background: color-mix(in srgb, var(--danger) 11%, var(--surface));
}

.profile-logout:active{
  scale: 0.98;
}

@media (max-width: 640px){
  .topbar{
    padding-inline: 14px;
  }
  .topbar-account{
    gap: 5px;
  }
  .topbar-account #themeBtn{
    width: 38px;
    height: 38px;
  }
  .profile-btn{
    width: 40px;
    height: 40px;
  }
  .profile-popover{
    right: -2px;
    width: min(292px, calc(100vw - 28px));
  }
}

/* ── Переключатель темы ────────────────────────────────────────────────
 * Обе иконки в потоке одной grid-ячейки — кросс-фейд даёт и вход, и выход
 * без библиотеки анимаций. Состояние читаем из того же селектора, что и
 * токены: data-theme проставлен инлайн-скриптом ДО первой отрисовки, поэтому
 * стартовая иконка не «приезжает» анимацией на загрузке. */

/* Смена темы — не анимация. Без этого фоны кнопок (у них transition на
 * background-color) ползут 140мс, а текст, рамки и тени переключаются
 * мгновенно: получается неровная смазка вместо честного переключения.
 * Гасим переходы на один кадр — кроме самих иконок переключателя. */
:root[data-anim="off"] *,
:root[data-anim="off"] *::before,
:root[data-anim="off"] *::after{
  transition: none !important;
}

:root[data-anim="off"] .ico-swap svg{
  transition:
    opacity 300ms var(--ease),
    scale 300ms var(--ease),
    filter 300ms var(--ease) !important;
}

.ico-swap{
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
}

.ico-swap svg{
  grid-area: 1 / 1;
  transition:
    opacity 300ms var(--ease),
    scale 300ms var(--ease),
    filter 300ms var(--ease);
}

.ico-sun{
  opacity: 1;
  scale: 1;
  filter: blur(0);
}

.ico-moon{
  opacity: 0;
  scale: 0.25;
  filter: blur(4px);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .ico-moon{
    opacity: 1;
    scale: 1;
    filter: blur(0);
  }
  :root:not([data-theme="light"]) .ico-sun{
    opacity: 0;
    scale: 0.25;
    filter: blur(4px);
  }
}

:root[data-theme="dark"] .ico-moon{
  opacity: 1;
  scale: 1;
  filter: blur(0);
}

:root[data-theme="dark"] .ico-sun{
  opacity: 0;
  scale: 0.25;
  filter: blur(4px);
}

/* ── Вид ───────────────────────────────────────────────────────────────── */

.view{
  padding: 22px max(28px, env(safe-area-inset-left), env(safe-area-inset-right)) 64px;
  display: grid;
  /* Без явной колонки неявная auto-дорожка не сжимается ниже min-content
   * содержимого, и страница разъезжается шире вьюпорта (337px при 320). */
  grid-template-columns: minmax(0, 1fr);
  /* 32px между разделами против 16px между карточками — ровно 2x, иначе
   * границы разделов читались как ещё один ряд карточек. */
  gap: 32px;
  align-content: start;
}

.grid-2{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.grid-3{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.grid-4{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.split{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 344px;
  gap: 16px;
  align-items: start;
}

/* ── Плитка показателя ─────────────────────────────────────────────────── */

.tile{
  display: grid;
  gap: 4px;
  padding: 18px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-2), var(--sh-1);
}

.tile-label{
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--t-xs);
  color: var(--ink-2);
  letter-spacing: 0;
}

.metric-value{
  font-size: var(--t-2xl);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.tile-foot{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-xs);
  color: var(--ink-3);
  letter-spacing: 0;
}

/* ── График ────────────────────────────────────────────────────────────── */

.chart{
  position: relative;
}

.chart svg{
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Пунктир вместо сплошной, как в инфографике TrueStat: сплошные линии на
 * светлом фоне спорят по весу с самой кривой, пунктир уходит на задний план
 * и не мешает читать значения. Горизонтальные — вертикальных там нет. */
.chart-grid{
  stroke: var(--line-2);
  stroke-width: 1;
  stroke-dasharray: 4;
}

.chart-axis{
  fill: var(--ink-3);
  font-size: var(--t-3xs);
  letter-spacing: 0;
  /* Подписи перерисовываются при смене периода — пропорциональные цифры
   * заставляли ось прыгать по горизонтали. */
  font-variant-numeric: tabular-nums;
}

.chart-hit{
  fill: transparent;
  cursor: crosshair;
}

.chart-cursor{
  stroke: var(--ink-3);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0;
}

.chart[data-hover] .chart-cursor{
  opacity: 1;
}

.legend{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 14px;
}

/* У двух верхних аналитических графиков служебная зона одинаковой высоты:
 * легенда первого больше не опускает его plot-area относительно второго. */
.chart-legend-slot{
  min-height: 28px;
  display: flex;
  align-items: flex-start;
}

.chart-legend-slot .legend{
  margin-bottom: 0;
}

.legend span{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--t-xs);
  color: var(--ink-2);
  letter-spacing: 0;
}

.legend i{
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: currentColor;
}

.tip{
  position: absolute;
  z-index: 5;
  min-width: 132px;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-3);
  font-size: var(--t-xs);
  letter-spacing: 0;
  pointer-events: none;
  opacity: 0;
  translate: -50% -100%;
  transition: opacity 120ms var(--ease);
}

.tip[data-show]{
  opacity: 1;
}

.tip b{
  display: block;
  margin-bottom: 5px;
  font-size: var(--t-2xs);
  color: var(--ink-2);
  font-weight: 600;
}

.tip-row{
  display: flex;
  align-items: center;
  gap: 7px;
}

.tip-row .num{
  margin-inline-start: auto;
  font-weight: 600;
}

/* Горизонтальный список-бар (доли источников, темы) */
.barlist{
  display: grid;
  gap: 13px;
}

.barlist-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: baseline;
}

.barlist-track{
  grid-column: 1 / -1;
  height: 8px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  overflow: hidden;
}

.barlist-fill{
  height: 100%;
  border-radius: var(--r-full);
}

.barlist-name{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-sm);
  letter-spacing: 0;
}

.barlist-val{
  font-size: var(--t-sm);
  font-weight: 600;
}

/* ── Диалоги (Сообщения) ───────────────────────────────────────────────── */

.inbox{
  display: grid;
  /* Две колонки: карточку подписчика убрали, её содержимое живёт в меню
   * «Действия» — третья колонка занимала треть экрана ради четырёх строк. */
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 0;
  height: calc(100dvh - 68px - 86px);
  min-height: 520px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-2), var(--sh-2);
  overflow: hidden;
}

.inbox-col{
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.inbox-col + .inbox-col{
  border-inline-start: 1px solid var(--line-2);
}

.inbox-head{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px;
  border-bottom: 1px solid var(--line-2);
}

.inbox-scroll{
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dlg{
  display: grid;
  /* аватар со знаком мессенджера | имя | время */
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 3px 11px;
  width: 100%;
  padding: 12px 14px;
  text-align: start;
  border-bottom: 1px solid var(--line-2);
  transition:
    background-color 140ms var(--ease),
    scale 140ms var(--ease);
}

.dlg:hover{
  background: var(--surface-2);
}

.dlg:active{
  scale: 0.96;
}

.dlg[aria-current="true"]{
  background: var(--brand-soft);
}

/* Знак мессенджера сидит на аватарке значком, как индикатор онлайна, —
 * не отдельной строкой под ней и не в колонке у времени, где терялся.
 *
 * align-self: start обязателен: элемент занимает две строки грида и без
 * него растянулся бы на всю их высоту, а значок с bottom привязался бы к
 * низу растянутой области, а не к низу аватарки. */
.dlg-who{
  grid-row: span 2;
  align-self: start;
  position: relative;
  line-height: 0;
}

/* Знак мессенджера в строке: откуда пришло обращение. Цвет — из .src-*. */
/* Значок источника в правом нижнем углу аватарки. Подложка своя, а не
 * прозрачная: строка меняет фон в трёх состояниях (обычная, ховер,
 * выбранная), и на --brand-soft прозрачный значок терял контур.
 *
 * Кольцо-вырез цветом фона не делаем по той же причине — оно совпадало бы
 * только с одним из трёх состояний. Хватает собственной подложки с
 * волосяным контуром. */
.dlg-src{
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--r-full);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-1);
}

.dlg-name{
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.dlg-time{
  font-size: var(--t-2xs);
  color: var(--ink-3);
  letter-spacing: 0;
}

.dlg-prev{
  grid-column: 2 / -1;
  font-size: var(--t-xs);
  color: var(--ink-2);
  letter-spacing: 0;
}

.dlg-badges{
  grid-column: 2 / -1;
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.thread{
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bubble{
  max-width: 74%;
  padding: 10px 13px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: var(--t-md);
  line-height: 1.45;
  letter-spacing: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.bubble-out{
  align-self: flex-end;
  background: var(--brand);
  color: var(--brand-ink);
}

/* В тёмной теме бренд светлый, и тёмный текст на нём даёт APCA 63 — мало для
 * многострочного тела сообщения (порог 75). Тонировка + основной текст: 92.
 * Кнопки с коротким ярлыком заливку сохраняют, им хватает порога 60. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .bubble-out {
    background: var(--brand-soft-2);
    color: var(--ink);
  }
}

:root[data-theme="dark"] .bubble-out{
  background: var(--brand-soft-2);
  color: var(--ink);
}

/* Цитата обращения внутри пузыря ответа — вид reply, как в MAX. Цвета от
 * currentColor, поэтому один блок работает и в исходящем поверх бренда, и в
 * тёмной теме поверх тонировки. */
.bubble-quote{
  display: block;
  margin-bottom: 7px;
  padding: 5px 10px;
  border-inline-start: 2.5px solid currentColor;
  border-start-end-radius: 8px;
  border-end-end-radius: 8px;
  background: color-mix(in srgb, currentColor 12%, transparent);
}

.bubble-quote b{
  display: block;
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: 0;
}

.bubble-quote i{
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
  font-size: var(--t-2xs);
  letter-spacing: 0;
  opacity: 0.85;
}

.bubble-meta{
  display: block;
  margin-top: 5px;
  font-size: var(--t-3xs);
  opacity: 0.72;
  letter-spacing: 0;
}

.day-sep{
  align-self: center;
  padding: 3px 11px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  font-size: var(--t-2xs);
  color: var(--ink-2);
  letter-spacing: 0;
}

.composer{
  padding: 12px 14px;
  border-top: 1px solid var(--line-2);
}

.composer-row{
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.composer .textarea{
  flex: 1;
  min-width: 0; /* без этого width:100% выдавливает кнопку отправки за край */
  min-height: 44px;
  max-height: 140px;
  padding: 11px 14px;
}

.kv{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 14px;
  font-size: var(--t-sm);
  letter-spacing: 0;
}

.kv dt{
  color: var(--ink-2);
}

.kv dd{
  margin: 0;
  text-align: end;
}

/* ── Управление видом: превью ──────────────────────────────────────────── */

.phone{
  position: sticky;
  inset-block-start: 86px;
  width: 100%;
  max-width: 320px;
  margin-inline: auto;
  /* Концентрично: 8 паддинга + 20 у .phone-screen = 28 внешнего радиуса. */
  padding: 8px;
  border-radius: var(--r-xl);
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-2);
}

.phone-screen{
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 380px;
  padding: 14px;
  border-radius: var(--r-lg);
  background: var(--surface);
}

.phone-bar{
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--line-2);
}

.phone-text{
  font-size: var(--t-sm);
  line-height: 1.5;
  letter-spacing: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.phone-btn{
  display: grid;
  place-items: center;
  min-height: 40px;
  padding-inline: 14px;
  border-radius: var(--r-sm);
  background: var(--brand);
  color: var(--brand-ink);
  font-size: var(--t-sm);
  font-weight: 600;
  text-align: center;
}

/* Текст поста — единственная в кабинете длинная пользовательская копия{
  max-width: 68ch;
  margin-top: 8px;
  font-size: var(--t-sm);
  color: var(--ink-2);
  letter-spacing: 0;
}

/* ── Матрица прав ──────────────────────────────────────────────────────── */

.perm td:not(:first-child),
.perm th:not(:first-child){
  text-align: center;
  width: 92px;
}

.perm input[type="checkbox"]{
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
  cursor: pointer;
}

/* ── Диалог подтверждения ──────────────────────────────────────────────── */

.ask{
  /* Сброс `* { margin: 0 }` убивает авто-поля из UA-стилей, которыми
   * браузер центрирует модальный <dialog> — возвращаем их явно. */
  margin: auto;
  width: min(420px, calc(100vw - 32px));
  padding: 24px;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-2), var(--sh-3);
}

.ask::backdrop{
  background: var(--overlay);
}

.ask-title{
  font-size: var(--t-lg);
  font-weight: 600;
}

.ask-text{
  margin-top: 10px;
  font-size: var(--t-md);
  color: var(--ink-2);
  letter-spacing: 0;
}

.ask-actions{
  margin-top: 20px;
  justify-content: flex-end;
}

/* ── Тост ──────────────────────────────────────────────────────────────── */

.toast{
  position: fixed;
  inset-block-start: calc(16px + env(safe-area-inset-top));
  inset-block-end: auto;
  inset-inline-start: 50%;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: var(--r-md);
  background: var(--ink);
  color: var(--bg);
  font-size: var(--t-sm);
  font-weight: 500;
  box-shadow: var(--sh-3);
  translate: -50% -8px;
  opacity: 0;
  transition: opacity 200ms var(--ease), translate 200ms var(--ease);
}

.toast[data-show]{
  opacity: 1;
  translate: -50% 0;
}

dialog .toast-in-dialog{
  position: fixed;
  inset-block-end: auto;
  z-index: 2147483647;
  width: max-content;
  max-width: calc(100vw - 24px);
  color: #fff;
  background: #10172d;
  box-shadow: 0 12px 32px rgba(9, 18, 39, 0.3);
  pointer-events: none;
}

/* ── Затемнение под мобильный сайдбар ──────────────────────────────────── */

.scrim{
  position: fixed;
  inset: 0;
  z-index: 35;
  display: none;
  background: var(--overlay);
}

body[data-nav="open"] .scrim{
  display: block;
}

/* ── Адаптив ───────────────────────────────────────────────────────────── */

@media (max-width: 1280px){
  .inbox {
    grid-template-columns: 288px minmax(0, 1fr);
  }
}

/* Карточка подписки/моста требует около 310px: иконка 32 + имя ~120 + бейдж 90
 * + два зазора + паддинги 48. Три штуки с зазорами, отступами вида и сайдбаром
 * упираются в ~1280px — ниже имена срезались в «Магаз…», хотя формально
 * помещались. Ломаем там, где контент перестаёт читаться, а не на круглой
 * тысяче: 3 → 2 колонки. */
@media (max-width: 1280px){
  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1100px){
  .grid-4{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .split{
    grid-template-columns: minmax(0, 1fr);
  }
  .phone{
    position: static;
  }
}

/* Вторая ступень: две карточки перестают помещаться примерно здесь. */
@media (max-width: 860px){
  .grid-3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px){
  .layout{
    grid-template-columns: minmax(0, 1fr);
  }
  .side{
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: 280px;
    translate: -100% 0;
    transition: translate 220ms var(--ease);
    box-shadow: var(--sh-3);
  }
  body[data-nav="open"] .side{
    translate: 0 0;
  }
  .side-close{
    display: grid;
  }
  .menu-btn{
    display: grid;
  }
  .topbar,
  .view{
    padding-inline: 18px;
  }
  .grid-2{
    grid-template-columns: minmax(0, 1fr);
  }
  .inbox{
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }
  .inbox-col-list{
    max-height: min(320px, 32dvh);
  }
  .inbox-col + .inbox-col{
    border-inline-start: 0;
    border-top: 1px solid var(--line-2);
  }
  .thread{
    min-height: min(340px, 40dvh);
  }
}

@media (max-width: 640px){
  .grid-4{
    grid-template-columns: minmax(0, 1fr);
  }
  .topbar .search{
    display: none;
  }
  .card-pad,
  .card-head{
    padding: 16px;
  }
}

/* ── Вложения в сообщениях ──────────────────────────────────────────────── */

.att-img{
  display: block;
  max-width: min(320px, 100%);
  max-height: 320px;
  margin-bottom: 6px;
  border-radius: var(--r-xs);
  outline: 1px solid var(--img-outline);
  outline-offset: -1px;
  object-fit: cover;
  cursor: zoom-in;
  transition: scale 140ms var(--ease);
}

.att-file{
  display: inline-flex;
  gap: 7px;
  align-items: center;
  margin-bottom: 6px;
  padding: 7px 11px;
  border-radius: var(--r-xs);
  background: var(--surface-2);
  font-size: var(--t-xs);
  color: var(--ink);
  transition:
    background-color 140ms var(--ease),
    scale 140ms var(--ease);
}

.att-file:hover{
  background: var(--surface-3, var(--surface-2));
}

.att-file:active,
.att-img:active{
  scale: 0.96;
}

/* ── Действия раздела в шапке ───────────────────────────────────────────── */

.topbar-actions{
  display: flex;
  gap: 8px;
  margin-inline-start: auto;
}

.topbar-actions .btn{
  gap: 7px;
  white-space: nowrap;
}

@media (max-width: 1100px){
  /* На узком экране остаются только иконки — подписи съедают всю строку. */
  .topbar-actions .btn span{
    display: none;
  }
}

/* ── Поповер: контекстное меню и фильтры ────────────────────────────────── */

.pop{
  position: fixed;
  z-index: 90;
  min-width: 208px;
  max-width: min(300px, calc(100vw - 24px));
  padding: 4px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-3);
}

.pop[hidden]{
  display: none;
}

.pop-item{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 9px;
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  text-align: start;
  transition:
    background-color 120ms var(--ease),
    scale 120ms var(--ease);
}

.pop-item:hover:not(:disabled){
  background: var(--surface-2);
}

.pop-item:active:not(:disabled){
  scale: 0.96;
}

/* Мессенджер, откуда обращений ещё не приходило: показываем, но выбрать
 * нельзя. Ховер и отклик сняты выше — иначе пункт выглядит нажимаемым. */
.pop-item:disabled{
  color: var(--ink-3);
  cursor: default;
}

.pop-item:disabled .pop-ico{
  opacity: 0.45;
}

.pop-item[aria-checked="true"]{
  background: var(--brand-soft);
  color: var(--brand);
}

.pop-item-danger{
  color: var(--danger);
}

.pop-item-danger:hover{
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}

.pop-item-warning{
  color: var(--warn);
}

.pop-item-warning:hover{
  background: var(--warn-soft);
}

.pop-sep{
  height: 1px;
  margin: 4px 6px;
  background: var(--line-2);
}

.pop-check{
  flex: none;
  width: 16px;
  color: currentColor;
}

/* ── Фильтры ленты ──────────────────────────────────────────────────────── */

.inbox-filters{
  display: flex;
  gap: 8px;
}

/* По содержимому, а не поровну: при равных долях «Мессенджеры» резалось
 * многоточием, хотя обе подписи в строку помещаются. Ужимается только
 * первая — у канала имя произвольной длины. */
.inbox-filters .btn{
  min-width: 0;
  padding-inline: 11px;
  justify-content: space-between;
  gap: 6px;
  overflow: hidden;
  white-space: nowrap;
}

.inbox-filters .btn:first-child{
  flex: 0 1 auto;
}

.inbox-filters .btn svg{
  flex: none;
}

/* Режем подпись, а не шеврон: без него кнопка не читается как выпадающая. */
.inbox-filters .btn span{
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Полноэкранный просмотр вложения ────────────────────────────────────── */

.mv{
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  /* Явная колонка обязательна: неявная auto-дорожка растёт до max-content
   * картинки, и max-width:100% у .mv-media считается уже от раздутой сцены —
   * снимок с телефона открывался в натуральную величину и уезжал за экран. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 14px;
  padding: 20px;
  background: var(--overlay);
  animation: mv-in 160ms var(--ease);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.mv-stage{
  position: relative;
  display: grid;
  place-items: center;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* Не max-width/max-height в процентах: у картинки 4000×3000 ширина
 * прижималась к сцене, а высота считалась по пропорции и вылезала за экран
 * (930px при сцене 812). Отдаём картинке весь бокс сцены — она имеет
 * определённые размеры — и вписываем содержимое через object-fit. */
.mv-media{
  /* Абсолютом, а не в потоке: высота сцены задана растяжением грид-дорожки,
   * а такая высота для процентов не «определённая» — height:100% не
   * резолвился, и браузер падал на пропорцию картинки (1240×3/4 = 930px при
   * сцене 812). У абсолютного элемента проценты считаются от бокса родителя. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--r-md);
  outline: 1px solid var(--img-outline);
  outline-offset: -1px;
  /* scale-down, а не contain: contain растянул бы вложение 120×90 на
   * весь экран и показал бы кашу. scale-down вписывает так же, но
   * никогда не крупнее оригинала. */
  object-fit: scale-down;
}

.mv-bar{
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* Крестик внутри карточки, а не в нижней панели: у маленькой модалки кнопка
 * закрытия у нижнего края экрана читается как «кнопка страницы», а не окна. */
.mv-x{
  flex: none;
  align-self: start;
}

/* ── Поле с форматированием ─────────────────────────────────────────────
 * Раньше здесь была textarea, и владелец канала видел «**текст**» вместо
 * жирного. Внешне повторяем .textarea, чтобы поле не выпадало из формы. */
.rich{
  display: grid;
  gap: 6px;
}

.rich-bar{
  display: flex;
  gap: 6px;
}

.rich-in{
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  /* 16px по той же причине, что у .textarea: iOS Safari зумит страницу при
   * фокусе в поле с текстом мельче 16px и обратно не отзумливает. */
  font-size: var(--t-base);
  line-height: 1.5;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow 140ms var(--ease);
  overflow-wrap: anywhere;
}

.rich-in:focus{
  outline: none;
  box-shadow: inset 0 0 0 2px var(--brand);
}

/* Цитата — «> строка» в разметке MAX. Полоска слева вместо символа: символ
 * пользователь и просил убрать с глаз. */
.rich-q,
.md-q{
  display: block;
  padding-inline-start: 10px;
  border-inline-start: 3px solid var(--line);
  color: var(--ink-2);
}

/* ── Кроссообщения: три маршрута и журнал доставки ─────────────────────── */

.topbar:has(.cp-topbar-sub){
  align-items: flex-start;
  height: 110px;
  padding-block: 17px;
}

.cp-topbar-sub{
  max-width: 720px;
  margin-top: 3px;
  color: var(--brand);
  line-height: 1.45;
  white-space: pre-line;
}

.cp-shell{
  display: grid;
  gap: 16px;
}

.cp-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.cp-card,
.cp-log{
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(31, 45, 76, 0.02);
}

.cp-card{
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 10px;
  min-width: 0;
  min-height: 256px;
  padding: 14px 13px;
}

.cp-card-flow,
.cp-direction,
.cp-platform{
  display: flex;
  align-items: center;
}

.cp-card-flow{
  justify-content: center;
  min-height: 33px;
}

.cp-direction{
  gap: 12px;
  color: var(--brand);
  white-space: nowrap;
}

.cp-platform{
  gap: 7px;
  color: var(--ink);
  font-size: var(--t-xs);
}

.cp-platform strong{
  font-weight: 600;
}

.cp-platform-icon{
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
}

.cp-platform-icon svg{
  color: currentColor;
}

.cp-platform-icon.cp-platform-original{
  background: transparent;
}

.cp-platform-original img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  outline: 0;
}

.cp-platform-tg{ background: #20a9e7; }
.cp-platform-vk{ background: #1274e7; }
.cp-platform-max{ background: linear-gradient(145deg, #5735f5, #7136ee); }

.cp-status{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 30px;
  border-radius: 8px;
  font-size: var(--t-xs);
  font-weight: 600;
}

.cp-status > span{
  display: grid;
  place-items: center;
}

.cp-status-ok{
  background: #eaf8ee;
  color: #0daf44;
}

.cp-status-ok > span{
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #0daf44;
  color: #fff;
}

.cp-status-off{
  background: var(--surface-2);
  color: #6c7fb9;
}

.cp-active-title{
  font-size: var(--t-xs);
  font-weight: 600;
}

.cp-channel-list{
  display: grid;
  align-content: start;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-channel-list li{
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 9px;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  font-size: var(--t-xs);
}

.cp-channel-list li > i{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #08b63d;
}

.cp-channel-list li.is-paused > i{
  background: #aab3c2;
}

.cp-channel-meta{
  display: grid;
  min-width: 0;
}

.cp-channel-meta strong{
  color: inherit;
  font: inherit;
}

.cp-channel-meta small{
  margin-top: 1px;
  color: #60729d;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
}

.cp-avatar{
  display: grid;
  place-items: center;
  flex: none;
  overflow: hidden;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #eef1f7;
  color: #5237ff;
  font-size: var(--t-xs);
  font-style: normal;
}

.cp-avatar-news{
  background: linear-gradient(#35a0eb 0 46%, #19334b 47% 64%, #b56c20 65% 78%, #263a51 79%);
}

.cp-avatar-landscape{
  background: linear-gradient(150deg, #7f9cbb 0 35%, #655e52 36% 62%, #9a7443 63% 78%, #38514e 79%);
}

.cp-avatar-test{
  background: #f0efff;
  color: #5537ff;
}

.cp-avatar-cat{
  background: #c7ced1;
  font-size: 19px;
}

.cp-avatar-community{
  position: relative;
  background: #1269eb;
}

.cp-avatar-community::before,
.cp-avatar-community::after{
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #fff;
}

.cp-avatar-community::before{
  top: 7px;
  left: 7px;
  width: 6px;
  height: 6px;
  box-shadow: 10px 0 #fff, 5px -2px #fff;
}

.cp-avatar-community::after{
  left: 6px;
  bottom: 6px;
  width: 18px;
  height: 7px;
  border-radius: 8px 8px 4px 4px;
}

.cp-outline-btn,
.cp-connect-btn{
  width: 100%;
  min-height: 36px;
  border-radius: 7px;
  font-size: var(--t-xs);
  font-weight: 600;
}

.cp-outline-btn{
  border: 1px solid #4967c7;
  color: #3a55a9;
}

.cp-connect-btn{
  grid-row: 5;
  background: #0868f5;
  color: #fff;
  box-shadow: 0 7px 14px rgba(8, 104, 245, 0.18);
}

.cp-connect-copy{
  align-self: center;
  color: #3858ba;
  font-size: var(--t-xs);
  line-height: 1.55;
  text-align: center;
}

.cp-settings-dialog{
  margin: auto;
  width: min(606px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 18px 18px 16px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(205, 212, 224, 0.92);
  border-radius: 10px;
  background: #fff;
  color: #0b1538;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  box-shadow: 0 24px 72px rgba(9, 18, 39, 0.32), 0 4px 16px rgba(9, 18, 39, 0.12);
}

html:has(.cp-settings-dialog[open]){
  overflow: hidden;
}

.cp-settings-dialog::backdrop{
  background: rgba(18, 28, 47, 0.56);
  backdrop-filter: blur(1.5px);
}

.cp-settings-head{
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: center;
  min-height: 32px;
}

.cp-settings-head h2{
  grid-column: 2;
  font-size: 24px;
  font-weight: 650;
  line-height: 1.25;
  text-align: center;
}

.cp-settings-head button{
  display: grid;
  place-items: center;
  grid-column: 3;
  width: 36px;
  height: 36px;
  margin: -4px -8px -2px 0;
  border-radius: 8px;
  color: #102451;
}

.cp-settings-head button:hover{
  background: #f2f4f8;
}

.cp-settings-flow{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 42px;
  min-height: 36px;
  margin: 12px 0 22px;
  color: #1c5cf5;
}

.cp-settings-platform{
  display: flex;
  align-items: center;
  gap: 9px;
  color: #0b1538;
  white-space: nowrap;
}

.cp-settings-platform .cp-platform-icon{
  width: 36px;
  height: 36px;
}

.cp-platform-icon.cp-platform-max,
.cp-platform-icon.cp-platform-max img{
  border-radius: 50%;
}

.cp-settings-platform strong{
  font-size: 16px;
  font-weight: 650;
}

.cp-settings-status{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 38px;
  border-radius: 8px;
  background: #e9f6ec;
  color: #079e36;
  font-size: 14px;
  font-weight: 600;
}

.cp-settings-status > span{
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #0aaa3b;
  color: #fff;
}

.cp-settings-section-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 6px;
}

.cp-settings-section-head h3{
  font-size: 18px;
  font-weight: 650;
  line-height: 1.3;
}

.cp-settings-section-head p{
  margin: 0;
  color: #1c5cf5;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}

.cp-settings-rows{
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.cp-settings-row{
  display: grid;
  grid-template-columns: 166px 70px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0;
  min-height: 72px;
  padding: 7px 7px 7px 12px;
  border: 1px solid #e0e5ee;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.cp-settings-row.is-selected{
  border-color: #1c5cf5;
  background: #f1f6ff;
  box-shadow: inset 0 0 0 1px rgba(28, 92, 245, 0.08);
}

.cp-settings-endpoint{
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.cp-settings-source{
  justify-content: flex-start;
  padding-right: 0;
}

.cp-settings-target{
  justify-content: flex-start;
  padding-left: 0;
}

.cp-settings-endpoint .cp-platform-icon{
  flex: none;
  width: 36px;
  height: 36px;
}

.cp-settings-endpoint > span:last-child{
  display: grid;
  min-width: 0;
}

.cp-settings-endpoint strong{
  color: #10172d;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.cp-settings-endpoint small{
  margin-top: 2px;
  color: #0b57dd;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.cp-settings-arrow{
  display: grid;
  place-items: center;
  color: #1c5cf5;
}

.cp-settings-row-actions{
  display: flex;
  align-items: center;
  gap: 11px;
  margin-left: 16px;
}

.cp-settings-live{
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #09aa3d;
  box-shadow: 0 0 0 3px #e9f7ed;
}

.cp-settings-row.is-paused .cp-settings-live{
  background: #a6afbf;
  box-shadow: 0 0 0 3px #eef0f4;
}

.cp-settings-row.is-disabled .cp-settings-live{
  background: #a6afbf;
  box-shadow: 0 0 0 3px #eef0f4;
}

.cp-settings-menu-trigger{
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid #d9e1ef;
  border-radius: 8px;
  background: #fff;
  color: #1557e8;
  box-shadow: 0 1px 2px rgba(19, 44, 91, 0.03);
}

.cp-settings-menu-trigger:hover,
.cp-settings-menu-trigger:focus-visible,
.cp-settings-menu-trigger[aria-expanded="true"]{
  border-color: #1c5cf5;
  background: #f2f6ff;
}

.cp-settings-menu-wrap{
  position: relative;
  display: grid;
}

.cp-settings-menu{
  position: fixed;
  z-index: 20;
  inset: auto;
  display: grid;
  width: 232px;
  max-width: calc(100vw - 24px);
  padding: 6px;
  border: 1px solid #dfe5ef;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(15, 30, 61, 0.2), 0 3px 10px rgba(15, 30, 61, 0.08);
}

.cp-settings-menu[hidden]{
  display: none;
}

.cp-settings-row-actions .cp-settings-menu-item{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 7px 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #17233f;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.3;
  text-align: left;
  box-shadow: none;
}

.cp-settings-row-actions .cp-settings-menu-item svg{
  flex: none;
  color: #3159a5;
}

.cp-settings-row-actions .cp-settings-menu-item:hover,
.cp-settings-row-actions .cp-settings-menu-item:focus-visible{
  background: #f2f6ff;
}

.cp-settings-row-actions .cp-settings-menu-item.is-danger{
  color: #e31b32;
}

.cp-settings-row-actions .cp-settings-menu-item.is-danger svg{
  color: #e31b32;
}

.cp-settings-row-actions .cp-settings-menu-item:disabled{
  cursor: not-allowed;
  opacity: 0.42;
}

.cp-settings-add,
.cp-settings-disconnect{
  width: 100%;
  min-height: 38px;
  border-radius: 7px;
  background: #fff;
  font-size: 14px;
  font-weight: 500;
}

.cp-settings-add{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-height: 28px;
  margin: 0;
  padding: 4px 8px;
  border: 1px solid #1c5cf5;
  color: #1454df;
  font-size: 12px;
  white-space: nowrap;
}

.cp-settings-add svg{
  width: 13px;
  height: 13px;
}

.cp-settings-disconnect{
  margin-top: 14px;
  border: 1px solid #ff3347;
  color: #f0182d;
}

.cp-settings-actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.cp-settings-actions button{
  min-height: 44px;
  padding-inline: 22px;
  border-radius: 7px;
  font-size: 15px;
  font-weight: 600;
}

.cp-settings-cancel{
  min-width: 104px;
  border: 1px solid #1c5cf5;
  background: #fff;
  color: #1454df;
}

.cp-settings-save{
  min-width: 128px;
  background: #115df5;
  color: #fff;
  box-shadow: 0 6px 14px rgba(17, 93, 245, 0.22);
}

@media (max-width: 520px){
  .cp-settings-dialog{
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    padding: 16px 14px 14px;
  }

  .cp-settings-head h2{
    font-size: 19px;
  }

  .cp-settings-flow{
    gap: 24px;
    margin-block: 10px 12px;
  }

  .cp-settings-platform .cp-platform-icon,
  .cp-settings-endpoint .cp-platform-icon{
    width: 32px;
    height: 32px;
  }

  .cp-settings-platform strong{
    font-size: 14px;
  }

  .cp-settings-row{
    grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr);
    min-height: 94px;
  }

  .cp-settings-row-actions{
    grid-column: 1 / -1;
    justify-self: end;
    margin-top: 2px;
  }
}

.cp-connect-dialog{
  margin: auto;
  width: min(596px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 20px 24px 16px;
  overflow: auto;
  border: 1px solid rgba(190, 200, 218, 0.8);
  border-radius: 9px;
  background: #fff;
  color: #07175d;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  box-shadow: 0 24px 70px rgba(10, 19, 39, 0.35);
  translate: 0 5px;
}

html:has(.cp-connect-dialog[open]){
  overflow: hidden;
}

.cp-connect-dialog::backdrop{
  background: rgba(18, 28, 47, 0.58);
  backdrop-filter: blur(1.5px);
}

.cp-connect-head{
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: center;
  min-height: 30px;
}

.cp-connect-head h2{
  grid-column: 2;
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.cp-connect-head button{
  display: grid;
  place-items: center;
  grid-column: 3;
  width: 36px;
  height: 36px;
  margin: -4px -8px -2px 0;
  color: #102d84;
}

.cp-connect-flow{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  margin: 18px 0 16px;
  color: #164df1;
}

.cp-connect-flow .cp-platform{
  gap: 10px;
}

.cp-connect-flow .cp-platform-icon{
  width: 38px;
  height: 38px;
}

.cp-connect-flow .cp-platform strong{
  font-size: 17px;
  font-weight: 600;
}

.cp-connect-instructions h3{
  margin: 0 0 7px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}

.cp-connect-instructions ol{
  display: grid;
  gap: 8px;
  margin: 0;
  padding-inline-start: 22px;
  list-style: decimal;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
}

.cp-connect-instructions li{
  padding-inline-start: 3px;
}

.cp-connect-instructions li span{
  padding: 2px 6px;
  border-radius: 5px;
  background: #eef3ff;
  color: #0457f5;
  font-weight: 500;
}

.cp-connect-instructions li strong{
  color: #123d9f;
  font-weight: 650;
}

.cp-vk-permissions{
  display: grid;
  gap: 3px;
  margin: 7px 0 0;
  padding: 0;
  list-style: none;
}

.cp-vk-permissions li{
  position: relative;
  padding-left: 18px;
}

.cp-vk-permissions li::before{
  position: absolute;
  left: 2px;
  content: "—";
  color: #3159a5;
}

.cp-vk-connect-dialog .cp-token-field{
  margin-top: 18px;
}

.cp-vk-connect-dialog .cp-connect-info{
  margin-top: 17px;
}

.cp-token-field{
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  margin-top: 23px;
  padding-inline: 14px;
  border: 1.5px solid #135cff;
  border-radius: 7px;
  background: #fff;
  color: #0758f5;
  box-shadow: inset 0 0 0 1px rgba(19, 92, 255, 0.04);
}

.cp-token-field > svg{
  flex: none;
  width: 20px;
  height: 20px;
}

.cp-token-field input{
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #07175d;
  font-size: 16px;
  font-weight: 400;
}

.cp-token-field input::placeholder{
  color: #aab7d8;
  font-weight: 500;
  opacity: 1;
}

.cp-token-field:has(input[aria-invalid="true"]){
  border-color: #c92a37;
  box-shadow: inset 0 0 0 1px rgba(201, 42, 55, 0.05);
}

.cp-token-error{
  margin-top: 6px;
  color: #c92a37;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}

.cp-connect-note{
  margin: 17px 0 0;
  color: #29478e;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
}

.cp-connect-info{
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  margin-top: 20px;
  padding: 16px 18px;
  border-radius: 8px;
  background: #e6efff;
  color: #103794;
}

.cp-connect-info-icon{
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background: #0756ef;
  color: #fff;
}

.cp-connect-info-icon svg{
  width: 13px;
  height: 13px;
}

.cp-connect-info p{
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42;
}

.cp-connect-info strong{
  font-weight: 700;
}

.cp-connect-actions{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 21px;
}

.cp-connect-actions button{
  min-height: 46px;
  border-radius: 7px;
  font-size: 16px;
  font-weight: 600;
}

.cp-connect-cancel{
  border: 1.5px solid #115cff;
  background: #fff;
  color: #0757f5;
}

.cp-connect-submit{
  background: linear-gradient(180deg, #0868f7, #075cf0);
  color: #fff;
  box-shadow: 0 6px 14px rgba(8, 104, 245, 0.22);
}

@media (max-width: 480px){
  .cp-connect-dialog{
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    padding: 17px 16px 16px;
  }

  .cp-connect-head h2{
    font-size: 19px;
  }

  .cp-connect-flow{
    gap: 28px;
    margin-block: 15px;
  }

  .cp-connect-flow .cp-platform-icon{
    width: 34px;
    height: 34px;
  }

  .cp-connect-flow .cp-platform strong,
  .cp-connect-instructions h3{
    font-size: 15px;
  }

  .cp-connect-instructions ol,
  .cp-connect-note,
  .cp-connect-info p{
    font-size: 13px;
  }

  .cp-connect-note br,
  .cp-connect-info br{
    display: none;
  }
}

.cp-log{
  overflow: hidden;
  padding: 14px 13px 7px;
}

.cp-log header h2,
.cp-log header p{
  margin: 0;
}

.cp-log header h2{
  font-size: var(--t-lg);
  font-weight: 600;
}

.cp-log header p{
  margin-top: 2px;
  color: #4965b8;
  font-size: var(--t-2xs);
}

.cp-table-wrap{
  overflow-x: auto;
}

.cp-table{
  width: 100%;
  min-width: 760px;
  margin-top: 8px;
  border-collapse: collapse;
  color: #16357b;
  font-size: var(--t-2xs);
}

.cp-table th,
.cp-table td{
  padding: 7px 8px;
  border-bottom: 1px solid var(--line-2);
  text-align: start;
  vertical-align: middle;
}

.cp-table th:first-child,
.cp-table td:first-child{
  padding-inline-start: 0;
}

.cp-table th{
  color: #4b66b6;
  font-size: 10px;
  font-weight: 600;
}

.cp-table .cp-direction{
  gap: 12px;
}

.cp-table .cp-platform strong{
  display: none;
}

.cp-table .cp-platform-icon{
  width: 22px;
  height: 22px;
}

.cp-table .cp-platform-icon svg{
  width: 13px;
  height: 13px;
}

.cp-log-channel{
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
}

.cp-log-channel > span:last-child{
  display: grid;
}

.cp-log-channel strong{
  font-weight: 600;
}

.cp-log-channel small{
  margin-top: 1px;
  color: #3f5caf;
  font-size: 9px;
}

.cp-log-channel .cp-avatar{
  width: 27px;
  height: 27px;
}

.cp-delivered{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0cad3d;
  white-space: nowrap;
}

.cp-delivered > span{
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #09b841;
  color: #fff;
}

.cp-not-delivered{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #e33245;
  white-space: nowrap;
}

.cp-not-delivered > span{
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #e33245;
  color: #fff;
}

.cp-not-delivered{
  cursor: help;
  outline: none;
}

.cp-error-tooltip{
  position: fixed;
  z-index: 140;
  width: min(310px, calc(100vw - 24px));
  padding: 10px 12px;
  border: 1px solid #f1b9c0;
  border-radius: 9px;
  background: #fff6f7;
  color: #9f2030;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.42;
  box-shadow: 0 12px 30px rgba(100, 20, 31, 0.16);
  opacity: 0;
  translate: 0 4px;
  pointer-events: none;
  transition: opacity 140ms ease, translate 140ms ease;
}

.cp-error-tooltip[data-show]{
  opacity: 1;
  translate: 0;
}

.cp-more{
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  margin: 4px auto 0;
  color: #3e58a5;
  font-size: var(--t-2xs);
  font-weight: 600;
}

@media (max-width: 1120px){
  .cp-grid{
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Кроссообщения — полноэкранный макет из продуктового референса. Все
 * изменения ниже ограничены маршрутом, поэтому остальные разделы кабинета
 * сохраняют общий сайдбар, шапку и прежние размеры компонентов. */
body[data-route="crossposts"]{
  background: #f5f6f9;
  color: #0b0d12;
}

body[data-route="crossposts"] .layout{
  display: grid;
  grid-template-columns: 258px minmax(0, 1fr);
  min-height: 100dvh;
  padding: 0;
}

body[data-route="crossposts"] .menu-btn{
  display: none;
}

body[data-route="crossposts"] .side{
  display: flex;
  padding: 18px 12px 16px;
  background: #fff;
  box-shadow: 1px 0 0 #e6e9ef;
}

body[data-route="crossposts"] .side-head{
  min-height: 63px;
  margin-bottom: 12px;
  padding: 0 1px 15px;
  border-bottom-color: #e8ebf1;
}

body[data-route="crossposts"] .side .logo{
  gap: 12px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

body[data-route="crossposts"] .side .logo-mark{
  width: 45px;
  height: 45px;
}

body[data-route="crossposts"] .side-nav{
  gap: 1px;
  overflow-y: auto;
  padding-right: 0;
}

body[data-route="crossposts"] .side-nav a{
  gap: 15px;
  min-height: 48px;
  padding: 5px 0;
  border-radius: 7px;
  font-size: 14px;
  line-height: 1.2;
}

body[data-route="crossposts"] .side-nav a:first-child{
  margin-bottom: 1px;
}

body[data-route="crossposts"] .side-nav a > svg:first-child{
  width: 18px;
  height: 18px;
  padding: 8px;
  border-radius: 9px;
}

body[data-route="crossposts"] .side-section{
  margin: 23px 0 8px;
  font-size: 12px;
}

body[data-route="crossposts"] .side-bell{
  margin-inline-start: -8px;
}

body[data-route="crossposts"] .main{
  min-height: 100dvh;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: #f5f6f9;
  box-shadow: none;
}

body[data-route="crossposts"] .topbar:has(.cp-topbar-sub){
  position: sticky;
  align-items: flex-start;
  height: 108px;
  padding: 15px 24px 0 26px;
  border: 0;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: none;
  backdrop-filter: saturate(1.5) blur(14px);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
}

body[data-route="crossposts"] .topbar:has(.cp-topbar-sub)::after{
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: #e5e8ee;
  content: "";
}

body[data-route="crossposts"] .topbar h1{
  color: #0b0d12;
  font-size: 30px;
  font-weight: 650;
  line-height: 1.16;
  letter-spacing: -0.018em;
}

body[data-route="crossposts"] .cp-topbar-sub{
  max-width: 820px;
  margin-top: 5px;
  color: #596781;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
}

body[data-route="crossposts"] .topbar-actions{
  display: none;
}

body[data-route="crossposts"] .topbar-account{
  gap: 10px;
  margin-inline-start: auto;
}

body[data-route="crossposts"] .topbar-account #themeBtn{
  width: 42px;
  height: 42px;
  border: 1px solid #e6e9ef;
  border-radius: 50%;
  background: #fff;
  color: #3d5791;
  box-shadow: 0 1px 3px rgba(24, 47, 94, 0.05);
}

body[data-route="crossposts"] .profile-btn{
  width: 42px;
  height: 42px;
}

body[data-route="crossposts"] .profile-avatar{
  width: 38px;
  height: 38px;
  border: 2px solid #fff;
  background: linear-gradient(145deg, #d4dae3, #eef1f5 55%, #5b789e 56%, #263e64);
  color: #1c3156;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 0 0 1px #dfe3e9;
}

body[data-route="crossposts"] .view{
  padding: 22px 24px 24px;
  letter-spacing: 0;
}

body[data-route="crossposts"] .cp-shell{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
}

body[data-route="crossposts"] .cp-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

body[data-route="crossposts"] .cp-card,
body[data-route="crossposts"] .cp-log{
  min-width: 0;
  border-color: #e3e6ec;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 30, 61, 0.04), 0 8px 24px rgba(15, 30, 61, 0.035);
}

body[data-route="crossposts"] .cp-card{
  grid-template-rows: 36px 32px auto 1fr 42px;
  gap: 11px;
  height: 318px;
  min-height: 0;
  padding: 18px 18px 17px;
}

body[data-route="crossposts"] .cp-card-flow{
  min-height: 36px;
}

body[data-route="crossposts"] .cp-card .cp-direction{
  gap: 14px;
}

body[data-route="crossposts"] .cp-card .cp-direction > svg{
  width: 20px;
  height: 20px;
  stroke-width: 1.6;
}

body[data-route="crossposts"] .cp-card .cp-platform{
  gap: 8px;
  font-size: 16px;
  font-weight: 650;
}

body[data-route="crossposts"] .cp-card .cp-platform-icon{
  width: 32px;
  height: 32px;
}

body[data-route="crossposts"] .cp-status{
  gap: 8px;
  min-height: 32px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 650;
}

body[data-route="crossposts"] .cp-status-ok{
  background: #eaf7ed;
  color: #0aa33b;
}

body[data-route="crossposts"] .cp-status-off{
  background: #f2f4f7;
  color: #60729e;
}

body[data-route="crossposts"] .cp-status-ok > span{
  width: 17px;
  height: 17px;
}

body[data-route="crossposts"] .cp-status-ok svg{
  width: 12px;
  height: 12px;
}

body[data-route="crossposts"] .cp-status-off svg{
  width: 16px;
  height: 16px;
  fill: #7486b3;
  color: #fff;
}

body[data-route="crossposts"] .cp-active-title{
  color: #111827;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.4;
}

body[data-route="crossposts"] .cp-channel-list{
  gap: 8px;
}

body[data-route="crossposts"] .cp-channel-list li:first-child{
  translate: 0;
}

body[data-route="crossposts"] .cp-channel-list li{
  grid-template-columns: 36px minmax(0, 1fr) 10px;
  gap: 11px;
  min-height: 43px;
  color: #172033;
  font-size: 15px;
  font-weight: 500;
}

body[data-route="crossposts"] .cp-channel-list li > i{
  width: 9px;
  height: 9px;
}

body[data-route="crossposts"] .cp-channel-meta small{
  font-size: 12px;
}

body[data-route="crossposts"] .cp-avatar{
  width: 36px;
  height: 36px;
  font-size: 14px;
}

body[data-route="crossposts"] .cp-avatar-cat{
  font-size: 22px;
}

body[data-route="crossposts"] .cp-outline-btn,
body[data-route="crossposts"] .cp-connect-btn{
  min-height: 42px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 650;
}

body[data-route="crossposts"] .cp-outline-btn{
  border-color: #1c5cf5;
  color: #1c5cf5;
}

body[data-route="crossposts"] .cp-connect-btn{
  background: #115df5;
  box-shadow: 0 5px 14px rgba(17, 93, 245, 0.2);
}

body[data-route="crossposts"] .cp-connect-copy{
  color: #3d568f;
  font-size: 15px;
  line-height: 1.45;
}

body[data-route="crossposts"] .cp-log{
  height: auto;
  min-height: 370px;
  padding: 17px 18px 14px;
  overflow: visible;
}

body[data-route="crossposts"] .cp-table-wrap{
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
}

body[data-route="crossposts"] .cp-log header h2{
  color: #0b0d12;
  font-size: 20px;
  font-weight: 650;
  line-height: 1.25;
}

body[data-route="crossposts"] .cp-log header p{
  margin-top: 3px;
  color: #50628a;
  font-size: 14px;
  line-height: 1.35;
}

body[data-route="crossposts"] .cp-table{
  min-width: 920px;
  margin-top: 8px;
  color: #40557f;
  font-size: 14px;
  line-height: 1.3;
  table-layout: fixed;
}

body[data-route="crossposts"] .cp-table col:nth-child(1){ width: 12%; }
body[data-route="crossposts"] .cp-table col:nth-child(2){ width: 18%; }
body[data-route="crossposts"] .cp-table col:nth-child(3){ width: 21%; }
body[data-route="crossposts"] .cp-table col:nth-child(4){ width: 32%; }
body[data-route="crossposts"] .cp-table col:nth-child(5){ width: 17%; }

body[data-route="crossposts"] .cp-table th,
body[data-route="crossposts"] .cp-table td{
  height: 49px;
  padding: 6px 8px;
  border-bottom-color: #e7eaf0;
}

body[data-route="crossposts"] .cp-table th{
  height: 30px;
  color: #53668e;
  font-size: 13px;
  font-weight: 500;
}

body[data-route="crossposts"] .cp-table .cp-direction{
  gap: 12px;
}

body[data-route="crossposts"] .cp-table .cp-direction > svg{
  width: 18px;
  height: 18px;
  stroke-width: 1.6;
}

body[data-route="crossposts"] .cp-table .cp-platform-icon{
  width: 24px;
  height: 24px;
}

body[data-route="crossposts"] .cp-log-channel{
  gap: 9px;
  color: #172033;
}

body[data-route="crossposts"] .cp-log-channel .cp-avatar{
  width: 32px;
  height: 32px;
}

body[data-route="crossposts"] .cp-log-channel strong{
  font-size: 14px;
  font-weight: 650;
}

body[data-route="crossposts"] .cp-log-channel small{
  margin-top: 1px;
  color: #60729d;
  font-size: 12px;
}

body[data-route="crossposts"] .cp-delivered{
  gap: 8px;
  color: #0aa33b;
  font-size: 14px;
  font-weight: 500;
}

body[data-route="crossposts"] .cp-delivered > span{
  width: 17px;
  height: 17px;
  box-shadow: 0 0 0 2px #e7f6eb;
}

body[data-route="crossposts"] .cp-not-delivered{
  gap: 8px;
  color: #e33245;
  font-size: 14px;
  font-weight: 550;
}

body[data-route="crossposts"] .cp-not-delivered > span{
  width: 17px;
  height: 17px;
  box-shadow: 0 0 0 2px #fdebed;
}

body[data-route="crossposts"] .cp-more{
  min-height: 28px;
  margin: 5px auto 0;
  color: #3159a5;
  font-size: 13px;
  font-weight: 600;
}

@media (max-width: 1120px){
  body[data-route="crossposts"] .topbar:has(.cp-topbar-sub){
    height: 82px;
    min-height: 82px;
  }

  body[data-route="crossposts"] .view{
    padding: 18px;
  }

  body[data-route="crossposts"] .cp-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-route="crossposts"] .cp-card{
    height: 300px;
  }

  body[data-route="crossposts"] .cp-card:last-child{
    grid-column: 1 / -1;
  }

  body[data-route="crossposts"] .cp-log{
    height: auto;
    min-height: 370px;
  }
}

@media (max-width: 900px){
  body[data-route="crossposts"] .layout{
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-route="crossposts"] .side{
    position: fixed;
    display: flex;
    width: 258px;
    translate: -100% 0;
  }

  body[data-route="crossposts"][data-nav="open"] .side{
    translate: 0 0;
  }

  body[data-route="crossposts"] .side-close,
  body[data-route="crossposts"] .menu-btn{
    display: grid;
  }

  body[data-route="crossposts"] .topbar:has(.cp-topbar-sub){
    padding-left: 18px;
  }
}

@media (max-width: 760px){
  body[data-route="crossposts"] .main{
    border-radius: 0;
  }

  body[data-route="crossposts"] .topbar:has(.cp-topbar-sub){
    height: 122px;
    min-height: 122px;
    padding: 14px 14px 0;
  }

  body[data-route="crossposts"] .topbar h1{
    font-size: 24px;
  }

  body[data-route="crossposts"] .cp-topbar-sub{
    font-size: 14px;
  }

  body[data-route="crossposts"] .topbar-account{
    gap: 8px;
  }

  body[data-route="crossposts"] .topbar-account #themeBtn,
  body[data-route="crossposts"] .profile-btn{
    width: 38px;
    height: 38px;
  }

  body[data-route="crossposts"] .profile-avatar{
    width: 34px;
    height: 34px;
  }

  body[data-route="crossposts"] .view{
    padding: 14px;
  }

  body[data-route="crossposts"] .cp-grid{
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-route="crossposts"] .cp-card:last-child{
    grid-column: auto;
  }

  body[data-route="crossposts"] .cp-card{
    height: 292px;
    padding-inline: 15px;
  }

  body[data-route="crossposts"] .cp-card .cp-platform{
    font-size: 14px;
  }

  body[data-route="crossposts"] .cp-log{
    padding-inline: 15px;
  }
}

/* Иконка канала/мессенджера в кнопке фильтра и в пунктах выпадашки. */
.flt-ico{
  width: 15px;
  height: 15px;
  border-radius: var(--r-full);
  outline: 1px solid var(--img-outline);
  outline-offset: -1px;
  object-fit: cover;
}

.pop-ico{
  display: inline-flex;
  flex: none;
  align-items: center;
  width: 16px;
}

/* Панель поверх — та же механика, что у просмотра медиа. */
.mv-sheet .mv-stage{
  align-items: center;
}

/* Кнопки шаблонов под полем ответа. */
.tpl-row{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

@keyframes mv-in {
  from {
    opacity: 0;
  }
}

/* ── Шкала под ползунком каналов ────────────────────────────────────────
 * Ползунок без делений не говорит, где узлы цены: между 20 и 50 каналами
 * цена ломается, а на глаз это одна ровная дорожка. Подписи позиционируем
 * по той же формуле, что и заливку — (n-1)/89. */
.range-ticks{
  position: relative;
  height: 14px;
  margin-top: 2px;
  font-size: var(--t-2xs);
  color: var(--ink-3);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.range-ticks span{
  position: absolute;
  transform: translateX(-50%);
}

/* Первое и последнее деления прижимаем к краям — иначе половина цифры
 * уезжает за границу поля. */
.range-ticks span:first-child{
  transform: none;
}

.range-ticks span:last-child{
  transform: translateX(-100%);
}

/* ── Карточки каналов ───────────────────────────────────────────────────
 * Таблица не тянула: у канала теперь четыре счётчика, режим, ссылка и
 * тумблер — в строке они превращались в горизонтальную простыню. */

.ch-tabs{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.ch-tabs .count-soft{
  margin-inline-start: 6px;
  padding: 1px 6px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: var(--t-2xs);
}

.ch-tabs [aria-pressed="true"]{
  background: var(--brand-soft);
  color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.ch-tabs [aria-pressed="true"] .count-soft{
  background: var(--brand);
  color: var(--brand-ink);
}

.ch-list{
  display: grid;
  /* Явная колонка: неявная auto-дорожка не сжимается ниже min-content
   * содержимого, и карточка распирала страницу до 472px при вьюпорте 375. */
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.ch-card{
  display: grid;
  gap: 14px;
  /* Концентрично: у .ch-foot радиус --r-md (14) при паддинге карточки 18,
   * значит внешний 14 + 18 = 32. Токена на 32 нет, значение местное. */
  padding: 18px;
  border-radius: 32px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-2), var(--sh-1);
}

/* Канал на паузе гасим целиком, а не только подписью: в списке из десятка
 * карточек один бейдж «не принимает» терялся. */
.ch-card[data-on="false"] .ch-stats,
.ch-card[data-on="false"] .ch-head .avatar{
  opacity: 0.55;
}

.ch-head{
  display: flex;
  align-items: start;
  gap: 12px;
  min-width: 0;
}

.ch-title{
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.ch-sub{
  margin-top: 1px;
  font-size: var(--t-xs);
  color: var(--ink-2);
  letter-spacing: 0;
}

.ch-state{
  margin-top: 7px;
}

.ch-stats{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.ch-stat-n{
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.ch-stat-l{
  margin-top: 1px;
  font-size: var(--t-2xs);
  color: var(--ink-3);
  letter-spacing: 0;
}

.ch-foot{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.ch-fact{
  display: grid;
  gap: 5px;
  min-width: 0;
}

/* Ссылка занимает всё свободное место, тумблер прижимается к правому краю. */
.ch-link{
  flex: 1;
  min-width: 180px;
}

.ch-link code{
  min-width: 0;
  font-size: var(--t-2xs);
  color: var(--ink-2);
}

/* Строка с ссылкой — flex, и её тоже надо пускать ниже содержимого, иначе
 * длинный диплинк держит всю карточку шире экрана. */
.ch-link .row{
  min-width: 0;
}

.ch-fact-l{
  font-size: var(--t-2xs);
  color: var(--ink-3);
  letter-spacing: 0;
}

.ch-foot .switch{
  margin-inline-start: auto;
}

@media (max-width: 720px){
  .ch-card{
    padding: 14px;
    border-radius: 28px;
  }
  /* Четыре счётчика в ряд на телефоне дают колонку в 60px — числа переносятся
   * под подпись. Двумя рядами каждая пара читается целиком. */
  .ch-stats{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ch-link{
    min-width: 100%;
  }
}

/* Аватарка канала в левом верхнем углу аватарки подписчика — пара к значку
 * мессенджера справа снизу. Меньше значка источника: канал — это контекст,
 * а не свойство самого обращения. */
.dlg-ch{
  position: absolute;
  inset-block-start: -3px;
  inset-inline-start: -3px;
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 18px;
  height: 18px;
  border-radius: var(--r-full);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-1);
  font-size: 8px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink-2);
}

.dlg-ch img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Шапка раздела каналов ─────────────────────────────────────────────── */

.ch-bar{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.ch-search{
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 320px;
  margin-inline-start: auto;
}

.ch-search .input{
  padding-inline-start: 38px;
}

/* Лупа декоративная: клик по ней должен попадать в поле, а не в неё саму. */
.ch-search-ico{
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 12px;
  translate: 0 -50%;
  display: grid;
  color: var(--ink-3);
  pointer-events: none;
}

/* Крестик очистки у type=search в вебките — свой, чужого стиля не знает. */
.ch-search .input::-webkit-search-cancel-button{
  appearance: none;
}

.ch-stat-l{
  display: flex;
  align-items: center;
  gap: 5px;
}

.ch-more{
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  margin-top: 14px;
  font-size: var(--t-xs);
}

@media (max-width: 720px){
  .ch-search{
    max-width: none;
    margin-inline-start: 0;
  }
}

/* ── Рекламодатели ─────────────────────────────────────────────────────── */

.adv-list{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 16px 24px 0;
}

.adv-list .empty{
  padding-block: 26px;
}

.adv-row{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.adv-who{
  flex: 1;
  min-width: 0;
}

.adv-name{
  font-size: var(--t-sm);
  font-weight: 600;
}

.adv-meta{
  margin-top: 1px;
  font-size: var(--t-2xs);
  color: var(--ink-3);
  letter-spacing: 0;
}

.adv-dot{
  margin-inline: 6px;
}

/* Свободное место отдаём селекту: названия каналов длинные, а под ID хватает
 * колонки в 260px — на всю ширину карточки поле под 12 цифр смотрится пустым.
 * На узком экране всё встаёт в столбик: селект с длинным названием канала
 * иначе выдавливал «Добавить» за край карточки. */
.adv-form{
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

/* Брейкпоинт тот же, что у .card-pad — иначе список и форма под ним съезжают
 * по разным краям. */
@media (max-width: 640px){
  .adv-list {
    padding-inline: 16px;
  }
  .adv-form {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Карточка текущего тарифа ──────────────────────────────────────────── */

.plan-now-grid{
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
}

.plan-now-head{
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.plan-now-ico{
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  /* Концентрично не считаем: внутри иконка, а не вложенная поверхность. */
  border-radius: var(--r-md);
  background: var(--ok-soft);
  color: var(--ok);
}

.plan-now-name{
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.plan-now-sub{
  margin-top: 2px;
  font-size: var(--t-xs);
  color: var(--ink-2);
  letter-spacing: 0;
}

/* ── Разбивка позиции корзины ──────────────────────────────────────────── */

.cart-sum dd.ok{
  color: var(--ok);
}

.cart-sum .cart-sum-total{
  padding-top: 8px;
  border-top: 1px solid var(--line-2);
  font-weight: 600;
  font-size: var(--t-base);
}

/* Итоги — узкой колонкой у правого края, а не на всю карточку. Растянутый на
 * 1900px список давал между «Цена за месяц» и суммой полтора экрана пустоты,
 * и строку приходилось вести глазами через всю страницу. */
.cart-sum{
  width: 100%;
  max-width: 380px;
  margin-inline-start: auto;
}

/* ── Способ оплаты ─────────────────────────────────────────────────────── */

.pay-card{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.pay-card-ico{
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink-2);
}

.pay-card-num{
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.pay-card-sub{
  margin-top: 1px;
  font-size: var(--t-2xs);
  color: var(--ink-3);
  letter-spacing: 0;
}

@media (max-width: 1080px){
  .plan-now-grid{
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .plan-now-act{
    justify-self: start;
  }
}

/* Название бота и его @имя под ним. Классы стояли в разметке без единого
 * правила: обе строки шли одним кеглем, и название не отличалось от
 * юзернейма. Иерархия та же, что у карточек каналов. */
.ws-name{
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.ws-meta{
  margin-top: 1px;
  font-size: var(--t-xs);
  color: var(--ink-2);
  letter-spacing: 0;
}

/* ── Собственный бот: подключение по токену ─────────────────────────── */

body[data-route="hosted"] .view{
  display: grid;
  justify-items: center;
  padding: 28px;
}

.hosted-connect-card{
  display: grid;
  justify-items: center;
  align-content: start;
  width: min(100%, 1100px);
  min-height: min(680px, calc(100vh - 124px));
  padding: 34px 36px 60px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  text-align: center;
  box-shadow: var(--sh-1);
}

.hosted-connect-art{
  display: grid;
  place-items: center;
  width: 300px;
  height: 235px;
}

.hosted-hero-art{
  display: block;
  width: 300px;
  height: 220px;
  overflow: visible;
}

.hosted-connect-copy{
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-top: 4px;
}

.hosted-connect-copy h2{
  color: var(--ink);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.hosted-connect-copy p{
  margin: 0;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.45;
}

.hosted-token-field{
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: min(100%, 620px);
  min-height: 80px;
  margin-top: 30px;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  color: var(--brand);
  text-align: start;
  cursor: text;
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}

.hosted-token-field:focus-within{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent);
}

.hosted-token-icon{
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid color-mix(in srgb, var(--brand) 16%, transparent);
  border-radius: 13px;
  background: color-mix(in srgb, var(--brand) 9%, var(--surface));
  color: var(--brand);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 58%, transparent);
}

.hosted-token-field input{
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}

.hosted-token-field input::placeholder{
  color: var(--ink-3);
}

.hosted-instruction-link{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
  padding: 9px 14px;
  border-radius: 10px;
  color: var(--brand);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 140ms var(--ease);
}

.hosted-instruction-link:hover{
  background: var(--brand-soft);
}

.hosted-instruction-link > span{
  display: grid;
  place-items: center;
}

.hosted-instruction-sheet{
  display: grid;
  gap: 16px;
  padding: 6px 2px 2px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.5;
}

.hosted-instruction-sheet p{
  margin: 0;
}

.hosted-instruction-intro,
.hosted-instruction-result{
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--brand) 16%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--brand) 6%, var(--surface));
}

.hosted-instruction-intro > span,
.hosted-instruction-result > span{
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand) 12%, var(--surface));
  color: var(--brand);
}

.hosted-instruction-intro strong,
.hosted-instruction-result strong,
.hosted-instruction-steps strong{
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.hosted-instruction-intro p,
.hosted-instruction-result p,
.hosted-instruction-steps p{
  margin-top: 3px;
}

.hosted-instruction-steps{
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hosted-instruction-steps li{
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  padding: 7px 0 15px;
}

.hosted-instruction-steps li:not(:last-child)::before{
  position: absolute;
  top: 39px;
  bottom: 1px;
  left: 16px;
  width: 2px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--brand) 20%, var(--line));
  content: "";
}

.hosted-step-number{
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--brand) 24%, transparent);
  border-radius: 50%;
  background: var(--surface);
  color: var(--brand);
  font-size: 13px;
  font-weight: 700;
}

.hosted-instruction-steps a{
  color: var(--brand);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--brand) 35%, transparent);
  text-underline-offset: 3px;
}

.hosted-step-tip{
  display: block;
  margin-top: 7px;
  padding: 7px 10px;
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 12px;
}

.hosted-instruction-result{
  border-color: color-mix(in srgb, var(--ok) 24%, var(--line));
  background: color-mix(in srgb, var(--ok) 7%, var(--surface));
}

.hosted-instruction-result > span{
  background: color-mix(in srgb, var(--ok) 13%, var(--surface));
  color: var(--ok);
}

.hosted-instruction-cta{
  justify-self: stretch;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
}

@media (max-width: 720px){
  body[data-route="hosted"] .view{
    padding: 14px;
  }
  .hosted-connect-card{
    min-height: calc(100vh - 96px);
    padding: 24px 18px 42px;
    border-radius: 16px;
  }
  .hosted-connect-art,
  .hosted-hero-art{
    width: 250px;
  }
  .hosted-connect-art{
    height: 205px;
  }
  .hosted-hero-art{
    height: 184px;
  }
  .hosted-connect-copy h2{
    font-size: 23px;
  }
  .hosted-token-field{
    min-height: 68px;
    margin-top: 24px;
    border-radius: 15px;
  }
}

/* ── Таблица сравнения тарифов ─────────────────────────────────────────── */

/* Лист сравнения — во весь экран: тарифов одиннадцать, и в 1080px они
 * налезали друг на друга. По высоте тянуть не надо — карточка растёт по
 * содержимому, а шапка липнет к верху её собственной прокрутки. */

.pc{
  table-layout: fixed;
  /* Минимум по числу колонок: 210px под подписи строк плюс 132px на тариф.
   * Меньше 132 — «Мегаполис» и «5 990 ₽» переносятся по слогам. Если сумма
   * шире экрана, .table-wrap даёт горизонтальную прокрутку. */
  min-width: calc(210px + var(--pc-cols, 6) * 132px);
}

/* Подписи строк остаются на месте при горизонтальной прокрутке — иначе,
 * доехав до последнего тарифа, не помнишь, какая это строка. */
.pc th:first-child,
.pc tbody th{
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  background: var(--surface);
}

/* Фон у липкой колонки непрозрачный, поэтому подсветку строки под курсором
 * приходится повторять и на ней. */
.pc tbody tr:hover th{
  background: var(--surface-2);
}

/* Шапка липкая по вертикали: при десяти строках и прокрутке листа тарифы
 * уезжали вверх, и колонки становились безымянными. */
.pc thead th{
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
  background: var(--surface);
}

.pc thead th:first-child{
  z-index: 3;
}

/* Подписи строк — обычным регистром и с переносом. Базовое .table th даёт
 * заглавные и white-space: nowrap: «ПОМОЩНИКОВ НА КАНАЛ» не помещалось в
 * колонку и налезало на первый тариф. */
.pc th:first-child,
.pc tbody th{
  width: 210px;
  text-align: start;
  font-weight: 500;
  font-size: var(--t-sm);
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  color: var(--ink-2);
}

/* Селектор через .pc: базовое `.table th` (0,1,1) перебивало одиночный
 * `.pc-h` (0,1,0), и названия тарифов оставались ЗАГЛАВНЫМИ с nowrap —
 * при table-layout: fixed они вылезали за ячейку и наезжали на соседнюю. */
.pc .pc-h{
  white-space: normal;
  text-transform: none;
  letter-spacing: 0;
  text-align: center;
  vertical-align: bottom;
  padding-bottom: 12px;
}

.pc-name{
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
}

.pc-price{
  margin-top: 2px;
  font-size: var(--t-base);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.pc-price span{
  font-size: var(--t-2xs);
  font-weight: 500;
  color: var(--ink-3);
}

/* td.num обязателен: базовое `.table .num` (0,2,0) перебивало `.pc td`
 * (0,1,1), и числа прижимались к правому краю колонки, а галочки в соседних
 * строках стояли по центру — колонка читалась кривой. */
.pc td,
.pc td.num{
  text-align: center;
}

/* Колонка текущего тарифа подсвечена целиком — иначе в таблице из десяти
 * столбцов «где я» приходится искать по бейджу в шапке. */
.pc-cur{
  background: var(--brand-soft);
}

.pc-h.pc-cur .pc-name,
.pc-h.pc-cur .pc-price{
  color: var(--brand);
}

.pc-yes svg{
  color: var(--ok);
}

.pc-no svg{
  color: var(--ink-3);
}

/* ── Аналитика: шапка раздела, кольцо, топ подписчиков ─────────────────── */

.an-bar{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Выбор канала выглядит как строка диалога, а не как select: аватарка и
 * @имя здесь важнее рамки поля — по ним канал и узнают. */
.an-pick{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 320px;
  padding: 8px 12px 8px 8px;
  border: 0;
  border-radius: var(--r-full);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-2), var(--sh-1);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background-color 140ms var(--ease), scale 140ms var(--ease);
}

.an-pick:hover{
  background: var(--surface-2);
}

.an-pick:active{
  scale: 0.96;
}

.an-pick-txt{
  display: grid;
  min-width: 0;
  text-align: start;
}

.an-pick-name{
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.an-pick-sub{
  font-size: var(--t-2xs);
  color: var(--ink-3);
  letter-spacing: 0;
}

.an-range{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
  padding: 9px 14px;
  border-radius: var(--r-full);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-2);
  font-size: var(--t-xs);
  color: var(--ink-2);
  letter-spacing: 0;
  white-space: nowrap;
}

.an-chips{
  display: flex;
  gap: 6px;
}

/* Крупное значение над графиком времени ответа: карточка отвечает на вопрос
 * «сколько ждут» одним числом, а кривая объясняет, из чего оно сложилось. */
.an-big{
  margin-bottom: 10px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.donut{
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

.donut svg{
  width: 140px;
  height: 140px;
}

.donut-legend{
  display: grid;
  gap: 10px;
  min-width: 0;
}

.donut-row{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: var(--t-sm);
  letter-spacing: 0;
}

.donut-row .num{
  margin-inline-start: auto;
  font-weight: 600;
}

.top-list{
  display: grid;
  gap: 2px;
  padding: 8px 12px 16px;
}

.top-row{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 8px 12px;
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  letter-spacing: 0;
}

.top-row:hover{
  background: var(--surface-2);
}

.top-n{
  flex: none;
  width: 18px;
  color: var(--ink-3);
  font-size: var(--t-xs);
  text-align: center;
}

@media (max-width: 720px){
  .an-range{
    margin-inline-start: 0;
  }
  .donut{
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
  .donut-legend{
    width: 100%;
  }
}

/* ── Подписка: конструктор ────────────────────────────────────────────── */

/* Шаги слева, корзина справа. Раньше итоги лежали под всеми позициями, и на
 * широком экране сумма уезжала за первый экран. */
.cart-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
}

.cart-steps{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.cart-item{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.cart-side{
  position: sticky;
  inset-block-start: 86px;
}

.step{
  padding: 22px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-2), var(--sh-1);
}

.step-head{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.step-title{
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.step-num{
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: var(--r-full);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0;
}

/* ── Выбор продукта ───────────────────────────────────────────────────── */

.prod-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.prod-pick{
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--surface);
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow 140ms var(--ease), background-color 140ms var(--ease),
    scale 140ms var(--ease);
}

.prod-pick:hover{
  background: var(--surface-2);
}

.prod-pick:active{
  scale: 0.96;
}

.prod-pick[aria-checked="true"]{
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--brand);
}

.prod-pick-head{
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.prod-ico{
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  /* Концентрично карточке: у неё --r-md (14) при поле 16, значит внутренний
   * радиус = 14 − 16 < 0 — берём самостоятельную величину по форме плитки. */
  border-radius: 12px;
}

.prod-pick-txt{
  display: grid;
  gap: 1px;
  min-width: 0;
}

.prod-pick-txt b{
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.prod-pick-txt i{
  font-style: normal;
  font-size: var(--t-xs);
  color: var(--ink-2);
  letter-spacing: 0;
}

/* Точка выбора — второй канал состояния рядом с рамкой: одной рамкой
 * выбранное читается хуже, особенно при уменьшенном контрасте. */
.prod-dot{
  flex: none;
  width: 18px;
  height: 18px;
  margin-inline-start: auto;
  border-radius: var(--r-full);
  box-shadow: inset 0 0 0 1.5px var(--line);
}

.prod-pick[aria-checked="true"] .prod-dot{
  background: var(--brand);
  box-shadow: inset 0 0 0 3.5px var(--surface), inset 0 0 0 5px var(--brand);
}

.prod-desc{
  font-size: var(--t-xs);
  line-height: 1.45;
  color: var(--ink-2);
  letter-spacing: 0;
}

.prod-bullets{
  display: grid;
  gap: 6px;
}

.prod-bullets span{
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--t-xs);
  color: var(--ink-2);
  letter-spacing: 0;
}

.prod-bullets svg{
  flex: none;
  color: var(--brand);
}

/* ── Срок ─────────────────────────────────────────────────────────────── */

.dur{
  position: relative;
}

/* Бейдж сидит на самом углу, наполовину снаружи: внутри карточки он ложился
 * на подпись месяца — на 375px колонка всего ~160px. Кольцо цветом подложки
 * отделяет его от фона карточки. */
.dur-off{
  position: absolute;
  inset-block-start: -7px;
  inset-inline-end: -5px;
  padding: 1px 7px;
  border-radius: var(--r-full);
  background: var(--ok-soft);
  color: var(--ok);
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: 0;
  box-shadow: 0 0 0 2px var(--surface);
}

.dur-per{
  font-size: var(--t-xs);
  color: var(--ink-2);
  letter-spacing: 0;
}

/* ── Подсказка о выгоде ───────────────────────────────────────────────── */

.hint-bar{
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 16px;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--brand-soft);
  color: var(--brand);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: background-color 140ms var(--ease), scale 140ms var(--ease);
}

.hint-bar:active{
  scale: 0.96;
}

/* :not(.hint-ico) обязателен: без него селектор (0,1,1) перебивал flex: none
 * у знака (0,1,0) — тот растягивался и толкал текст в середину бара. */
.hint-bar span:not(.hint-ico){
  display: grid;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.hint-bar b{
  font-size: var(--t-sm);
  font-weight: 600;
}

.hint-bar i{
  font-style: normal;
  font-size: var(--t-xs);
  color: var(--ink-2);
  letter-spacing: 0;
}

.hint-ico{
  display: grid;
  place-items: center;
  flex: none;
}

.hint-bar > svg:last-child{
  flex: none;
}

/* ── Добавить второй продукт ──────────────────────────────────────────── */

.add-more{
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Базис, а не голый flex: 1 — иначе на телефоне текст сжимался в столбик по
 * слову в строке рядом с кнопкой. С базисом 240px узкая строка переносит
 * кнопку вниз целиком. */
.add-more > div{
  flex: 1 1 240px;
  min-width: 0;
}

/* ── Корзина ──────────────────────────────────────────────────────────── */

.cart-line + .cart-line{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
}

.cart-line-head{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0;
}

.cart-line-head svg{
  flex: none;
  color: var(--brand);
}

.cart-grand{
  display: grid;
  gap: 2px;
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid var(--line);
}

.cart-grand > span:first-child{
  font-size: var(--t-xs);
  color: var(--ink-2);
  letter-spacing: 0;
}

.cart-grand-save{
  font-size: var(--t-xs);
  color: var(--ok);
  letter-spacing: 0;
}

/* Воздух перед кнопкой оплаты: без него она прилипала к строке «Экономия». */
.cart-box .btn-lg{
  margin-top: 12px;
}

@media (max-width: 1080px){
  .cart-layout{
    grid-template-columns: minmax(0, 1fr);
  }
  /* Липкая корзина в одну колонку прилипала бы посреди прокрутки к пустому
   * месту — здесь она просто идёт последней. */
  .cart-side{
    position: static;
  }
}

@media (max-width: 640px){
  .prod-grid{
    grid-template-columns: minmax(0, 1fr);
  }
  .step{
    padding: 16px;
  }
  /* Четыре срока в ряд на 375px — колонки по 70px: бейдж скидки ложился на
   * цифру месяца, а «Экономия 1 176 ₽» переносилась по слогам. Парой на два
   * ряда каждая карточка читается целиком. */
  .step .dur-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Подписка: интерактивный макет бесплатного тарифа ────────────────── */

body[data-route="subscription"] .view{
  padding: 22px 24px 28px;
}

.subscription-mock{
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
}

.subscription-status{
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 112px;
  padding: 18px 22px;
  border-radius: 17px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-2), var(--sh-1);
}

.subscription-status-icon{
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid color-mix(in srgb, var(--brand) 16%, var(--line-2));
  border-radius: 18px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--brand) 14%, var(--surface)), var(--surface));
  color: var(--brand);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--brand) 8%, transparent);
}

.subscription-status-icon svg{
  filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--brand) 14%, transparent));
}

.subscription-status-card{
  display: grid;
  place-items: center;
}

.subscription-status-cross{
  position: absolute;
  inset-inline-end: 7px;
  inset-block-end: 7px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--danger);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 14%, var(--surface)), 0 3px 8px color-mix(in srgb, var(--danger) 16%, transparent);
}

.subscription-status-cross svg{
  filter: none;
}

.subscription-status-copy{
  display: grid;
  gap: 4px;
  min-width: 0;
}

.subscription-status-copy h2{
  font-size: 17px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.subscription-status-copy p{
  margin: 0;
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.35;
  letter-spacing: 0;
}

.subscription-free-link{
  padding: 0;
  color: var(--brand);
  font: inherit;
  font-weight: 650;
  line-height: inherit;
  vertical-align: baseline;
  cursor: pointer;
}

.subscription-free-link:hover{
  text-decoration: underline;
}

.subscription-compare{
  min-width: 210px;
  min-height: 48px;
  padding-inline: 24px;
  border-radius: 9px;
  color: var(--brand);
  font-size: 16px;
  font-weight: 600;
  box-shadow: inset 0 0 0 1.5px var(--brand);
}

.subscription-compare:hover{
  background: var(--brand-soft);
}

.subscription-mock .cart-layout{
  grid-template-columns: minmax(0, 1fr) 364px;
  gap: 20px;
  align-items: stretch;
}

.subscription-mock .cart-steps,
.subscription-mock .cart-item{
  gap: 12px;
}

.subscription-mock .step{
  padding: 20px 22px;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px var(--line-2), var(--sh-1);
}

.subscription-mock .step-head{
  margin-bottom: 15px;
}

.subscription-mock .step-title{
  gap: 10px;
  font-size: 15px;
  font-weight: 650;
}

.subscription-mock .step-num{
  width: 24px;
  height: 24px;
  color: var(--brand);
  background: var(--brand-soft);
  font-size: 12px;
}

.subscription-mock .prod-grid{
  gap: 16px;
}

.subscription-mock .prod-pick{
  align-content: start;
  min-height: 152px;
  padding: 18px 20px;
  gap: 23px;
  border-radius: 12px;
}

.subscription-mock .prod-pick-head{
  gap: 13px;
}

.subscription-mock .prod-ico{
  width: 36px;
  height: 36px;
  color: var(--ink);
  background: transparent;
}

.subscription-mock .prod-pick[aria-checked="true"] .prod-ico{
  color: var(--brand);
}

.subscription-mock .prod-pick-txt b{
  font-size: 14px;
}

.subscription-mock .prod-pick-txt i,
.subscription-mock .prod-bullets span{
  font-size: 12px;
}

.subscription-mock .prod-bullets{
  gap: 10px;
}

.subscription-mock .prod-dot{
  width: 20px;
  height: 20px;
}

.subscription-mock .calc-row-head{
  min-height: 40px;
  align-items: center;
}

.subscription-mock .field-label{
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
}

.calc-num-wrap{
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: none;
  width: 156px;
  min-height: 40px;
  margin-inline-start: auto;
  padding: 0 12px;
  border-radius: 9px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: text;
  user-select: none;
}

.calc-num-wrap:focus-within{
  box-shadow: inset 0 0 0 2px var(--brand);
}

.subscription-mock .calc-num{
  width: 3ch;
  min-height: 38px;
  margin: 0;
  padding: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-align: end;
  box-shadow: none;
}

.subscription-mock .calc-num:hover,
.subscription-mock .calc-num:focus{
  background: transparent;
  box-shadow: none;
}

.calc-num-word{
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
  white-space: nowrap;
}

.subscription-mock .range{
  margin-top: 0;
  cursor: grab;
  touch-action: none;
}

.subscription-mock .range:active{
  cursor: grabbing;
}

.subscription-mock .range-ticks{
  height: 25px;
  margin-top: -1px;
  color: var(--ink-2);
  font-size: 12px;
}

.subscription-mock .step .field + .field{
  margin-top: 4px !important;
}

.subscription-mock .dur-grid{
  gap: 14px;
  margin-top: 3px;
}

.subscription-mock .dur{
  min-height: 86px;
  align-content: center;
  gap: 8px;
  padding: 14px 10px;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}

.subscription-mock .dur b{
  font-size: 13px;
}

.subscription-mock .dur-per{
  color: var(--ok);
  font-size: 12px;
  font-weight: 500;
}

.subscription-mock .dur[aria-pressed="true"]{
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1.5px var(--brand);
}

.subscription-mock .dur-off{
  inset-block-start: -6px;
  inset-inline-end: -4px;
  padding: 2px 8px;
  background: #e6f5ef;
  color: #008b57;
  font-size: 11px;
  font-weight: 600;
}

.subscription-mock .cart-side{
  position: static;
  height: 100%;
}

.subscription-mock .cart-box{
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  min-height: 0;
  padding: 22px 24px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-2), var(--sh-2);
}

.subscription-mock .cart-box-head{
  align-items: center;
}

.cart-box-title{
  min-width: 0;
}

.cart-box-title p{
  margin: 3px 0 0;
  color: var(--ink-2);
  font-size: 12px;
}

.subscription-mock .cart-box .card-title{
  font-size: 18px;
  font-weight: 650;
}

.subscription-mock .cart-box .btn-danger{
  color: var(--ink-2);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}

.subscription-mock .cart-line{
  margin-top: 4px;
}

.cart-order-product-card{
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  margin: 12px 0 16px;
  padding: 12px;
  border-radius: 12px;
  background: var(--brand-soft);
}

.cart-order-product-icon{
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--surface);
  color: var(--brand);
}

.cart-order-product-copy{
  display: grid;
  gap: 2px;
  min-width: 0;
}

.cart-order-product-copy strong{
  font-size: 13.5px;
  font-weight: 650;
}

.cart-order-product-copy i{
  overflow: hidden;
  color: var(--ink-2);
  font-size: 11.5px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-order-discount{
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--ok-soft);
  color: var(--ok);
  font-size: 11px;
  font-weight: 650;
}

.cart-order-details{
  display: grid;
  gap: 12px;
}

.cart-order-details > div{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.cart-order-details span{
  color: var(--ink-2);
  font-size: 12.5px;
}

.cart-order-details strong{
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  text-align: end;
}

.cart-promo{
  display: grid;
  gap: 7px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
}

.cart-promo-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

.cart-promo-row .input{
  min-height: 40px;
  font-size: 13px;
}

.cart-promo-row .btn{
  min-height: 40px;
  color: var(--brand);
}

.cart-promo-status{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--ok);
  font-size: 11.5px;
}

.cart-promo-status span{
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.cart-promo-status button{
  color: var(--ink-2);
  font: inherit;
  cursor: pointer;
}

.cart-order-total{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 17px;
  padding-top: 17px;
  border-top: 1px solid var(--line-2);
}

.cart-order-total span,
.cart-order-total strong{
  color: var(--ink);
  font-size: 17px;
  font-weight: 650;
}

.cart-order-total > span{
  display: grid;
  gap: 2px;
}

.cart-order-total span b{
  font: inherit;
}

.cart-order-total span i{
  color: var(--ink-2);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 400;
}

.subscription-mock .cart-order-saving{
  margin-top: 4px;
  color: var(--ok);
  font-size: 13px;
}

.subscription-mock .cart-pay{
  min-height: 54px;
  margin-top: 10px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 650;
}

.subscription-mock .cart-safe{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-top: auto;
  padding: 11px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 12px;
}

.subscription-mock .cart-safe svg{
  color: var(--ink-2);
}

.cart-safe-icon{
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--surface);
  color: var(--brand);
}

.cart-safe > span:last-child{
  display: grid;
  gap: 1px;
}

.cart-safe b{
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
}

.cart-safe i{
  color: var(--ink-2);
  font-size: 10.5px;
  font-style: normal;
  line-height: 1.35;
}

/* ── Список подписок ─────────────────────────────────────────────────── */

.subscription-overview{
  overflow: hidden;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px var(--line-2), var(--sh-1);
}

.subscription-overview-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px 16px;
}

.subscription-overview-head h2{
  font-size: 17px;
  font-weight: 650;
}

.subscription-overview-head p{
  margin: 3px 0 0;
  color: var(--ink-2);
  font-size: 12.5px;
}

.subscription-list-tabs{
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 11px;
  background: var(--surface-2);
}

.subscription-list-tabs button{
  min-height: 34px;
  padding: 6px 13px;
  border-radius: 8px;
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.subscription-list-tabs button[aria-selected="true"]{
  background: var(--surface);
  color: var(--brand);
  box-shadow: var(--sh-1);
}

.subscription-list{
  border-top: 1px solid var(--line-2);
}

.subscription-list-row{
  display: grid;
  grid-template-columns: 48px minmax(180px, 1fr) 118px 130px auto;
  align-items: center;
  gap: 14px;
  min-height: 78px;
  padding: 14px 22px;
}

.subscription-list-row + .subscription-list-row{
  border-top: 1px solid var(--line-2);
}

.subscription-avatar-wrap{
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
}

.subscription-channel-avatar{
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--surface) 35%, transparent);
}

.subscription-channel-avatar.subscription-avatar-blue{
  background: linear-gradient(145deg, #3b82f6, #2355c8);
  color: #fff;
}

.subscription-channel-avatar.subscription-avatar-violet{
  background: linear-gradient(145deg, #8b5cf6, #5b34c8);
  color: #fff;
}

.subscription-channel-avatar.subscription-avatar-amber{
  background: linear-gradient(145deg, #f4b457, #d57b25);
  color: #fff;
}

.subscription-channel-avatar.subscription-avatar-pink{
  background: linear-gradient(145deg, #ec6da8, #b93878);
  color: #fff;
}

.subscription-channel-avatar.subscription-avatar-slate{
  background: linear-gradient(145deg, #8b98aa, #5a6677);
  color: #fff;
}

.subscription-channel-avatar.subscription-avatar-teal{
  background: linear-gradient(145deg, #39bfb2, #178478);
  color: #fff;
}

.subscription-network-badge{
  position: absolute;
  inset-inline-end: -2px;
  inset-block-end: -1px;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

.subscription-network-badge .mm-network-icon{
  width: 19px;
  height: 19px;
}

.subscription-bot-badge{
  width: 21px;
  height: 21px;
  padding: 2px;
  background: #fff;
  color: var(--brand);
  box-shadow: 0 2px 7px color-mix(in srgb, var(--ink) 20%, transparent);
}

.subscription-bot-badge svg{
  width: 16px;
  height: 16px;
}

.subscription-channel-avatar-active{
  background: var(--ok-soft);
  color: var(--ok);
}

.subscription-channel-avatar-free{
  background: var(--brand-soft);
  color: var(--brand);
}

.subscription-channel-avatar-expired{
  color: var(--ink-3);
}

.subscription-list-main,
.subscription-list-date{
  display: grid;
  gap: 3px;
  min-width: 0;
}

.subscription-list-main strong,
.subscription-list-date strong{
  font-size: 13.5px;
  font-weight: 600;
}

.subscription-list-main a,
.subscription-list-main .subscription-bot-handle,
.subscription-list-date span{
  color: var(--ink-2);
  font-size: 12px;
}

.subscription-list-main a{
  width: fit-content;
  color: var(--brand);
}

.subscription-list-main a:hover{
  text-decoration: underline;
}

.subscription-list-main .subscription-bot-handle{
  width: fit-content;
}

.subscription-list-date strong{
  font-size: 12.5px;
}

.subscription-list-status{
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 650;
}

.subscription-list-status-active{
  background: var(--ok-soft);
  color: var(--ok);
}

.subscription-list-status-free{
  background: var(--brand-soft);
  color: var(--brand);
}

.subscription-list-status-expired{
  background: var(--surface-2);
  color: var(--ink-3);
}

.subscription-list-empty{
  padding: 24px;
  color: var(--ink-2);
  font-size: 13px;
  text-align: center;
}

/* ── Сравнение трёх тарифов ──────────────────────────────────────────── */

.compare-intro{
  margin: 0 0 12px;
  color: var(--ink-2);
  font-size: 13px;
}

.compare-plan-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.compare-plan{
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 430px;
  padding: 20px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}

.compare-plan-current{
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1.5px var(--brand);
}

.compare-plan-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.compare-plan-icon{
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--surface-2);
  color: var(--brand);
}

.compare-current-badge{
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--brand);
  font-size: 11px;
  font-weight: 650;
}

.compare-plan h3{
  margin-top: 16px;
  font-size: 18px;
  font-weight: 700;
}

.compare-plan-note{
  min-height: 38px;
  margin: 4px 0 0;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.45;
}

.compare-plan-price{
  display: flex;
  align-items: baseline;
  margin-top: 16px;
}

.compare-plan-price strong{
  font-size: 21px;
  font-weight: 700;
}

.compare-plan-price span{
  color: var(--ink-2);
  font-size: 11.5px;
}

.compare-plan ul{
  display: grid;
  gap: 10px;
  margin: 20px 0;
}

.compare-plan li{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.35;
}

.compare-plan li svg{
  flex: none;
  color: var(--ok);
}

.compare-plan-action{
  width: 100%;
  min-height: 42px;
  margin-top: auto;
}

.compare-footnote{
  margin: 13px 0 2px;
  color: var(--ink-3);
  font-size: 11.5px;
  text-align: center;
}

@media (max-width: 1120px){
  .subscription-mock .cart-layout{
    grid-template-columns: minmax(0, 1fr);
  }
  .subscription-mock .cart-side{
    position: static;
    height: auto;
  }
  .subscription-mock .cart-box{
    height: auto;
    min-height: 0;
  }
  .subscription-mock .cart-safe{
    margin-top: 15px;
  }
}

@media (max-width: 720px){
  body[data-route="subscription"] .view{
    padding: 14px;
  }
  .subscription-status{
    grid-template-columns: 52px minmax(0, 1fr);
    padding: 16px;
  }
  .subscription-status-icon{
    width: 52px;
    height: 52px;
  }
  .subscription-compare{
    grid-column: 1 / -1;
    width: 100%;
  }
  .subscription-mock .prod-grid,
  .subscription-mock .dur-grid{
    grid-template-columns: minmax(0, 1fr);
  }
  .subscription-mock .prod-pick{
    min-height: 136px;
  }
  .subscription-overview-head{
    align-items: stretch;
    flex-direction: column;
  }
  .subscription-list-tabs{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .subscription-list-row{
    grid-template-columns: 48px minmax(0, 1fr) auto;
  }

  .subscription-list-date{
    grid-column: 2 / -1;
  }
  .compare-plan-grid{
    grid-template-columns: minmax(0, 1fr);
  }
  .compare-plan{
    min-height: 0;
  }
}

/* ── Локальный макет раздела «Каналы» ────────────────────────────────── */

.channels-mock{
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

.mock-ch-toolbar{
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.mock-ch-toolbar .ch-tabs{
  margin-bottom: 0;
}

.mock-ch-toolbar .ch-tabs .btn{
  min-height: 42px;
  padding-inline: 14px;
  border-color: #e6eaf1;
  background: #fff;
  color: #647087;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(42, 58, 89, 0.04);
}

.mock-ch-toolbar .ch-tabs [aria-pressed="true"]{
  border-color: #bcd2ff;
  background: #fff;
  color: #1769ff;
  box-shadow: inset 0 0 0 1px #bcd2ff, 0 4px 12px rgba(23, 105, 255, 0.08);
}

.mock-ch-toolbar .ch-tabs .count-soft,
.mock-ch-toolbar .ch-tabs [aria-pressed="true"] .count-soft{
  background: #f0f4fb;
  color: #7f8aa0;
}

.mock-ch-toolbar .ch-tabs [aria-pressed="true"] .count-soft{
  background: #eef4ff;
  color: #1769ff;
}

.mock-ch-tools{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-inline-start: auto;
}

.mock-ch-tools .ch-search{
  width: 250px;
  max-width: none;
}

.mock-ch-tools .input{
  min-height: 42px;
  border-color: #e6eaf1;
  background: #fff;
  box-shadow: 0 2px 8px rgba(42, 58, 89, 0.04);
}

.mock-filter-btn{
  width: 42px;
  height: 42px;
  color: #66748c;
}

.mock-ch-list{
  gap: 20px;
}

.mock-ch-card{
  position: relative;
  display: grid;
  gap: 18px;
  min-width: 0;
  padding: 20px 22px 18px;
  border: 1px solid #e6eaf1;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 6px 22px rgba(35, 55, 90, 0.045);
}

.mock-ch-card.is-featured{
  border-color: #51d79b;
  box-shadow: 0 6px 24px rgba(24, 190, 119, 0.06);
}

.mock-ch-card.is-expired{
  border-color: #ff9a79;
  box-shadow: 0 6px 24px rgba(255, 105, 64, 0.05);
}

.mock-ch-card.is-free{
  border-color: #cbd8ef;
  box-shadow: 0 6px 24px rgba(42, 91, 173, 0.055);
}

.mock-ch-crown{
  position: absolute;
  top: -12px;
  left: 18px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #36cf8d;
  color: #fff;
  font-size: 13px;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(32, 183, 119, 0.18);
}

.mock-ch-card.is-expired .mock-ch-crown{
  background: #ff7249;
  box-shadow: 0 2px 6px rgba(255, 114, 73, 0.2);
}

.mock-ch-crown.is-muted{
  background: #eef1f6;
  color: #d0d6e0;
  box-shadow: none;
}

.mock-ch-main{
  display: grid;
  grid-template-columns: minmax(270px, 1.35fr) minmax(500px, 3fr) 34px;
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.mock-ch-identity{
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.mock-ch-avatar{
  position: relative;
  display: grid;
  flex: 0 0 72px;
  place-items: center;
  overflow: visible;
  width: 72px;
  height: 72px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: linear-gradient(145deg, #c7dcff, #4c86d4);
  box-shadow: 0 1px 0 #d9e0ea, 0 5px 12px rgba(43, 62, 96, 0.12);
  font-size: 32px;
}

.mock-ch-avatar::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.38), transparent 44%, rgba(0, 0, 0, 0.1));
  pointer-events: none;
}

.mock-ch-avatar img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.mock-ch-network-badge{
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

.mock-ch-network-badge .mm-network-icon{
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

.ch-connect-choice-dialog{
  margin: auto;
  width: min(520px, calc(100vw - 32px));
  padding: 0;
  overflow: hidden;
  border: 1px solid #dfe4ed;
  border-radius: 16px;
  background: #fff;
  color: #17213a;
  font-family: "Inter", sans-serif;
  box-shadow: 0 24px 72px rgba(9, 18, 39, 0.34);
}

.ch-connect-choice-dialog::backdrop{
  background: rgba(18, 28, 47, 0.56);
  backdrop-filter: blur(1.5px);
}

.ch-connect-choice-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 21px 22px 17px;
  border-bottom: 1px solid #e8ebf1;
}

.ch-connect-choice-head h2{
  margin: 0;
  color: #101a32;
  font-size: 21px;
  font-weight: 700;
}

.ch-connect-choice-head p{
  margin: 5px 0 0;
  color: #6d7b94;
  font-size: 12px;
}

.ch-connect-choice-head > button{
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  color: #52617c;
}

.ch-connect-choice-head > button:hover{ background: #f2f4f8; }

.ch-connect-choice-list{
  display: grid;
  gap: 10px;
  padding: 18px 22px 12px;
}

.ch-connect-choice-list > button{
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 12px 14px;
  border: 1px solid #dfe5ef;
  border-radius: 13px;
  background: #fff;
  color: #65728a;
  text-align: left;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.ch-connect-choice-list > button:hover,
.ch-connect-choice-list > button:focus-visible{
  border-color: #7aa2ff;
  background: #f5f8ff;
  transform: translateY(-1px);
}

.ch-connect-choice-icon{
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
}

.ch-connect-choice-icon img{
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.ch-connect-choice-list strong,
.ch-connect-choice-list small{
  display: block;
}

.ch-connect-choice-list strong{
  color: #17213a;
  font-size: 15px;
  font-weight: 700;
}

.ch-connect-choice-list small{
  margin-top: 4px;
  color: #748096;
  font-size: 12px;
  line-height: 1.35;
}

.ch-connect-choice-cancel{
  display: block;
  min-width: 118px;
  min-height: 40px;
  margin: 4px 22px 18px auto;
  padding-inline: 18px;
  border: 1px solid #dce3ee;
  border-radius: 10px;
  color: #45536d;
  font-size: 13px;
  font-weight: 650;
}

.ch-connect-choice-cancel:hover{ background: #f3f5f9; }

.mock-ch-avatar.tone-city{ background: linear-gradient(155deg, #aad9ff 0 48%, #456c92 49% 70%, #293d54 71%); }
.mock-ch-avatar.tone-coffee{ background: radial-gradient(circle at 50% 55%, #f5eee3 0 27%, #856044 28% 35%, #29241f 36% 100%); }
.mock-ch-avatar.tone-game{ background: radial-gradient(circle at 48% 48%, #384457, #111820 72%); }
.mock-ch-avatar.tone-travel{ background: linear-gradient(#56cef0 0 45%, #f7d28e 46% 77%, #65b9c2 78%); }
.mock-ch-avatar.tone-events{ background: linear-gradient(145deg, #b79bff, #6b3ed2); }
.mock-ch-avatar.tone-food{ background: linear-gradient(145deg, #ffd99b, #e67e50); }

.mock-ch-who{
  display: grid;
  align-content: center;
  min-width: 0;
}

.mock-ch-title{
  overflow: hidden;
  color: #151a23;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mock-ch-user{
  display: block;
  margin-top: 2px;
  color: #748096;
  font-size: 13px;
  font-weight: 500;
}

.mock-ch-status{
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  width: fit-content;
  margin-top: 8px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.mock-ch-status i{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.mock-ch-status.is-on{
  background: #eafbf3;
  color: #20b979;
}

.mock-ch-status.is-off{
  background: #fff3eb;
  color: #ff7a38;
}

.mock-ch-stats{
  display: grid;
  grid-template-columns: repeat(4, minmax(90px, 1fr));
  column-gap: 16px;
  min-width: 0;
}

.mock-ch-stat{
  display: grid;
  grid-template-rows: 22px 32px;
  align-content: start;
  min-width: 0;
}

.mock-ch-stat-value{
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 22px;
  color: #1769ff;
}

.mock-ch-stat-value strong{
  color: #202735;
  font-size: 15px;
  font-weight: 700;
}

.mock-ch-stat > span{
  display: flex;
  align-items: flex-start;
  max-width: none;
  min-height: 32px;
  padding-top: 5px;
  color: #758096;
  font-size: 11px;
  line-height: 1.3;
  white-space: nowrap;
}

.mock-ch-menu{
  align-self: start;
  border-color: #edf0f5;
  color: #66748c;
}

.mock-ch-foot{
  display: flex;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
}

.mock-ch-fact{
  display: grid;
  align-content: center;
  gap: 5px;
  min-height: 58px;
  padding: 10px 14px;
  border-radius: 9px;
  background: #f7f9fc;
}

.mock-ch-fact.plan{
  flex: 0 0 168px;
}

.mock-ch-fact.date{
  flex: 0 0 170px;
  background: #f0fbf6;
}

.mock-ch-card.is-expired .mock-ch-fact.date{
  background: #fff4f0;
}

.mock-ch-fact.link{
  flex: 1 1 330px;
  min-width: 240px;
}

.mock-ch-fact > span{
  color: #818ca0;
  font-size: 11px;
  line-height: 1;
}

.mock-ch-fact strong{
  color: #263043;
  font-size: 13px;
  font-weight: 700;
}

.mock-ch-fact strong.success{ color: #22b778; }
.mock-ch-fact strong.danger{ color: #ff5d48; }
.mock-ch-fact strong.free{ color: #1769ff; }

.mock-ch-fact.link > div{
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.mock-ch-fact code{
  overflow: hidden;
  color: #3b4659;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mock-copy{
  display: grid;
  flex: none;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8490a4;
  cursor: pointer;
}

.mock-ch-toggle{
  display: flex;
  flex: 0 0 166px;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-inline-start: 6px;
  padding-inline-start: 22px;
  border-inline-start: 1px solid #edf0f4;
}

.mock-ch-toggle > span{
  min-width: 75px;
  color: #667289;
  font-size: 11px;
  line-height: 1.25;
}

.mock-ch-more{
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-top: 12px;
  color: #a0a9b8;
  font-size: 11px;
}

.mock-ch-more .btn{
  gap: 8px;
  min-width: 250px;
  border-color: #e5eaf2;
  background: #fff;
  color: #1769ff;
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(32, 61, 112, 0.05);
}

.mock-ch-empty{
  border: 1px solid #e6eaf1;
  border-radius: 18px;
  background: #fff;
}

@media (max-width: 1180px){
  .mock-ch-main{
    grid-template-columns: minmax(270px, 1.15fr) minmax(390px, 2fr) 34px;
  }
  .mock-ch-stats{ gap: 12px; }
  .mock-ch-toggle{ flex-basis: 150px; padding-inline-start: 15px; }
}

@media (max-width: 980px){
  .mock-ch-main{
    grid-template-columns: minmax(0, 1fr) 34px;
  }
  .mock-ch-stats{
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .mock-ch-menu{
    grid-column: 2;
    grid-row: 1;
  }
  .mock-ch-foot{ flex-wrap: wrap; }
  .mock-ch-fact.link{ order: 3; }
  .mock-ch-toggle{ order: 4; margin-inline-start: auto; }
}

@media (max-width: 760px){
  .mock-ch-toolbar,
  .mock-ch-tools{
    align-items: stretch;
    width: 100%;
  }
  .mock-ch-tools{ margin-inline-start: 0; }
  .mock-ch-tools .ch-search{ width: auto; flex: 1; }
  .mock-ch-card{ padding: 18px 16px 16px; border-radius: 16px; }
  .mock-ch-avatar{ flex-basis: 60px; width: 60px; height: 60px; font-size: 27px; }
  .mock-ch-stats{ grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .mock-ch-fact.plan,
  .mock-ch-fact.date,
  .mock-ch-fact.link{ flex: 1 1 100%; min-width: 0; }
  .mock-ch-toggle{
    flex: 1 1 100%;
    justify-content: flex-start;
    margin: 0;
    padding: 12px 4px 0;
    border-inline-start: 0;
    border-top: 1px solid #edf0f4;
  }
}

[data-theme="dark"] .mock-ch-card,
[data-theme="dark"] .mock-ch-toolbar .ch-tabs .btn,
[data-theme="dark"] .mock-ch-tools .input,
[data-theme="dark"] .mock-ch-more .btn{
  border-color: var(--line-2);
  background: var(--surface);
}

[data-theme="dark"] .mock-ch-title,
[data-theme="dark"] .mock-ch-stat-value strong{ color: var(--ink); }
[data-theme="dark"] .mock-ch-fact{ background: var(--surface-2); }

/* ── Локальный макет «Аналитика аудитории» ───────────────────────────── */

.analytics-mock{
  display: grid;
  gap: 18px;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

.mock-an-toolbar{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.mock-an-resource-pick{
  min-width: 265px;
}

.mock-an-resource-pick .avatar{
  border: 1px solid rgba(23, 105, 255, 0.16);
  background: linear-gradient(145deg, #eef4ff, #f8faff);
  color: #1769ff;
  box-shadow: 0 3px 10px rgba(23, 105, 255, 0.1);
}

.analytics-mock .an-chips .chip{
  min-height: 38px;
  border-color: #e6eaf1;
  background: #fff;
  color: #6e798e;
}

.analytics-mock .an-chips .chip[aria-pressed="true"]{
  border-color: #b9d0ff;
  background: #eef4ff;
  color: #1769ff;
}

.mock-an-period-chips{
  margin-inline-start: auto;
}

.mock-an-kpis{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.mock-an-kpis article{
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 17px 18px;
  border: 1px solid #e6eaf1;
  border-radius: 16px;
  background: linear-gradient(145deg, #fff 62%, #fafcff);
  box-shadow: 0 7px 22px rgba(35, 55, 90, 0.055);
}

.mock-an-kpi-icon{
  position: relative;
  display: grid;
  flex: 0 0 46px;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid transparent;
  border-radius: 15px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 6px 14px rgba(31, 47, 77, 0.08);
}

.mock-an-kpi-glyph{
  display: grid;
  place-items: center;
}

.mock-an-kpi-badge{
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 7px;
  background: currentColor;
  box-shadow: 0 3px 8px rgba(31, 47, 77, 0.14);
}

.mock-an-kpi-badge svg{ color: #fff; }
.mock-an-kpi-icon.blue{ border-color: #d9e8ff; background: linear-gradient(145deg, #f4f8ff, #e9f2ff); color: #1769ff; }
.mock-an-kpi-icon.green{ border-color: #d3f4e5; background: linear-gradient(145deg, #f2fff9, #e5faef); color: #1eae73; }
.mock-an-kpi-icon.purple{ border-color: #e5dcff; background: linear-gradient(145deg, #faf7ff, #f0eaff); color: #7a55dd; }
.mock-an-kpi-icon.orange{ border-color: #ffe5ca; background: linear-gradient(145deg, #fffaf4, #fff0df); color: #ed862b; }

.mock-an-kpis article > div{
  display: grid;
  min-width: 0;
}

.mock-an-kpis small{
  display: flex;
  align-items: flex-end;
  min-height: 28px;
  color: #7b869a;
  font-size: 11px;
  line-height: 1.3;
}

.mock-an-kpis strong{
  margin-top: 3px;
  color: #1f2735;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.mock-an-kpis article > div > span{
  margin-top: 5px;
  color: #8993a5;
  font-size: 10px;
}

.analytics-mock .success{
  color: #21af75 !important;
}

.analytics-mock .danger{
  color: #e34c5a !important;
}

.mock-an-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.mock-an-card{
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  border: 1px solid #e6eaf1;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 6px 22px rgba(35, 55, 90, 0.04);
}

.mock-an-card .card-head{
  min-height: 82px;
  padding: 20px 22px 14px;
  border-bottom: 0;
}

.mock-an-card .card-title{
  color: #202735;
  font-size: 16px;
  font-weight: 700;
}

.mock-an-card .card-sub{
  margin-top: 4px;
  color: #7b8699;
  font-size: 11px;
}

.mock-an-card .card-pad{
  padding: 6px 22px 20px;
}

.mock-an-card .chart{
  min-height: 0;
}

.mock-an-card .chart svg{
  max-height: 235px;
}

.mock-an-premium-preview{
  position: relative;
  min-width: 0;
  min-height: 300px;
  overflow: hidden;
  border-radius: 18px;
  isolation: isolate;
}

.mock-an-premium-blur{
  height: 100%;
  pointer-events: none;
  user-select: none;
  filter: blur(4px);
  opacity: 0.55;
  transform: scale(1.012);
}

.mock-an-premium-blur .mock-an-card{ height: 100%; }

.mock-an-premium-lock{
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 5px;
  padding: 24px;
  background: linear-gradient(180deg, rgba(247, 250, 255, 0.32), rgba(247, 250, 255, 0.72));
  text-align: center;
}

.mock-an-premium-lock-icon{
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 4px;
  border: 1px solid #ccdcff;
  border-radius: 14px;
  background: #fff;
  color: #1769ff;
  box-shadow: 0 8px 22px rgba(23, 105, 255, 0.14);
}

.mock-an-premium-lock strong{ color: #1f2a3b; font-size: 15px; font-weight: 700; }
.mock-an-premium-lock > span:not(.mock-an-premium-lock-icon){ color: #69768b; font-size: 11px; }
.mock-an-premium-lock .btn{
  min-height: 34px;
  margin-top: 9px;
  padding-inline: 16px;
  text-decoration: none;
}

#mockChartWeek rect[data-i],
#liveChartWeek rect[data-i]{
  cursor: pointer;
  transition: opacity 140ms var(--ease), filter 140ms var(--ease);
}

#mockChartWeek rect[data-i]:hover,
#mockChartWeek rect[data-i][data-hover],
#liveChartWeek rect[data-i]:hover,
#liveChartWeek rect[data-i][data-hover]{
  opacity: 0.82;
  filter: drop-shadow(0 3px 4px rgba(23, 105, 255, 0.24));
}

#mockChartWeek .tip,
#liveChartWeek .tip{
  min-width: 190px;
}

.mock-an-note{
  flex: none;
  align-self: flex-start;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f3f6fb;
  color: #637086;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.mock-an-note.success{
  background: #eafbf3;
}

.mock-an-big{
  display: grid;
  justify-items: end;
  flex: none;
}

.mock-an-big strong{
  color: #202735;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.mock-an-big span{
  margin-top: 3px;
  font-size: 10px;
  font-weight: 600;
}

.mock-an-bottom .mock-an-card{
  min-height: 330px;
}

.mock-an-donut{
  display: grid;
  align-items: center;
  min-height: 235px;
}

.mock-an-donut .donut{
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 30px;
}

.mock-an-donut .donut svg{
  width: 170px;
  height: 170px;
}

.mock-an-donut .donut-row{
  padding: 4px 0;
  color: #5e6a80;
  font-size: 12px;
}

.mock-an-donut .donut-row .truncate{
  white-space: normal;
}

.mock-an-users{
  display: grid;
  gap: 2px;
  padding: 0 14px 16px;
}

.mock-an-user{
  display: grid;
  grid-template-columns: 24px 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 11px;
}

.mock-an-user:hover{
  background: #f7f9fc;
}

.mock-an-rank{
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: #f2f5fa;
  color: #7b879a;
  font-size: 11px;
  font-weight: 600;
}

.mock-an-user:nth-child(1) .mock-an-rank{
  background: #fff4d8;
  color: #d79518;
}

.mock-an-user-name,
.mock-an-user-count{
  display: grid;
  min-width: 0;
}

.mock-an-user-name strong{
  overflow: hidden;
  color: #293243;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mock-an-user-name small,
.mock-an-user-count small{
  margin-top: 2px;
  color: #9099a9;
  font-size: 10px;
}

.mock-an-user-count{
  justify-items: end;
}

.mock-an-user-count strong{
  color: #273143;
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 1080px){
  .mock-an-kpis{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mock-an-toolbar{
    flex-wrap: wrap;
  }
  .mock-an-period-chips{
    margin-inline-start: 0;
  }
}

@media (max-width: 760px){
  .analytics-mock{ gap: 14px; }
  .mock-an-grid,
  .mock-an-kpis{
    grid-template-columns: minmax(0, 1fr);
  }
  .mock-an-toolbar .an-pick{
    width: 100%;
    max-width: none;
  }
  .mock-an-toolbar .an-chips{
    width: 100%;
  }
  .mock-an-toolbar .an-chips .chip{
    flex: 1;
  }
  .mock-an-card{ min-height: 0; border-radius: 16px; }
  .mock-an-card .card-head{ padding-inline: 16px; }
  .mock-an-card .card-pad{ padding-inline: 16px; }
  .mock-an-donut .donut{
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
}

[data-theme="dark"] .analytics-mock .an-chips .chip,
[data-theme="dark"] .mock-an-kpis article,
[data-theme="dark"] .mock-an-card{
  border-color: var(--line-2);
  background: var(--surface);
}

[data-theme="dark"] .mock-an-kpi-badge{ border-color: var(--surface); }
[data-theme="dark"] .mock-an-premium-lock{
  background: linear-gradient(180deg, rgba(18, 24, 36, 0.34), rgba(18, 24, 36, 0.78));
}
[data-theme="dark"] .mock-an-premium-lock-icon{
  border-color: var(--line-2);
  background: var(--surface);
}
[data-theme="dark"] .mock-an-premium-lock strong{ color: var(--ink); }

[data-theme="dark"] .mock-an-kpis strong,
[data-theme="dark"] .mock-an-card .card-title,
[data-theme="dark"] .mock-an-big strong,
[data-theme="dark"] .mock-an-user-name strong,
[data-theme="dark"] .mock-an-user-count strong{
  color: var(--ink);
}

/* ── Локальный макет «Сообщения» ─────────────────────────────────────── */

.topbar h1:has(> .mm-title-icon){
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 23px;
}

.mm-title-icon{
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--brand);
}

.topbar-actions .mm-top-action{
  min-height: 42px;
  padding-inline: 14px;
  border-radius: 13px;
  font-size: var(--t-md);
}

.messages-mock{
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 12px;
  height: calc(100dvh - 68px - 28px);
  min-height: 560px;
  color: var(--ink);
}

body[data-route="messages"] .view{
  padding-block: 14px;
}

.mm-list,
.mm-chat{
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: var(--surface);
  overflow: hidden;
}

.mm-list{
  display: flex;
  flex-direction: column;
}

.mm-controls{
  position: relative;
  display: grid;
  gap: 6px;
  padding: 12px 10px 10px;
  border-bottom: 1px solid var(--line-2);
}

.mm-list-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 30px;
  padding-inline: 2px;
}

.mm-list-head h2{
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.mm-filter-row{
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
  gap: 9px;
}

.mm-filter,
.mm-users-btn,
.mm-search{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding-inline: 9px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  text-align: start;
}

.mm-filter span:not(.mm-filter-brand),
.mm-users-btn span{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mm-users-dialog{
  margin: auto;
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: hidden;
  border: 1px solid #dfe4ed;
  border-radius: 14px;
  background: #fff;
  color: #111827;
  font-family: "Inter", sans-serif;
  box-shadow: 0 24px 72px rgba(9, 18, 39, 0.32), 0 4px 16px rgba(9, 18, 39, 0.1);
}

html:has(.mm-users-dialog[open]){ overflow: hidden; }

.mm-users-dialog::backdrop{
  background: rgba(18, 28, 47, 0.56);
  backdrop-filter: blur(1.5px);
}

.mm-users-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px 14px;
}

.mm-users-head h2{
  margin: 0;
  color: #0b1538;
  font-size: 23px;
  font-weight: 650;
  line-height: 1.25;
}

.mm-users-head p{
  margin: 4px 0 0;
  color: #66738e;
  font-size: 13px;
  line-height: 1.4;
}

.mm-users-head > button{
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  margin: -4px -5px 0 0;
  border-radius: 9px;
  color: #20365f;
}

.mm-users-head > button:hover{ background: #f2f4f8; }

.mm-users-tabs{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0 22px 20px;
  padding: 4px;
  border-radius: 10px;
  background: #f1f3f7;
}

.mm-users-tabs button{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #64718b;
  font-size: 14px;
  font-weight: 600;
}

.mm-users-tabs button[aria-selected="true"]{
  border-color: #dce3ef;
  background: #fff;
  color: #1759ea;
  box-shadow: 0 2px 7px rgba(25, 50, 95, 0.08);
}

.mm-users-tab-count{
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding-inline: 6px;
  border-radius: 999px;
  background: #e3e8f1;
  color: #52627e;
  font-size: 11px;
  font-style: normal;
  font-weight: 650;
}

.mm-users-tabs button[aria-selected="true"] .mm-users-tab-count{
  background: #e9f0ff;
  color: #1759ea;
}

.mm-users-toolbar{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 14px 22px 10px;
}

.mm-users-search{
  display: flex;
  align-items: center;
  gap: 9px;
  width: auto;
  min-height: 38px;
  padding-inline: 11px;
  border: 1px solid #dce2ec;
  border-radius: 9px;
  background: #fff;
  color: #71809d;
}

.mm-subscriber-dialog{
  margin: auto;
  width: min(520px, calc(100vw - 32px));
  padding: 0;
  overflow: hidden;
  border: 1px solid #dfe4ed;
  border-radius: 16px;
  background: #fff;
  color: #111827;
  font-family: "Inter", sans-serif;
  box-shadow: 0 24px 72px rgba(9, 18, 39, 0.3), 0 4px 16px rgba(9, 18, 39, 0.1);
}

.mm-subscriber-dialog::backdrop{
  background: rgba(18, 28, 47, 0.56);
  backdrop-filter: blur(1.5px);
}

.mm-subscriber-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 22px 18px;
  border-bottom: 1px solid #e8ebf1;
}

.mm-subscriber-person{
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.mm-subscriber-person .mm-avatar-lg{ --mm-avatar-size: 58px; }

.mm-subscriber-person > div{ min-width: 0; }

.mm-subscriber-person span{
  color: #71809a;
  font-size: 12px;
  font-weight: 550;
}

.mm-subscriber-person h2{
  margin: 4px 0 0;
  overflow: hidden;
  color: #101a32;
  font-size: 20px;
  font-weight: 650;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mm-subscriber-head > button{
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  color: #52617c;
}

.mm-subscriber-head > button:hover{ background: #f2f4f8; }

.mm-subscriber-details{
  display: grid;
  padding: 8px 22px;
}

.mm-subscriber-details > div{
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 52px;
  border-bottom: 1px solid #edf0f4;
}

.mm-subscriber-details > div:last-child{ border-bottom: 0; }

.mm-subscriber-details > div > span{
  color: #70809a;
  font-size: 13px;
}

.mm-subscriber-details strong,
.mm-subscriber-details a{
  width: fit-content;
  color: #17213a;
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
}

.mm-subscriber-details a{ color: #1761f2; }
.mm-subscriber-details a:hover{ text-decoration: underline; }

.mm-subscriber-source{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mm-subscriber-category{
  padding: 5px 9px;
  border-radius: 999px;
}

.mm-subscriber-category-user{ background: #eef3fb; color: #4f607d !important; }
.mm-subscriber-category-advertiser{ background: #fff1e7; color: #d85b08 !important; }
.mm-subscriber-category-blocked{ background: #fff0f2; color: #d92d43 !important; }

.mm-subscriber-footer{
  display: flex;
  justify-content: flex-end;
  padding: 14px 22px 18px;
  border-top: 1px solid #e8ebf1;
}

.mm-subscriber-footer button{
  min-width: 112px;
  min-height: 40px;
  padding-inline: 18px;
  border-radius: 10px;
  background: #1761f2;
  color: #fff;
  font-size: 13px;
  font-weight: 650;
}

.mm-users-search:focus-within{
  border-color: #1761f2;
  box-shadow: 0 0 0 3px rgba(23, 97, 242, 0.09);
}

.mm-users-search input{
  min-width: 0;
  width: 21ch;
  border: 0;
  outline: 0;
  background: transparent;
  color: #15203a;
  font-size: 13px;
}

.mm-users-toolbar > span{
  color: #71809d;
  font-size: 12px;
  white-space: nowrap;
}

.mm-users-list{
  max-height: min(390px, calc(100dvh - 250px));
  min-height: 220px;
  padding: 0 22px 12px;
  overflow-y: auto;
}

.mm-users-columns,
.mm-user-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 142px 132px;
  align-items: center;
  gap: 14px;
}

.mm-users-columns{
  min-height: 32px;
  padding: 0 11px;
  color: #7a879f;
  font-size: 11px;
  font-weight: 600;
}

.mm-user-row{
  min-height: 68px;
  padding: 10px 11px;
  border-top: 1px solid #e8ebf1;
}

.mm-user-row:last-child{ border-bottom: 1px solid #e8ebf1; }

.mm-user-person{
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.mm-user-person .mm-avatar{
  --mm-avatar-size: 42px;
  flex: none;
}

.mm-user-person > span,
.mm-user-added{
  display: grid;
  min-width: 0;
}

.mm-user-person strong,
.mm-user-added strong{
  color: #141d34;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.3;
}

.mm-user-person small,
.mm-user-added small{
  margin-top: 3px;
  color: #697895;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
}

.mm-user-profile-link{
  width: fit-content;
  margin-top: 3px;
  color: #1761f2;
  font-size: 11px;
  font-weight: 550;
  line-height: 1.3;
  text-decoration: none;
}

.mm-user-profile-link:hover,
.mm-user-profile-link:focus-visible{
  text-decoration: underline;
}

.mm-user-remove{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid #dce3ee;
  border-radius: 8px;
  background: #fff;
  color: #52627e;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.mm-user-remove:hover,
.mm-user-remove:focus-visible{
  border-color: #ef9aa5;
  background: #fff6f7;
  color: #d92d43;
}

.mm-users-empty{
  display: grid;
  place-items: center;
  min-height: 220px;
  color: #72809a;
  text-align: center;
}

.mm-users-empty > span{
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #f0f3f8;
  color: #536683;
}

.mm-users-empty strong{
  margin-top: 10px;
  color: #26344f;
  font-size: 14px;
}

.mm-users-empty p{
  margin: 4px 0 0;
  font-size: 12px;
}

@media (max-width: 640px){
  .mm-users-dialog{
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
  }
  .mm-users-head,
  .mm-users-toolbar{ padding-inline: 15px; }
  .mm-users-tabs{ margin-inline: 15px; }
  .mm-users-tabs button{ gap: 6px; padding-inline: 8px; font-size: 12px; }
  .mm-users-list{ padding-inline: 15px; }
  .mm-users-columns{ display: none; }
  .mm-user-row{ grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .mm-user-person{ grid-column: 1; }
  .mm-user-added{ grid-column: 1; margin-left: 53px; }
  .mm-user-remove{ grid-column: 2; grid-row: 1 / 3; }
}

.mm-filter > svg:last-child{
  flex: none;
  margin-inline-start: auto;
}

.mm-filter{
  gap: 7px;
  padding-inline: 9px;
  font-size: 12px;
}

.mm-filter-brand{
  display: grid;
  place-items: center;
  flex: none;
  color: inherit;
}

.mm-channel-menu{
  position: absolute;
  z-index: 12;
  inset-block-start: 88px;
  inset-inline-start: 10px;
  display: grid;
  width: 232px;
  padding: 8px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(31, 45, 76, 0.14);
}

.mm-channel-menu[hidden],
.mm-channel-menu button[hidden]{
  display: none;
}

.mm-channel-menu button{
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 5px 8px;
  border-radius: 10px;
  color: var(--ink);
  text-align: start;
}

.mm-channel-menu button:hover,
.mm-channel-menu button[aria-current="true"]{
  background: var(--brand-soft);
}

.mm-channel-menu button > span:last-child{
  display: grid;
  min-width: 0;
}

.mm-channel-menu strong,
.mm-channel-menu small{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mm-channel-menu strong{
  font-size: var(--t-sm);
  font-weight: 600;
}

.mm-channel-menu small{
  margin-top: 2px;
  color: #6576bf;
  font-size: var(--t-xs);
}

.mm-channel-avatar{
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  background: transparent !important;
}

.mm-channel-avatar svg{
  color: currentColor;
}

.mm-network-icon{
  display: block;
  flex: none;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 50%;
}

.mm-channel-all{
  margin-top: 4px;
  border-top: 1px solid var(--line-2);
}

.mm-channel-all > svg{
  margin-inline: 9px;
  color: var(--ink-2);
}

.mm-messenger-menu{
  position: absolute;
  z-index: 12;
  inset-block-start: 88px;
  inset-inline-end: 10px;
  display: grid;
  width: 196px;
  padding: 8px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(31, 45, 76, 0.14);
}

.mm-messenger-menu[hidden],
.mm-messenger-menu button[hidden]{
  display: none;
}

.mm-messenger-menu button{
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 5px 8px;
  border-radius: 10px;
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 600;
  text-align: start;
}

.mm-messenger-menu button:hover,
.mm-messenger-menu button[aria-current="true"]{
  background: var(--brand-soft);
}

.mm-messenger-all{
  margin-top: 4px;
  border-top: 1px solid var(--line-2);
}

.mm-messenger-all > svg{
  margin-inline: 9px;
  color: var(--ink-2);
}

.mm-empty-user h2,
.mm-empty-user p,
.mm-empty-thread{
  margin: 0;
}

.mm-empty-user p,
.mm-empty-thread{
  color: var(--ink-3);
}

.mm-empty-thread{
  padding: 34px 22px;
  font-size: var(--t-sm);
}

.mm-search{
  color: var(--ink-3);
  background: var(--surface-2);
}

.mm-search:focus-within{
  border-color: var(--brand);
  background: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent);
}

.mm-search input{
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
}

.mm-search input::placeholder{
  color: var(--ink-3);
}

.mm-dialogs{
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.mm-dialog{
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 4px 10px;
  width: 100%;
  min-height: 70px;
  padding: 8px 10px 8px 12px;
  border-bottom: 1px solid var(--line-2);
  color: var(--ink);
  text-align: start;
  transition: background-color 140ms var(--ease);
}

.mm-dialog[hidden]{
  display: none;
}

.mm-dialog:hover{
  background: var(--surface-2);
}

.mm-dialog[aria-current="true"]{
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 9%, var(--surface)), color-mix(in srgb, var(--brand) 4%, var(--surface)));
}

.mm-dialog[aria-current="true"]::before{
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: var(--brand);
}

.mm-avatar-wrap{
  position: relative;
  grid-row: 1 / span 2;
  align-self: center;
  width: 42px;
  height: 42px;
}

.mm-avatar-wrap .mm-avatar{ --mm-avatar-size: 42px; }

.mm-avatar{
  --mm-avatar-size: 60px;
  position: relative;
  display: grid;
  place-items: center;
  width: var(--mm-avatar-size);
  height: var(--mm-avatar-size);
  border-radius: 50%;
  overflow: hidden;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}

.mm-avatar-lg{
  --mm-avatar-size: 76px;
}

.mm-source{
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  inset-inline-end: -3px;
  inset-block-end: -3px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: transparent !important;
}

.mm-source-tg{ background: #2aabee; }
.mm-source-vk{ background: #627de9; }
.mm-source-max{ background: #7555ef; }

.mm-source .mm-network-icon{ width: 100%; height: 100%; }

.mm-dialog-title{
  align-self: end;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.mm-dialog-name{
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mm-dialog-status{
  flex: none;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-style: normal;
  font-weight: 750;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.mm-dialog-status-advertiser{
  background: #ffeadb;
  color: #bd4300;
  box-shadow: inset 0 0 0 1px rgba(216, 91, 8, 0.1);
}

.mm-dialog-status-blocked{
  background: #ffe5e8;
  color: #c61932;
  box-shadow: inset 0 0 0 1px rgba(217, 45, 67, 0.1);
}

.mm-dialog-date{
  align-self: end;
  color: var(--ink-2);
  font-size: 10px;
  white-space: nowrap;
}

.mm-dialog-preview{
  align-self: start;
  min-width: 0;
  overflow: hidden;
  color: var(--ink-2);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mm-chat{
  position: relative;
  display: flex;
  flex-direction: column;
}

.mm-chat-head{
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 78px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line-2);
}

.mm-chat-user{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.mm-chat-user .mm-avatar-lg{ --mm-avatar-size: 54px; }

.mm-chat-name-row{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.mm-chat-name-row .mm-dialog-status{
  padding: 5px 8px;
  font-size: 10px;
}

.mm-chat-user h2{
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.mm-chat-user p{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 3px 0 0;
  color: var(--ink-2);
  font-size: 13px;
}

.mm-chat-user p i{
  font-style: normal;
  color: var(--ink-3);
}

.mm-chat-source{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mm-chat-source .mm-network-icon{
  width: 16px;
  height: 16px;
}

.mm-chat-source-tg{
  color: #168be9;
}

.mm-chat-source-tg svg{
  color: #2aabee;
}

.mm-chat-source-vk,
.mm-chat-source-vk svg{
  color: #1674db;
}

.mm-chat-source-max,
.mm-chat-source-max svg{
  color: #7759ec;
}

.mm-actions-btn{
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  min-height: 38px;
  margin-inline-start: auto;
  padding-inline: 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.mm-actions-menu{
  position: absolute;
  z-index: 5;
  inset-block-start: 70px;
  inset-inline-end: 18px;
  display: grid;
  width: min(310px, calc(100% - 36px));
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 10px 30px rgba(29, 42, 70, 0.1);
}

.mm-actions-menu[hidden]{ display: none; }

.mm-actions-menu button{
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 42px;
  color: var(--ink);
  font-size: 12px;
  text-align: start;
}

.mm-action-ad,
.mm-action-ad svg{
  color: #e85e00 !important;
}

.mm-action-ban,
.mm-action-ban svg{
  color: var(--danger) !important;
}

.mm-action-sep{
  height: 1px;
  background: var(--line-2);
}

.mm-conversation{
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.mm-thread{
  flex: 1;
  min-height: 0;
  padding: 18px 20px 12px;
  overflow-y: auto;
}

.mm-day{
  display: table;
  margin-inline: auto;
  padding: 4px 12px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: var(--t-sm);
}

.mm-message-list{
  display: grid;
  justify-items: start;
  gap: 8px;
  margin-top: 16px;
}

.mm-message{
  display: grid;
  gap: 5px;
  width: max-content;
  max-width: 72%;
  padding: 10px 14px 9px;
  border-radius: 14px;
  background: var(--surface-2);
}

.mm-message strong{
  font-size: 14px;
  font-weight: 500;
}

.mm-message span{
  color: var(--ink-2);
  font-size: 11px;
}

.mm-message.is-out{
  justify-self: end;
  background: var(--brand);
  color: var(--brand-ink);
}

.mm-message.is-out span{
  color: var(--brand-ink);
  opacity: .72;
}

.mm-composer {
  flex: none;
  padding: 9px 16px 13px;
}

.mm-compose-row {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px 46px;
  gap: 0;
  align-items: center;
  min-height: 54px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(21, 34, 68, .04);
  transition: border-color .16s ease, box-shadow .16s ease;
}

.mm-compose-row:focus-within {
  border-color: color-mix(in srgb, var(--brand) 32%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 6%, transparent);
}

.mm-attach,
.mm-emoji-trigger,
.mm-reply-editor,
.mm-send {
  min-height: 44px;
  border: 0;
  border-radius: 13px;
  background: transparent;
}

.mm-attach {
  display: grid;
  place-items: center;
  color: var(--ink-2);
  transition: color .16s ease, background-color .16s ease, transform .16s ease;
}

.mm-attach:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.mm-attach:active {
  transform: scale(.96);
}

.mm-emoji-trigger {
  display: grid;
  place-items: center;
  color: var(--ink-2);
  transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease;
}

.mm-emoji-trigger:hover,
.mm-emoji-trigger[aria-expanded="true"] {
  background: var(--surface-2);
  color: var(--brand);
}

.mm-emoji-trigger:active {
  transform: scale(.96);
}

.mm-reply-editor {
  min-width: 0;
  width: 100%;
  max-height: 112px;
  padding: 11px 10px 9px;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mm-reply-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--ink-3);
  pointer-events: none;
}

.mm-reply-editor blockquote {
  margin: 2px 0;
  padding-inline-start: 9px;
  border-inline-start: 3px solid var(--brand);
  color: var(--ink-2);
}

.mm-reply-editor code {
  padding: 1px 4px;
  border-radius: 5px;
  background: var(--surface-2);
  font-family: Consolas, "SFMono-Regular", monospace;
  font-size: .92em;
}

.mm-reply-editor mark {
  border-radius: 3px;
  background: #fff0a8;
  color: inherit;
}

.mm-reply-editor a {
  color: var(--brand);
  text-decoration: underline;
}

.mm-composer-emoji {
  display: inline-block;
  width: 18px;
  height: 18px;
  overflow: hidden;
  margin: -2px 1px;
  vertical-align: 0;
  background-image: url("/web/assets/emoji/apple-emoji-32.png");
  background-repeat: no-repeat;
  background-position: var(--mm-apple-bg-x) var(--mm-apple-bg-y);
  background-size: var(--mm-apple-bg-size) var(--mm-apple-bg-size);
  color: transparent;
  font-size: 0;
  line-height: 0;
  user-select: all;
}

.mm-send {
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: none;
  transition: transform .16s ease, filter .16s ease;
}

.mm-send-symbol {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #087bea;
  box-shadow: 0 4px 10px rgba(8, 123, 234, .26), inset 0 1px 0 rgba(255, 255, 255, .24);
}

.mm-send-symbol svg {
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .08));
}

.mm-send:hover {
  filter: saturate(1.08) brightness(1.03);
  box-shadow: none;
  transform: none;
}

.mm-send:active {
  transform: translateY(0) scale(.97);
}

.mm-emoji-picker {
  position: absolute;
  z-index: 90;
  right: 58px;
  bottom: calc(100% + 10px);
  width: min(378px, calc(100vw - 24px));
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 20px 54px rgba(21, 34, 68, .2), 0 4px 14px rgba(21, 34, 68, .08);
}

.mm-emoji-tabs {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-items: center;
  gap: 1px;
  min-height: 54px;
  padding: 7px 8px;
  border-bottom: 1px solid var(--line-2);
  background: var(--surface);
}

.mm-emoji-tab {
  display: grid;
  place-items: center;
  justify-self: center;
  min-width: 0;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  color: var(--ink-3);
  opacity: .78;
  transition: color .14s ease, background-color .14s ease, opacity .14s ease, transform .14s ease;
}

.mm-emoji-tab:hover,
.mm-emoji-tab.is-active {
  background: var(--surface-2);
  color: var(--ink-2);
  opacity: 1;
}

.mm-emoji-tab:active {
  transform: scale(.94);
}

.mm-emoji-scroll {
  height: min(402px, calc(100dvh - 224px));
  min-height: 286px;
  padding: 0 9px 10px 10px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.mm-emoji-section {
  min-height: 100%;
}

.mm-emoji-section[hidden] {
  display: none;
}

.mm-emoji-section h3 {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 -1px 4px;
  padding: 13px 2px 9px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 500;
}

.mm-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 4px 2px;
  margin-bottom: 10px;
}

.mm-emoji-grid button {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  border-radius: 10px;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  font-size: 25px;
  line-height: 1;
  transition: background .12s ease, transform .12s ease;
}

.mm-emoji-grid button.has-apple-emoji {
  font-size: 0;
}

.mm-emoji-grid button.has-apple-emoji::before {
  width: 32px;
  height: 32px;
  content: "";
  background-image: url("/web/assets/emoji/apple-emoji-32.png");
  background-repeat: no-repeat;
  background-position: var(--mm-apple-bg-x) var(--mm-apple-bg-y);
  background-size: var(--mm-apple-bg-size, 2108px) var(--mm-apple-bg-size, 2108px);
}

.mm-emoji-grid button:hover {
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  transform: scale(1.12);
}

.mm-emoji-grid button:active {
  transform: scale(.96);
}

@media (max-height: 640px) {
  .mm-emoji-scroll {
    height: min(310px, calc(100dvh - 205px));
    min-height: 230px;
  }
}

.mm-template-list{
  display: flex;
  gap: 7px;
  margin-top: 7px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.mm-template{
  flex: none;
  min-height: 32px;
  padding-inline: 14px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: var(--t-sm);
}

.mm-templates-dialog{
  margin: auto;
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: hidden;
  border: 1px solid #dfe4ed;
  border-radius: 16px;
  background: #fff;
  color: #111827;
  font-family: "Inter", sans-serif;
  box-shadow: 0 24px 72px rgba(9, 18, 39, 0.32), 0 4px 16px rgba(9, 18, 39, 0.1);
}

.mm-templates-dialog::backdrop{
  background: rgba(18, 28, 47, 0.56);
  backdrop-filter: blur(1.5px);
}

.mm-templates-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid #e8ebf1;
}

.mm-templates-head h2{
  margin: 0;
  color: #101a32;
  font-size: 21px;
  font-weight: 650;
}

.mm-templates-head p{
  max-width: 520px;
  margin: 5px 0 0;
  color: #6d7b94;
  font-size: 12px;
  line-height: 1.45;
}

.mm-templates-example{
  display: block;
  margin-top: 5px;
  color: #1761f2;
  font-size: 11px;
  font-weight: 600;
}

.mm-templates-head > button{
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  color: #52617c;
}

.mm-templates-head > button:hover{ background: #f2f4f8; }

.mm-templates-create{
  display: grid;
  gap: 12px;
  padding: 16px 22px;
  background: #f7f9fc;
  border-bottom: 1px solid #e8ebf1;
}

.mm-templates-create label{
  display: grid;
  gap: 6px;
}

.mm-templates-create label > span{
  color: #26344f;
  font-size: 12px;
  font-weight: 650;
}

.mm-templates-create label small{
  color: #8390a6;
  font-weight: 500;
}

.mm-templates-create input,
.mm-template-editor{
  width: 100%;
  border: 1px solid #dce3ee;
  border-radius: 10px;
  outline: 0;
  background: #fff;
  color: #17213a;
  font: inherit;
  font-size: 13px;
}

.mm-templates-create input{ min-height: 40px; padding-inline: 11px; }

.mm-template-editor{
  min-height: 96px;
  max-height: 210px;
  padding: 10px 11px;
  overflow-y: auto;
  line-height: 1.5;
  white-space: pre-wrap;
}

.mm-template-editor:empty::before{
  color: #9aa6ba;
  content: attr(data-placeholder);
  pointer-events: none;
}

.mm-template-editor blockquote{
  margin: 5px 0;
  padding-left: 11px;
  border-left: 3px solid #8aaaf4;
  color: #405274;
}

.mm-template-editor code{
  padding: 1px 4px;
  border-radius: 5px;
  background: #eef1f6;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.94em;
}

.mm-template-editor mark{
  padding-inline: 2px;
  border-radius: 3px;
  background: #fff0a8;
  color: inherit;
}

.mm-template-editor a{
  color: #1761f2;
  text-decoration: underline;
}

.mm-templates-create input:focus,
.mm-template-editor:focus{
  border-color: #1761f2;
  box-shadow: 0 0 0 3px rgba(23, 97, 242, 0.09);
}

.mm-template-format-menu{
  position: fixed;
  z-index: 2147483647;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  width: 286px;
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  border: 1px solid #dce3ee;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(9, 18, 39, 0.22);
}

.mm-template-format-menu[hidden]{ display: none; }

.mm-template-format-menu button{
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  padding: 7px 9px;
  border-radius: 8px;
  color: #354462;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
}

.mm-template-format-menu button:hover,
.mm-template-format-menu button:focus-visible{
  background: #eef4ff;
  color: #1759ea;
}

.mm-template-link-entry{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 5px;
  padding-top: 5px;
  border-top: 1px solid #e6eaf1;
}

.mm-template-link-entry[hidden]{ display: none; }

.mm-template-link-entry input{
  min-width: 0;
  height: 34px;
  padding-inline: 9px;
  border: 1px solid #dce3ee;
  border-radius: 8px;
  outline: 0;
  color: #17213a;
  font-size: 12px;
}

.mm-template-link-entry input:focus{
  border-color: #1761f2;
  box-shadow: 0 0 0 3px rgba(23, 97, 242, 0.09);
}

.mm-template-link-entry button{
  min-height: 34px;
  padding-inline: 10px;
  background: #1761f2;
  color: #fff;
}

.mm-template-link-entry button:last-child{
  width: 34px;
  padding: 0;
  background: #f0f3f8;
  color: #52617c;
}

.mm-template-format-symbol{
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #f0f3f8;
  color: #31415f;
  font-size: 12px;
}

.mm-template-format-symbol[data-style="bold"]{ font-weight: 800; }
.mm-template-format-symbol[data-style="italic"]{ font-style: italic; }
.mm-template-format-symbol[data-style="underline"]{ text-decoration: underline; }
.mm-template-format-symbol[data-style="strike"]{ text-decoration: line-through; }
.mm-template-format-symbol[data-style="mono"]{ font-family: Consolas, monospace; }
.mm-template-format-symbol[data-style="highlight"]{ background: #fff0a8; }

.mm-template-card-body blockquote{
  margin: 4px 0;
  padding-left: 9px;
  border-left: 2px solid #8aaaf4;
}

.mm-template-card-body code{
  padding: 1px 3px;
  border-radius: 4px;
  background: #eef1f6;
  font-family: Consolas, monospace;
}

.mm-template-card-body mark{ background: #fff0a8; }
.mm-template-card-body a{ color: #1761f2; text-decoration: underline; }

.mm-templates-create > button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  justify-self: end;
  min-height: 40px;
  padding-inline: 16px;
  border-radius: 10px;
  background: #1761f2;
  color: #fff;
  font-size: 13px;
  font-weight: 650;
}

.mm-templates-saved{
  padding: 16px 22px 20px;
}

.mm-templates-saved-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
}

.mm-templates-saved-head h3{
  margin: 0;
  color: #26344f;
  font-size: 14px;
  font-weight: 650;
}

.mm-templates-saved-head > span{
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding-inline: 7px;
  border-radius: 999px;
  background: #eaf0fd;
  color: #1761f2;
  font-size: 11px;
  font-weight: 700;
}

[data-mm-templates-list]{
  display: grid;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
}

.mm-template-card{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 11px 12px;
  border: 1px solid #e2e7ef;
  border-radius: 11px;
}

.mm-template-card > div{ flex: 1; min-width: 0; }

.mm-template-card strong{
  display: block;
  color: #17213a;
  font-size: 13px;
  font-weight: 650;
}

.mm-template-card span{
  display: block;
  margin-top: 2px;
  color: #8390a6;
  font-size: 10px;
}

.mm-template-card p{
  margin: 6px 0 0;
  color: #5f6e89;
  font-size: 12px;
  line-height: 1.4;
}

.mm-template-card > button{
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: #71809a;
}

.mm-template-card > button:hover{ background: #fff0f2; color: #d92d43; }

.mm-templates-empty{
  padding: 28px 12px;
  color: #7d899e;
  font-size: 12px;
  text-align: center;
}

@media (max-width: 1180px){
  .messages-mock{
    grid-template-columns: 330px minmax(0, 1fr);
  }
  .mm-controls{ padding-inline: 12px; }
  .mm-filter-row{ gap: 7px; }
  .mm-filter,
  .mm-users-btn,
  .mm-search{ padding-inline: 11px; }
  .mm-dialog{ padding-inline: 15px 12px; }
  .mm-chat-user{ gap: 12px; }
  .mm-chat-user h2{ font-size: 21px; }
}

@media (max-width: 900px){
  .messages-mock{
    grid-template-columns: minmax(320px, 36%) minmax(0, 1fr);
  }
}

@media (max-width: 720px){
  .messages-mock{
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 0;
  }
  .mm-list{ max-height: 560px; }
  .mm-chat{ min-height: 680px; }
  .mm-actions-menu{ inset-inline-end: 12px; }
  .mm-compose-row{
    grid-template-columns: 46px minmax(0, 1fr) 46px 50px;
    gap: 2px;
  }
  .mm-attach,
  .mm-emoji-trigger,
  .mm-reply-editor,
  .mm-send{ min-height: 50px; }
}

[data-theme="dark"] .mm-dialog[aria-current="true"]{
  background: var(--brand-soft);
}

[data-theme="dark"] .mm-actions-menu{
  box-shadow: var(--sh-3);
}

/* ── Внешний вид: выбор сценария и два изолированных редактора ────────── */

body[data-route="appearance"] .view{
  gap: 22px;
}

.appearance-choice-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: 20px;
  max-width: 1120px;
}

.appearance-choice-card{
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 590px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  box-shadow: var(--sh-2);
  transition:
    border-color 170ms var(--ease),
    box-shadow 170ms var(--ease),
    translate 170ms var(--ease);
}

.appearance-choice-card:hover{
  translate: 0 -2px;
  border-color: color-mix(in srgb, var(--brand) 34%, var(--line));
  box-shadow: var(--sh-3);
}

.appearance-choice-card:focus-visible{
  outline: 3px solid var(--brand-soft-2);
  outline-offset: 3px;
}

.appearance-choice-copy{
  display: grid;
  gap: 8px;
  margin-top: 0;
  padding-right: 48px;
}

.appearance-choice-help{
  position: absolute;
  z-index: 12;
  inset: 28px 28px auto auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--line));
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  cursor: help;
  box-shadow: var(--sh-1);
}

.appearance-choice-help::before,
.appearance-choice-help::after{
  position: absolute;
  z-index: 20;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms var(--ease), translate 150ms var(--ease), visibility 150ms;
}

.appearance-choice-help::before{
  content: "";
  inset: calc(100% + 4px) 10px auto auto;
  width: 10px;
  height: 10px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: var(--surface);
  rotate: 45deg;
  translate: 0 -4px;
}

.appearance-choice-help::after{
  content: attr(aria-label);
  inset: calc(100% + 9px) 0 auto auto;
  width: 270px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font-size: var(--t-xs);
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  box-shadow: var(--sh-3);
  translate: 0 -4px;
}

.appearance-choice-help:hover::before,
.appearance-choice-help:hover::after{
  visibility: visible;
  opacity: 1;
  translate: 0 0;
}

.appearance-choice-copy strong{
  font-size: var(--t-xl);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.appearance-choice-copy > span{
  max-width: 42ch;
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: 1.55;
}

.appearance-choice-preview{
  display: flex;
  flex-direction: column;
  min-height: 330px;
  height: 330px;
  flex: 0 0 330px;
  margin-top: 22px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--bg);
}

.appearance-choice-preview.is-conversation{
  gap: 0;
  justify-content: flex-start;
  background: var(--surface-2);
}

.appearance-mini-chat-head,
.appearance-mini-channel-head{
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.appearance-mini-bot-avatar{
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 0 0 4px var(--ink);
}

.appearance-bot-logo{
  display: block;
  width: 49%;
  height: 49%;
  flex: none;
}

.appearance-mini-chat-head > span:last-child,
.appearance-mini-channel-head > span:last-child{
  display: grid;
  gap: 1px;
  min-width: 0;
}

.appearance-mini-chat-head b,
.appearance-mini-channel-head b{
  font-size: 13px;
  font-weight: 650;
}

.appearance-mini-chat-head i,
.appearance-mini-channel-head small{
  color: var(--ink-3);
  font-size: 11px;
  font-style: normal;
}

.appearance-mini-dialog{
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 11px;
  justify-content: center;
  padding: 16px 14px;
}

.appearance-mini-message{
  display: flex;
  align-items: flex-end;
  gap: 7px;
  max-width: 92%;
}

.appearance-mini-message.is-user{
  align-self: flex-end;
  justify-content: flex-end;
  max-width: 100%;
}

.appearance-mini-message.is-user .appearance-mini-bubble{
  max-width: none;
  white-space: nowrap;
}

.appearance-mini-avatar{
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.appearance-mini-avatar.is-bot{
  border: 0;
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 0 0 3px var(--ink);
}

.appearance-mini-avatar.is-user{
  background: linear-gradient(145deg, #f0a35d, #b65a8d);
  color: #fff;
}

.appearance-mini-bubble{
  display: block;
  width: fit-content;
  max-width: 82%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 13px 13px 13px 4px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--t-xs);
  line-height: 1.45;
  box-shadow: var(--sh-1);
}

.appearance-mini-bubble.is-user{
  border-color: color-mix(in srgb, var(--brand) 18%, var(--line));
  border-radius: 13px 13px 4px 13px;
  background: var(--brand-soft);
  color: var(--ink);
}

.appearance-mini-bubble.is-short{
  max-width: 64%;
}

.appearance-choice-preview.is-channel{
  justify-content: flex-start;
  background: color-mix(in srgb, #5bbcff 18%, var(--surface-2));
}

.appearance-mini-channel-head > i{
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffe0a5, #f19a62);
  font-size: 22px;
  font-style: normal;
}

.appearance-mini-feed-post{
  display: flex;
  flex-direction: column;
  gap: 0;
  width: min(200px, calc(100% - 14px));
  margin: 14px 14px 14px 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand) 14%, var(--line));
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--sh-1);
}

.appearance-mini-cat-media{
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 0;
  aspect-ratio: 4 / 3;
  align-self: flex-start;
  border-radius: 0;
  background: linear-gradient(145deg, #c6efff, #ffe2a9 56%, #dfa16b);
  font-size: 54px;
}

.appearance-mini-feed-copy{
  display: grid;
  gap: 11px;
  min-width: 0;
  padding: 14px;
}

.appearance-mini-feed-copy > b{
  font-size: 13px;
  line-height: 1.35;
}

.appearance-mini-feed-copy > small{
  color: var(--ink);
  font-size: 12px;
  line-height: 1.45;
}

.appearance-mini-post{
  display: grid;
  gap: 13px;
  width: 100%;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--sh-1);
}

.appearance-mini-post-head{
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--t-xs);
}

.appearance-mini-post-head i{
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--brand);
}

.appearance-mini-post-head b{
  font-weight: 650;
}

.appearance-mini-post-lines{
  display: grid;
  gap: 7px;
}

.appearance-mini-post-lines i{
  display: block;
  width: 100%;
  height: 7px;
  border-radius: var(--r-full);
  background: var(--surface-3);
}

.appearance-mini-post-lines i:nth-child(2){ width: 92%; }
.appearance-mini-post-lines i:nth-child(3){ width: 66%; }

.appearance-mini-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand);
  font-size: var(--t-xs);
  font-weight: 600;
}

.appearance-choice-action{
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-end;
  margin-top: 24px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--line));
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: var(--t-sm);
  font-weight: 650;
}

.appearance-choice-card:hover .appearance-choice-action svg{
  translate: 3px 0;
}

.appearance-choice-card:hover .appearance-choice-action{
  background: color-mix(in srgb, var(--brand) 16%, var(--surface));
}

.appearance-choice-action svg{
  transition: translate 170ms var(--ease);
}

.appearance-editor-heading{
  display: grid;
  justify-items: start;
  gap: 5px;
}

.appearance-back{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  margin-bottom: 5px;
  padding: 6px 13px 6px 7px;
  border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--line));
  border-radius: var(--r-full);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: var(--t-sm);
  font-weight: 650;
  transition: background 160ms var(--ease), border-color 160ms var(--ease), translate 160ms var(--ease);
}

.appearance-back:hover{
  border-color: color-mix(in srgb, var(--brand) 42%, var(--line));
  background: color-mix(in srgb, var(--brand) 15%, var(--surface));
  translate: -2px 0;
}

.appearance-back-icon{
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  flex: none;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
}

.appearance-editor-heading h2{
  margin: 0;
  color: var(--ink);
  font-size: var(--t-2xl);
  font-weight: 680;
  letter-spacing: -0.025em;
}

.appearance-editor-heading p{
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-sm);
}

.appearance-editor-grid{
  display: grid;
  grid-template-columns: minmax(340px, 0.88fr) minmax(440px, 1.12fr);
  gap: 22px;
  align-items: stretch;
  max-width: 1240px;
}

.appearance-panel{
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-2);
}

.appearance-form-panel{
  display: flex;
  flex-direction: column;
}

.appearance-form-body{
  display: grid;
  gap: 24px;
  padding: 28px;
}

.appearance-form-field{
  display: grid;
  gap: 9px;
}

.appearance-form-field label{
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 650;
}

.appearance-target-field{
  display: grid;
  gap: 8px;
}

.appearance-target-field > label{
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 650;
}

.appearance-target-field > small,
.appearance-format-hint{
  color: var(--ink-3);
  font-size: var(--t-xs);
  line-height: 1.45;
}

.appearance-channel-editable{
  display: grid;
  gap: 22px;
  transition: opacity 160ms var(--ease), filter 160ms var(--ease);
}

.appearance-channel-editable.is-locked{
  opacity: .48;
  filter: saturate(.45);
}

.appearance-channel-rich{
  min-height: 116px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--t-sm);
  line-height: 1.55;
}

.appearance-channel-rich:focus{
  border-color: var(--brand);
  outline: 3px solid var(--brand-soft-2);
}

.appearance-channel-rich:empty::before{
  content: attr(data-placeholder);
  color: var(--ink-3);
  pointer-events: none;
}

.appearance-channel-rich[contenteditable="false"]{
  cursor: not-allowed;
}

.appearance-channel-switch{
  padding: 15px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}

.appearance-format-menu{
  position: fixed;
  z-index: 240;
}

.appearance-textarea{
  min-height: 128px;
  font-size: var(--t-sm);
  line-height: 1.55;
}

.appearance-setting-row{
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 4px 0;
}

.appearance-setting-row.is-first{
  padding-top: 0;
}

.appearance-setting-row .switch{
  margin-top: 1px;
}

.appearance-setting-row > div{
  display: grid;
  gap: 4px;
  min-width: 0;
}

.appearance-setting-row strong{
  font-size: var(--t-sm);
  font-weight: 650;
}

.appearance-setting-row span{
  color: var(--ink-3);
  font-size: var(--t-xs);
  line-height: 1.45;
}

.appearance-info-note{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: var(--t-xs);
}

.appearance-auto-link{
  position: relative;
  display: inline;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand);
  font: inherit;
  font-weight: 650;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  cursor: copy;
}

.appearance-auto-link-tip{
  position: absolute;
  z-index: 30;
  inset: calc(100% + 9px) auto auto 50%;
  display: grid;
  gap: 4px;
  width: min(290px, 76vw);
  padding: 10px 12px;
  visibility: hidden;
  opacity: 0;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  color: var(--ink);
  font-size: var(--t-xs);
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  overflow-wrap: anywhere;
  box-shadow: var(--sh-3);
  translate: -50% -4px;
  transition: opacity 150ms var(--ease), translate 150ms var(--ease), visibility 150ms;
  pointer-events: none;
}

.appearance-auto-link-tip small{
  color: var(--ink-3);
  font-size: var(--t-3xs);
}

.appearance-auto-link:hover .appearance-auto-link-tip,
.appearance-auto-link:focus-visible .appearance-auto-link-tip{
  visibility: visible;
  opacity: 1;
  translate: -50% 0;
}

.appearance-info-note svg{
  flex: none;
  color: var(--ink-3);
}

.appearance-form-actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: auto;
  padding: 20px 28px 28px;
  border-top: 1px solid var(--line-2);
}

.appearance-preview-panel{
  padding: 28px;
  background: color-mix(in srgb, var(--surface-2) 54%, var(--surface));
}

.appearance-preview-panel > h3{
  margin: 0 0 20px;
  color: var(--ink);
  font-size: var(--t-lg);
  font-weight: 650;
}

.appearance-chat-card,
.appearance-channel-card{
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--sh-1);
}

.appearance-chat-head,
.appearance-channel-head{
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 82px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
}

.appearance-chat-main-avatar,
.appearance-channel-avatar{
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
}

.appearance-chat-main-avatar{
  border: 0;
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 0 0 5px var(--ink);
}

.appearance-channel-avatar{
  background: linear-gradient(145deg, #ffe0a5, #f19a62);
  color: var(--ink);
  font-size: 24px;
}

.appearance-target-avatar-image{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.appearance-target-initial{
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: var(--t-sm);
  font-weight: 750;
}

.appearance-chat-main-avatar.is-channel{
  background: var(--brand-soft);
  box-shadow: none;
}

.appearance-chat-head > div,
.appearance-channel-head > div{
  display: grid;
  gap: 1px;
  min-width: 0;
}

.appearance-chat-head strong,
.appearance-channel-head strong{
  font-size: var(--t-base);
  font-weight: 650;
}

.appearance-chat-head > div > span,
.appearance-channel-head > div > span{
  color: var(--ink-3);
  font-size: var(--t-xs);
}

.appearance-chat-head-actions{
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-inline-start: auto;
  color: var(--ink-3);
}

.appearance-chat-body{
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 460px;
  padding: 28px 22px 34px;
  background:
    linear-gradient(var(--line-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-2) 1px, transparent 1px),
    var(--surface);
  background-size: 28px 28px;
}

.appearance-chat-line{
  display: flex;
  align-items: flex-end;
  gap: 9px;
  max-width: 84%;
}

.appearance-chat-line.is-user{
  align-self: flex-end;
  justify-content: flex-end;
}

.appearance-chat-avatar{
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
}

.appearance-chat-avatar-bot{
  border: 0;
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 0 0 4px var(--ink);
}

.appearance-chat-line.is-user .appearance-chat-bubble{
  max-width: 100%;
  white-space: nowrap;
}

.appearance-chat-avatar-user{
  background: linear-gradient(145deg, #f0a35d, #b65a8d);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.appearance-chat-bubble{
  min-width: 0;
  padding: 12px 13px 8px;
  border: 1px solid var(--line);
  border-radius: 14px 14px 14px 5px;
  background: var(--surface);
  color: var(--ink);
  font-size: var(--t-sm);
  line-height: 1.5;
  box-shadow: var(--sh-1);
}

.appearance-chat-line.is-user .appearance-chat-bubble{
  border-color: color-mix(in srgb, var(--brand) 20%, var(--line));
  border-radius: 14px 14px 5px 14px;
  background: var(--brand-soft);
}

.appearance-chat-bubble time{
  display: block;
  margin-top: 5px;
  color: var(--ink-3);
  font-size: var(--t-3xs);
  text-align: right;
}

.appearance-service-signature{
  margin-top: 17px;
  font-size: var(--t-xs);
}

.appearance-service-signature strong{
  font-weight: 700;
}

.appearance-service-signature a{
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.appearance-channel-feed{
  display: grid;
  justify-items: start;
  gap: 16px;
  padding: 18px 18px 18px 14px;
  background: color-mix(in srgb, #5bbcff 18%, var(--surface-2));
}

.appearance-setting-row .appearance-signature-warning{
  position: absolute;
  z-index: 20;
  inset: calc(100% + 8px) auto auto 0;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: min(340px, calc(100vw - 52px));
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, #e59b20 38%, var(--line));
  border-radius: 11px;
  background: color-mix(in srgb, #fff4d7 82%, var(--surface));
  color: color-mix(in srgb, #8a5600 82%, var(--ink));
  font-size: var(--t-xs);
  line-height: 1.4;
  box-shadow: var(--sh-3);
  animation: appearance-signature-warning-in 170ms var(--ease) both;
}

.appearance-setting-row .appearance-signature-warning[hidden]{ display: none; }
.appearance-signature-warning::before{
  position: absolute;
  top: -5px;
  left: 18px;
  width: 8px;
  height: 8px;
  border-top: 1px solid color-mix(in srgb, #e59b20 38%, var(--line));
  border-left: 1px solid color-mix(in srgb, #e59b20 38%, var(--line));
  background: color-mix(in srgb, #fff4d7 82%, var(--surface));
  content: "";
  rotate: 45deg;
}
.appearance-setting-row .appearance-signature-warning > svg{ flex: none; margin-top: 1px; }
.appearance-setting-row .appearance-signature-warning > span{ color: inherit; font-size: inherit; }
.appearance-setting-row .appearance-signature-warning strong{ font-size: inherit; font-weight: 700; }

@keyframes appearance-signature-warning-in{
  from{ opacity: 0; translate: 0 -5px; }
}

.appearance-channel-post-stack{
  display: grid;
  width: min(100%, 250px);
  min-width: 0;
}

.appearance-channel-post{
  width: min(100%, 250px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--sh-1);
}

.appearance-channel-post-stack .appearance-channel-post{ width: 100%; }

.appearance-channel-post-stack > .appearance-post-button{
  width: 100%;
  margin-top: 7px;
  border: 1px solid color-mix(in srgb, var(--brand) 24%, transparent);
  box-shadow: 0 7px 16px color-mix(in srgb, var(--brand) 18%, transparent);
}

.appearance-cat-media{
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
  background: linear-gradient(145deg, #b9ecff, #ffe1a1 58%, #d68c5d);
}

.appearance-cat-sun{
  display: none;
}

.appearance-cat-emoji{
  position: relative;
  z-index: 1;
  translate: 0;
  font-size: 82px;
  filter: drop-shadow(0 12px 12px rgba(78, 54, 37, .22));
}

.appearance-cat-caption{
  display: none;
}

.appearance-post-media{
  position: relative;
  display: block;
  height: 176px;
  overflow: hidden;
  background: color-mix(in srgb, var(--brand) 16%, var(--surface-2));
}

.appearance-post-media span{
  position: absolute;
  display: block;
  border-radius: 44px;
  background: color-mix(in srgb, var(--brand) 30%, var(--surface));
  rotate: -24deg;
}

.appearance-post-media span:nth-child(1){
  width: 72%;
  height: 116px;
  inset: -12px auto auto -12%;
}

.appearance-post-media span:nth-child(2){
  width: 55%;
  height: 88px;
  inset: 52px -7% auto auto;
  background: color-mix(in srgb, var(--brand) 54%, var(--surface));
}

.appearance-post-media span:nth-child(3){
  width: 40%;
  height: 58px;
  inset: 108px auto auto 20%;
  background: color-mix(in srgb, var(--brand) 14%, var(--surface));
}

.appearance-post-copy{
  padding: 18px;
}

.appearance-post-copy p{
  margin: 0;
  color: var(--ink);
  font-size: var(--t-sm);
  line-height: 1.55;
}

.appearance-post-copy p + p{
  margin-top: 15px;
}

.appearance-post-link{
  display: flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  max-width: 100%;
  margin-top: 14px;
  color: var(--brand);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.appearance-post-link-cat{
  font-size: 18px;
  line-height: 1;
}

.appearance-post-link strong{
  font-weight: 700;
}

.appearance-post-rich{
  align-items: flex-start;
  text-decoration: none;
}

.appearance-post-rich > div{
  min-width: 0;
  overflow-wrap: anywhere;
}

.appearance-post-rich a{
  color: var(--brand);
  text-decoration: underline;
}

.appearance-post-rich blockquote{
  margin: 2px 0;
  padding-left: 9px;
  border-left: 3px solid var(--brand);
}

.appearance-post-rich code{
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--surface-3);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.appearance-post-rich mark{
  border-radius: 3px;
  background: #ffe99a;
  color: #261f00;
}

.appearance-post-button{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  margin-top: 14px;
  padding: 9px 14px;
  border: 0;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  font-size: var(--t-sm);
  font-weight: 650;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--brand) 20%, transparent);
}

.appearance-post-link + p{
  margin-top: 14px;
}

.appearance-post-meta{
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 13px;
  color: var(--ink-3);
  font-size: var(--t-3xs);
}

.appearance-post-meta span{
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

@media (max-width: 1120px){
  .appearance-editor-grid{
    grid-template-columns: minmax(0, 1fr);
  }

  .appearance-preview-panel{
    min-height: 0;
  }

  .appearance-chat-body{
    min-height: 390px;
  }
}

@media (max-width: 820px){
  .appearance-choice-grid{
    grid-template-columns: minmax(0, 1fr);
  }

  .appearance-choice-card{
    min-height: 0;
  }

  .appearance-choice-preview{
    min-height: 210px;
  }
}

@media (max-width: 560px){
  .appearance-choice-card,
  .appearance-form-body,
  .appearance-preview-panel{
    padding: 20px;
  }

  .appearance-form-actions{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 18px 20px 20px;
  }

  .appearance-form-actions .btn{
    width: 100%;
  }

  .appearance-chat-head,
  .appearance-channel-head{
    padding-inline: 14px;
  }

  .appearance-chat-body{
    min-height: 0;
    padding: 20px 14px 28px;
  }

  .appearance-chat-line{
    max-width: 96%;
  }

  .appearance-channel-feed{
    padding: 10px;
  }

  .appearance-post-media{
    height: 142px;
  }
}

/* ── Сотрудники: приглашение, права и быстрое лишение доступа ─────────── */

body[data-route="staff"] .view{
  gap: 18px;
}

.staff-invite-card,
.staff-members-card{
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-2);
}

.staff-invite-card > header,
.staff-members-card > header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px 16px;
}

.staff-invite-card > header h2,
.staff-members-card > header h2{
  margin: 0;
  color: var(--ink);
  font-size: var(--t-lg);
  font-weight: 680;
  letter-spacing: -0.02em;
}

.staff-invite-card > header p,
.staff-members-card > header p{
  margin: 4px 0 0;
  color: var(--ink-2);
  font-size: var(--t-sm);
}

.staff-permission-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 0 26px 20px;
}

.staff-permission-card{
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}

.staff-permission-card.is-channels{
  border-color: color-mix(in srgb, var(--brand) 20%, var(--line));
  background: color-mix(in srgb, var(--brand) 3.5%, var(--surface));
}

.staff-permission-card.is-sections{
  border-color: color-mix(in srgb, #8b66e8 20%, var(--line));
  background: color-mix(in srgb, #8b66e8 3.5%, var(--surface));
}

.staff-permission-card.is-channels .staff-permission-head{
  background: color-mix(in srgb, var(--brand) 6%, var(--surface));
}

.staff-permission-card.is-sections .staff-permission-head{
  background: color-mix(in srgb, #8b66e8 6%, var(--surface));
}

.staff-permission-head{
  display: grid;
  gap: 9px;
  padding: 17px 18px 14px;
  border-bottom: 1px solid var(--line-2);
}

.staff-permission-head h3{
  margin: 0;
  color: var(--ink);
  font-size: var(--t-base);
  font-weight: 680;
}

.staff-all-option,
.staff-permission-option{
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  color: var(--ink);
  font-size: var(--t-sm);
  cursor: pointer;
}

.staff-all-option{
  gap: 8px;
  color: var(--ink-2);
  font-size: var(--t-xs);
}

.staff-all-option input,
.staff-permission-option input{
  width: 20px;
  height: 20px;
  flex: none;
  margin: 0;
  display: grid;
  place-items: center;
  appearance: none;
  border: 1.5px solid color-mix(in srgb, var(--ink-3) 62%, var(--line));
  border-radius: 7px;
  outline: none;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 140ms var(--ease), background 140ms var(--ease), box-shadow 140ms var(--ease), scale 120ms var(--ease);
}

.staff-all-option input::after,
.staff-permission-option input::after{
  content: "";
  width: 5px;
  height: 9px;
  margin-top: -2px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  opacity: 0;
  rotate: 45deg;
  scale: .65;
  transition: opacity 120ms var(--ease), scale 120ms var(--ease);
}

.staff-all-option input{
  width: 10px;
  height: 10px;
  border-width: 1px;
  border-radius: 3px;
}

.staff-all-option input::after{
  width: 2px;
  height: 4px;
  margin-top: -1px;
  border-width: 0 1.2px 1.2px 0;
}

.staff-all-option input:checked,
.staff-permission-option input:checked{
  border-color: var(--brand);
  background: var(--brand);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--brand) 22%, transparent);
}

.staff-all-option input:checked::after,
.staff-permission-option input:checked::after{
  opacity: 1;
  scale: 1;
}

.staff-all-option input:focus-visible,
.staff-permission-option input:focus-visible{
  box-shadow: 0 0 0 3px var(--brand-soft-2);
}

.staff-all-option input:active,
.staff-permission-option input:active{
  scale: .92;
}

.staff-all-option input:disabled,
.staff-permission-option input:disabled{
  opacity: .7;
  cursor: default;
}

.staff-permission-list{
  display: grid;
  gap: 5px;
  padding: 10px;
}

.staff-permission-list.is-sections{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.staff-permission-option{
  min-height: 45px;
  padding: 7px 9px;
  border-radius: var(--r-sm);
}

.staff-permission-option.is-channel{
  display: grid;
  grid-template-columns: 20px 40px minmax(0, 1fr);
  gap: 11px;
  min-height: 58px;
  cursor: default;
}

.staff-permission-option:hover{
  background: var(--surface-2);
}

.staff-permission-option.is-section{
  min-height: 39px;
}

.staff-channel-avatar{
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  overflow: visible;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: var(--t-xs);
  font-weight: 700;
  cursor: pointer;
}

.staff-channel-avatar > img,
.staff-channel-avatar > span:first-child{
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
  object-fit: cover;
}

.staff-channel-network{
  position: absolute;
  z-index: 1;
  inset: auto -3px -3px auto;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--sh-1);
}

.staff-channel-network .mm-network-icon{
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.staff-channel-info{
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
}

.staff-channel-info > label{
  overflow: hidden;
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.staff-channel-info > a,
.staff-channel-info > small{
  justify-self: start;
  max-width: 100%;
  overflow: hidden;
  color: var(--brand);
  font-size: var(--t-xs);
  line-height: 1.25;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-channel-info > a:hover{
  text-decoration: underline;
  text-underline-offset: 2px;
}

.staff-permission-empty{
  margin: 0;
  padding: 18px 10px;
  color: var(--ink-3);
  font-size: var(--t-sm);
}

.staff-invite-steps{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 26px 20px;
  padding: 8px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.staff-invite-steps > span{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  border-radius: var(--r-sm);
  color: var(--ink-3);
  font-size: var(--t-xs);
}

.staff-invite-steps i{
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  font-style: normal;
  font-weight: 700;
}

.staff-invite-steps b{
  font-weight: 600;
}

.staff-invite-steps > span.is-active{
  background: var(--surface);
  color: var(--brand);
  box-shadow: var(--sh-1);
}

.staff-invite-steps > span.is-active i{
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

.staff-invite-steps > span.is-done{
  background: color-mix(in srgb, #12a150 10%, var(--surface));
  color: #0b943f;
}

.staff-invite-steps > span.is-done i{
  border-color: #12a150;
  background: #12a150;
  color: #fff;
}

.staff-invite-flow-actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin: 0 26px 24px;
}

.staff-invite-flow-actions p{
  margin: 0 auto 0 0;
  color: var(--ink-3);
  font-size: var(--t-xs);
}

.staff-invite-flow-actions .btn{
  min-width: 154px;
}

.staff-invite-confirm{
  margin: 0 26px 24px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line));
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--brand) 7%, transparent);
}

.staff-invite-confirm-head,
.staff-invite-ready{
  display: flex;
  align-items: center;
  gap: 12px;
}

.staff-invite-confirm-head{
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 15px;
  padding: 18px 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 16%, var(--line-2));
  background: linear-gradient(115deg, color-mix(in srgb, var(--brand) 12%, var(--surface)), color-mix(in srgb, var(--brand) 3%, var(--surface)) 72%);
}

.staff-invite-confirm-head > span,
.staff-invite-ready > span{
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand);
}

.staff-invite-confirm-head > .staff-confirm-visual{
  width: 48px;
  height: 48px;
  border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
  border-radius: 15px;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--brand) 24%, transparent);
}

.staff-confirm-copy{
  min-width: 0;
}

.staff-confirm-step{
  display: block;
  margin-bottom: 4px;
  color: var(--brand);
  font-size: var(--t-3xs);
  font-weight: 750;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.staff-invite-confirm-head h3,
.staff-invite-ready h3{
  margin: 0;
  color: var(--ink);
  font-size: var(--t-md);
  font-weight: 680;
}

.staff-invite-confirm-head h3{
  font-size: var(--t-lg);
  font-weight: 720;
  letter-spacing: -.02em;
}

.staff-invite-confirm-head p,
.staff-invite-ready p{
  margin: 3px 0 0;
  color: var(--ink-3);
  font-size: var(--t-xs);
}

.staff-invite-confirm-head p{
  max-width: 670px;
  margin-top: 5px;
  line-height: 1.45;
}

.staff-review-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 18px;
}

.staff-review-card{
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 142px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.staff-review-column{
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 12px;
}

.staff-review-card.is-channels{
  border-color: color-mix(in srgb, var(--brand) 20%, var(--line));
  background: color-mix(in srgb, var(--brand) 4%, var(--surface));
}

.staff-review-card.is-sections{
  border-color: color-mix(in srgb, #8b66e8 20%, var(--line));
  background: color-mix(in srgb, #8b66e8 4%, var(--surface));
}

.staff-review-card-body{
  flex: 1;
  padding: 16px;
}

.staff-review-column-action{
  width: max-content;
  min-width: 0;
  min-height: 42px;
  padding-inline: 18px;
}

.staff-review-column-action.is-left{
  align-self: flex-start;
}

.staff-review-column-action.is-right{
  align-self: flex-end;
}

.staff-review-grid h4{
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  color: var(--ink);
  font-size: var(--t-sm);
}

.staff-review-grid h4 span{
  color: var(--ink-3);
  font-size: var(--t-xs);
}

.staff-review-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.staff-review-chips.is-channels{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}

.staff-review-channel{
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 54px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--brand) 12%, var(--line-2));
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--brand) 4%, var(--surface));
}

.staff-channel-info.is-review strong{
  overflow: hidden;
  color: var(--ink);
  font-size: var(--t-xs);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-channel-info.is-review a,
.staff-channel-info.is-review small{
  overflow: hidden;
  color: var(--brand);
  font-size: var(--t-2xs);
  font-weight: 500;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-channel-info.is-review a:hover{
  text-decoration: underline;
}

.staff-review-chip{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 5px 9px;
  border-radius: 9px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: var(--t-xs);
  font-weight: 600;
}

.staff-review-chip i{
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 7px;
  background: var(--surface);
  font-style: normal;
  font-size: var(--t-3xs);
}

.staff-review-chip.is-section{
  background: var(--surface-2);
  color: var(--ink-2);
}

.staff-invite-link-stage{
  margin: 0 26px 24px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ok) 34%, var(--line));
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--ok) 8%, transparent);
}

.staff-invite-ready{
  padding: 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--ok) 22%, var(--line-2));
  background: linear-gradient(110deg, color-mix(in srgb, var(--ok) 12%, var(--surface)), color-mix(in srgb, var(--ok) 3%, var(--surface)) 72%);
}

.staff-invite-ready > span{
  background: color-mix(in srgb, var(--ok) 14%, var(--surface));
  color: var(--ok);
}

.staff-invite-ready h3{
  color: color-mix(in srgb, var(--ok) 80%, var(--ink));
}

.staff-invite-link-block{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: 20px;
  margin: 0;
  padding: 18px;
  border: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--ok) 7%, var(--surface));
}

.staff-invite-steps > span:nth-child(3).is-active{
  background: color-mix(in srgb, var(--ok) 10%, var(--surface));
  color: var(--ok);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--ok) 12%, transparent);
}

.staff-invite-steps > span:nth-child(3).is-active i{
  border-color: var(--ok);
  background: var(--ok);
}

.staff-invite-link-field{
  display: grid;
  gap: 8px;
  min-width: 0;
}

.staff-invite-link-field > label{
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 650;
}

.staff-invite-link-controls{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.staff-invite-link-actions{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.staff-invite-link-actions > .btn{
  width: 100%;
}

.staff-invite-link-field .input{
  background: var(--surface);
  font-size: var(--t-sm);
}

.staff-invite-link-field p{
  margin: 0;
  color: var(--ink-3);
  font-size: var(--t-xs);
}

.staff-invite-expiry{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 164px;
  grid-column: 2;
  justify-self: end;
  padding: 4px 10px;
  color: var(--ok);
}

.staff-invite-expiry.is-expired{
  color: var(--danger);
}

.staff-invite-expiry > svg{
  flex: none;
}

.staff-invite-expiry > div{
  display: grid;
  gap: 2px;
}

.staff-invite-expiry strong{
  font-size: var(--t-xs);
  font-weight: 650;
  white-space: nowrap;
}

.staff-invite-expiry span{
  color: var(--ink);
  font-size: var(--t-lg);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.staff-members-card > header{
  align-items: center;
  border-bottom: 1px solid var(--line-2);
}

.staff-members-card > header > div{
  display: flex;
  align-items: center;
  gap: 9px;
}

.staff-members-card > header > div > span{
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: var(--t-xs);
  font-weight: 650;
}

.staff-member-head,
.staff-member-row{
  display: grid;
  grid-template-columns: minmax(190px, 1.35fr) minmax(110px, 0.68fr) minmax(210px, 1.15fr) minmax(90px, 0.56fr) minmax(154px, auto);
  gap: 16px;
  align-items: center;
  padding-inline: 26px;
}

.staff-member-head{
  min-height: 42px;
  color: var(--ink-3);
  font-size: var(--t-xs);
}

.staff-member-row{
  min-height: 74px;
  border-top: 1px solid var(--line-2);
  color: var(--ink);
  font-size: var(--t-sm);
}

.staff-member-person{
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.staff-member-person > div{
  display: grid;
  gap: 2px;
  min-width: 0;
}

.staff-member-person strong{
  overflow: hidden;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-member-person span{
  color: var(--ink-3);
  font-size: var(--t-xs);
}

.staff-member-access{
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex-wrap: wrap;
}

.staff-members-card{
  overflow: visible;
}

.staff-hover-detail{
  position: relative;
  display: inline-flex;
  min-width: 0;
}

.staff-summary-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  outline: none;
  background: var(--surface-2);
  color: var(--ink-2);
  font: inherit;
  font-size: var(--t-xs);
  font-weight: 650;
  cursor: help;
}

.staff-summary-chip.is-channels{
  border-color: color-mix(in srgb, var(--brand) 15%, var(--line));
  background: var(--brand-soft);
  color: var(--brand);
}

.staff-summary-chip.is-full{
  border-color: color-mix(in srgb, var(--ok) 18%, var(--line));
  background: var(--ok-soft);
  color: var(--ok);
}

.staff-summary-chip.is-partial{
  border-color: color-mix(in srgb, #8b66e8 20%, var(--line));
  background: color-mix(in srgb, #8b66e8 10%, var(--surface));
  color: #7250cb;
}

.staff-summary-chip:focus-visible{
  box-shadow: 0 0 0 3px var(--brand-soft-2);
}

.staff-detail-popover{
  position: absolute;
  z-index: 20;
  inset: calc(100% + 8px) auto auto 0;
  width: max-content;
  min-width: 220px;
  max-width: 290px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: var(--sh-3);
  opacity: 0;
  pointer-events: none;
  translate: 0 -4px;
  transition: opacity 140ms var(--ease), translate 140ms var(--ease);
}

.staff-detail-popover::before{
  content: "";
  position: absolute;
  top: -5px;
  left: 18px;
  width: 9px;
  height: 9px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: var(--surface);
  rotate: 45deg;
}

.staff-hover-detail:hover .staff-detail-popover,
.staff-hover-detail:focus-within .staff-detail-popover{
  opacity: 1;
  pointer-events: auto;
  translate: 0 0;
}

.staff-detail-popover > strong{
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: var(--t-xs);
}

.staff-detail-popover ul{
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.staff-detail-popover li{
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-2);
  font-size: var(--t-xs);
}

.staff-detail-popover li > svg{
  color: var(--ok);
}

.staff-detail-popover li > img{
  flex: none;
  border-radius: 50%;
}

.staff-detail-popover li.is-empty{
  color: var(--ink-3);
}

.staff-member-status{
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ok);
  font-size: var(--t-xs);
  font-weight: 650;
}

.staff-member-status i{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.staff-revoke{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 7px 11px;
  border: 1px solid color-mix(in srgb, var(--danger) 62%, var(--line));
  border-radius: var(--r-sm);
  color: var(--danger);
  font-size: var(--t-xs);
  font-weight: 650;
  white-space: nowrap;
}

.staff-revoke:hover{
  background: var(--danger-soft);
}

.staff-members-empty{
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 34px 20px 38px;
  color: var(--ink-2);
  text-align: center;
}

.staff-members-empty > span{
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--brand-soft);
  color: var(--brand);
}

.staff-members-empty strong{
  color: var(--ink);
  font-size: var(--t-sm);
}

.staff-members-empty p{
  margin: 0;
  color: var(--ink-3);
  font-size: var(--t-xs);
}

@media (max-width: 1120px){
  .staff-invite-link-block{
    grid-template-columns: minmax(0, 1fr);
  }

  .staff-member-head,
  .staff-member-row{
    grid-template-columns: minmax(180px, 1.2fr) minmax(100px, 0.62fr) minmax(170px, 1fr) minmax(82px, 0.5fr) 46px;
  }

  .staff-revoke{
    width: 38px;
    padding: 0;
  }

  .staff-revoke span{
    display: none;
  }
}

@media (max-width: 860px){
  .staff-permission-grid{
    grid-template-columns: minmax(0, 1fr);
  }

  .staff-member-head{
    display: none;
  }

  .staff-member-row{
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px 18px;
    padding-block: 16px;
  }

  .staff-member-person{
    grid-column: 1;
  }

  .staff-member-cell,
  .staff-member-access,
  .staff-member-status{
    grid-column: 1;
  }

  .staff-member-cell::before,
  .staff-member-access::before,
  .staff-member-status::before{
    content: attr(data-label);
    width: 74px;
    flex: none;
    color: var(--ink-3);
    font-size: var(--t-3xs);
  }

  .staff-revoke{
    grid-column: 2;
    grid-row: 1;
  }
}

@media (max-width: 620px){
  .staff-invite-confirm-head{
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
  }

  .staff-invite-confirm-head > .staff-confirm-visual{
    width: 42px;
    height: 42px;
    border-radius: 13px;
  }

  .staff-invite-card > header,
  .staff-members-card > header,
  .staff-permission-grid{
    padding-inline: 18px;
  }

  .staff-invite-steps,
  .staff-invite-confirm,
  .staff-invite-link-stage,
  .staff-invite-flow-actions{
    margin-inline: 18px;
  }

  .staff-invite-steps b{
    display: none;
  }

  .staff-review-grid{
    grid-template-columns: minmax(0, 1fr);
  }

  .staff-invite-flow-actions{
    align-items: stretch;
    flex-direction: column;
  }

  .staff-invite-flow-actions p{
    margin: 0;
  }

  .staff-invite-flow-actions .btn{
    width: 100%;
  }

  .staff-permission-list.is-sections{
    grid-template-columns: minmax(0, 1fr);
  }

  .staff-invite-link-block{
    grid-template-columns: minmax(0, 1fr);
    margin-inline: 0;
  }

  .staff-invite-link-controls,
  .staff-invite-link-actions{
    grid-template-columns: minmax(0, 1fr);
  }

  .staff-invite-expiry{
    grid-column: auto;
    justify-self: start;
  }

  .staff-invite-link-field .btn{
    width: 100%;
  }

  .staff-member-row{
    padding-inline: 18px;
  }
}

/* ── Модерация чатов: очередь и полный просмотр публикации ───────────── */

body[data-route="moderation"] .view{
  gap: 0;
}

.moderation-page{
  display: grid;
  gap: 14px;
  min-width: 0;
}

body[data-route="moderation"] .moderation-signature-action{
  border-color: color-mix(in srgb, var(--brand) 24%, var(--line));
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 650;
}

body[data-route="moderation"] .moderation-signature-action:hover{
  border-color: color-mix(in srgb, var(--brand) 42%, var(--line));
  background: color-mix(in srgb, var(--brand) 15%, var(--surface));
}

.moderation-workspace{
  display: grid;
  grid-template-columns: minmax(300px, 340px) minmax(0, 760px);
  justify-content: start;
  gap: 14px;
  min-width: 0;
}

.moderation-queue-card,
.moderation-detail-card{
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-2);
}

.moderation-queue-card{
  align-self: stretch;
}

.moderation-queue-head{
  display: grid;
  gap: 14px;
  padding: 20px 18px 12px;
  border-bottom: 1px solid var(--line-2);
}

.moderation-queue-head h2{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--ink);
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.moderation-queue-head h2 span{
  display: grid;
  place-items: center;
  min-width: 27px;
  height: 27px;
  padding-inline: 7px;
  border-radius: 9px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: var(--t-xs);
  font-weight: 700;
}

.moderation-channel-select{
  position: relative;
}

.moderation-channel-select select{
  width: 100%;
  height: 44px;
  padding: 0 42px 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  outline: none;
  appearance: none;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-sm);
  cursor: pointer;
}

.moderation-channel-select select:focus-visible{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.moderation-channel-select > svg{
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 14px;
  color: var(--ink-3);
  pointer-events: none;
  translate: 0 -50%;
}

.moderation-tabs{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.moderation-tabs button{
  min-width: 0;
  min-height: 40px;
  padding: 7px 9px;
  border: 0;
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--t-xs);
  white-space: nowrap;
}

.moderation-tabs button + button{
  border-inline-start: 1px solid var(--line);
}

.moderation-tabs button:hover{
  background: var(--surface-2);
  color: var(--ink);
}

.moderation-tabs button[aria-pressed="true"]{
  background: var(--brand);
  color: #fff;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 22%, transparent);
}

.moderation-queue-list{
  min-height: 528px;
}

.moderation-queue-item{
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 11px;
  min-height: 112px;
  padding: 15px 16px;
  border: 1px solid transparent;
  border-bottom-color: var(--line-2);
  outline: none;
  background: var(--surface);
  cursor: pointer;
  transition: background-color 140ms var(--ease), border-color 140ms var(--ease);
}

.moderation-queue-item:last-child{
  border-bottom-color: transparent;
}

.moderation-queue-item:hover{
  background: var(--surface-2);
}

.moderation-queue-item:focus-visible{
  position: relative;
  z-index: 1;
  box-shadow: inset 0 0 0 2px var(--brand);
}

.moderation-queue-item.is-selected{
  position: relative;
  z-index: 1;
  margin: -1px 0 0;
  border-color: var(--brand);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--brand) 6%, var(--surface));
}

.moderation-avatar-wrap{
  display: block;
  width: 50px;
  height: 50px;
  flex: none;
}

.moderation-user-avatar{
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 50%;
  font-size: var(--t-sm);
  font-weight: 650;
  letter-spacing: 0;
}

.moderation-avatar-wrap.is-large{
  width: 52px;
  height: 52px;
}

.moderation-avatar-wrap.is-large .moderation-user-avatar{
  width: 50px;
  height: 50px;
  font-size: var(--t-md);
}

.moderation-queue-copy{
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
}

.moderation-author-line{
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.moderation-author-line strong{
  overflow: hidden;
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.moderation-author-line time{
  margin-inline-start: auto;
  color: var(--ink-3);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.moderation-channel-link{
  justify-self: start;
  max-width: 100%;
  overflow: hidden;
  color: var(--brand);
  font-size: var(--t-xs);
  line-height: 1.25;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.moderation-channel-origin{
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  width: max-content;
  max-width: 100%;
}

.moderation-channel-inline-avatar{
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  overflow: hidden;
  flex: none;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 10px;
  line-height: 1;
  box-shadow: var(--sh-1);
}

.moderation-channel-inline-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.moderation-channel-origin .moderation-channel-link{
  display: block;
  min-width: 0;
}

.moderation-channel-origin.is-detail small{
  flex: none;
  color: var(--ink-3);
  font-size: var(--t-xs);
}

a.moderation-channel-link:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.moderation-content-type{
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 7px;
  color: var(--ink-3);
  font-size: var(--t-xs);
}

.moderation-content-type svg{
  flex: none;
}

.moderation-queue-empty{
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  min-height: 360px;
  padding: 30px;
  color: var(--ink-2);
  text-align: center;
}

.moderation-queue-empty > span{
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--brand-soft);
  color: var(--brand);
}

.moderation-queue-empty strong{
  color: var(--ink);
  font-size: var(--t-sm);
}

.moderation-queue-empty p{
  max-width: 25ch;
  margin: 0;
  color: var(--ink-3);
  font-size: var(--t-xs);
  line-height: 1.5;
}

.moderation-detail-column{
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  max-width: 760px;
}

.moderation-detail-card.is-empty{
  display: grid;
  min-height: 618px;
  place-items: center;
}

.moderation-detail-card.is-empty > div{
  display: grid;
  justify-items: center;
  gap: 8px;
  color: var(--ink-3);
  text-align: center;
}

.moderation-detail-card.is-empty strong{
  color: var(--ink);
  font-size: var(--t-md);
}

.moderation-detail-card.is-empty p{
  margin: 0;
  font-size: var(--t-sm);
}

.moderation-detail-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px;
}

.moderation-detail-person{
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.moderation-detail-person > div{
  display: grid;
  gap: 5px;
  min-width: 0;
}

.moderation-detail-person strong{
  overflow: hidden;
  color: var(--ink);
  font-size: var(--t-md);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.moderation-detail-person span{
  color: var(--ink-3);
  font-size: var(--t-sm);
}

.moderation-detail-subline{
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.moderation-detail-subline > span{
  color: var(--ink-3);
  font-size: var(--t-xs);
}

.moderation-detail-subline .moderation-channel-link{
  color: var(--brand);
  font-size: var(--t-xs);
  font-weight: 600;
}

.moderation-detail-subline time{
  flex: none;
  color: var(--ink-3);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
}

.moderation-detail-subline .moderation-channel-origin{
  min-width: 0;
}

.moderation-detail-person .moderation-channel-inline-avatar{
  color: var(--ink);
  font-size: 10px;
}

.moderation-detail-person .moderation-channel-origin .moderation-channel-link{
  color: var(--brand);
  font-size: var(--t-xs);
}

.moderation-status{
  flex: none;
  padding: 8px 13px;
  border-radius: 9px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: var(--t-xs);
  font-weight: 600;
}

.moderation-status.is-approved{
  background: var(--ok-soft);
  color: var(--ok);
}

.moderation-status.is-rejected{
  background: var(--danger-soft);
  color: var(--danger);
}

.moderation-post{
  padding: 0 16px 16px;
}

.moderation-post-content{
  padding: 15px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--surface);
}

.moderation-post-content > p{
  margin: 16px 0 0;
  color: var(--ink);
  font-size: clamp(var(--t-sm), 1.4vw, var(--t-md));
  line-height: 1.55;
  letter-spacing: -0.012em;
  overflow-wrap: anywhere;
}

.moderation-post-content > p:first-child{
  margin-top: 0;
}

.moderation-post-media{
  position: relative;
  height: clamp(155px, 17vw, 210px);
  overflow: hidden;
  border-radius: var(--r-sm);
  background:
    linear-gradient(90deg, transparent 20%, rgba(255,255,255,.34) 20% 34%, transparent 34% 62%, rgba(255,255,255,.24) 62% 78%, transparent 78%),
    linear-gradient(135deg, #77b7dd, #dcebf2 52%, #72add3);
}

.moderation-post-media.has-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.moderation-post-media.has-image::after{
  display: none;
}

.moderation-media-sun{
  position: absolute;
  inset: 22px 8% auto auto;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255,255,255,.78);
}

.moderation-media-tree{
  position: absolute;
  inset: 18px auto 27px 7%;
  width: 2px;
  background: #31516f;
}

.moderation-media-tree::before,
.moderation-media-tree::after{
  content: "";
  position: absolute;
  width: 24px;
  height: 42px;
  border-left: 2px solid #31516f;
  border-radius: 50%;
  rotate: 28deg;
}

.moderation-media-tree::before{
  inset: 15px auto auto -16px;
}

.moderation-media-tree::after{
  inset: 39px auto auto -5px;
  rotate: -28deg;
}

.moderation-media-hill{
  position: absolute;
  inset-block-end: 22px;
  border-radius: 90px 90px 0 0;
  background: #2c5b86;
}

.moderation-media-hill.one{
  inset-inline-start: -3%;
  width: 28%;
  height: 54px;
}

.moderation-media-hill.two{
  inset-inline-start: 22%;
  width: 27%;
  height: 42px;
  background: #4c8fbb;
}

.moderation-media-swings{
  position: absolute;
  inset: auto auto 22px 47%;
  width: 27%;
  height: 112px;
  border: 5px solid #0e426e;
  border-bottom: 0;
  transform: skew(-9deg);
}

.moderation-media-swings i{
  position: absolute;
  inset-block-start: 0;
  width: 2px;
  height: 69px;
  background: #31516f;
}

.moderation-media-swings i:first-child{
  inset-inline-start: 27%;
}

.moderation-media-swings i:last-child{
  inset-inline-end: 27%;
}

.moderation-media-swings i::after{
  content: "";
  position: absolute;
  inset: auto auto -2px 50%;
  width: 24px;
  height: 4px;
  border-radius: 4px;
  background: #194e78;
  translate: -50% 0;
}

.moderation-media-slide{
  position: absolute;
  inset: auto 8% 22px auto;
  width: 18%;
  height: 75px;
  border: 6px solid #0f4775;
  border-top: 0;
  border-left-color: transparent;
  border-radius: 0 0 32px 0;
  transform: skew(-26deg);
}

.moderation-post-media::after{
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 23px;
  background: rgba(225,240,247,.86);
}

.moderation-signature-preview{
  margin-top: 17px;
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: 1.55;
}

.moderation-detail-actions{
  padding: 0 16px 16px;
}

.moderation-detail-actions .moderation-decision-actions,
.moderation-detail-actions .moderation-finished-note{
  margin-top: 0;
}

.moderation-signature-sheet{
  display: grid;
  gap: 18px;
}

.moderation-signature-channel-picker{
  display: grid;
  gap: 7px;
}

.moderation-signature-channel-picker > span{
  color: var(--ink-2);
  font-size: var(--t-xs);
  font-weight: 650;
}

.moderation-signature-channel-picker > div{
  position: relative;
}

.moderation-signature-channel-picker select{
  width: 100%;
  height: 44px;
  padding: 0 42px 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  outline: none;
  appearance: none;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-sm);
  cursor: pointer;
}

.moderation-signature-channel-picker select:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft-2);
}

.moderation-signature-channel-picker > div > svg{
  position: absolute;
  top: 50%;
  right: 13px;
  color: var(--ink-3);
  pointer-events: none;
  translate: 0 -50%;
}

.moderation-connected-card{
  width: min(1114px, 100%);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-2);
}

.moderation-connected-card > header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--line-2);
}

.moderation-connected-card > header h2{
  margin: 0;
  color: var(--ink);
  font-size: var(--t-md);
  font-weight: 700;
}

.moderation-connected-card > header p{
  margin: 3px 0 0;
  color: var(--ink-3);
  font-size: var(--t-xs);
}

.moderation-connected-card > header > span{
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding-inline: 7px;
  border-radius: 9px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: var(--t-xs);
  font-weight: 700;
}

.moderation-connected-list{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
}

.moderation-connected-item{
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.moderation-connected-avatar{
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--surface);
  font-size: 18px;
  box-shadow: var(--sh-1);
}

.moderation-connected-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.moderation-connected-info{
  display: grid;
  gap: 7px;
  min-width: 0;
}

.moderation-connected-info > a,
.moderation-connected-info > strong{
  overflow: hidden;
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 680;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.moderation-connected-info > a:hover{
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.moderation-personal-link{
  display: grid;
  gap: 3px;
  min-width: 0;
}

.moderation-personal-link small{
  color: var(--ink-3);
  font-size: var(--t-3xs);
}

.moderation-personal-link button{
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand);
  font: inherit;
  font-size: var(--t-2xs);
  cursor: pointer;
}

.moderation-personal-link button span{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.moderation-personal-link button svg{
  flex: none;
}

.moderation-personal-link button:hover span{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.moderation-connected-empty{
  grid-column: 1 / -1;
  margin: 0;
  padding: 20px;
  color: var(--ink-3);
  text-align: center;
  font-size: var(--t-sm);
}

.moderation-signature-field{
  display: grid;
  gap: 7px;
  margin-top: 11px;
}

.moderation-signature-field > span{
  color: var(--ink-2);
  font-size: var(--t-xs);
}

.moderation-signature-field textarea{
  width: 100%;
  min-height: 82px;
  resize: vertical;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  outline: none;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-sm);
  font-style: italic;
  line-height: 1.5;
}

.moderation-signature-field textarea:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.moderation-signature-field textarea:disabled{
  opacity: .58;
  cursor: not-allowed;
}

.moderation-decision-actions{
  display: grid;
  grid-template-columns: minmax(150px, .85fr) minmax(180px, 1fr);
  gap: 12px;
  margin-top: 16px;
  margin-inline-start: auto;
  width: min(100%, 460px);
}

.moderation-reject,
.moderation-publish{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 10px 18px;
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  font-weight: 600;
}

.moderation-reject{
  border: 1px solid var(--danger);
  background: var(--surface);
  color: var(--danger);
}

.moderation-reject:hover{
  background: var(--danger-soft);
}

.moderation-publish{
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #fff;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--brand) 22%, transparent);
}

.moderation-publish:hover{
  filter: brightness(1.04);
}

.moderation-finished-note{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  margin-top: 16px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: var(--t-sm);
  font-weight: 600;
}

.moderation-finished-note.is-approved{
  background: var(--ok-soft);
  color: var(--ok);
}

.moderation-finished-note.is-rejected{
  background: var(--danger-soft);
  color: var(--danger);
}

@media (max-width: 1080px){
  .moderation-workspace{
    grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
  }

  .moderation-post-content{
    padding: 14px;
  }

  .moderation-connected-list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px){
  .moderation-workspace{
    grid-template-columns: minmax(0, 1fr);
  }

  .moderation-queue-list{
    min-height: 0;
  }

  .moderation-queue-item{
    min-height: 104px;
  }

  .moderation-detail-card.is-empty{
    min-height: 260px;
  }
}

@media (max-width: 540px){
  .moderation-queue-head,
  .moderation-detail-head,
  .moderation-detail-actions{
    padding-inline: 16px;
  }

  .moderation-tabs button{
    padding-inline: 5px;
    font-size: var(--t-3xs);
  }

  .moderation-detail-head{
    align-items: flex-start;
  }

  .moderation-detail-person strong{
    font-size: var(--t-sm);
  }

  .moderation-detail-person span{
    font-size: var(--t-xs);
  }

  .moderation-status{
    padding: 7px 9px;
    font-size: var(--t-3xs);
  }

  .moderation-post{
    padding: 0 12px 12px;
  }

  .moderation-post-media{
    height: 150px;
  }

  .moderation-decision-actions{
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .moderation-connected-list{
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ═══ Рабочие чаты: маршруты между командными мессенджерами ═════════ */

body[data-route="workchats"] .view{
  padding: 20px 24px 40px;
}

.workchat-hub{
  display: grid;
  gap: 16px;
  max-width: 1500px;
  margin: 0 auto;
}

.wc-create-card,
.wc-chat-panel{
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--sh-1);
}

.wc-create-card h2,
.wc-chat-title h2{
  margin: 0;
  color: var(--ink);
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: -.02em;
}

.wc-create-card header p,
.wc-chat-title p{
  margin: 4px 0 0;
  color: var(--ink-3);
  font-size: var(--t-xs);
  line-height: 1.45;
}

.wc-create-card{
  overflow: hidden;
  border-radius: var(--r-lg);
}

.wc-create-card > header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-2);
}

.wc-create-grid{
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto;
  align-items: end;
  gap: 14px;
  padding: 16px 18px 18px;
}

.wc-create-submit{
  min-width: 142px;
  min-height: 46px;
  margin-bottom: 12px;
}

.wc-create-name{
  padding: 12px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-2) 68%, var(--surface));
}

.wc-create-name label{
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 24px;
  margin-bottom: 7px;
  color: var(--ink-2);
  font-size: var(--t-xs);
  font-weight: 650;
}

.wc-create-step{
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 6px;
  background: color-mix(in srgb, var(--brand) 11%, var(--surface));
  color: var(--brand);
  font-size: 10px;
  font-weight: 750;
}

.wc-chat-panel{
  display: grid;
  grid-template-rows: auto minmax(300px, 1fr) auto;
  min-height: calc(100vh - 126px);
  overflow: hidden;
  border-radius: var(--r-lg);
}

.wc-chat-head{
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr);
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-2);
}

.wc-chat-feed{
  display: flex;
  flex-direction: column;
  gap: 11px;
  overflow-y: auto;
  padding: 20px;
  background: color-mix(in srgb, var(--surface-2) 58%, var(--surface));
}

.wc-chat-message{
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: min(620px, 78%);
}

.wc-chat-message.is-mine{
  flex-direction: row-reverse;
  align-self: flex-end;
}

.wc-chat-avatar{
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--brand-soft-2);
  color: var(--brand);
  font-size: 9px;
  font-weight: 750;
}

.wc-chat-message.is-mine .wc-chat-avatar{
  background: var(--brand);
  color: #fff;
}

.wc-chat-message > div{
  min-width: 0;
}

.wc-chat-author{
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 4px 3px;
  color: var(--ink-3);
  font-size: var(--t-3xs);
  font-weight: 600;
}

.wc-chat-message.is-mine .wc-chat-author{
  justify-content: flex-end;
  margin: 0 3px 4px 0;
}

.wc-chat-message .bubble{
  max-width: 100%;
  margin: 0;
}

.wc-chat-empty{
  display: grid;
  place-items: center;
  align-self: center;
  gap: 9px;
  margin: auto;
  color: var(--ink-3);
  font-size: var(--t-xs);
}

.wc-chat-empty > span{
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--brand);
  box-shadow: var(--sh-1);
}

.wc-chat-empty p{
  margin: 0;
}

.wc-chat-composer{
  padding: 12px 16px 14px;
  border-top: 1px solid var(--line-2);
  background: var(--surface);
}

@media (max-width: 1250px){

  .wc-create-grid{
    grid-template-columns: minmax(190px, 1fr) minmax(190px, 1fr);
  }

  .wc-create-submit{
    grid-column: 1 / -1;
    margin-bottom: 0;
    width: max-content;
  }

  .wc-chat-head{
    grid-template-columns: auto minmax(160px, 1fr) auto;
  }  
}

@media (max-width: 860px){
  body[data-route="workchats"] .view{
    padding-inline: 14px;
  }

  .wc-create-grid{
    grid-template-columns: minmax(0, 1fr);
  }

  .wc-create-submit{
    grid-column: auto;
  }    

  .wc-chat-head{
    grid-template-columns: auto minmax(0, 1fr);
  }  
}

@media (max-width: 560px){

  .wc-create-card > header{
    align-items: flex-start;
    flex-direction: column;
  }

  .wc-create-grid{
    grid-template-columns: minmax(0, 1fr);
  }      

  .wc-create-submit{
    grid-column: auto;
    width: 100%;
  }  

  .wc-chat-panel{
    min-height: calc(100vh - 108px);
  }

  .wc-chat-message{
    max-width: 92%;
  }
}

/* Финальная компактная карточка тарифа и вынесенные в шапку финансовые
 * действия. Правила изолированы классами раздела подписки. */
.plan-now-grid{grid-template-columns:minmax(0,1fr) auto;gap:20px}
.plan-now .card-pad{padding:18px 20px}
.plan-now-ico{width:46px;height:46px}
.plan-now-kicker{display:flex;align-items:center;gap:8px;color:var(--ink-2);font-size:var(--t-xs);font-weight:600}
.plan-now-sub{display:inline-flex;align-items:center;gap:5px;margin-top:4px;color:var(--brand);font-weight:600;text-decoration:none}
.plan-now-act .btn{min-height:42px;border-color:color-mix(in srgb,var(--brand) 28%,var(--line));background:var(--surface);color:var(--brand);font-weight:600}
.subscription-header-action{gap:7px;min-height:40px;border-color:var(--line);background:var(--surface);color:var(--ink-2);box-shadow:var(--sh-1)}
.subscription-referral{display:grid;gap:16px;padding:22px;overflow:hidden;border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 7%,var(--surface)),var(--surface) 52%);box-shadow:inset 0 0 0 1px var(--line-2),var(--sh-1)}
.subscription-referral-main{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:start}
.subscription-referral-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:var(--brand);color:#fff}
.subscription-referral-kicker{color:var(--brand);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.subscription-referral h2{margin-top:4px;font-size:18px;line-height:1.3}.subscription-referral p{margin:7px 0 0;color:var(--ink-2);font-size:12.5px;line-height:1.5}
.subscription-referral-link{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:13px 13px 13px 16px;border:1px solid color-mix(in srgb,var(--brand) 20%,var(--line));border-radius:14px;background:var(--surface)}
.subscription-referral-link>span{display:grid;min-width:0;gap:2px}.subscription-referral-link small{color:var(--ink-3);font-size:10.5px}.subscription-referral-link strong{overflow:hidden;color:var(--brand);font-size:12px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.subscription-referral-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.subscription-referral-stats>span{display:grid;gap:4px;padding:14px 15px;border:1px solid var(--line-2);border-radius:13px;background:var(--surface-2)}
.subscription-referral-stats small{color:var(--ink-2);font-size:10.5px}.subscription-referral-stats strong{font-size:15px}
.subscription-payment-dialog{margin:auto;width:min(760px,calc(100vw - 28px));max-height:min(760px,calc(100dvh - 28px));padding:0;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--ink);box-shadow:0 28px 80px rgba(15,25,45,.28)}
.subscription-payment-dialog::backdrop{background:rgba(17,27,47,.48);backdrop-filter:blur(2px)}
.subscription-payment-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;border-bottom:1px solid var(--line-2)}
.subscription-payment-dialog h2{font-size:20px}.subscription-payment-dialog header p{margin:4px 0 0;color:var(--ink-2);font-size:12.5px}.subscription-payment-dialog header button{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;color:var(--ink-2)}
.subscription-referral-dialog{width:min(820px,calc(100vw - 28px))}.subscription-referral-dialog-body{max-height:calc(100dvh - 104px);padding:22px;overflow:auto}
.subscription-payment-body{display:grid;gap:18px;max-height:calc(100dvh - 120px);padding:22px;overflow:auto}.subscription-payment-body h3{margin-bottom:10px;font-size:14px}
.subscription-payment-method,.subscription-payment-history{padding:16px;border:1px solid var(--line-2);border-radius:14px;background:var(--surface)}
.subscription-payment-empty{display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;background:var(--surface-2)}.subscription-payment-empty>span{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:11px;background:var(--surface);color:var(--brand)}
.subscription-payment-empty p,.subscription-payment-note{margin:4px 0 0;color:var(--ink-2);font-size:12px;line-height:1.45}.subscription-payment-history-empty{padding:22px;border-radius:10px;background:var(--surface-2);color:var(--ink-2);font-size:12.5px;text-align:center}.subscription-payment-note{margin:0;padding:12px 14px;border-radius:11px;background:var(--brand-soft)}

@media(max-width:640px){
  .plan-now-grid{grid-template-columns:minmax(0,1fr)}.plan-now-act{justify-self:start}.subscription-header-action span{display:none}
  .subscription-referral-main{grid-template-columns:44px minmax(0,1fr)}.subscription-referral-icon{width:44px;height:44px}.subscription-referral-link{grid-template-columns:1fr}.subscription-referral-link .btn{width:100%}.subscription-referral-stats{grid-template-columns:1fr}.subscription-referral-dialog-body{padding:14px}
}

.appearance-target-picker{overflow:hidden;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);transition:border-color 140ms var(--ease),box-shadow 140ms var(--ease)}
.appearance-target-picker[open]{border-color:color-mix(in srgb,var(--brand) 42%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 8%,transparent)}
.appearance-target-picker>summary{display:grid;grid-template-columns:32px minmax(0,1fr) 18px;align-items:center;gap:10px;min-height:50px;padding:8px 12px;cursor:pointer;list-style:none}.appearance-target-picker>summary::-webkit-details-marker{display:none}
.appearance-target-current-avatar,.appearance-target-option-avatar{display:grid;place-items:center;flex:none;overflow:hidden;border-radius:50%;background:var(--brand-soft);color:var(--brand)}.appearance-target-current-avatar{width:32px;height:32px}
.appearance-target-current-copy{display:grid;gap:1px;min-width:0}.appearance-target-current-copy strong{overflow:hidden;color:var(--ink);font-size:var(--t-sm);font-weight:600;text-overflow:ellipsis;white-space:nowrap}.appearance-target-current-copy small{color:var(--ink-3);font-size:var(--t-3xs)}
.appearance-target-chevron{display:grid;color:var(--ink-3);transition:rotate 140ms var(--ease)}.appearance-target-picker[open] .appearance-target-chevron{rotate:180deg}
.appearance-target-menu{display:grid;gap:12px;padding:10px 8px 12px;border-top:1px solid var(--line-2);background:var(--surface-2)}.appearance-target-group{display:grid;gap:5px}.appearance-target-group>strong{padding:0 4px;color:var(--ink-3);font-size:var(--t-3xs);font-weight:700;letter-spacing:.045em;text-align:left;text-transform:uppercase}.appearance-target-group>div{display:grid;gap:3px}
.appearance-target-option{display:grid;grid-template-columns:28px minmax(0,1fr) 16px;align-items:center;gap:9px;width:100%;min-height:40px;padding:6px 8px;border:0;border-radius:10px;background:transparent;color:var(--ink);font:inherit;font-size:var(--t-sm);text-align:left;cursor:pointer}.appearance-target-option:hover,.appearance-target-option.is-selected{background:var(--surface)}.appearance-target-option.is-selected{color:var(--brand);font-weight:600}.appearance-target-option-avatar{width:28px;height:28px}.appearance-target-option>svg:last-child{justify-self:end}

/* Возвращённый макет «Рабочих чатов»: создание маршрута между чатами. */
body[data-route="workchats"] .view{padding:20px 24px 40px}
.workchat-hub.is-create-only{max-width:1180px;margin:4px auto 0}
.workchat-hub.is-create-only .wc-create-card{box-shadow:0 14px 34px color-mix(in srgb,var(--brand) 7%,transparent)}
.workchat-hub.is-create-only .wc-create-card>header{padding:18px 22px}
.workchat-hub.is-create-only .wc-create-card>header h2{font-size:var(--t-lg)}
.workchat-hub.is-create-only .wc-create-card>header p{margin-top:4px;color:var(--ink-3);font-size:var(--t-xs);line-height:1.45}

.workchat-hub.is-create-only .wc-create-grid{display:grid;grid-template-columns:minmax(220px,.9fr) minmax(470px,1.65fr) auto;align-items:end;gap:16px;padding:20px 22px 22px}
.workchat-hub.is-create-only .wc-create-name,.workchat-hub.is-create-only .wc-create-direction-box{min-height:132px;padding:16px;border:1px solid color-mix(in srgb,var(--brand) 12%,var(--line-2));border-radius:16px;background:linear-gradient(145deg,color-mix(in srgb,var(--brand) 4%,var(--surface)),var(--surface));box-shadow:0 8px 22px color-mix(in srgb,var(--ink) 4%,transparent)}
.workchat-hub.is-create-only .wc-create-name label,.workchat-hub.is-create-only .wc-create-direction-controls label{display:flex;align-items:center;gap:7px;min-height:24px;margin-bottom:7px;color:var(--ink-2);font-size:var(--t-xs);font-weight:650}
.workchat-hub.is-create-only .wc-create-step{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:8px;background:var(--brand);color:#fff;font-size:11px;font-weight:750}
.workchat-hub.is-create-only .wc-create-direction-box{display:grid;gap:10px}
.workchat-hub.is-create-only .wc-create-direction-title{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:var(--t-sm);font-weight:700}
.workchat-hub.is-create-only .wc-create-direction-controls{display:grid;grid-template-columns:minmax(150px,1fr) 42px minmax(150px,1fr);align-items:end;gap:10px}
.workchat-hub.is-create-only .wc-create-network-control{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;min-height:48px;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--surface);transition:border-color 140ms var(--ease),box-shadow 140ms var(--ease)}
.workchat-hub.is-create-only .wc-create-network-control:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 10%,transparent)}
.workchat-hub.is-create-only .wc-create-network-icon{display:grid;place-items:center;padding-left:8px}
.workchat-hub.is-create-only .wc-create-network-icon .mm-network-icon{border-radius:50%}
.workchat-hub.is-create-only .wc-create-network-control .select{min-height:46px;border:0;border-radius:0;background-color:transparent;box-shadow:none;font-weight:600}
.workchat-hub.is-create-only .wc-create-swap{display:grid;place-items:center;width:44px;height:44px;margin-bottom:1px;border:1px solid color-mix(in srgb,var(--brand) 22%,var(--line));border-radius:12px;background:color-mix(in srgb,var(--brand) 7%,var(--surface));color:var(--brand);transition:transform 180ms var(--ease),background 160ms var(--ease),box-shadow 160ms var(--ease)}
.workchat-hub.is-create-only .wc-create-swap:hover{background:var(--brand-soft);box-shadow:0 6px 14px color-mix(in srgb,var(--brand) 14%,transparent);transform:rotate(180deg)}
.workchat-hub.is-create-only .wc-create-submit{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:176px;min-height:50px;margin-bottom:15px;border-radius:12px;box-shadow:0 10px 24px color-mix(in srgb,var(--brand) 24%,transparent)}

.workchat-hub.is-create-only .wc-create-preview{display:grid;gap:14px;margin:0 22px 20px;padding:18px;border:1px solid color-mix(in srgb,var(--brand) 17%,var(--line));border-radius:16px;background:linear-gradient(120deg,color-mix(in srgb,var(--brand) 6%,var(--surface)),var(--surface) 64%)}
.workchat-hub.is-create-only .wc-create-preview-head,.workchat-hub.is-create-only .wc-create-preview-head>span,.workchat-hub.is-create-only .wc-create-bot-note{display:flex;align-items:center}
.workchat-hub.is-create-only .wc-create-preview-head{justify-content:space-between;gap:14px}
.workchat-hub.is-create-only .wc-create-preview-head strong{color:var(--ink);font-size:var(--t-sm)}
.workchat-hub.is-create-only .wc-create-preview-head p{margin:2px 0 0;color:var(--ink-3);font-size:var(--t-2xs)}
.workchat-hub.is-create-only .wc-create-preview-head>span{gap:6px;flex:none;padding:6px 9px;border-radius:999px;background:var(--ok-soft);color:var(--ok);font-size:var(--t-3xs);font-weight:650}
.workchat-hub.is-create-only .wc-create-flow{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);align-items:stretch;gap:12px}
.workchat-hub.is-create-only .wc-create-platform{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:11px;min-width:0;padding:15px;border:1px solid var(--line-2);border-radius:13px;background:var(--surface)}
.workchat-hub.is-create-only .wc-create-platform-icon{display:grid;place-items:center;width:42px;height:42px}
.workchat-hub.is-create-only .wc-create-platform-icon .mm-network-icon{border-radius:50%}
.workchat-hub.is-create-only .wc-create-platform div{display:grid;min-width:0}
.workchat-hub.is-create-only .wc-create-platform small{color:var(--ink-3);font-size:var(--t-3xs)}
.workchat-hub.is-create-only .wc-create-platform strong{margin-top:1px;color:var(--ink);font-size:var(--t-base)}
.workchat-hub.is-create-only .wc-create-platform p{margin:3px 0 0;color:var(--ink-2);font-size:var(--t-2xs)}
.workchat-hub.is-create-only .wc-create-platform a{color:var(--brand);font-weight:700;text-decoration:none}
.workchat-hub.is-create-only .wc-create-platform a:hover{text-decoration:underline;text-underline-offset:3px}
.workchat-hub.is-create-only .wc-create-flow-arrow{display:grid;place-items:center;color:var(--brand)}
.workchat-hub.is-create-only .wc-create-bot-note{gap:7px;margin:0;color:var(--ink-3);font-size:var(--t-2xs)}
.workchat-hub.is-create-only .wc-create-bot-note svg{flex:none;color:var(--brand)}

@media(max-width:1250px){
  .workchat-hub.is-create-only .wc-create-grid{grid-template-columns:minmax(190px,.8fr) minmax(430px,1.5fr)}
  .workchat-hub.is-create-only .wc-create-submit{grid-column:1/-1;width:max-content;margin-bottom:0}
}
@media(max-width:860px){
  body[data-route="workchats"] .view{padding-inline:14px}
  .workchat-hub.is-create-only .wc-create-grid{grid-template-columns:minmax(0,1fr)}
  .workchat-hub.is-create-only .wc-create-submit{grid-column:auto}
  .workchat-hub.is-create-only .wc-create-flow{grid-template-columns:minmax(0,1fr)}
  .workchat-hub.is-create-only .wc-create-flow-arrow{height:24px;transform:rotate(90deg)}
}
@media(max-width:560px){
  body[data-route="workchats"] .view{padding:12px 10px 28px}
  .workchat-hub.is-create-only .wc-create-card>header{padding:15px 16px}
  .workchat-hub.is-create-only .wc-create-grid{padding:14px}
  .workchat-hub.is-create-only .wc-create-direction-controls{grid-template-columns:minmax(0,1fr)}
  .workchat-hub.is-create-only .wc-create-swap{justify-self:center;margin:-3px 0;transform:rotate(90deg)}
  .workchat-hub.is-create-only .wc-create-swap:hover{transform:rotate(270deg)}
  .workchat-hub.is-create-only .wc-create-submit{width:100%}
  .workchat-hub.is-create-only .wc-create-preview{margin:0 14px 14px;padding:14px}
  .workchat-hub.is-create-only .wc-create-preview-head{align-items:flex-start;flex-direction:column}
}