/* ============================================================
   WikiVPN — дизайн-система
   Концепция: справочная картотека. Каждая сущность — учётная
   карточка с индексом, полосой спроса и штампом даты замера.
   Signature: карточка каталога + штамп «ЗАМЕР <дата>».
   ============================================================ */

/* --- Шрифты: 3 роли, 3 гарнитуры ------------------------------ */
/* display/heading — Fira Sans Condensed (узкий инженерный гротеск) */
/* body — IBM Plex Sans (нейтральный) */
/* data — IBM Plex Mono (только данные, коды, идентификаторы) */
@font-face{font-family:'Fira Cond';font-weight:600;font-display:swap;src:url(/fonts/fira-cond-600-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Fira Cond';font-weight:600;font-display:swap;src:url(/fonts/fira-cond-600-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'Fira Cond';font-weight:700;font-display:swap;src:url(/fonts/fira-cond-700-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Fira Cond';font-weight:700;font-display:swap;src:url(/fonts/fira-cond-700-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'Plex Sans';font-weight:400;font-display:swap;src:url(/fonts/plex-sans-400-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Plex Sans';font-weight:400;font-display:swap;src:url(/fonts/plex-sans-400-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'Plex Sans';font-weight:500;font-display:swap;src:url(/fonts/plex-sans-500-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Plex Sans';font-weight:500;font-display:swap;src:url(/fonts/plex-sans-500-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'Plex Sans';font-weight:600;font-display:swap;src:url(/fonts/plex-sans-600-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Plex Sans';font-weight:600;font-display:swap;src:url(/fonts/plex-sans-600-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'Plex Mono';font-weight:400;font-display:swap;src:url(/fonts/plex-mono-400-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Plex Mono';font-weight:400;font-display:swap;src:url(/fonts/plex-mono-400-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'Plex Mono';font-weight:500;font-display:swap;src:url(/fonts/plex-mono-500-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Plex Mono';font-weight:500;font-display:swap;src:url(/fonts/plex-mono-500-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}

/* --- Токены --------------------------------------------------- */
:root{
  /* 6 цветовых токенов */
  --paper:#EEF1F4;      /* фон-основа: холодная картотечная бумага */
  --surface:#FFFFFF;    /* сама карточка */
  --ink:#111820;        /* текст */
  --muted:#5D6976;      /* второстепенный текст */
  --rule:#D3DAE2;       /* линейки картотеки */
  --accent:#26418F;     /* чернила: индекс, ссылки, полоса спроса */
  --stampc:#A02A22;     /* штамп проверки */

  /* семантика состояний (не декор — только состояние) */
  --ok:#1C6E44; --warn:#8F6206; --down:#A63620;
  --ok-bg:#E6F0EA; --warn-bg:#F6EEDC; --down-bg:#F6E7E3;

  /* типографика */
  --f-display:'Fira Cond','Fira Sans Condensed',Arial Narrow,system-ui,sans-serif;
  --f-body:'Plex Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  --f-data:'Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* шкала размеров (1.25) */
  --t-11:11px; --t-12:12px; --t-13:13px; --t-15:15px; --t-17:17px;
  --t-20:20px; --t-24:24px; --t-30:30px; --t-38:clamp(28px,4.4vw,38px);
  --t-52:clamp(34px,6.4vw,52px);

  /* сетка отступов (4) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  /* радиусы: чертёж не любит скруглений */
  --r1:2px; --r2:4px;

  /* тени: почти нет, структуру держат линии */
  --sh1:0 1px 2px rgba(22,24,29,.06);
  --sh2:0 2px 0 var(--rule);

  --wrap:1240px; --measure:70ch;
}

@media (prefers-color-scheme:dark){
  :root{
    /* негатив синьки */
    --paper:#0F131A; --surface:#171D26; --ink:#E6EBF2; --muted:#94A0AE;
    --rule:#28313D; --accent:#7EA0EE; --stampc:#E08A7C;
    --ok:#5FC48D; --warn:#DDAF4B; --down:#E4816A;
    --ok-bg:#13241C; --warn-bg:#26200F; --down-bg:#2A1815;
    --sh1:none; --sh2:0 2px 0 var(--rule);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 var(--t-17)/1.65 var(--f-body);
  font-feature-settings:"kern" 1;
}
.page{position:relative}

h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;letter-spacing:-.005em;line-height:1.1;margin:0}
a{color:var(--accent);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
a:hover{border-bottom-color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r1)
}
code,kbd,samp{font-family:var(--f-data);font-size:.92em}
kbd{border:1px solid var(--rule);border-bottom-width:2px;border-radius:var(--r1);padding:1px 5px;background:var(--surface)}
img{max-width:100%;height:auto;display:block}
hr{border:0;border-top:1px solid var(--rule);margin:var(--s6) 0}

/* --- Утилита: моно-метка -------------------------------------- */
.tag{font:500 var(--t-11)/1 var(--f-data);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}

/* --- Шапка ---------------------------------------------------- */
.hdr{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--rule)}
.hdr__in{max-width:var(--wrap);margin:0 auto;padding:var(--s3) var(--s5);display:flex;align-items:center;gap:var(--s5)}
.brand{display:flex;align-items:baseline;gap:var(--s2);border:0}
.brand__mark{font:700 var(--t-20)/1 var(--f-display);letter-spacing:-.01em;color:var(--ink)}
.brand__sub{font:500 var(--t-11)/1 var(--f-data);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hdr__nav{display:flex;gap:var(--s4);margin-left:auto;align-items:center}
.hdr__links{display:flex;gap:var(--s4)}
.hdr__nav a{font:500 var(--t-13)/1 var(--f-body);color:var(--ink);border:0;padding:var(--s2) 0;
  border-bottom:2px solid transparent;letter-spacing:.01em}
.hdr__nav a:hover,.hdr__nav a[aria-current]{border-bottom-color:var(--accent);color:var(--accent)}
.btn{display:inline-flex;align-items:center;gap:var(--s2);font:600 var(--t-13)/1 var(--f-body);
  padding:9px 14px;border:1px solid var(--ink);border-radius:var(--r1);background:var(--ink);color:var(--paper);
  cursor:pointer;transition:transform .08s,background .15s}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn--ghost:hover{background:var(--surface);color:var(--accent);border-color:var(--accent)}
.searchbtn{display:flex;align-items:center;gap:var(--s3);background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r1);padding:7px 10px;color:var(--muted);font:400 var(--t-13)/1 var(--f-body);cursor:pointer;min-width:190px}
.searchbtn:hover{border-color:var(--accent);color:var(--ink)}
.searchbtn kbd{margin-left:auto;font-size:var(--t-11)}
.burger{display:none;background:transparent;border:1px solid var(--rule);border-radius:var(--r1);
  padding:7px 9px;cursor:pointer;color:var(--ink);font:500 var(--t-13)/1 var(--f-data);white-space:nowrap}
/* мобильное меню разделов */
.mnav{display:none;border-top:1px solid var(--rule)}
.mnav.is-open{display:block}
.mnav ul{list-style:none;margin:0;padding:var(--s2) var(--s5) var(--s4)}
.mnav li{border-bottom:1px solid var(--rule)}
.mnav li:last-child{border-bottom:0}
.mnav a{display:block;padding:11px 0;color:var(--ink);border:0;font-size:var(--t-15)}
.mnav a[aria-current]{color:var(--accent);font-weight:600}
@media (min-width:1025px){.mnav{display:none !important}}

/* ============================================================
   SIGNATURE: цепь соединения
   ============================================================ */
.chain{--cell:var(--surface)}
.chain__list{display:flex;align-items:stretch;list-style:none;margin:0;padding:0;gap:0}
.chain__link{position:relative;flex:1 1 0;min-width:0}
.chain__cell{display:flex;flex-direction:column;gap:var(--s1);height:100%;
  background:var(--cell);border:1px solid var(--rule);border-right:0;padding:var(--s3) var(--s3) var(--s3) var(--s4);
  color:var(--ink);border-bottom-width:1px;transition:background .15s,border-color .15s}
.chain__link:last-child .chain__cell{border-right:1px solid var(--rule)}
a.chain__cell{border-bottom:1px solid var(--rule)}
a.chain__cell:hover{background:color-mix(in srgb,var(--accent) 7%,var(--surface));border-color:var(--accent);z-index:2}
.chain__idx{font:500 var(--t-11)/1 var(--f-data);color:var(--muted);letter-spacing:.08em}
.chain__name{font:700 var(--t-13)/1.15 var(--f-display);letter-spacing:.02em;text-transform:uppercase}
.chain__note{font:400 var(--t-12)/1.35 var(--f-body);color:var(--muted)}
/* активное звено: сплошная заливка + сигнальная верхняя кромка */
.chain__link[data-state="here"] .chain__cell{background:color-mix(in srgb,var(--down) 10%,var(--surface));
  border-color:color-mix(in srgb,var(--down) 45%,var(--rule));box-shadow:inset 0 2px 0 var(--down);z-index:3}
.chain__link[data-state="here"] .chain__idx{color:var(--down)}
.chain__link[data-state="focus"] .chain__cell{background:color-mix(in srgb,var(--accent) 9%,var(--surface));
  border-color:color-mix(in srgb,var(--accent) 45%,var(--rule));box-shadow:inset 0 2px 0 var(--accent);z-index:3}
.chain__link[data-state="focus"] .chain__idx{color:var(--accent)}
/* соединитель между звеньями: линия-мостик + острие, показывает направление трафика */
.chain__link+.chain__link::before{content:'';position:absolute;left:-7px;top:50%;width:14px;height:1px;
  margin-top:-.5px;background:var(--ink);z-index:4}
.chain__link+.chain__link::after{content:'';position:absolute;left:1px;top:50%;width:0;height:0;
  margin-top:-4px;border:4px solid transparent;border-left-color:var(--ink);z-index:4}

/* крупная цепь на главной: с бегущим пакетом */
.chain--hero .chain__cell{padding:var(--s4);gap:var(--s2);min-height:112px}
.chain--hero .chain__name{font-size:var(--t-15)}
.chain--hero .chain__list{position:relative}
.chain--hero .chain__list::after{content:'';position:absolute;left:0;top:-1px;width:34px;height:2px;
  background:var(--accent);animation:packet 7s cubic-bezier(.6,.02,.4,.98) infinite}
@keyframes packet{0%{left:0;opacity:0}6%{opacity:1}94%{opacity:1}100%{left:calc(100% - 34px);opacity:0}}
@media (prefers-reduced-motion:reduce){.chain--hero .chain__list::after{animation:none;opacity:.6}}

/* компактная цепь в статье */
.chain--bar{margin:0 0 var(--s5)}
.chain--bar .chain__cell{padding:var(--s2) var(--s3);gap:2px}
.chain--bar .chain__note{display:none}
.chain--bar .chain__name{font-size:var(--t-12)}
.chain__caption{display:flex;gap:var(--s3);align-items:baseline;margin-bottom:var(--s2)}

@media (max-width:860px){
  .chain__list{flex-wrap:wrap}
  .chain__link{flex:1 1 46%}
  .chain__cell{border-right:1px solid var(--rule);border-bottom:0}
  .chain__link:nth-child(n+3) .chain__cell{border-top:0}
  .chain__link+.chain__link::before,.chain__link+.chain__link::after{display:none}
  .chain--hero .chain__cell{min-height:0}
}

/* --- Каркас страницы ------------------------------------------ */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s5)}
.layout--solo{grid-template-columns:minmax(0,1fr)!important;max-width:860px}
.layout{display:grid;grid-template-columns:246px minmax(0,1fr);gap:var(--s7);
  max-width:var(--wrap);margin:0 auto;padding:var(--s6) var(--s5) var(--s9)}
.side{position:sticky;top:76px;align-self:start;max-height:calc(100vh - 96px);overflow:auto;
  padding-right:var(--s3);border-right:1px solid var(--rule)}
.side__grp+.side__grp{margin-top:var(--s5)}
.side__ttl{display:block;margin-bottom:var(--s2);font:500 var(--t-11)/1 var(--f-data);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.side__ttl a{color:inherit;border:0}
.side ul{list-style:none;margin:0;padding:0}
.side li a{display:block;padding:5px var(--s3) 5px var(--s3);font-size:var(--t-13);line-height:1.35;
  color:var(--ink);border:0;border-left:2px solid transparent;margin-left:-1px}
.side li a:hover{border-left-color:var(--rule);color:var(--accent)}
.side li a[aria-current]{border-left-color:var(--accent);color:var(--accent);font-weight:600;
  background:color-mix(in srgb,var(--accent) 6%,transparent)}
@media (max-width:1024px){
  /* minmax(0,…), а не 1fr: иначе широкая таблица внутри статьи задаёт колонке
     min-content и вся страница едет вбок на телефоне */
  .layout{grid-template-columns:minmax(0,1fr);gap:0;padding-top:var(--s5)}
  .side{display:none;position:static;max-height:none;border-right:0;border-bottom:1px solid var(--rule);
    padding:0 0 var(--s5);margin-bottom:var(--s5)}
  .side.is-open{display:block}
  .burger{display:inline-flex;margin-left:auto}
  .hdr__links{display:none}
  .searchbtn{min-width:0}.searchbtn span:not(:first-child){display:none}
  .hdr__in{gap:var(--s3)}
}

/* --- Крошки + заголовок статьи -------------------------------- */
.crumbs{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-bottom:var(--s4)}
.crumbs a,.crumbs span{font:400 var(--t-12)/1 var(--f-data);color:var(--muted);border:0}
.crumbs a:hover{color:var(--accent)}
.crumbs i{font-style:normal;color:var(--rule)}
.art{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r2);
  padding:var(--s6) var(--s6) var(--s7);box-shadow:var(--sh1);max-width:none}
@media (max-width:640px){.art{padding:var(--s5) var(--s4) var(--s6);border-left:0;border-right:0;border-radius:0;
  margin:0 calc(-1*var(--s5))}}
.art h1{font-size:var(--t-38);max-width:26ch;margin-bottom:var(--s3)}
.art__meta{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;padding-bottom:var(--s5);
  margin-bottom:var(--s5);border-bottom:1px solid var(--rule)}
.art__lead{font-size:var(--t-20);line-height:1.5;color:var(--ink);max-width:var(--measure);margin:0 0 var(--s6)}
.art h2{font-size:var(--t-24);margin:var(--s7) 0 var(--s3);max-width:32ch;scroll-margin-top:84px}
.art h2:first-of-type{margin-top:var(--s5)}
.art h3{font-size:var(--t-20);font-weight:600;margin:var(--s6) 0 var(--s2)}
.art p,.art li{max-width:var(--measure)}
.art p{margin:0 0 var(--s4)}
.art ol{margin:0 0 var(--s4);padding-left:1.35em}
.art ol>li{margin-bottom:var(--s2)}
/* маркеры — только у контентных списков; служебные (.chain__list, .rows, .kv…) не трогаем */
.art ul{list-style:none;margin:0 0 var(--s4);padding-left:0}
.art ul:not([class])>li{position:relative;padding-left:var(--s5);margin-bottom:var(--s2)}
.art ul:not([class])>li::before{content:'';position:absolute;left:2px;top:.62em;width:8px;height:1px;background:var(--accent)}
.art strong{font-weight:600}

/* --- Шаги диагностики: вертикальная цепь ---------------------- */
.steps{counter-reset:st;margin:var(--s5) 0;padding:0;list-style:none}
.steps>li{position:relative;padding:0 0 var(--s6) var(--s7);margin:0;max-width:none}
.steps>li::before{counter-increment:st;content:counter(st,decimal-leading-zero);
  position:absolute;left:0;top:0;width:32px;height:32px;display:grid;place-items:center;
  font:500 var(--t-12)/1 var(--f-data);color:var(--accent);background:var(--surface);
  border:1px solid var(--accent);border-radius:var(--r1);z-index:1}
.steps>li::after{content:'';position:absolute;left:16px;top:34px;bottom:6px;width:1px;background:var(--rule)}
.steps>li:last-child::after{display:none}
.steps>li>*:first-child{margin-top:5px}
.step__ttl{display:block;font:600 var(--t-20)/1.25 var(--f-display);margin-bottom:var(--s2)}
.steps ul>li::before{top:.62em}

/* --- Врезки --------------------------------------------------- */
.note{border:1px solid var(--rule);border-left:3px solid var(--muted);border-radius:var(--r1);
  padding:var(--s4) var(--s5);margin:var(--s5) 0;background:var(--surface)}
.note>*:last-child{margin-bottom:0}
.note__ttl{display:block;font:600 var(--t-15)/1.3 var(--f-body);margin-bottom:var(--s2)}
.note--info{border-left-color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.note--warn{border-left-color:var(--warn);background:var(--warn-bg)}
.note--ok{border-left-color:var(--ok);background:var(--ok-bg)}
.note--down{border-left-color:var(--down);background:var(--down-bg)}
.note p,.note li{max-width:66ch}

/* --- Таблицы данных ------------------------------------------- */
.tw{overflow-x:auto;margin:var(--s5) 0;border:1px solid var(--rule);border-radius:var(--r1);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:var(--t-15)}
th,td{text-align:left;padding:var(--s3) var(--s4);border-bottom:1px solid var(--rule);vertical-align:top}
th{font:500 var(--t-11)/1.2 var(--f-data);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  background:color-mix(in srgb,var(--rule) 30%,var(--surface));white-space:nowrap}
tr:last-child td{border-bottom:0}
td code{background:color-mix(in srgb,var(--rule) 35%,transparent);padding:1px 4px;border-radius:var(--r1)}
.num{font-family:var(--f-data);font-variant-numeric:tabular-nums;white-space:nowrap}

/* --- Статус-чипы ---------------------------------------------- */
.chip{display:inline-flex;align-items:center;gap:6px;font:500 var(--t-12)/1 var(--f-data);
  letter-spacing:.04em;padding:4px 8px;border:1px solid var(--rule);border-radius:var(--r1);
  background:var(--surface);color:var(--ink);white-space:nowrap}
.chip::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--muted)}
.chip--ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,var(--rule));background:var(--ok-bg)}
.chip--ok::before{background:var(--ok)}
.chip--warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,var(--rule));background:var(--warn-bg)}
.chip--warn::before{background:var(--warn)}
.chip--down{color:var(--down);border-color:color-mix(in srgb,var(--down) 40%,var(--rule));background:var(--down-bg)}
.chip--down::before{background:var(--down)}

