/* Кабинет издателя Doxx — каркас и компоненты по донору app.kit.com.
 *
 * Замеры донора: D:\Агентские файлы\teardown\kit\out\probe.json, разбор — скилл
 * web-teardown, запись «app.kit.com — 2026-08-30». Переносится СИСТЕМА, цвет наш.
 *
 * Весь лист живёт под .kab и одевает ТОЛЬКО страницу /network/app/. Общий styles.css
 * не тронут намеренно: он одевает пятнадцать страниц, и его переписывание уже один раз
 * молча раздело провод и вход (память shared-stylesheet-rewrite-trap).
 *
 * Четыре решения донора, которые закрывают весь кабинет:
 *   1. радиус по размеру:      8 контролы · 10 строки и плитки · 12 карточки · 9999 пилюли
 *   2. состояние по альфе:     активный — чернила 6 %, ховер — 12 %. Цветных состояний нет
 *   3. кнопка по геометрии:    40/r10/пад 8-16 и 32/r8/пад 4-12; смысл несёт только заливка
 *   4. секция по волосяной:    заголовок с отбивкой снизу и линейкой, а не плашка
 * Теней нет нигде — слои различаются фоном и волосяной.
 */

.kab {
  --k-paper:#F4F7FA;
  --k-sheet:#FFFFFF;
  --k-line:#E5EDF5;
  --k-line-2:#D6DEE8;
  --k-ink:#0A2540;
  --k-ink-hi:#06192B;
  --k-text:#425466;
  --k-mute:#697386;
  --k-accent:#005EC7; --k-on-accent:#FFFFFF;
  --k-accent-hi:#004AA0;
  --k-tint:#E4EEFA;
  --k-ok:#0E6245;      --k-ok-soft:#DCF3E9;
  --k-warn:#8A5A00;    --k-warn-soft:#FBF0DC;
  --k-danger:#AB3300;  --k-danger-soft:#FBEAE4;

  --k-s6:rgba(10,37,64,.06);
  --k-s12:rgba(10,37,64,.12);
  --k-ring:rgba(0,94,199,.18);

  --k-r-sm:8px; --k-r:10px; --k-r-lg:12px; --k-pill:9999px;
  --k-rail:256px; --k-rail-narrow:64px;
  --k-head:73px;
  --k-col:720px; --k-col-wide:1040px; --k-wrap:1392px;

  --k-t-state:.15s; --k-t-btn:.2s; --k-t-layout:.25s;
  --k-e-state:cubic-bezier(.4,0,.2,1);
  --k-e-in:cubic-bezier(.33,0,0,1);
  --k-e-pop:cubic-bezier(0,1.2,1,1);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .kab{
    --k-paper:#08090A; --k-sheet:#101215; --k-line:rgba(255,255,255,.08); --k-line-2:rgba(255,255,255,.14);
    --k-ink:#F7F8F8; --k-ink-hi:#FFFFFF; --k-text:#D0D6E0; --k-mute:#8A8F98;
    --k-accent:#5CA4FF; --k-accent-hi:#8FC0FF; --k-tint:#0E2036; --k-on-accent:#08111C; --k-on-accent:#08111C;
    --k-ok:#4FBF8F; --k-ok-soft:#0F2419; --k-warn:#D8A245; --k-warn-soft:#251C0B;
    --k-danger:#E0785F; --k-danger-soft:#2A1712;
    --k-s6:rgba(255,255,255,.06); --k-s12:rgba(255,255,255,.12);
    --k-ring:rgba(92,164,255,.28);
  }
}
:root[data-theme="dark"] .kab{
  --k-paper:#08090A; --k-sheet:#101215; --k-line:rgba(255,255,255,.08); --k-line-2:rgba(255,255,255,.14);
  --k-ink:#F7F8F8; --k-ink-hi:#FFFFFF; --k-text:#D0D6E0; --k-mute:#8A8F98;
  --k-accent:#5CA4FF; --k-accent-hi:#8FC0FF; --k-tint:#0E2036;
  --k-ok:#4FBF8F; --k-ok-soft:#0F2419; --k-warn:#D8A245; --k-warn-soft:#251C0B;
  --k-danger:#E0785F; --k-danger-soft:#2A1712;
  --k-s6:rgba(255,255,255,.06); --k-s12:rgba(255,255,255,.12);
  --k-ring:rgba(92,164,255,.28);
}

/* Страница кабинета: шапка сайта снимается — её роль берёт рельса. */
body.kab{ background:var(--k-paper); color:var(--k-text); margin:0; }
body.kab > header.mast{ display:none; }
body.kab > main{ padding:0; max-width:none; }

/* ---------- 1. КАРКАС ---------- */
/* Скрим ящика существует только на узких экранах: в сетке десктопа он занимал бы ячейку. */
.kab__scrim{ display:none; }

.kab__app{
  display:grid; grid-template-columns:var(--k-rail) minmax(0,1fr);
  min-height:100vh; transition:grid-template-columns var(--k-t-layout) cubic-bezier(0,0,.2,1);
}
.kab__app.is-narrow{ grid-template-columns:var(--k-rail-narrow) minmax(0,1fr); }

/* рельса */
.kab__rail{
  position:sticky; top:0; align-self:start; height:100vh;
  display:flex; flex-direction:column; gap:4px; padding:0 8px 8px;
  overflow:hidden auto; scrollbar-width:thin;
}
.kab__brand{ display:flex; align-items:center; justify-content:space-between; height:var(--k-head); padding:0 8px; flex:none; }
.kab__brand img{ height:26px; width:auto; display:block; }
:root:not([data-theme="light"]) .kab__brand img{ filter:none; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .kab__brand img{ filter:invert(1); } }
:root[data-theme="dark"] .kab__brand img{ filter:invert(1); }

.kab__fold{
  width:32px; height:32px; display:grid; place-items:center; flex:none;
  border:0; background:transparent; color:var(--k-mute); border-radius:var(--k-r-sm); cursor:pointer;
  transition:background-color var(--k-t-state) var(--k-e-state), color var(--k-t-state) var(--k-e-state);
}
.kab__fold:hover{ background:var(--k-s12); color:var(--k-ink); }

.kab__nav{ display:flex; flex-direction:column; gap:4px; flex:1 1 auto; }

/* пункт рельсы: 240×40, падинг 8, радиус 10, иконка 24, зазор 8 — шаг 44 */
.kab__item{
  display:grid; grid-template-columns:24px minmax(0,1fr) auto; align-items:center; gap:8px;
  height:40px; padding:8px; border-radius:var(--k-r);
  font:400 14px/20px var(--font); color:var(--k-mute); text-decoration:none;
  border:0; background:transparent; cursor:pointer; width:100%; text-align:left;
  transition:background-color var(--k-t-state) var(--k-e-state), color var(--k-t-state) var(--k-e-state);
}
.kab__item svg{ width:24px; height:24px; flex:none; }
.kab__item span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kab__item:hover{ background:var(--k-s12); color:var(--k-ink); }
.kab__item.is-on{ background:var(--k-s6); color:var(--k-ink); font-weight:500; }
.kab__item:focus-visible{ outline:2px solid var(--k-accent); outline-offset:-2px; }
.kab__item--group{ font-weight:600; }
.kab__item--group .kab__chev{
  width:16px; height:16px; color:var(--k-mute);
  transition:transform var(--k-t-state) var(--k-e-state);
}
.kab__group.is-open > .kab__item--group .kab__chev{ transform:rotate(180deg); }

