/* ============================================================
   БАЗА ЗНАНИЙ POWERMTA — публичная витрина каталога
   Дизайн, размеры и палитра взяты 1:1 из кабинета Хаба:
   resources/js/Pages/Cabinet/Kb/Index.vue + тема Velzon (dark).
   Каталог живёт в интерфейсной сетке (13px, Poppins), а не в
   масштабируемой сетке сайта — так же, как в кабинете.
   ============================================================ */

/* Poppins — как в кабинете (латиница; кириллицы в гарнитуре нет,
   её рисует системный sans-serif — ровно то же, что в Хабе). */
@font-face{font-family:Poppins;src:url('../fonts/poppins-400-latin.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:Poppins;src:url('../fonts/poppins-500-latin.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:Poppins;src:url('../fonts/poppins-600-latin.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- палитра и база каталога (значения кабинета) ---------- */
.kb-page{
  --hub-bg:#16191c; --hub-card:#1d2025; --hub-card2:#15181c;
  --hub-line:rgba(255,255,255,.08); --hub-line2:rgba(255,255,255,.14);
  --hub-tx:#ced4da; --hub-mut:#878a99; --hub-dim:#6b7280;
  --hub-pri:#6366f1; --hub-pri2:#818cf8; --hub-pri-rgb:99,102,241;
  --hub-warn:#f5b544; --hub-ok:#22c55e; --hub-bad:#f0654a; --hub-info:#38bdf8;
  --hub-mono:ui-monospace,Menlo,Monaco,Consolas,monospace;
  /* Сетка страницы — своя, а не из main.css: страницы каталога рисует плагин,
     и тащить ради трёх переменных 64 КБ стилей главной незачем. Значения те же,
     поэтому каталог выравнен с шапкой и футером сайта. */
  --u:clamp(.574px,calc(100vw / 1672),1.148px);
  --content:1920px;--gutter:calc(82 * var(--u));
  background:var(--hub-bg);color:var(--hub-tx);
  font-weight:400;font-size:var(--t-body);line-height:1.65;font-family:var(--t-text);-webkit-font-smoothing:antialiased;
}
.kb-page *,.kb-page *::before,.kb-page *::after{box-sizing:border-box}
.kb-wrap{width:100%;max-width:var(--content);margin-inline:auto;
  padding:34px var(--gutter) 60px}
.kb-page a{color:inherit;text-decoration:none}
.kb-page h1,.kb-page h2{margin:0;color:#fff}
.ri{width:1em;height:1em;fill:currentColor;flex:none;display:block}
.kb-dim{color:var(--hub-dim)}

/* ---------- шапка раздела ---------- */
.kb-hero{
  background:linear-gradient(115deg,rgba(99,102,241,.14),rgba(56,189,248,.06) 46%,transparent 72%),var(--hub-card);
  border:1px solid var(--hub-line);border-radius:12px;padding:20px 22px;margin-bottom:14px}
.kb-hero h1{font-size:var(--t-h1);font-weight:800;letter-spacing:-.03em;line-height:1.07;font-family:var(--t-head)}
.kb-hero h1 span{color:var(--hub-pri2)}
.kb-hero p{font-size:var(--t-lead);color:var(--hub-mut);margin:7px 0 0;max-width:76ch;line-height:1.65}
.kb-search{display:flex;gap:10px;margin-top:16px}
.kb-search__box{flex:1;display:flex;align-items:center;gap:10px;background:#0b1016;
  border:1px solid var(--hub-line2);border-radius:9px;padding:11px 14px;color:var(--hub-dim)}
.kb-search__box input{flex:1;min-width:0;background:none;border:0;outline:0;color:#e7edf5;
  font-family:var(--t-text);font-size:var(--t-body);line-height:1.65}
.kb-search__box input::placeholder{color:var(--hub-dim)}
.kb-search__go{background:var(--hub-pri);border:1px solid var(--hub-pri);color:#fff;
  border-radius:9px;padding:0 22px;font-family:var(--t-text);font-size:var(--t-body);font-weight:600;cursor:pointer;line-height:1.65}
.kb-search__go:hover{background:#4f52e8;border-color:#4f52e8}
.kb-pop{margin-top:10px;font-size:var(--t-small);color:var(--hub-dim);display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.kb-dir{font-family:var(--hub-mono);font-size:var(--t-body);color:var(--hub-warn);line-height:1.65}
.kb-dir--link{border-bottom:1px dotted rgba(245,181,68,.45)}
.kb-more{margin-left:auto;font-size:var(--t-small);color:var(--hub-pri2)}
.kb-more--inline{margin-left:0}

/* ---------- плитки-счётчики ---------- */
.kb-tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:14px}
.kb-tile{background:var(--hub-card);border:1px solid var(--hub-line);border-radius:10px;
  padding:14px 15px;position:relative;overflow:hidden}
.kb-tile::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:#4a5566}
.kb-tile b{display:block;font-size:26px;font-weight:800;line-height:1.05;margin-bottom:5px}
.kb-tile__n{display:block;font-size:var(--t-list);font-weight:600}
.kb-tile__d{display:block;font-size:var(--t-label);color:var(--hub-dim);margin-top:3px;line-height:1.4}
.kb-tile--dir::before{background:#f5b544} .kb-tile--dir b{color:#f5b544}
.kb-tile--con::before{background:#38bdf8} .kb-tile--con b{color:#7dd3fc}
.kb-tile--rec::before{background:#6fd08c} .kb-tile--rec b{color:#6fd08c}
.kb-tile--hub::before{background:#6366f1}
.kb-tile--hub{background:linear-gradient(160deg,rgba(99,102,241,.13),transparent 70%),var(--hub-card);
  border-color:rgba(99,102,241,.32)}
.kb-tile--hub b{color:var(--hub-pri2)}

/* ---------- карточка-блок ---------- */
.kb-card{background:var(--hub-card);border:1px solid var(--hub-line);border-radius:10px;margin-bottom:14px}
.kb-card__h{min-height:46px;padding:8px 16px;border-bottom:1px solid var(--hub-line);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kb-card__h h2{font-size:var(--t-h4);font-weight:800;font-family:var(--t-head);letter-spacing:-.01em;line-height:1.33}
.kb-card__b{padding:16px}
.kb-note{font-size:var(--t-caption);color:var(--hub-mut)}
.kb-zh{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-size:var(--t-label);background:rgba(99,102,241,.2);border:1px solid rgba(99,102,241,.4);color:#a5b4fc}
.kb-zh--read{background:rgba(56,189,248,.18);border-color:rgba(56,189,248,.4);color:#7dd3fc}
.kb-zh--rec{background:rgba(245,181,68,.16);border-color:rgba(245,181,68,.38);color:#f5b544}
.kb-card--hub{background:linear-gradient(160deg,rgba(99,102,241,.09),rgba(99,102,241,.02) 52%,transparent),var(--hub-card);
  border-color:rgba(99,102,241,.26)}
.kb-card--read{background:linear-gradient(160deg,rgba(56,189,248,.09),rgba(56,189,248,.02) 52%,transparent),var(--hub-card);
  border-color:rgba(56,189,248,.26)}
.kb-card--read .kb-card__h h2{color:#7dd3fc}
.kb-card--rec{background:linear-gradient(160deg,rgba(245,181,68,.08),rgba(245,181,68,.02) 52%,transparent),var(--hub-card);
  border-color:rgba(245,181,68,.24)}
.kb-card--rec .kb-card__h h2{color:#f5b544}

/* ---------- начните отсюда ---------- */
.kb-start{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kb-st{display:flex;gap:12px;background:var(--hub-card2);border:1px solid rgba(56,189,248,.19);
  border-radius:9px;padding:13px 14px;transition:border-color .15s,background .15s}
.kb-st:hover{border-color:rgba(56,189,248,.45);background:rgba(56,189,248,.08)}
.kb-st__ic{width:26px;height:26px;border-radius:7px;background:rgba(56,189,248,.14);color:#7dd3fc;
  flex:none;display:flex;align-items:center;justify-content:center;font-size:var(--t-small)}
.kb-st__n{display:block;font-size:var(--t-body);font-weight:600;color:#7dd3fc;line-height:1.65}
.kb-st__d{display:block;font-size:var(--t-caption);color:var(--hub-mut);margin-top:4px;line-height:1.5}

/* ---------- по темам ---------- */
.kb-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kb-cat{background:var(--hub-card2);border:1px solid var(--hub-line);border-radius:9px;
  padding:13px 14px;display:block;transition:border-color .15s,background .15s}
.kb-cat:hover{border-color:rgba(99,102,241,.45);background:rgba(99,102,241,.07)}
.kb-cat__ic{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:var(--t-body);margin-bottom:9px;background:rgba(139,151,168,.14);color:var(--hub-mut);line-height:1.65}
.kb-cat__ic--delivery,.kb-cat__ic--api{background:rgba(99,102,241,.16);color:#818cf8}
.kb-cat__ic--limits,.kb-cat__ic--reputation{background:rgba(245,181,68,.16);color:#f5b544}
.kb-cat__ic--accounting,.kb-cat__ic--content{background:rgba(56,189,248,.16);color:#38bdf8}
.kb-cat__ic--security{background:rgba(34,197,94,.16);color:#22c55e}
.kb-cat__ic--signing{background:rgba(129,140,248,.16);color:#818cf8}
.kb-cat__ic--inbound{background:rgba(56,189,248,.16);color:#38bdf8}
.kb-cat__ic--bounces{background:rgba(240,101,74,.16);color:#f0654a}
.kb-cat__n{display:block;font-size:var(--t-body);font-weight:600;color:#e7edf5;line-height:1.65}
.kb-cat__c{display:block;font-size:var(--t-caption);color:var(--hub-pri2);margin-top:4px}

/* ---------- таблица директив ---------- */
.kb-table-wrap{overflow-x:auto}
table.kb-table{width:100%;border-collapse:collapse;font-size:var(--t-list);min-width:760px}
table.kb-table th{background:#131a23;color:var(--hub-mut);font-weight:500;font-size:var(--t-label);
  text-align:left;padding:9px 16px;border-bottom:1px solid var(--hub-line)}
table.kb-table td{padding:10px 16px;border-bottom:1px solid var(--hub-line);vertical-align:middle}
table.kb-table tr:last-child td{border-bottom:0}
.kb-table__row:hover td{background:rgba(var(--hub-pri-rgb),.06)}
.kb-table__n{width:45%}
.kb-table__ds{font-size:var(--t-caption);color:var(--hub-mut);margin-top:3px}
.kb-tag{display:inline-block;font-size:var(--t-label);padding:2px 9px;border-radius:20px;background:var(--hub-card2);
  border:1px solid var(--hub-line2);color:var(--hub-mut);white-space:nowrap}
.kb-tag--blk{background:rgba(56,189,248,.12);border-color:rgba(56,189,248,.35);color:#38bdf8;font-family:var(--hub-mono)}
.kb-tag--bad{background:rgba(240,101,74,.13);border-color:rgba(240,101,74,.4);color:#f0654a}
.kb-tag--pri{background:rgba(99,102,241,.14);border-color:rgba(99,102,241,.4);color:#818cf8}

/* ---------- по задачам ---------- */
.kb-ucs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kb-uc{background:var(--hub-card2);border:1px solid var(--hub-line);border-radius:9px;
  padding:13px 14px;display:block;transition:border-color .15s}
.kb-uc:hover{border-color:rgba(99,102,241,.4)}
.kb-uc__n{display:block;font-size:var(--t-list);font-weight:600;color:#e7edf5}
.kb-uc__c{display:block;font-size:var(--t-label);color:var(--hub-dim);margin-top:4px}

/* ---------- готовые схемы ---------- */
.kb-rcp{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kb-rc{background:var(--hub-card2);border:1px solid rgba(245,181,68,.2);border-radius:9px;
  padding:13px 14px;display:block;transition:border-color .15s,background .15s}
.kb-rc:hover{border-color:rgba(245,181,68,.45);background:rgba(245,181,68,.06)}
.kb-rc__n{display:block;font-size:var(--t-list);font-weight:600;color:#f5b544}
.kb-rc__d{display:block;font-size:var(--t-caption);color:var(--hub-mut);margin-top:5px;line-height:1.5}

/* ---------- адаптив ---------- */
@media(max-width:1400px){
  .kb-tiles{grid-template-columns:repeat(3,1fr)}
  .kb-cats,.kb-ucs{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:1024px){
  .kb-start,.kb-rcp{grid-template-columns:repeat(2,1fr)}
  .kb-cats,.kb-ucs{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .kb-wrap{padding:22px 16px 40px}
  .kb-hero{padding:16px 16px 18px}
  .kb-hero h1{font-size:var(--t-h1)}
  .kb-search{flex-wrap:wrap}
  .kb-search__go{width:100%;padding:11px 22px}
  .kb-tiles,.kb-start,.kb-cats,.kb-ucs,.kb-rcp{grid-template-columns:repeat(2,1fr)}
  .kb-start,.kb-rcp{grid-template-columns:1fr}
  .kb-card__h{padding:10px 14px}
  .kb-card__b{padding:14px}
  .kb-more{margin-left:0}
}

/* ============================================================
   Совместимость с темой Vintech на странице «База PMTA».
   Тема навязывает Inter и «Заглавные Буквы» заголовкам, Rubik и
   капс кнопкам, чёрный цвет h1…h4, интерлиньяж 22px тексту таблиц
   и тегов, светлые рамки и отступ таблицам, а вложенным span в
   заголовках — display:block.
   🔴 Специфичность здесь не ниже 0,2,0: правило `.kb-page a` и
   правила темы вида `.kb-page span` перебивают одиночный класс,
   из-за чего директивы теряли жёлтый цвет и моноширинный шрифт.
   ============================================================ */
body.mtahub-page .kb-page{font-family:var(--t-text)}
.kb-page h1,.kb-page h2{
  font-family:var(--t-head);text-transform:none;letter-spacing:-.03em;font-weight:800}
.kb-page b,.kb-page strong,.kb-page span,.kb-page p,.kb-page a,.kb-page div,.kb-page td,.kb-page th,.kb-page input,.kb-page button{
  font-family:var(--t-text);text-transform:none;letter-spacing:normal}
.kb-page .kb-dir,.kb-page .kb-tag--blk{font-family:var(--hub-mono)}
.kb-page .kb-hero h1{letter-spacing:-.03em;line-height:1.07;font-family:var(--t-head);font-weight:800}
.kb-page .kb-hero h1 span{display:inline}
.kb-page .kb-card__h h2{line-height:1.33;font-family:var(--t-head);font-weight:800}

/* цвета: тема красит заголовки в чёрный, а ссылки — в свой акцент */
.kb-page h1,.kb-page h2{color:#fff}
.kb-page .kb-hero h1 span{color:var(--hub-pri2)}
.kb-page .kb-card--read .kb-card__h h2,.kb-page .kb-st__n{color:#7dd3fc}
.kb-page .kb-card--rec .kb-card__h h2,.kb-page .kb-rc__n,.kb-page .kb-dir{color:var(--hub-warn)}
.kb-page .kb-cat__n,.kb-page .kb-uc__n{color:#e7edf5}
.kb-page .kb-hero p,.kb-page .kb-note,.kb-page .kb-st__d,.kb-page .kb-rc__d,
.kb-page .kb-table__ds{color:var(--hub-mut)}
.kb-page .kb-tile__d,.kb-page .kb-uc__c,.kb-page .kb-pop,
.kb-page .kb-dim{color:var(--hub-dim)}
.kb-page .kb-cat__c,.kb-page .kb-more{color:var(--hub-pri2)}
.kb-page .kb-tile--dir b{color:#f5b544}
.kb-page .kb-tile--con b{color:#7dd3fc}
.kb-page .kb-tile--rec b{color:#6fd08c}
.kb-page .kb-tile--hub b{color:var(--hub-pri2)}
.kb-page .kb-tag--blk{color:#38bdf8}
.kb-page .kb-tag--bad{color:var(--hub-bad)}
.kb-page .kb-tag--pri{color:var(--hub-pri2)}
.kb-page .kb-search__go,.kb-page .kb-search__go:hover{color:#fff}
.kb-page .kb-search__box input{color:#e7edf5;padding:0;border:0;border-radius:0;height:auto;min-height:0;box-shadow:none;background:none}
.kb-page .kb-search__box input:focus{box-shadow:none;outline:0}

/* интерлиньяж: тема ставит таблицам и мелким подписям 22px */
.kb-page .kb-tag{line-height:1.5}
.kb-page table.kb-table th,.kb-page table.kb-table td{line-height:1.5}

/* таблица: снять отступ и светлые грани темы */
.kb-page table.kb-table{margin:0;border:0;border-collapse:collapse;background:transparent}
.kb-page table.kb-table th,.kb-page table.kb-table td{border:0;border-bottom:1px solid var(--hub-line)}
.kb-page table.kb-table tr:last-child td{border-bottom:0}
.kb-page table.kb-table th{background:#131a23;color:var(--hub-mut)}