/* --- Слот под скриншот ---------------------------------------- */
.shot{margin:var(--s5) 0;border:1px solid var(--rule);border-radius:var(--r1);overflow:hidden;background:var(--surface)}
.shot__frame{position:relative;min-height:132px;display:grid;place-items:center;padding:var(--s5) var(--s4);
  background-image:repeating-linear-gradient(-45deg,transparent 0 7px,color-mix(in srgb,var(--rule) 45%,transparent) 7px 8px)}
.shot__code{font:500 var(--t-12)/1 var(--f-data);letter-spacing:.1em;color:var(--muted);
  background:var(--surface);border:1px solid var(--rule);padding:6px 10px;border-radius:var(--r1)}
.shot__cap{display:flex;gap:var(--s3);padding:var(--s3) var(--s4);border-top:1px solid var(--rule);
  font-size:var(--t-13);color:var(--muted)}
.shot__link{display:block;border:0;background:var(--paper);text-align:center}
.shot__link:hover{background:color-mix(in srgb,var(--accent) 6%,var(--paper))}
.shot>img,.shot__link>img{display:block;width:auto;max-width:100%;max-height:520px;margin:0 auto;background:var(--paper)}
.shot__zoom{display:block;padding:var(--s2) var(--s4);border-top:1px solid var(--rule);background:var(--surface);
  font:500 var(--t-11)/1 var(--f-data);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
/* пара кадров на одно место: два шага одного действия рядом */
.shot__pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
.shot__part{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-width:0;background:var(--paper)}
.shot__part+.shot__part{border-left:1px solid var(--rule)}
.shot__part img{display:block;width:auto;max-width:100%;max-height:400px;height:auto;margin:0 auto}
.shot__mark{position:absolute;top:var(--s2);left:var(--s2);z-index:1;
  font:500 var(--t-11)/1 var(--f-data);text-transform:uppercase;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r1);padding:4px 7px;color:var(--ink)}