.kab__sub{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--k-t-layout) var(--k-e-in); }
.kab__group.is-open .kab__sub{ grid-template-rows:1fr; }
.kab__sub > div{ overflow:hidden; display:flex; flex-direction:column; gap:4px; }
.kab__group.is-open .kab__sub > div{ padding-top:4px; }

/* подвал рельсы: тинтовая панель, аккаунт, язык */
.kab__foot{ flex:none; display:flex; flex-direction:column; gap:4px; padding-top:8px; }
/* Карточка организации. Устройство донора: аватар и шеврон в верхней строке,
   под ними имя, строка тарифа и ЗАЛИТАЯ кнопка. Контурная кнопка на цветной
   плашке тонет — у донора она сплошная, и это единственный акцент подвала. */
.kab__card{
  background:var(--k-tint); border-radius:var(--k-r-lg); padding:12px;
  display:flex; flex-direction:column; gap:8px; color:var(--k-ink);
}
.kab__card-top{ display:flex; align-items:center; justify-content:space-between; }
.kab__card-fold{
  width:24px; height:24px; padding:0; border:0; background:none; cursor:pointer;
  color:var(--k-text); border-radius:var(--k-r-sm); display:grid; place-items:center;
  transition:background-color var(--k-t-state) var(--k-e-state),
             transform var(--k-t-state) var(--k-e-state);
}
.kab__card-fold svg{ width:18px; height:18px; }
.kab__card-fold:hover{ background:var(--k-s12); color:var(--k-ink); }
.kab__card-body{ display:flex; flex-direction:column; gap:8px; }
.kab__card b{ font:600 14px/20px var(--font); }
.kab__card span{ font:400 13px/18px var(--font); color:var(--k-text); }
/* Вес обязан перебить `.kab .btn`. Двух классов мало: вес равный, а правило
   кнопок стоит НИЖЕ по файлу и потому выигрывает. Отсюда третий класс. */
.kab .kab__card .kab__card-cta{
  align-self:flex-start;
  background:var(--k-accent); border-color:var(--k-accent); color:var(--k-on-accent);
}
.kab .kab__card .kab__card-cta:hover{ background:var(--k-accent-hi); border-color:var(--k-accent-hi); }
/* Свёрнутая карточка: остаётся одна строка с аватаром, шеврон переворачивается. */
.kab__card.is-folded{ padding:8px; }
.kab__card.is-folded .kab__card-body{ display:none; }
.kab__card.is-folded .kab__card-fold{ transform:rotate(180deg); }

/* Строка раздела в подвале — та же геометрия, что у пользователя ниже. */
.kab__row{
  display:grid; grid-template-columns:24px minmax(0,1fr); align-items:center; gap:8px;
  height:40px; padding:8px; border-radius:var(--k-r); color:var(--k-text); text-decoration:none;
  font:500 14px/20px var(--font);
  transition:background-color var(--k-t-state) var(--k-e-state);
}
.kab__row svg{ width:20px; height:20px; justify-self:center; }
.kab__row:hover{ background:var(--k-s12); }
.kab__row.is-on{ background:var(--k-s12); color:var(--k-ink); }

/* Пользователь и его меню: строка тянется, «⋮» прижата вправо. */
.kab__who{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) 32px; align-items:center; }
.kab__dots{
  width:32px; height:32px; padding:0; border:0; background:none; cursor:pointer;
  color:var(--k-text); border-radius:var(--k-r-sm); display:grid; place-items:center;
  transition:background-color var(--k-t-state) var(--k-e-state);
}
.kab__dots svg{ width:18px; height:18px; }
.kab__dots:hover{ background:var(--k-s12); color:var(--k-ink); }
/* Меню поднимается над строкой: подвал стоит у нижнего края окна.
   position:fixed здесь не нужен — .kab__pop лежит вне прокручиваемой области
   рельсы только по вертикали, поэтому хватает absolute с bottom. */
.kab__pop{
  position:absolute; right:0; bottom:calc(100% + 6px); z-index:40; min-width:180px;
  padding:4px; background:var(--k-sheet); border:1px solid var(--k-line);
  border-radius:var(--k-r); box-shadow:0 16px 32px rgba(10,37,64,.14), 0 4px 12px rgba(0,0,0,.08);
  display:flex; flex-direction:column;
}
.kab__pop-item{
  display:block; width:100%; padding:8px 10px; border:0; background:none; cursor:pointer;
  text-align:left; text-decoration:none; color:var(--k-ink);
  font:400 14px/20px var(--font); border-radius:var(--k-r-sm);
}
.kab__pop-item:hover{ background:var(--k-s12); }
/* `hidden` — это display:none из таблицы браузера, и наш display:flex его
   перебивает. Без этой строки меню видно сразу и оно ловит чужие нажатия. */
.kab__pop[hidden]{ display:none; }
.kab__user{
  display:grid; grid-template-columns:24px minmax(0,1fr); align-items:center; gap:8px;
  height:40px; padding:8px; border-radius:var(--k-r); color:var(--k-text); text-decoration:none;
  font:500 14px/20px var(--font);
  transition:background-color var(--k-t-state) var(--k-e-state);
}
.kab__user:hover{ background:var(--k-s12); }
.kab__ava{ width:24px; height:24px; border-radius:var(--k-pill); background:var(--k-ink); color:var(--k-sheet);
  display:grid; place-items:center; font:600 11px/1 var(--font); overflow:hidden; }
.kab__ava img{ width:100%; height:100%; object-fit:cover; }
/* Аватар организации в карточке крупнее: у донора он держит верхнюю строку. */
.kab__ava--lg{ width:32px; height:32px; font-size:13px; }

/* свёрнутая рельса */
.kab__app.is-narrow .kab__item span,
.kab__app.is-narrow .kab__item .kab__chev,
.kab__app.is-narrow .kab__card-body,
.kab__app.is-narrow .kab__card-fold,
.kab__app.is-narrow .kab__row span,
.kab__app.is-narrow .kab__dots,
.kab__app.is-narrow .kab__user span,
.kab__app.is-narrow .kab__brand img{ display:none; }
.kab__app.is-narrow .kab__item,
.kab__app.is-narrow .kab__row{ grid-template-columns:24px; justify-content:center; }
.kab__app.is-narrow .kab__who{ grid-template-columns:minmax(0,1fr); }
.kab__app.is-narrow .kab__card{ padding:8px; }
.kab__app.is-narrow .kab__sub{ grid-template-rows:1fr; }

/* лист */
.kab__sheet{
  background:var(--k-sheet); border:1px solid var(--k-line); border-radius:var(--k-r);
  margin:8px 8px 8px 0; min-width:0; display:flex; flex-direction:column;
}
.kab__head{
  position:sticky; top:0; z-index:5; min-height:var(--k-head);
  display:flex; align-items:center; gap:16px;
  background:var(--k-sheet); border-radius:var(--k-r) var(--k-r) 0 0;
}
.kab__head .kab__wrap{ display:flex; align-items:center; gap:16px; width:100%; }
.kab__h1{
  font:600 24px/40px var(--font); color:var(--k-text); margin:0; flex:1 1 auto;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; letter-spacing:-.01em;
}
.kab__crumb{ font:400 14px/20px var(--font); color:var(--k-mute); margin:0 0 2px; }
.kab__crumb b{ color:var(--k-ink); font-weight:600; }
.kab__act{ display:flex; align-items:center; gap:8px; flex:none; }
.kab__burger{ display:none; }