.shot__partcap{padding:var(--s2) var(--s3);border-top:1px solid var(--rule);background:var(--surface);
  font-size:var(--t-12);line-height:1.4;color:var(--muted)}
@media (max-width:640px){
  .shot>img,.shot__link>img{max-height:none}
  .shot__part img{max-height:none}
  .shot__pair{grid-template-columns:1fr}
  .shot__part+.shot__part{border-left:0;border-top:1px solid var(--rule)}
}

/* --- CTA ------------------------------------------------------ */
/* Предложение подписки — единственное место, где схема позволяет себе заливку:
   акцентная шапка-полоса сверху и залитая кнопка. Так блок видно в потоке текста,
   но он остаётся частью чертежа, а не баннером. */
.cta{margin:var(--s6) 0;border:1px solid var(--ink);border-radius:var(--r2);background:var(--surface);
  padding:var(--s5);position:relative;box-shadow:var(--sh1);border-top:3px solid var(--accent)}
.cta__tag{position:absolute;top:-9px;left:var(--s4);background:var(--paper);padding:0 var(--s2);
  color:var(--accent);border-color:var(--accent)}
.cta__ttl{font:700 var(--t-24)/1.15 var(--f-display);margin:var(--s2) 0 var(--s3);max-width:34ch}
.cta p{max-width:62ch;margin-bottom:var(--s4)}
.cta__pts{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin:0 0 var(--s4);padding:0}
.cta__pts li{margin:0;padding-left:16px;position:relative;max-width:none;
  font:500 var(--t-13)/1.4 var(--f-body);color:var(--ink)}
.cta__pts li::before{content:'✓';position:absolute;left:0;top:0;color:var(--accent);
  font:600 var(--t-13)/1.4 var(--f-data)}
.cta__row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.cta__fine{font:400 var(--t-12)/1.4 var(--f-data);color:var(--muted)}
.cta--diag{border-color:var(--accent);border-top-width:3px}
.cta--diag .cta__tag{color:var(--accent)}
/* Крупная залитая кнопка — только для перехода в сервис. Обычные .btn остаются тёмными. */
.btn--go{background:var(--accent);border-color:var(--accent);color:#fff;font-size:var(--t-15);padding:12px 20px}
.btn--go:hover{background:var(--ink);border-color:var(--ink);color:#fff}

/* --- Плашка с пробным периодом (над текстом и в конце статьи) -- */
.trial{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4);
  margin:0 0 var(--s6);padding:var(--s4) var(--s5);border:1px solid var(--rule);border-radius:var(--r2);
  background:color-mix(in srgb,var(--accent) 6%,var(--surface));border-left:3px solid var(--accent)}
.trial--foot{margin:var(--s7) 0 0}
.trial__tag{color:var(--accent);border-color:var(--accent);background:var(--surface);flex:0 0 auto}
.trial__txt{flex:1 1 320px;margin:0;font-size:var(--t-15);line-height:1.5;max-width:64ch}
.trial .btn{flex:0 0 auto}

/* --- Доступ за действия: предложение со стороны ---------------- */
/* Зелёный, а не чертёжный синий: рядом на странице стоит предложение подписки,
   и два синих блока подряд читаются как один. */
.deal{display:grid;grid-template-columns:auto 1fr;gap:var(--s5);align-items:start;
  margin:var(--s6) 0;padding:var(--s5);border:1px solid var(--ok);border-top:3px solid var(--ok);
  border-radius:var(--r2);background:var(--ok-bg);box-shadow:var(--sh1)}
.deal__badge{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s1);
  min-width:112px;padding:var(--s4);border:1px solid var(--ok);border-radius:var(--r1);
  background:var(--surface);color:var(--ok);text-decoration:none;transition:transform .08s}