.kab__wrap{ width:100%; max-width:var(--k-wrap); margin:0 auto; padding:0 24px; }
.kab__body{ flex:1 1 auto; padding:8px 0 64px; }
#pane{ width:100%; max-width:var(--k-col); margin:0 auto; }
#pane.is-wide{ max-width:var(--k-col-wide); }
#pane.is-full{ max-width:none; }

/* ---------- 2. ТИПОГРАФИКА И ТЕКСТОВЫЕ РОЛИ ---------- */
.kab #pane h1{ font:600 24px/40px var(--font); color:var(--k-text); margin:0 0 8px; letter-spacing:-.01em; }
.kab #pane h3{
  font:600 18px/32px var(--font); color:var(--k-ink); margin:40px 0 20px;
  padding-bottom:16px; border-bottom:1px solid var(--k-line);
}
.kab #pane h4{ font:600 16px/20px var(--font); color:var(--k-ink); margin:24px 0 8px; }
.kab .lede{ font:400 14px/24px var(--font); color:var(--k-text); margin:0 0 24px; max-width:68ch; }
.kab .fine{ font:400 12px/20px var(--font); color:var(--k-mute); }
.kab .mono{ font-family:var(--mono); font-size:13px; }
.kab .num{ font-variant-numeric:tabular-nums; }
.kab p{ margin:0 0 12px; }
.kab #pane a, .kab .foot-note a, .kab .notice a{ color:var(--k-accent); text-underline-offset:2px; }
.kab #pane a:hover, .kab .foot-note a:hover{ color:var(--k-accent-hi); }
/* Рельса вне этого правила намеренно: у донора её цвет — только чернила. */
.kab .kab__item, .kab .kab__user, .kab .kab__row, .kab .kab__pop-item{ text-decoration:none; }
.kab .kab__item:hover, .kab .kab__user:hover, .kab .kab__row:hover, .kab .kab__pop-item:hover{ text-decoration:none; }
.kab .pane__h{ margin:0 0 16px; }
.kab .pane__sub{ font:400 14px/20px var(--font); color:var(--k-mute); margin:0; }
.kab .foot-note{
  max-width:var(--k-wrap); margin:0 auto; padding:24px; border-top:1px solid var(--k-line);
  font:400 12px/20px var(--font); color:var(--k-mute);
}