.deal__badge:hover{background:var(--ok);color:var(--paper)}
.deal__badge:active{transform:translateY(1px)}
.deal__num{font:700 var(--t-38)/1 var(--f-display)}
.deal__unit{font:500 var(--t-12)/1 var(--f-data);letter-spacing:.09em;text-transform:uppercase}
.deal__tag{display:block;color:var(--ok);margin-bottom:var(--s2)}
.deal__ttl{font:700 var(--t-24)/1.15 var(--f-display);margin:0 0 var(--s2);max-width:34ch}
.deal__txt{margin:0 0 var(--s4);max-width:62ch;font-size:var(--t-15);line-height:1.55}
.deal__pts{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin:0 0 var(--s4);padding:0}
.deal__pts li{margin:0;padding-left:16px;position:relative;max-width:none;
  font:500 var(--t-13)/1.4 var(--f-body);color:var(--ink)}
.deal__pts li::before{content:'✓';position:absolute;left:0;top:0;color:var(--ok);
  font:600 var(--t-13)/1.4 var(--f-data)}
.deal__row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.btn--deal{background:var(--ok);border-color:var(--ok);color:var(--paper)}
.btn--deal:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
@media (max-width:640px){
  .deal{grid-template-columns:1fr;gap:var(--s4);padding:var(--s4)}
  .deal__badge{flex-direction:row;gap:var(--s2);min-width:0;justify-self:start;padding:var(--s2) var(--s3)}
  .deal__num{font-size:var(--t-24)}
}

/* --- «Подключить за три шага» --------------------------------- */
.conn{margin:var(--s6) 0;border:1px solid var(--ink);border-top:3px solid var(--accent);
  border-radius:var(--r2);background:var(--surface);padding:var(--s5);box-shadow:var(--sh1)}
.conn__hd{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin-bottom:var(--s3)}
.conn__free{color:var(--ok);border-color:var(--ok)}
.conn__ttl{font:700 var(--t-24)/1.15 var(--f-display);margin:0 0 var(--s4);max-width:34ch}
.conn__steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);
  margin:0 0 var(--s5);padding:0;counter-reset:none}
.conn__steps>li{margin:0;padding:var(--s4);border:1px solid var(--rule);border-radius:var(--r1);
  background:var(--paper);max-width:none}
.conn__steps>li::before{display:none}
.conn__n{display:block;font:500 var(--t-12)/1 var(--f-data);color:var(--accent);margin-bottom:var(--s2)}
.conn__ttl2{display:block;font:600 var(--t-15)/1.3 var(--f-body);margin-bottom:var(--s2)}
.conn__txt{display:block;font-size:var(--t-13);line-height:1.5;color:var(--muted)}
.conn__row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
@media (max-width:760px){.conn__steps{grid-template-columns:1fr}}

/* --- Карточка подписки в сайдбаре (только десктоп) -------------
   Списки разделов длинные, поэтому карточку прижимаем к низу сайдбара (sticky):
   иначе до неё нужно докручивать, и она не работает. */
.side__cta{position:sticky;bottom:0;margin-top:var(--s6);padding:var(--s4);border:1px solid var(--rule);
  border-top:3px solid var(--accent);border-radius:var(--r2);
  background:color-mix(in srgb,var(--accent) 8%,var(--paper));
  box-shadow:0 -8px 12px -8px rgba(22,24,29,.18)}
.side__cta-tag{color:var(--accent);border-color:var(--accent);background:var(--surface)}
.side__cta-ttl{font:700 var(--t-17)/1.2 var(--f-display);margin:var(--s3) 0 var(--s2)}
.side__cta-txt{font-size:var(--t-12);line-height:1.5;color:var(--muted);margin:0 0 var(--s3)}
.side__cta .btn{width:100%;justify-content:center;padding:10px 12px;font-size:var(--t-13)}
.side__cta-fine{display:block;margin-top:var(--s2);font:400 var(--t-11)/1.4 var(--f-data);
  color:var(--muted);text-align:center}
@media (max-width:1024px){.side__cta{display:none}}

/* --- Нижняя панель на телефоне -------------------------------- */
.gobar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--surface);
  border-top:2px solid var(--accent);box-shadow:0 -2px 12px rgba(22,24,29,.12);
  padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(110%);transition:transform .22s ease-out}
.gobar.is-on{transform:none}
.gobar__in{display:flex;align-items:center;gap:var(--s3);padding:10px var(--s4)}
.gobar__txt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.gobar__txt b{font:700 var(--t-15)/1.2 var(--f-display)}
.gobar__txt span{font:400 var(--t-11)/1.3 var(--f-data);color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gobar .btn{margin-left:auto;white-space:nowrap;padding:11px 16px}
.gobar__x{flex:0 0 auto;background:transparent;border:0;color:var(--muted);font-size:22px;
  line-height:1;padding:4px 2px 4px 6px;cursor:pointer}
@media (min-width:861px){.gobar{display:none}}
@media (prefers-reduced-motion:reduce){.gobar{transition:none}}
body.has-gobar{padding-bottom:64px}

/* --- Списки-строки для хабов (вместо ряда одинаковых карточек) - */
.rows{list-style:none;margin:var(--s5) 0;padding:0;border-top:1px solid var(--rule)}
.rows>li{margin:0;max-width:none;border-bottom:1px solid var(--rule)}
.rows>li::before{display:none}
.row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:var(--s4);align-items:baseline;
  padding:var(--s4) var(--s3);border:0;color:var(--ink);transition:background .12s}
.row:hover{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.row:hover .row__ttl{color:var(--accent)}
.row__idx{font:500 var(--t-12)/1.5 var(--f-data);color:var(--muted)}
.row__ttl{font:600 var(--t-17)/1.3 var(--f-body);display:block;margin-bottom:2px}
.row__sub{font-size:var(--t-13);color:var(--muted);line-height:1.45;display:block;max-width:64ch}
.row__go{font:500 var(--t-13)/1 var(--f-data);color:var(--muted)}
.row:hover .row__go{color:var(--accent)}
@media (max-width:560px){.row{grid-template-columns:30px minmax(0,1fr);gap:var(--s3)}.row__go{display:none}}

/* --- «Смотрите также» ---------------------------------------- */
.also{margin:var(--s7) 0 0;padding-top:var(--s5);border-top:1px solid var(--rule)}
.also__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--s2) var(--s5);
  list-style:none;padding:0;margin:var(--s3) 0 0}
.also__list li{margin:0;padding-left:0}
.also__list li::before{display:none}
.also__list a{font-size:var(--t-15);line-height:1.4}

/* --- Полезно ли -------------------------------------------- */
.helpful{margin-top:var(--s6);padding:var(--s4) var(--s5);border:1px solid var(--rule);border-radius:var(--r1);
  display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;background:var(--surface)}
.helpful__q{font:500 var(--t-15)/1 var(--f-body)}
.helpful__btns{display:flex;gap:var(--s2);margin-left:auto}
.helpful button{font:500 var(--t-13)/1 var(--f-data);padding:7px 16px;border:1px solid var(--rule);
  background:transparent;border-radius:var(--r1);cursor:pointer;color:var(--ink)}
.helpful button:hover{border-color:var(--accent);color:var(--accent)}
.helpful[data-done] .helpful__btns{display:none}
.helpful__thanks{display:none;font-size:var(--t-13);color:var(--muted);margin-left:auto}
.helpful[data-done] .helpful__thanks{display:block}

/* --- Главная -------------------------------------------------- */
/* Сетка-миллиметровка только в зоне схемы: объясняет систему отступов и
   поддерживает чертёжную метафору. Рисуем фоном, без fixed и mask. */
.hero{position:relative;padding:var(--s6) 0 var(--s5);overflow:hidden}
.hero::before{
  content:'';position:absolute;inset:0 0 auto;height:420px;pointer-events:none;
  background-image:
    linear-gradient(180deg,transparent 0,transparent 45%,var(--paper) 100%),
    linear-gradient(color-mix(in srgb,var(--rule) 70%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--rule) 70%,transparent) 1px,transparent 1px);
  background-size:100% 100%,64px 64px,64px 64px;
  background-position:0 0,0 -1px,-1px 0;
}
.hero>*{position:relative}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:var(--s7);align-items:start}
@media (max-width:1000px){.hero__grid{grid-template-columns:1fr;gap:var(--s6)}}
.hero h1{font-size:var(--t-38);max-width:22ch;margin:var(--s3) 0 var(--s4)}
.hero__lead{font-size:var(--t-17);line-height:1.55;color:var(--muted);max-width:54ch;margin:0 0 var(--s5)}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-bottom:var(--s5)}
/* быстрые входы: закрывают частые симптомы сразу с главной */
.quick{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule);max-width:56ch}
.quick li{border-bottom:1px solid var(--rule)}
.quick li:first-child{border-bottom:0;padding:var(--s4) 0 var(--s2)}
.quick a{display:block;padding:10px 0;font-size:var(--t-15);color:var(--ink);border:0}
.quick a::before{content:'→ ';font-family:var(--f-data);color:var(--accent)}
.quick a:hover{color:var(--accent)}

.hero__panel{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r2);box-shadow:var(--sh1)}
.hero__panel h2{font:600 var(--t-15)/1 var(--f-display);letter-spacing:.02em;padding:var(--s4);
  border-bottom:1px solid var(--rule);margin:0;display:flex;justify-content:space-between;align-items:center}
.hero__panel h2 a{font:500 var(--t-11)/1 var(--f-data);letter-spacing:.08em;text-transform:uppercase;border:0}
.statlist{list-style:none;margin:0;padding:0}
.statlist li{display:flex;align-items:center;gap:var(--s3);padding:9px var(--s4);
  border-bottom:1px solid var(--rule);font-size:var(--t-15)}
.statlist li:last-child{border-bottom:0}
.statlist .chip{margin-left:auto}
.statlist__name{font:500 var(--t-15)/1 var(--f-body)}
.statlist__plat{font:400 var(--t-11)/1 var(--f-data);color:var(--muted);letter-spacing:.06em}
.sect{padding:var(--s7) 0;border-top:1px solid var(--rule)}
.sect__hd{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:baseline;margin-bottom:var(--s5)}
.sect__hd h2{font-size:var(--t-30)}
.sect__hd a{margin-left:auto;font:500 var(--t-12)/1 var(--f-data);letter-spacing:.06em;text-transform:uppercase}
.plat{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s4);list-style:none;padding:0;margin:0}
.plat li{margin:0}
.plat a{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s4);background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--r2);color:var(--ink);transition:border-color .15s,transform .1s}
.plat a:hover{border-color:var(--accent);transform:translateY(-1px)}
.plat__os{font:700 var(--t-20)/1 var(--f-display)}
.plat__app{font:500 var(--t-12)/1 var(--f-data);color:var(--muted);letter-spacing:.05em}
.plat__go{font-size:var(--t-13);color:var(--accent)}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--s7)}

/* --- Поиск ---------------------------------------------------- */
.sdlg{position:fixed;inset:0;z-index:60;display:none;padding:8vh var(--s4) var(--s4)}
.sdlg[open],.sdlg.is-open{display:block}
.sdlg__bd{position:absolute;inset:0;background:color-mix(in srgb,var(--ink) 45%,transparent)}
.sdlg__box{position:relative;max-width:680px;margin:0 auto;background:var(--surface);border:1px solid var(--ink);
  border-radius:var(--r2);box-shadow:0 20px 50px rgba(22,24,29,.22);overflow:hidden}