/* ---------- 3. КНОПКИ: две геометрии, смысл в заливке ---------- */
.kab .btn, .kab .btn-quiet{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:600 14px/24px var(--font); border:1px solid transparent; cursor:pointer;
  text-decoration:none; white-space:nowrap;
  transition:background-color var(--k-t-btn) var(--k-e-state), color var(--k-t-btn) var(--k-e-state),
             border-color var(--k-t-btn) var(--k-e-state), transform var(--k-t-state) var(--k-e-state);
}
.kab .btn{ height:40px; padding:8px 16px; border-radius:var(--k-r); background:var(--k-ink); color:var(--k-sheet); }
.kab .btn:hover{ background:var(--k-ink-hi); }
.kab .btn-quiet{ height:32px; padding:4px 12px; border-radius:var(--k-r-sm); background:var(--k-s6); color:var(--k-ink); }
.kab .btn-quiet:hover{ background:var(--k-s12); }
.kab .btn:active, .kab .btn-quiet:active{ transform:scale(.98); }
.kab .btn:focus-visible, .kab .btn-quiet:focus-visible{ outline:2px solid var(--k-accent); outline-offset:2px; }
.kab .btn[disabled], .kab .btn-quiet[disabled]{ opacity:.45; cursor:default; transform:none; }
/* заливки-роли */
.kab .btn--accent{ background:var(--k-accent); color:#fff; }
.kab .btn--accent:hover{ background:var(--k-accent-hi); }
.kab .btn--line{ background:var(--k-sheet); color:var(--k-ink); border-color:var(--k-line-2); }
.kab .btn--line:hover{ background:var(--k-s6); }
.kab .btn--danger{ background:var(--k-danger); color:#fff; }
.kab .packrow{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }

/* ---------- 4. ПОЛЯ ---------- */
.kab .field{ margin:0 0 16px; }
.kab .field > label{ display:block; font:600 14px/20px var(--font); color:var(--k-ink); margin:0 0 6px; }
.kab input[type=text], .kab input[type=url], .kab input[type=email],
.kab input[type=search], .kab input[type=password], .kab select, .kab textarea{
  width:100%; min-height:40px; padding:8px 12px; box-sizing:border-box;
  border:1px solid var(--k-line-2); border-radius:var(--k-r);
  background:var(--k-sheet); color:var(--k-text); font:400 14px/24px var(--font);
  transition:border-color var(--k-t-state) var(--k-e-state), box-shadow var(--k-t-state) var(--k-e-state);
}
.kab textarea{ min-height:96px; resize:vertical; }
.kab select[multiple]{ min-height:220px; padding:6px; }
.kab select[multiple] option{ padding:4px 8px; border-radius:6px; }
.kab input:focus, .kab select:focus, .kab textarea:focus{
  outline:0; border-color:var(--k-accent); box-shadow:0 0 0 3px var(--k-ring);
}
.kab input::placeholder, .kab textarea::placeholder{ color:var(--k-mute); }
.kab .check{
  display:flex; align-items:flex-start; gap:12px; padding:12px; margin:0 0 4px;
  border-radius:var(--k-r); font:400 14px/24px var(--font); color:var(--k-text); cursor:pointer;
  transition:background-color var(--k-t-state) var(--k-e-state);
}
.kab .check:hover{ background:var(--k-paper); }
.kab .check input{ margin:4px 0 0; width:16px; height:16px; accent-color:var(--k-accent); flex:none; }
.kab .check input[disabled] + *{ opacity:.5; }
/* Закрытая полоса объёма: видна, но не выбирается. Продавать то, что конвейер
   не закрывает, нельзя — замер 31.08.2026: 1200 слов не вытянула ни одна история. */
.kab .check.is-off{ opacity:.55; cursor:not-allowed; background:var(--k-paper); }
.kab .check.is-off:hover{ background:var(--k-paper); }

/* ---------- 5. КАРТОЧКИ, СТРОКИ, СПИСКИ ---------- */
.kab .row-card{
  border:1px solid var(--k-line); border-radius:var(--k-r-lg); padding:16px; margin:0 0 8px;
  transition:border-color var(--k-t-state) var(--k-e-state), background-color var(--k-t-state) var(--k-e-state);
}
.kab .row-card:hover{ border-color:var(--k-line-2); }
.kab .row-card .t{ font:600 16px/20px var(--font); color:var(--k-ink); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.kab .row-card .m{ font:400 14px/24px var(--font); color:var(--k-mute); margin-top:4px; }
.kab .row-card p{ margin:12px 0 0; }

.kab .pkgs{ display:flex; flex-direction:column; gap:2px; }
.kab .pkg{
  display:block; padding:12px; border:0; border-radius:var(--k-r); text-decoration:none; color:inherit;
  background:transparent; margin:0;
  transition:background-color var(--k-t-state) var(--k-e-state);
}
.kab .pkg:hover{ background:var(--k-s6); }
.kab .pkg__t{ display:block; font:600 14px/20px var(--font); color:var(--k-ink); }
.kab .pkg__m{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:4px;
  font:400 13px/18px var(--font); color:var(--k-mute); }
.kab .pkg__m b{ color:var(--k-text); font-weight:600; }

.kab .filt{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; margin:0 0 16px;
  padding-bottom:16px; border-bottom:1px solid var(--k-line);
}
.kab .filt__f{ display:flex; flex-direction:column; gap:6px; }
.kab .filt__f > span{ font:600 12px/16px var(--font); color:var(--k-mute); text-transform:none; letter-spacing:0; }
.kab .filt__f--grow{ flex:1 1 220px; }
.kab .filt__n{ margin-left:auto; font:600 14px/40px var(--font); color:var(--k-mute); }

/* ---------- 6. ТАБЛИЦЫ ---------- */
.kab .tabwrap{ overflow-x:auto; margin:0 0 16px; }
.kab table{ width:100%; border-collapse:collapse; font:400 14px/20px var(--font); }
.kab th{
  text-align:left; font:600 12px/16px var(--font); color:var(--k-mute);
  padding:8px 12px; border-bottom:1px solid var(--k-line); white-space:nowrap;
  text-transform:none; letter-spacing:0;
}
.kab td{ padding:12px; border-bottom:1px solid var(--k-line); color:var(--k-text); vertical-align:top; }
.kab tbody tr, .kab table tr{ transition:background-color var(--k-t-state) var(--k-e-state); }
.kab table tr:hover td{ background:var(--k-s6); }
.kab td.num, .kab th.num{ text-align:right; font-variant-numeric:tabular-nums; }

/* ---------- 7. СОСТОЯНИЯ-ЧИПЫ ---------- */
.kab .st{
  display:inline-block; border-radius:var(--k-pill); padding:2px 8px;
  font:600 12px/18px var(--font); text-transform:none; letter-spacing:0; white-space:nowrap;
}
.kab .st-ok{ background:var(--k-ok-soft); color:var(--k-ok); }
.kab .st-warn{ background:var(--k-warn-soft); color:var(--k-warn); }
.kab .st-bad{ background:var(--k-danger-soft); color:var(--k-danger); }
.kab .st-mut{ background:var(--k-s6); color:var(--k-mute); }

/* ---------- 8. ПАНЕЛИ-СООБЩЕНИЯ ---------- */
.kab .notice{
  background:var(--k-tint); color:var(--k-ink); border-radius:var(--k-r);
  padding:12px 16px; margin:0 0 16px; font:400 14px/22px var(--font);
}
.kab .notice-warn{ background:var(--k-warn-soft); color:var(--k-warn); }
.kab .notice-err{ background:var(--k-danger-soft); color:var(--k-danger); }
.kab .notice a{ color:inherit; }
.kab .paybox{ border:1px solid var(--k-line); border-radius:var(--k-r-lg); padding:16px; margin:0 0 16px; }

/* ---------- 9. ПУСТОЕ СОСТОЯНИЕ ---------- */
.kab .blank{
  max-width:768px; margin:56px auto; padding:0 24px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.kab .blank svg.blank__art{ width:256px; height:256px; display:block; margin-bottom:4px; }
.kab .blank b{
  display:block; font:800 36px/1.1 var(--font); letter-spacing:-.02em; color:var(--k-ink);
  text-wrap:balance;
}
.kab .blank p{ margin:0; font:400 14px/24px var(--font); color:var(--k-text); max-width:52ch; }
.kab .blank .go{ margin-top:8px; }
/* плитки действий под заголовком — три штуки, чернила 6 %, радиус 10 */
.kab .blank__tiles{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-top:8px; width:100%; }
.kab .blank__tile{
  flex:1 1 208px; max-width:256px; min-height:110px; padding:16px; text-align:left;
  background:var(--k-s6); border-radius:var(--k-r); color:var(--k-ink); text-decoration:none;
  display:flex; flex-direction:column; gap:4px;
  transition:background-color var(--k-t-state) var(--k-e-state);
}
.kab .blank__tile:hover{ background:var(--k-s12); }
.kab .blank__tile b{ font:600 16px/20px var(--font); letter-spacing:0; color:var(--k-ink); }
.kab .blank__tile span{ font:400 14px/24px var(--font); color:var(--k-text); }

/* ---------- 10. ПРОЧЕЕ ИЗ РАЗДЕЛОВ ---------- */
.kab .img-cands{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
.kab .img-cand{ border:1px solid var(--k-line); border-radius:var(--k-r-lg); padding:12px; }
.kab .img-cand img{ width:100%; border-radius:var(--k-r-sm); display:block; }
.kab .img-cand .ph{
  aspect-ratio:16/9; display:grid; place-items:center; text-align:center; padding:12px;
  background:var(--k-s6); border-radius:var(--k-r-sm); font:400 13px/18px var(--font); color:var(--k-mute);
}
.kab .img-cand .lic{ margin-top:8px; font:600 12px/16px var(--font); color:var(--k-ink); text-transform:none; letter-spacing:0; }
.kab .img-cand .trm{ margin-top:4px; font:400 12px/18px var(--font); color:var(--k-mute); }
.kab .accmsg:not(:empty){ margin-top:8px; }
.kab .ev{ border:1px solid var(--k-line); border-radius:var(--k-r-lg); padding:12px 16px; margin:0 0 16px; }
.kab .ev summary{ cursor:pointer; font:600 14px/24px var(--font); color:var(--k-ink); }
.kab .ev pre{ overflow-x:auto; font-size:12px; line-height:18px; color:var(--k-text); }
.kab .pkg-html{
  border:1px solid var(--k-line); border-radius:var(--k-r-lg); padding:24px; margin:0 0 24px;
  font:400 16px/28px var(--font); color:var(--k-text);
}
.kab .pkg-html h2, .kab .pkg-html h3{ font-size:20px; line-height:28px; margin:24px 0 8px;
  border:0; padding:0; color:var(--k-ink); }
.kab .go{ margin:16px 0 0; }
.kab ol, .kab ul{ margin:0 0 16px; padding-left:20px; }
.kab li{ margin-bottom:6px; }

/* ---------- 11. МОУШН: три длительности по ролям (донор: .15 / .2 / .25) ---------- */
@keyframes kab-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes kab-rail{ from{ opacity:0; transform:translateX(-6px); } to{ opacity:1; transform:none; } }
@keyframes kab-pop{ 0%{ transform:scale(.96); } 100%{ transform:scale(1); } }

.kab__body{ animation:kab-in .28s var(--k-e-in) both; }
.kab__nav .kab__item{ animation:kab-rail .3s var(--k-e-in) both; animation-delay:calc(var(--i,0) * 30ms); }
.kab .notice{ animation:kab-in .24s var(--k-e-in) both; }
.kab .blank{ animation:kab-in .34s var(--k-e-in) both; }
.kab .blank__tile{ animation:kab-in .3s var(--k-e-in) both; animation-delay:calc(var(--i,0) * 60ms + 80ms); }
.kab .pkgs .pkg{ animation:kab-in .26s var(--k-e-in) both; animation-delay:calc(var(--i,0) * 18ms); }
.kab .kab__card{ animation:kab-pop .32s var(--k-e-pop) both; }

@media (prefers-reduced-motion:reduce){
  .kab *, .kab *::before, .kab *::after{
    animation:none !important; transition:none !important;
  }
  .kab__app{ transition:none; }
}

/* ---------- 14. СБРОС ЧУЖОГО ОФОРМЛЕНИЯ ----------
 * network.css одевает те же классы для витрины и операторской. Здесь он гасится
 * точечно — трогать сам network.css нельзя, он нужен четырём другим страницам. */
.kab .pkgs{ border:0; border-radius:0; overflow:visible; }
.kab .pkg{ border-bottom:0; border-left:0; }
.kab .pkg:hover{ border-left-color:transparent; }
.kab .blank{ border:0; background:transparent; padding:0; max-width:768px; }
.kab .blank b{ margin-bottom:0; }
.kab .blank p{ color:var(--k-text); }
.kab .tabwrap{ border:0; border-radius:0; background:transparent; }
/* styles.css рисует у сообщений акцентную линейку слева и скруглённый хвост —
 * у донора панель ровная и цвет несёт только заливка. */
.kab .notice, .kab .foot-note{ border-left:0; border-radius:var(--k-r); max-width:none; }
.kab .foot-note{
  background:transparent; border-radius:0; border-top:1px solid var(--k-line);
  margin:32px auto 0; border-left:0;
}
.kab .img-cand{ gap:0; }
.kab .img-cand .lic{ color:var(--k-ink); }
.kab .img-cand .btn-quiet{ width:auto; }

/* ---------- 13. ГОСТЬ И ЯЗЫК ---------- */
.kab__app--solo{ grid-template-columns:minmax(0,1fr); }
.kab__app--solo .kab__sheet{ margin:8px; }
.kab__act .net-tab-lang{ font-size:13px; }

/* ---------- 15. ПОДБОР СВОЙСТВ ИЗДАНИЯ ----------
 * Устройство как у рубрик таргета в Мета: ввод с подсказкой плюс раскрываемый
 * каталог по группам. Выбранное — чипы, снимаются нажатием. */
.kab .cols3{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:0 12px; }
.kab .lbl-act{ float:right; margin-left:8px; height:24px; padding:2px 10px; font-size:12px; }

.kab .pick{ margin:0 0 24px; }
.kab .pick__chips{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 8px; }
.kab .pick__chips:empty{ display:none; }
.kab .chip{
  display:inline-flex; align-items:center; gap:6px; border:0; cursor:pointer;
  background:var(--k-accent); color:#fff; border-radius:var(--k-pill);
  padding:4px 10px; font:500 13px/18px var(--font);
  transition:background-color var(--k-t-state) var(--k-e-state);
}
.kab .chip:hover{ background:var(--k-accent-hi); }
.kab .chip span{ opacity:.7; font-size:14px; }
.kab .chip--pick{ background:var(--k-s6); color:var(--k-ink); }
.kab .chip--pick:hover{ background:var(--k-s12); }
.kab .chip--pick.is-on{ background:var(--k-accent); color:#fff; }

.kab .pick__in{ width:100%; }
.kab .pick{ position:relative; }
.kab .pick__menu{
  position:absolute; z-index:10; left:0; right:0; margin-top:4px; max-height:320px; overflow:auto;
  background:var(--k-sheet); border:1px solid var(--k-line-2); border-radius:var(--k-r);
}
.kab .pick__opt{
  display:flex; flex-direction:column; gap:2px; width:100%; text-align:left; cursor:pointer;
  border:0; background:transparent; padding:8px 12px; font:400 14px/20px var(--font); color:var(--k-text);
  transition:background-color var(--k-t-state) var(--k-e-state);
}
.kab .pick__opt:hover{ background:var(--k-s6); }
.kab .pick__opt b{ color:var(--k-ink); font-weight:600; }
.kab .pick__opt span{ font-size:12px; color:var(--k-mute); }
.kab .pick__none{ margin:0; padding:12px; font:400 13px/20px var(--font); color:var(--k-mute); }
.kab .pick__row{ display:flex; align-items:center; gap:12px; margin:8px 0 0; }
.kab .pick__cat{
  margin-top:12px; max-height:420px; overflow:auto;
  border:1px solid var(--k-line); border-radius:var(--k-r-lg); padding:4px 16px 16px;
}
.kab .pick__grp h4{ margin:16px 0 8px; font:600 13px/18px var(--font); color:var(--k-mute); border:0; padding:0; }
.kab .pick__opts{ display:flex; flex-wrap:wrap; gap:6px; }

/* ---------- 12. УЗКИЕ ЭКРАНЫ ---------- */
@media (max-width:1023px){
  .kab__app{ grid-template-columns:minmax(0,1fr); }
  .kab__rail{
    position:fixed; z-index:40; top:0; left:0; width:var(--k-rail); height:100dvh;
    background:var(--k-sheet); border-right:1px solid var(--k-line);
    transform:translateX(-100%); transition:transform var(--k-t-layout) var(--k-e-in);
  }
  .kab__app.is-open .kab__rail{ transform:none; }
  .kab__scrim{
    display:block; position:fixed; inset:0; z-index:30; background:rgba(10,37,64,.32);
    opacity:0; pointer-events:none; transition:opacity var(--k-t-layout) var(--k-e-state);
  }
  .kab__app.is-open .kab__scrim{ opacity:1; pointer-events:auto; }
  .kab__sheet{ margin:0; border-radius:0; border-left:0; border-right:0; }
  .kab__head{ border-radius:0; }
  .kab__burger{
    display:grid; place-items:center; width:40px; height:40px; flex:none;
    border:0; background:transparent; color:var(--k-ink); border-radius:var(--k-r-sm); cursor:pointer;
  }
  .kab__burger:hover{ background:var(--k-s12); }
  .kab__wrap{ padding:0 16px; }
  .kab__h1{ font-size:20px; line-height:32px; }
  .kab .blank{ margin:32px auto; padding:0 8px; }
  .kab .blank svg.blank__art{ width:180px; height:180px; }
  .kab .blank b{ font-size:26px; }
  .kab .blank__tiles{ flex-direction:column; }
  .kab .blank__tile{ max-width:none; min-height:0; }
}
@media (max-width:600px){
  .kab__act .btn span{ display:none; }
  .kab__act .btn{ padding:8px 12px; }
  .kab #pane h3{ margin-top:28px; }
}

/* Пример вызова API: моношрифт, перенос длинного адреса, прокрутка внутри блока —
   строка запроса длиннее колонки, и страница от неё ехать вбок не должна. */
.apiex{
  font-family:JetBrains Mono,ui-monospace,Consolas,monospace;
  font-size:12.5px; line-height:1.65;
  background:var(--k-tint); color:var(--k-ink);
  border:1px solid var(--k-line); border-radius:var(--k-r);
  padding:12px 14px; margin:12px 0 0;
  overflow-x:auto; white-space:pre-wrap; word-break:break-word;
}
table .k{ font-family:JetBrains Mono,ui-monospace,Consolas,monospace; font-size:12.5px; white-space:nowrap; }


/* ---------- 16. НАСТРОЙКИ УЧЁТНОЙ ЗАПИСИ ----------
 * Три панели смонтированы из /account.js: та же логика служит и своей
 * странице, и кабинету. Там их одевает desk.css, здесь — эти правила.
 * Всё под `.acc`: классы вроде .panel и .actions слишком общие, чтобы
 * пускать их гулять по остальным экранам. */
.kab .acc{ margin-top:32px; }

.kab .acc-tabs{
  display:flex; gap:4px; margin:0 0 24px; padding:4px;
  background:var(--k-s6); border-radius:var(--k-r); width:fit-content; max-width:100%;
  overflow-x:auto;
}
.kab .acc-tab{
  flex:none; height:32px; padding:4px 14px; border:0; border-radius:var(--k-r-sm);
  background:none; color:var(--k-text); cursor:pointer; white-space:nowrap;
  font:500 14px/24px var(--font);
  transition:background-color var(--k-t-state) var(--k-e-state), color var(--k-t-state) var(--k-e-state);
}
.kab .acc-tab:hover{ color:var(--k-ink); }
.kab .acc-tab.is-on{ background:var(--k-sheet); color:var(--k-ink); box-shadow:0 1px 2px rgba(10,37,64,.08); }

.kab .acc .panel > h2:first-child{ margin:0 0 4px; }
.kab .acc h2{ font:600 18px/26px var(--font); color:var(--k-ink); margin:32px 0 4px; }
.kab .acc .sub{ font:400 14px/20px var(--font); color:var(--k-mute); margin:0 0 20px; max-width:62ch; }
.kab .acc section{ border:0; padding:0; margin:32px 0 0; }
.kab .acc .hint{ font:400 13px/18px var(--font); color:var(--k-mute); margin:6px 0 0; max-width:62ch; }
/* Два поля в строку — на узких распадаются в столбец. */
.kab .acc .pair{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0 16px; }

/* Языки работы: кнопки-переключатели, состояние в aria-pressed. */
.kab .acc .tagrow{ display:flex; flex-wrap:wrap; gap:6px; }
.kab .acc .tagrow button{
  height:32px; padding:4px 12px; border:1px solid var(--k-line-2); border-radius:var(--k-pill);
  background:var(--k-sheet); color:var(--k-text); cursor:pointer; font:400 13px/22px var(--font);
  transition:background-color var(--k-t-state) var(--k-e-state), border-color var(--k-t-state) var(--k-e-state);
}
.kab .acc .tagrow button:hover{ border-color:var(--k-ink); color:var(--k-ink); }
.kab .acc .tagrow button[aria-pressed="true"]{
  background:var(--k-ink); border-color:var(--k-ink); color:var(--k-sheet);
}
.kab .acc .tagrow .more{ border-style:dashed; }

/* Аватар. */
.kab .acc .avatar-edit{ display:flex; align-items:center; gap:16px; margin-top:8px; }
.kab .acc .ava{
  width:64px; height:64px; border-radius:var(--k-pill); object-fit:cover; flex:none;
  background:var(--k-ink); color:var(--k-sheet);
  display:grid; place-items:center; font:600 24px/1 var(--font);
}
.kab .acc .avatar-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
/* Столкновение имён: у заглушки аватара класс `ava blank`, а `.blank` в кабинете —
   это пустое состояние экрана (`margin:56px auto; text-align:center`). Без сброса
   аватар уезжал на 200 px вправо и обзаводился отбивкой в 56 px. */
.kab .acc .ava.blank{ max-width:none; margin:0; padding:0; }

/* Поле с приставкой «@». */
.kab .acc .prefix{ display:flex; align-items:stretch; }
.kab .acc .prefix > span{
  display:grid; place-items:center; min-width:36px; padding:0 10px;
  border:1px solid var(--k-line-2); border-right:0;
  border-radius:var(--k-r) 0 0 var(--k-r);
  background:var(--k-s6); color:var(--k-mute); font:400 14px/24px var(--font);
}
.kab .acc .prefix input{ border-radius:0 var(--k-r) var(--k-r) 0; }

/* Строка действий и отметка «сохранено». */
.kab .acc .actions{ display:flex; align-items:center; gap:12px; margin-top:20px; }
.kab .acc .saved{
  font:500 13px/20px var(--font); color:var(--k-ok, #0B6144);
  opacity:0; transition:opacity var(--k-t-state) var(--k-e-state);
}
.kab .acc .saved.on{ opacity:1; }
.kab .acc .note{
  margin:12px 0 0; padding:10px 14px; border-radius:var(--k-r);
  background:var(--k-s6); color:var(--k-text); font:400 13px/20px var(--font);
}
.kab .acc .note.err{ background:var(--k-danger-soft); color:var(--k-danger); }
.kab .acc .note.ok{ background:var(--k-ok-soft, var(--k-s6)); color:var(--k-ok, var(--k-ink)); }

/* Сеансы. */
.kab .acc .rows-plain{ list-style:none; margin:0; padding:0; }
.kab .acc .rows-plain li{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:12px 0; border-bottom:1px solid var(--k-line);
  font:400 14px/20px var(--font); color:var(--k-text);
}
.kab .acc .rows-plain li:last-child{ border-bottom:0; }
.kab .acc .rows-plain .when{ font:400 13px/20px var(--font); color:var(--k-mute); white-space:nowrap; }

/* Кнопки страницы называются иначе, чем в кабинете: .ghost — это наша тихая. */
.kab .acc .btn.ghost{
  height:32px; padding:4px 12px; border-radius:var(--k-r-sm);
  background:var(--k-s6); color:var(--k-ink);
}
.kab .acc .btn.ghost:hover{ background:var(--k-s12); }
.kab .acc .linkish{
  border:0; background:none; padding:0; cursor:pointer;
  color:var(--k-accent); font:400 14px/20px var(--font); text-underline-offset:2px;
}
.kab .acc .linkish:hover{ text-decoration:underline; }
.kab .acc .linkish.quiet{ color:var(--k-mute); }


/* ---------- 17. СПИСОК-ПЕРЕХОД ----------
 * Приём донора (app.kit.com/account_settings): раздел — это не россыпь
 * карточек, а сгруппированные строки в одной рамке. Строка ведёт вглубь;
 * значок слева, пояснение под заголовком, шеврон справа. */
.kab .kcol{ max-width:720px; }

.kab .khead{
  display:grid; grid-template-columns:72px minmax(0,1fr); align-items:center; gap:20px;
  margin:0 0 40px;
}
.kab .khead__ava{
  width:72px; height:72px; border-radius:var(--k-pill); overflow:hidden;
  background:var(--k-ink); color:var(--k-sheet);
  display:grid; place-items:center; font:600 26px/1 var(--font);
}
.kab .khead__ava img{ width:100%; height:100%; object-fit:cover; }
.kab .khead b{ display:block; font:600 20px/28px var(--font); color:var(--k-ink); }
.kab .khead span{ display:block; font:400 14px/22px var(--font); color:var(--k-text); }
.kab .khead span + span{ color:var(--k-mute); }

.kab .kgroup{ font:600 20px/28px var(--font); color:var(--k-ink); margin:40px 0 12px; }
.kab .kgroup:first-child{ margin-top:0; }

.kab .klist{
  border:1px solid var(--k-line); border-radius:var(--k-r); background:var(--k-sheet);
  overflow:hidden;
}
.kab .klist__row{
  display:grid; grid-template-columns:40px minmax(0,1fr) 20px; align-items:center; gap:16px;
  padding:16px; border-bottom:1px solid var(--k-line);
  color:var(--k-ink); text-decoration:none; width:100%; text-align:left;
  background:none; border-left:0; border-right:0; border-top:0; cursor:pointer;
  font:inherit;
  transition:background-color var(--k-t-state) var(--k-e-state);
}
.kab .klist__row:last-child{ border-bottom:0; }
.kab .klist__row:hover{ background:var(--k-s6); }
.kab .klist__ico{
  width:40px; height:40px; border-radius:var(--k-r-sm); background:var(--k-s6);
  display:grid; place-items:center; color:var(--k-ink);
}
.kab .klist__ico svg{ width:20px; height:20px; }
.kab .klist__t{ display:block; font:600 15px/22px var(--font); color:var(--k-ink); }
.kab .klist__d{ display:block; font:400 14px/20px var(--font); color:var(--k-mute); margin-top:2px; }
.kab .klist__chev{ width:20px; height:20px; color:var(--k-mute); justify-self:end; }
/* Строка со счётчиком: третья колонка под него, шеврон уезжает в четвёртую. */
.kab .klist__row.has-meta{ grid-template-columns:40px minmax(0,1fr) auto 20px; }
.kab .klist__meta{ justify-self:end; white-space:nowrap; font:500 13px/20px var(--font); color:var(--k-mute); }

/* Строка без перехода: то, чего ещё нет. Не гаснет до неразличимости —
   издатель должен прочитать, что его ждёт, но не искать, куда нажать. */
.kab .klist__row.is-soon{ cursor:default; }
.kab .klist__row.is-soon:hover{ background:none; }
.kab .klist__row.is-soon .klist__ico{ color:var(--k-mute); }
.kab .klist__soon{
  justify-self:end; white-space:nowrap;
  font:500 12px/20px var(--font); color:var(--k-mute);
}

/* Подстраница раздела: возврат к списку такой же, как «Все потоки». */
.kab .kback{
  display:inline-flex; align-items:center; gap:6px; margin:0 0 24px;
  font:500 14px/20px var(--font); color:var(--k-text); text-decoration:none;
}
.kab .kback:hover{ color:var(--k-ink); }
.kab .kback svg{ width:16px; height:16px; }

@media (max-width:600px){
  .kab .khead{ grid-template-columns:56px minmax(0,1fr); gap:16px; margin-bottom:32px; }
  .kab .khead__ava{ width:56px; height:56px; font-size:20px; }
  .kab .klist__row{ padding:14px 12px; gap:4px 12px; }
  /* На узких правая колонка душила описание в ленточку, а «Скоро» налезало
     на текст. Метка уходит под заголовок, ряды расставлены явно — иначе
     авторазмещение сажает шеврон под значок. */
  .kab .klist__row,
  .kab .klist__row.has-meta{ grid-template-columns:40px minmax(0,1fr) 20px; }
  .kab .klist__ico{ grid-column:1; grid-row:1 / span 2; align-self:start; }
  .kab .klist__row > span:nth-child(2){ grid-column:2; grid-row:1; }
  .kab .klist__meta,
  .kab .klist__soon{ grid-column:2; grid-row:2; justify-self:start; }
  .kab .klist__chev{ grid-column:3; grid-row:1; align-self:center; }
}


/* ---------- 18. ТАРИФ И КРЕДИТЫ ----------
 * Донор (app.kit.com/upgrade): выбор тарифа — не строки таблицы, а крупные
 * карточки с радиопереключателем; свой тариф показан отдельной строкой с
 * полосой расхода. Счетов и банковского перевода в продукте нет: платят
 * картой на месте, поэтому и оформления под них здесь нет. */
.kab .planrow{
  display:flex; flex-direction:column; gap:6px; margin:0 0 16px;
  padding:16px; border:1px solid var(--k-line); border-radius:var(--k-r); background:var(--k-sheet);
}
.kab .planrow b{ font:600 18px/26px var(--font); color:var(--k-ink); }
.kab .planrow span{ font:400 14px/20px var(--font); color:var(--k-mute); }
.kab .usage{ display:flex; align-items:center; gap:12px; margin-top:6px; }
.kab .usage__bar{
  flex:1; height:8px; border-radius:var(--k-pill); background:var(--k-s12); overflow:hidden;
}
.kab .usage__bar i{ display:block; height:100%; background:var(--k-accent); }
.kab .usage__n{
  font:500 13px/20px var(--font); color:var(--k-mute); white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.kab .pcards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin:0 0 16px;
}
.kab .pcard{
  display:flex; align-items:flex-start; gap:12px; cursor:pointer;
  padding:16px; border:1px solid var(--k-line-2); border-radius:var(--k-r); background:var(--k-sheet);
  transition:border-color var(--k-t-state) var(--k-e-state), box-shadow var(--k-t-state) var(--k-e-state);
}
.kab .pcard:hover{ border-color:var(--k-ink); }
.kab .pcard:has(input:checked){ border-color:var(--k-ink); box-shadow:0 0 0 1px var(--k-ink) inset; }
.kab .pcard input{ margin:3px 0 0; width:18px; height:18px; accent-color:var(--k-ink); flex:none; }
.kab .pcard__b{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.kab .pcard__b b{ font:600 15px/22px var(--font); color:var(--k-ink); }
.kab .pcard__b > span{ font:400 14px/20px var(--font); color:var(--k-text); }
.kab .pcard__n{ font:400 13px/18px var(--font); color:var(--k-mute); }
.kab .pcard.is-off{ opacity:.55; cursor:not-allowed; }


/* ---------- 19. ПОДДЕРЖКА ----------
 * Круглая кнопка в углу и панель над ней. Выглядит как чат, но за ней
 * обращение с номером: ответ приходит, даже когда вкладка закрыта.
 * Слой фиксированный и лежит на <body>, вне #app — кабинет перерисовывает
 * #app на каждом переходе, и виджет внутри него умер бы посреди переписки. */
.sup{ position:fixed; right:20px; bottom:20px; z-index:900; }

.sup__btn{
  position:relative; width:56px; height:56px; border:0; border-radius:var(--k-pill);
  background:var(--k-ink); color:var(--k-sheet); cursor:pointer;
  display:grid; place-items:center; margin-left:auto;
  box-shadow:0 8px 24px rgba(10,37,64,.24), 0 2px 6px rgba(0,0,0,.12);
  transition:transform var(--k-t-state) var(--k-e-state), background-color var(--k-t-state) var(--k-e-state);
}
.sup__btn svg{ width:26px; height:26px; }
.sup__btn:hover{ background:var(--k-ink-hi); transform:translateY(-1px); }
.sup__btn:active{ transform:scale(.97); }
.sup__badge{
  position:absolute; top:-2px; right:-2px; min-width:20px; height:20px; padding:0 6px;
  border-radius:var(--k-pill); background:var(--k-danger); color:#fff;
  font:600 12px/20px var(--font); text-align:center;
  box-shadow:0 0 0 2px var(--k-paper);
}

.sup__panel{
  position:absolute; right:0; bottom:68px; width:min(380px, calc(100vw - 40px));
  max-height:min(560px, calc(100vh - 120px));
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--k-sheet); border:1px solid var(--k-line); border-radius:var(--k-r-lg);
  box-shadow:0 20px 48px rgba(10,37,64,.20), 0 4px 12px rgba(0,0,0,.10);
}
.sup__panel[hidden]{ display:none; }

.sup__head{
  flex:none; display:flex; align-items:center; gap:8px; padding:14px 16px;
  border-bottom:1px solid var(--k-line);
}
.sup__head b{ font:600 15px/22px var(--font); color:var(--k-ink); flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sup__back, .sup__x{
  width:28px; height:28px; flex:none; border:0; background:none; cursor:pointer;
  border-radius:var(--k-r-sm); color:var(--k-text);
  font:400 20px/1 var(--font); display:grid; place-items:center;
}
.sup__back:hover, .sup__x:hover{ background:var(--k-s6); color:var(--k-ink); }

.sup__body{ flex:1; min-height:0; overflow:auto; padding:16px; display:flex; flex-direction:column; gap:12px; }

.sup__empty b{ display:block; font:600 16px/24px var(--font); color:var(--k-ink); margin-bottom:6px; }
.sup__empty p{ margin:0; font:400 14px/20px var(--font); color:var(--k-mute); }
.sup__note{ margin:0; font:400 14px/20px var(--font); color:var(--k-mute); }

.sup__cta{
  flex:none; width:100%; height:40px; border:0; border-radius:var(--k-r);
  background:var(--k-accent); color:var(--k-on-accent); cursor:pointer;
  font:600 14px/24px var(--font);
  transition:background-color var(--k-t-state) var(--k-e-state);
}
.sup__cta:hover{ background:var(--k-accent-hi); }

.sup__list{ display:flex; flex-direction:column; gap:4px; }
.sup__row{
  position:relative; display:flex; flex-direction:column; gap:2px; width:100%;
  padding:10px 24px 10px 12px; border:0; border-radius:var(--k-r); background:none;
  cursor:pointer; text-align:left;
  transition:background-color var(--k-t-state) var(--k-e-state);
}
.sup__row:hover{ background:var(--k-s6); }
.sup__row-t{ font:600 14px/20px var(--font); color:var(--k-ink); }
.sup__row-m{ font:400 12px/18px var(--font); color:var(--k-mute); }
.sup__row.is-unread .sup__row-t{ color:var(--k-ink); }
.sup__dot{
  position:absolute; right:10px; top:50%; margin-top:-4px;
  width:8px; height:8px; border-radius:var(--k-pill); background:var(--k-accent);
}

.sup__msgs{ display:flex; flex-direction:column; gap:12px; }
.sup__msg{ max-width:88%; align-self:flex-end; }
.sup__msg.is-desk{ align-self:flex-start; }
.sup__msg-h{ font:500 11px/16px var(--font); color:var(--k-mute); margin-bottom:4px; }
.sup__msg-b{
  padding:10px 12px; border-radius:var(--k-r); background:var(--k-ink); color:var(--k-sheet);
  font:400 14px/20px var(--font); overflow-wrap:anywhere;
}
.sup__msg.is-desk .sup__msg-b{ background:var(--k-s6); color:var(--k-ink); }

.sup__reply{ flex:none; display:flex; gap:8px; align-items:flex-end; }
.sup__reply textarea{
  flex:1; min-height:40px; max-height:120px; padding:9px 12px; resize:vertical;
  border:1px solid var(--k-line-2); border-radius:var(--k-r); background:var(--k-sheet);
  color:var(--k-text); font:400 14px/20px var(--font);
}
.sup__send{
  flex:none; height:40px; padding:0 14px; border:0; border-radius:var(--k-r);
  background:var(--k-ink); color:var(--k-sheet); cursor:pointer; font:600 14px/24px var(--font);
}
.sup__send:hover{ background:var(--k-ink-hi); }

.sup__form{ display:flex; flex-direction:column; gap:6px; }
.sup__form label{ font:600 13px/20px var(--font); color:var(--k-ink); margin-top:6px; }
.sup__form input, .sup__form textarea{
  width:100%; padding:9px 12px; border:1px solid var(--k-line-2); border-radius:var(--k-r);
  background:var(--k-sheet); color:var(--k-text); font:400 14px/20px var(--font);
}
.sup__form textarea{ resize:vertical; }
.sup__err{ margin:4px 0 0; font:400 13px/18px var(--font); color:var(--k-danger); }

/* На узких панель занимает почти весь экран: 380 px там просто не помещаются. */
@media (max-width:520px){
  .sup{ right:12px; bottom:12px; }
  .sup__panel{ width:calc(100vw - 24px); max-height:calc(100vh - 100px); }
}


/* ---------- 20. СТРАНИЦА ОПЛАТЫ ----------
 * Сначала «за что и сколько», и только потом форма: человек должен видеть
 * сумму до того, как введёт карту, а не после. */
.kab .paysum{ margin:0 0 8px; }
.kab .paysum__what{
  padding:16px; border:1px solid var(--k-line); border-radius:var(--k-r) var(--k-r) 0 0;
  border-bottom:0; background:var(--k-sheet);
  font:600 16px/24px var(--font); color:var(--k-ink);
}
.kab .paysum .tabwrap{ margin-top:0; border-radius:0 0 var(--k-r) var(--k-r); }
.kab .paysum table{ min-width:0; }
.kab .paysum td{ padding:10px 16px; }
#payelement{ margin:0 0 16px; }


/* ─── 21. Переключатель срока оплаты ─────────────────────────────────
   Год стоит как десять месяцев, поэтому выгода написана прямо на кнопке:
   переключатель без объяснения читается как лишний вопрос. */
.kab .termsw{display:inline-flex;gap:2px;padding:3px;margin:0 0 18px;
  background:var(--k-sunken);border-radius:var(--k-r-pill,999px)}
.kab .termsw__b{
  display:inline-flex;align-items:center;gap:8px;
  font:inherit;font-size:14px;font-weight:600;line-height:1;
  padding:9px 16px;border:0;border-radius:var(--k-r-pill,999px);
  background:transparent;color:var(--k-ink-2);cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.kab .termsw__b:hover{color:var(--k-ink)}
.kab .termsw__b.is-on{background:var(--k-bg);color:var(--k-ink);
  box-shadow:0 1px 2px rgba(10,37,64,.10)}
.kab .termsw__save{
  font-family:var(--k-mono,ui-monospace,monospace);font-size:10px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--k-accent);background:var(--k-accent-soft);
  padding:3px 7px;border-radius:4px;
}
@media(max-width:560px){
  .kab .termsw{display:flex;width:100%}
  .kab .termsw__b{flex:1;justify-content:center}
}