.sdlg input{width:100%;border:0;border-bottom:1px solid var(--rule);padding:var(--s5);font:400 var(--t-20)/1 var(--f-body);
  background:transparent;color:var(--ink)}
.sdlg input:focus{outline:0;border-bottom-color:var(--accent)}
.sres{list-style:none;margin:0;padding:0;max-height:52vh;overflow:auto}
.sres li{border-bottom:1px solid var(--rule)}
.sres a{display:block;padding:var(--s3) var(--s5);border:0;color:var(--ink)}
.sres a:hover,.sres a.is-sel{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.sres__t{font:500 var(--t-15)/1.3 var(--f-body);display:block}
.sres__p{font:400 var(--t-11)/1 var(--f-data);color:var(--muted);letter-spacing:.06em}
.sdlg__foot{padding:var(--s3) var(--s5);border-top:1px solid var(--rule);font:400 var(--t-12)/1 var(--f-data);color:var(--muted)}

/* --- Где скачать ---------------------------------------------- */
.dl{margin:var(--s5) 0;border:1px solid var(--ink);border-radius:var(--r2);background:var(--surface);overflow:hidden}
.dl__hd{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--rule);background:color-mix(in srgb,var(--rule) 28%,var(--surface))}
.dl__checked{margin-left:auto}
.dl__list{list-style:none;margin:0;padding:0}
.dl__row{display:grid;grid-template-columns:170px minmax(0,1fr) auto;gap:var(--s4);align-items:center;
  padding:var(--s3) var(--s4);border-bottom:1px solid var(--rule);margin:0;max-width:none}
.dl__row:last-child{border-bottom:0}
.dl__row::before{display:none}
.dl__plat{font:600 var(--t-13)/1.3 var(--f-body)}
.dl__what{font-size:var(--t-13);color:var(--muted);line-height:1.4}
.dl__kind{display:inline-block;font:500 var(--t-11)/1 var(--f-data);letter-spacing:.06em;color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 35%,var(--rule));border-radius:var(--r1);
  padding:3px 6px;margin-right:var(--s2);vertical-align:1px}
.dl__go{font:500 var(--t-13)/1 var(--f-data);white-space:nowrap;border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.dl__go--none{color:var(--muted);border:0}
.dl__warn,.dl__note,.dl__disc{margin:0;padding:var(--s3) var(--s4);border-top:1px solid var(--rule);
  font-size:var(--t-13);line-height:1.5;max-width:none}
.dl__warn{background:var(--warn-bg);color:var(--ink);border-left:3px solid var(--warn)}
.dl__note{color:var(--muted)}
.dl__disc{font-size:var(--t-12);color:var(--muted);background:color-mix(in srgb,var(--rule) 18%,var(--surface))}
@media (max-width:640px){
  .dl__row{grid-template-columns:1fr;gap:var(--s2)}
  .dl__go{justify-self:start}
  .dl__checked{margin-left:0}
}

/* --- Инструменты ---------------------------------------------- */
.tool{margin:var(--s5) 0;border:1px solid var(--ink);border-radius:var(--r2);background:var(--surface);overflow:hidden}
.tool__hd{padding:var(--s3) var(--s4);border-bottom:1px solid var(--rule);display:flex;gap:var(--s3);align-items:center}
.tool__bd{padding:var(--s4)}
.tool label{display:block;font:500 var(--t-12)/1 var(--f-data);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:var(--s2)}
.tool textarea,.tool input[type=text]{width:100%;font:400 var(--t-13)/1.5 var(--f-data);padding:var(--s3);
  border:1px solid var(--rule);border-radius:var(--r1);background:var(--paper);color:var(--ink);resize:vertical}
.tool textarea:focus,.tool input:focus{outline:0;border-color:var(--accent)}
.tool__row{display:flex;gap:var(--s3);margin-top:var(--s3);flex-wrap:wrap;align-items:center}
.tool__out{margin-top:var(--s4);border-top:1px solid var(--rule);padding-top:var(--s4)}
.tool__out:empty{display:none}
.kv{list-style:none;margin:0;padding:0}
.kv li{display:grid;grid-template-columns:170px minmax(0,1fr);gap:var(--s4);padding:6px 0;
  border-bottom:1px solid var(--rule);font-size:var(--t-13);margin:0;max-width:none}
.kv li::before{display:none}
.kv b{font:500 var(--t-11)/1.6 var(--f-data);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500}
.kv span{font-family:var(--f-data);word-break:break-all}
@media (max-width:560px){.kv li{grid-template-columns:1fr;gap:2px}}
pre{margin:var(--s4) 0;padding:var(--s4);background:var(--paper);border:1px solid var(--rule);border-radius:var(--r1);
  overflow-x:auto;font:400 var(--t-13)/1.55 var(--f-data)}

/* --- Футер ---------------------------------------------------- */
.ftr{border-top:1px solid var(--rule);background:var(--surface);margin-top:var(--s9)}
.ftr__in{max-width:var(--wrap);margin:0 auto;padding:var(--s7) var(--s5)}
.ftr__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s6);margin-bottom:var(--s6)}
.ftr__grid ul{list-style:none;margin:0;padding:0}
.ftr__grid li{margin-bottom:var(--s2)}
.ftr__grid a{font-size:var(--t-13);color:var(--ink);border:0}
.ftr__grid a:hover{color:var(--accent)}
.ftr__bar{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;padding-top:var(--s5);
  border-top:1px solid var(--rule);font:400 var(--t-12)/1.5 var(--f-data);color:var(--muted)}
.ftr__disc{max-width:70ch;font-family:var(--f-body);font-size:var(--t-12);line-height:1.5;color:var(--muted)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s4);top:var(--s4);z-index:99;background:var(--surface);padding:var(--s3);border:1px solid var(--ink)}


/* ═══ Живая кнопка перехода ═══
   Блик проходит по кнопке раз в несколько секунд: на длинной статье он ловит взгляд
   там, где статичная плашка уже стала частью фона. Анимация только на transform,
   поэтому не заставляет страницу пересчитывать раскладку, и гаснет при
   «уменьшить движение» в системе. */
.btn--go { position: relative; overflow: hidden; }
.btn--go::after { content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 38%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent);
  animation: go-sweep 7s ease-in-out infinite; pointer-events: none; }
@keyframes go-sweep { 0% { transform: translateX(0) } 26% { transform: translateX(420%) }
  100% { transform: translateX(420%) } }
@media (prefers-reduced-motion: reduce) { .btn--go::after { animation: none } }


/* ============================================================
   Картотека: карточка каталога, факты, полоса спроса, штамп
   ============================================================ */

/* Штамп замера — сквозной знак сайта: откуда цифры и когда сняты */
.stamp{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s3);
  border:1px solid var(--rule); border-left:3px solid var(--stampc);
  background:var(--surface); padding:var(--s3) var(--s4); border-radius:var(--r1);
  margin:var(--s4) 0; font-size:var(--t-12);
}
.stamp__k{font-family:var(--f-data);letter-spacing:.12em;color:var(--stampc);font-weight:500}
.stamp__v{font-family:var(--f-display);font-weight:700;font-size:var(--t-15);color:var(--ink)}
.stamp__src{color:var(--muted)}
.stamp__more{margin-left:auto;color:var(--accent);border-bottom:1px solid transparent}
.stamp__more:hover{border-bottom-color:currentColor}

/* Карточка сущности */
.card{
  border:1px solid var(--rule); background:var(--surface);
  border-radius:var(--r2); overflow:hidden; margin:var(--s5) 0;
}
.card__head{
  display:grid; grid-template-columns:auto 1fr auto; gap:var(--s4);
  align-items:center; padding:var(--s4) var(--s5);
  border-bottom:1px solid var(--rule); background:linear-gradient(0deg,var(--paper),transparent);
}
.card__idx{
  font-family:var(--f-data); font-size:var(--t-13); font-weight:500;
  color:var(--accent); border:1px solid var(--accent); border-radius:var(--r1);
  padding:2px 7px; letter-spacing:.06em;
}
.card__title{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s3)}
.card__title h2{margin:0;font-size:var(--t-24);border:0;padding:0}
.card__kind{
  font-family:var(--f-data); font-size:var(--t-11); letter-spacing:.08em;
  text-transform:uppercase; padding:2px 8px; border-radius:var(--r1);
  background:var(--paper); color:var(--muted); border:1px solid var(--rule);
}
.card__kind--K{color:var(--ok);background:var(--ok-bg);border-color:transparent}
.card__kind--B{color:var(--warn);background:var(--warn-bg);border-color:transparent}
.card__demand{text-align:right;line-height:1.15}
.card__fame{
  display:inline-block; font-family:var(--f-data); font-size:var(--t-12);
  padding:4px 10px; border-radius:999px; border:1px solid var(--rule);
  background:var(--paper); color:var(--muted); white-space:nowrap;
}
.card__fame--wide{color:var(--accent);border-color:var(--accent)}
.card__fame--known{color:var(--accent)}
.card__fame--rare{color:var(--stampc)}

.card__facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--rule)}
.fact{background:var(--surface);padding:var(--s4) var(--s5);display:flex;flex-direction:column;gap:var(--s1)}
.fact__k{font-size:var(--t-11);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.fact__v{font-family:var(--f-display);font-weight:600;font-size:var(--t-17)}
.fact__v a{color:var(--accent);border-bottom:1px solid var(--rule);word-break:break-word}
.fact__note{margin:var(--s1) 0 0;font-size:var(--t-13);color:var(--muted);line-height:1.5}
.fact--ok .fact__v{color:var(--ok)}
.fact--warn .fact__v{color:var(--stampc)}

/* Полоса спроса — вторая половина signature */
.demand{padding:var(--s5);border-top:1px solid var(--rule)}
.demand__h{margin:0 0 var(--s1);font-size:var(--t-15);font-family:var(--f-display);font-weight:700}
.demand__note{margin:0 0 var(--s4);font-size:var(--t-12);color:var(--muted)}
.demand__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.demand__row{display:grid;grid-template-columns:minmax(120px,1.2fr) 3fr minmax(56px,auto);gap:var(--s3);align-items:center;font-size:var(--t-13)}
.demand__k{color:var(--ink)}
.demand__bar{height:8px;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r1);overflow:hidden}
.demand__bar i{display:block;height:100%;background:var(--accent)}
.demand__v{font-family:var(--f-data);text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}

/* Список определений */
.deflist{margin:var(--s4) 0;display:grid;grid-template-columns:minmax(150px,auto) 1fr;gap:var(--s2) var(--s5)}
.deflist dt{font-family:var(--f-display);font-weight:700;color:var(--ink)}
.deflist dd{margin:0;color:var(--muted)}

/* Касса */
.paybox{border:1px solid var(--rule);background:var(--surface);border-radius:var(--r2);padding:var(--s4);margin:var(--s5) 0}
.paybox__frame{min-height:120px}
.paybox__fallback{margin:0;color:var(--muted);font-size:var(--t-15)}

@media (max-width:720px){
  .card__head{grid-template-columns:auto 1fr;gap:var(--s3);padding:var(--s4)}
  .card__demand{grid-column:1 / -1;text-align:left}
  .demand__row{grid-template-columns:minmax(96px,1.4fr) 2fr minmax(48px,auto);font-size:var(--t-12)}
  .deflist{grid-template-columns:1fr;gap:var(--s1)}
  .deflist dd{margin-bottom:var(--s3)}
}

.brand{display:flex;align-items:center;gap:var(--s2)}
.brand__sign{color:var(--accent);flex:none}