/* =====================================================================
   БАЗА ЗНАНИЙ — новая структура. Черновик.
   Шелл и палитра наследуют site/styles.css (корпоративный сайт),
   контентная типографика сохраняет «инженерный справочник» витрины:
   Spectral — заголовки, JetBrains Mono — коды/цифры, Inter — тело.
   Mobile-first: всё ниже 720px пишется первым, десктоп — медиазапросами.
   ===================================================================== */
:root{
  /* бренд — ровно из site/styles.css */
  --cyber:#00A7E0; --cyber-ink:#007BAB; --cyber-deep:#00688F;
  --graphite:#3E3E3E; --navy:#0B1220; --dark:#1A1F2A;
  --text:#1a1a1a; --line:#e5e7eb; --tint:#BBF6FF;
  /* --muted чуть темнее сайтового #6b7280: фон здесь не белый, а «бумага»
     #F1F3F5, и на ней 6b7280 даёт 4.35:1 — ниже нормы для мелкого текста */
  --muted:#646c79;
  /* «бумага» справочника */
  --paper:#F1F3F5; --card:#ffffff; --card2:#F7F9FA;
  --ink2:#39444d; --line2:#eef1f4; --rule:#cdd5db;
  --ok:#1c7d54; --okw:#E8F5EE; --okl:#bfe3ce;
  --warn:#8a5a10; --warnw:#FBF1DE; --warnl:#ecd3a0;
  --accw:#E9F5FA; --accl:#bfe4f2;
  --font-sans:'Inter','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  --font-mono:'JetBrains Mono','Cascadia Code','Consolas',ui-monospace,monospace;
  --font-serif:'Spectral','Palatino Linotype','Cambria',Georgia,serif;
  --radius-s:8px; --radius:16px; --radius-l:24px;
  --shadow-sm:0 2px 8px rgba(11,18,32,.06);
  --shadow:0 8px 32px rgba(11,18,32,.08);
  --shadow-lg:0 20px 60px rgba(11,18,32,.12);
  --ease:cubic-bezier(.2,.7,.2,1);
  --container:1200px;
  --safe:env(safe-area-inset-bottom,0px);
  --dock:76px;              /* высота нижней панели управления */
  --tap:52px;               /* минимальная тач-цель */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* scroll-padding-top = высота липкой шапки (hdr 65 + запас), чтобы переход к
   секции/якорю не уводил цель под шапку и не давал «пустой отступ» сверху. */
html{-webkit-tap-highlight-color:transparent;scroll-behavior:smooth;scroll-padding-top:106px}
body{
  font-family:var(--font-sans);font-size:16px;line-height:1.55;color:var(--text);
  background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:transparent;color:inherit}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--cyber-ink);outline-offset:2px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--container);margin:0 auto;padding:0 16px}
@media(min-width:720px){.wrap{padding:0 24px}}


/* ============ ШАПКА (компактная, не крадёт первый экран) ============ */
.hdr{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.hdr-in{display:flex;align-items:center;gap:12px;height:54px;max-width:var(--container);margin:0 auto;padding:0 12px}
@media(min-width:720px){.hdr-in{height:64px;padding:0 24px}}
.logo{display:flex;align-items:center;gap:9px;min-width:0;min-height:44px}
.logo svg{width:22px;height:26px;flex:none}
.logo .shield{width:28px;height:32px;flex:none}
/* Написание — как на главной: КИБЕР графитом, ТЕКТОР бренд-голубым. */
.logo .wm{font-weight:800;font-size:1.05rem;letter-spacing:-.01em;white-space:nowrap}
.logo .wm b{color:var(--graphite);font-weight:800}
.logo .wm i{font-style:normal;color:var(--cyber);font-weight:800}
.logo .sub{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);border-left:1px solid var(--line);padding-left:10px;white-space:nowrap}
@media(max-width:479px){.logo .sub{display:none}}
.hdr-sp{margin-left:auto}
.tierpill{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 12px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);font-size:.8rem;font-weight:600}
.tierpill b{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ok);background:var(--okw);border:1px solid var(--okl);border-radius:4px;padding:2px 6px}
.tierpill.guest b{color:var(--cyber-deep);background:var(--accw);border-color:var(--accl)}
.iconbtn{width:42px;height:42px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid transparent;color:var(--ink2)}
.iconbtn:hover{background:var(--card);border-color:var(--line)}
.iconbtn svg{width:22px;height:22px}

/* десктоп-меню сайта — чтобы база читалась как часть cybertektor.ru */
.hdr-nav{display:none}
@media(min-width:1000px){
  /* Пункты не переносятся по словам: с шестью пунктами и длинной плашкой
     аккаунта («Главный администратор · ПАРТНЁР») «База знаний» ломалась
     на две строки и растягивала всю шапку. */
  .hdr-nav{display:flex;gap:0;margin-left:16px;flex:none}
  .hdr-nav a{padding:8px 10px;border-radius:10px;font-size:.88rem;font-weight:600;
    color:var(--ink2);white-space:nowrap}
  .hdr-nav a:hover{background:var(--card);color:var(--cyber-ink)}
  .hdr-nav a[aria-current]{color:var(--cyber-ink);background:var(--accw)}
}

/* ============ РЕЛЬС ЧИПОВ (быстрый путь «симптом → кейсы») ============ */
.railhead{display:flex;align-items:baseline;gap:10px;padding:12px 0 6px}
.railhead h2{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0;font-weight:600}
.railhead a{margin-left:auto;font-size:.82rem;font-weight:650;color:var(--cyber-deep);
  display:inline-flex;align-items:center;min-height:40px;padding:0 2px}
.rail{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;
  padding:2px 16px 12px;margin:0 -16px;-ms-overflow-style:none;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
@media(min-width:720px){.rail{margin:0 -24px;padding:2px 24px 12px;flex-wrap:wrap;overflow:visible}}
.schip{
  scroll-snap-align:start;flex:none;display:inline-flex;align-items:center;gap:9px;
  min-height:var(--tap);padding:0 15px;border-radius:14px;background:var(--card);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
  font-size:.92rem;font-weight:600;color:var(--text);transition:.15s var(--ease);
}
.schip svg{width:19px;height:19px;color:var(--cyber-ink);flex:none}
.schip .c{font-family:var(--font-mono);font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
.schip:hover{border-color:var(--cyber);color:var(--cyber-deep)}
.schip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.schip[aria-pressed="true"] svg{color:var(--tint)}
.schip[aria-pressed="true"] .c{color:rgba(255,255,255,.65)}

/* ============ СТРОКА РЕЗУЛЬТАТОВ ============ */
.reshead{display:flex;align-items:center;gap:10px;padding:6px 0 10px;border-bottom:1px solid var(--rule);
  position:sticky;top:54px;z-index:30;background:var(--paper)}
@media(min-width:720px){.reshead{top:64px;padding:10px 0 12px}}
.rescount{font-family:var(--font-serif);font-size:1.15rem;font-weight:600;font-variant-numeric:tabular-nums}
.rescount span{font-family:var(--font-sans);font-size:.82rem;font-weight:400;color:var(--muted)}
.sortbtn{margin-left:auto;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;
  border-radius:10px;border:1px solid var(--line);background:var(--card);font-size:.82rem;font-weight:600;color:var(--ink2)}
.sortbtn svg{width:15px;height:15px}

/* активные фильтры лентой (не занимают экран) */
.actline{display:flex;gap:7px;overflow-x:auto;padding:10px 16px 2px;margin:0 -16px;scrollbar-width:none}
.actline::-webkit-scrollbar{display:none}
@media(min-width:720px){.actline{margin:0;padding:10px 0 2px;flex-wrap:wrap;overflow:visible}}
.actchip{flex:none;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 6px 0 12px;
  border-radius:9px;background:var(--card);border:1px solid var(--line);font-size:.82rem;color:var(--ink2)}
.actchip b{font-weight:650;color:var(--text)}
.actchip .x{width:22px;height:22px;border-radius:50%;background:var(--line2);color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;font-size:.72rem}
.actclear{flex:none;min-height:40px;padding:0 12px;border-radius:9px;font-size:.82rem;font-weight:650;color:var(--cyber-deep)}

/* ============ ЗАПИСЬ (карточка кейса) ============ */
.list{display:flex;flex-direction:column}
.rec{position:relative;padding:16px 0 15px;border-bottom:1px solid var(--line);background:none;
  transition:background .15s var(--ease)}
.rec::before{content:"";position:absolute;left:-12px;top:-1px;bottom:-1px;width:3px;background:var(--cyber);
  transform:scaleY(0);transform-origin:top;transition:transform .18s var(--ease)}
@media(hover:hover){
  .rec:hover{background:var(--card);box-shadow:var(--shadow-sm)}
  .rec:hover::before{transform:scaleY(1)}
}
.rec:focus-within{background:var(--card)}
@media(min-width:720px){.rec{padding:20px 0 19px}}
.rec-hit{position:absolute;inset:0;z-index:1;border-radius:10px}
.rec-hit:focus-visible{outline:2px solid var(--cyber-ink);outline-offset:-2px}
.rec-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.rec-code{font-family:var(--font-mono);font-size:.72rem;line-height:1.2;color:var(--cyber-deep);
  background:var(--accw);border:1px solid var(--accl);padding:4px 8px;border-radius:6px;
  max-width:100%;overflow-wrap:anywhere}
.rec-code.none{color:var(--muted);background:var(--line2);border-color:var(--line)}
.rec-dev{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:650;color:var(--muted)}
.rec-dev svg{width:15px;height:15px}
/* Статус — первым в строке слева: даёт ровную колонку цветных маркеров для
   сканирования и не ломается, когда код модели длинный («Gigabyte X470 AORUS
   Ultra Gaming» на 375 px занимает всю строку и выталкивал статус вниз). */
.rec-st{order:-1;display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;white-space:nowrap}
.rec-st i{width:8px;height:8px;border-radius:50%;display:block;flex:none}
.rec-st.ok{color:var(--ok)} .rec-st.ok i{background:var(--ok)}
.rec-st.warn{color:var(--warn)} .rec-st.warn i{background:var(--warn);border-radius:1px;transform:rotate(45deg)}
.rec-t{font-family:var(--font-serif);font-weight:600;font-size:1.14rem;line-height:1.28;letter-spacing:-.01em;
  margin:0;color:var(--text);overflow-wrap:break-word;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(min-width:720px){.rec-t{font-size:1.24rem;-webkit-line-clamp:2;max-width:62ch}}
/* «Что помогло» — главный носитель пользы, он же место гейтинга */
.rec-fix{position:relative;margin:9px 0 0;font-size:.88rem;line-height:1.45;color:var(--ink2);
  padding-left:12px;border-left:2px solid var(--okl);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rec-fix b{color:var(--ok);font-weight:700}
.rec.locked .rec-fix{border-left-color:var(--rule);color:var(--muted);filter:blur(3.4px);user-select:none}
.rec.locked .rec-fix b{color:var(--muted)}
.rec-lock{position:relative;z-index:2;display:inline-flex;align-items:center;gap:7px;margin:9px 0 0;
  height:32px;padding:0 11px;border-radius:8px;background:var(--card2);border:1px solid var(--line);
  font-size:.76rem;font-weight:700;color:var(--graphite)}
.rec-lock svg{width:14px;height:14px;color:var(--muted)}
.rec-tags{position:relative;z-index:2;display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;align-items:center}
.tag{display:inline-flex;align-items:center;min-height:38px;padding:0 13px;border-radius:10px;
  background:var(--card2);border:1px solid var(--line2);font-size:.79rem;color:var(--ink2)}
.tag:hover{border-color:var(--cyber);color:var(--cyber-deep)}
.rec-src{margin-left:auto;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap}
/* Узкий экран: третий и далее тег прячем — иначе строка тегов уходит на два
   ряда и запись вырастает на ~50 px, а на экран влезает меньше записей. */
@media(max-width:479px){.rec-tags .tag:nth-of-type(n+3){display:none}}

/* ============ НИЖНЯЯ ПАНЕЛЬ УПРАВЛЕНИЯ (большой палец) ============ */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  padding:10px 12px calc(10px + var(--safe));
  background:rgba(241,243,245,.94);backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-top:1px solid var(--line);display:flex;gap:10px;align-items:center;
}
.dock-in{display:flex;gap:10px;align-items:center;width:100%;max-width:var(--container);margin:0 auto}
.dock-search{flex:1;display:flex;align-items:center;gap:10px;height:var(--tap);padding:0 16px;
  border-radius:999px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm);
  color:var(--muted);font-size:.95rem;text-align:left;min-width:0}
.dock-search svg{width:20px;height:20px;color:var(--cyber-ink);flex:none}
.dock-search span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dock-search.has{color:var(--text);font-weight:600}
.dock-filter{position:relative;flex:none;width:var(--tap);height:var(--tap);border-radius:999px;
  background:var(--navy);color:#fff;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(11,18,32,.28)}
.dock-filter svg{width:22px;height:22px}
.dock-filter .badge{position:absolute;top:-2px;right:-2px;min-width:22px;height:22px;padding:0 5px;
  border-radius:999px;background:var(--cyber);color:#fff;font-family:var(--font-mono);font-size:.68rem;
  font-weight:700;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--paper)}
.dock-filter .badge[hidden]{display:none}
@media(min-width:1000px){.dock{display:none}}
body.has-dock{padding-bottom:calc(var(--dock) + var(--safe) + 8px)}
@media(min-width:1000px){body.has-dock{padding-bottom:40px}}

/* ============ ШТОРКА (bottom sheet) ============ */
.scrim{position:fixed;inset:0;z-index:80;background:rgba(11,18,32,.5);opacity:0;pointer-events:none;
  transition:opacity .2s var(--ease)}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--paper);
  border-radius:20px 20px 0 0;box-shadow:0 -18px 50px rgba(11,18,32,.28);
  max-height:88vh;display:flex;flex-direction:column;
  transform:translateY(102%);transition:transform .26s var(--ease);
}
.sheet.on{transform:none}
@media(min-width:1000px){
  .sheet{left:auto;right:24px;bottom:24px;top:24px;width:400px;border-radius:18px;max-height:none;
    transform:translateX(120%)}
  .sheet.on{transform:none}
}
.sheet-grab{width:44px;height:5px;border-radius:999px;background:var(--rule);margin:9px auto 2px;flex:none}
.sheet-head{display:flex;align-items:center;gap:12px;padding:6px 16px 12px;border-bottom:1px solid var(--line);flex:none}
.sheet-head h2{font-family:var(--font-serif);font-size:1.2rem;font-weight:600;margin:0}
.sheet-head .reset{margin-left:auto;font-size:.85rem;font-weight:650;color:var(--cyber-deep);height:44px;padding:0 10px}
.sheet-head .close{width:40px;height:40px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted)}
.sheet-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 16px 18px;flex:1}
.sheet-foot{flex:none;padding:12px 16px calc(12px + var(--safe));border-top:1px solid var(--line);background:var(--paper)}
.fgroup{padding:16px 0;border-bottom:1px solid var(--line)}
.fgroup:last-child{border-bottom:none}
.fgroup h3{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 11px;font-weight:600}
.fchips{display:flex;gap:8px;flex-wrap:wrap}
.fchip{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 14px;border-radius:12px;
  background:var(--card);border:1px solid var(--line);font-size:.9rem;font-weight:600;color:var(--ink2);
  transition:.12s var(--ease)}
.fchip svg{width:17px;height:17px;color:var(--muted)}
.fchip .c{font-family:var(--font-mono);font-size:.7rem;color:var(--muted);font-variant-numeric:tabular-nums}
.fchip:hover{border-color:var(--rule)}
.fchip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.fchip[aria-pressed="true"] svg{color:var(--tint)}
.fchip[aria-pressed="true"] .c{color:rgba(255,255,255,.65)}
.fchip.ok[aria-pressed="true"]{background:var(--ok);border-color:var(--ok)}
.fchip.warn[aria-pressed="true"]{background:var(--warn);border-color:var(--warn)}
.fmore{display:inline-flex;align-items:center;min-height:46px;padding:0 14px;border-radius:12px;
  border:1px dashed var(--rule);font-size:.86rem;font-weight:650;color:var(--cyber-deep)}

/* ============ КНОПКИ (из site/styles.css) ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--tap);
  padding:0 24px;border-radius:999px;font-weight:650;font-size:1rem;transition:.2s var(--ease);
  white-space:nowrap;text-align:center}
.btn-primary{background:var(--cyber-ink);color:#fff;box-shadow:0 8px 24px rgba(0,167,224,.32)}
.btn-primary:hover{background:var(--cyber-deep);box-shadow:0 12px 30px rgba(0,167,224,.4)}
.btn-dark{background:var(--graphite);color:#fff}
.btn-dark:hover{background:#1f1f1f}
.btn-outline{background:var(--card);color:var(--text);border:1.5px solid var(--rule)}
.btn-outline:hover{border-color:var(--cyber);color:var(--cyber-deep)}
/* Кнопке во всю ширину перенос разрешён: у .btn стоит white-space:nowrap, и
   длинная подпись растягивала всю страницу в горизонтальный скролл на 375 px
   (ловилось на экране «Все типы техники»). */
.btn-block{display:flex;width:100%;white-space:normal}
.btn .arrow{width:18px;height:18px;transition:transform .25s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}

/* ============ ПОИСКОВЫЙ ОВЕРЛЕЙ ============ */
.searchpane{position:fixed;inset:0;z-index:95;background:var(--paper);display:flex;
  /* column-reverse: поле оказывается ВНИЗУ — ровно там, где палец только что
     нажал на пилюлю поиска в нижней панели, и над клавиатурой */
  flex-direction:column-reverse;
  transform:translateY(14px);opacity:0;pointer-events:none;transition:.2s var(--ease)}
.searchpane.on{transform:none;opacity:1;pointer-events:auto}
.searchpane-top{display:flex;align-items:center;gap:8px;padding:10px 12px calc(10px + var(--safe));
  border-top:1px solid var(--line);background:var(--paper);flex:none}
.searchpane-field{flex:1;display:flex;align-items:center;gap:10px;height:var(--tap);padding:0 14px;
  border-radius:999px;background:var(--card);border:1.5px solid var(--cyber)}
.searchpane-field svg{width:20px;height:20px;color:var(--cyber-ink);flex:none}
.searchpane-field input{flex:1;min-width:0;border:0;background:none;font-family:var(--font-sans);
  font-size:1.02rem;font-weight:600;color:var(--text);outline:none}
.searchpane-field input::placeholder{color:#9aa4ac;font-weight:400}
.searchpane-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 16px 16px;flex:1;
  display:flex;flex-direction:column}
/* прижимаем подсказки к полю внизу: гибкая распорка сверху схлопывается,
   когда содержимое перестаёт помещаться (безопаснее justify-content:flex-end,
   который в этом случае обрезает верх при прокрутке) */
.searchpane-body::before{content:"";flex:1 1 auto;min-height:0}
.sugg{display:flex;align-items:center;gap:12px;width:100%;min-height:var(--tap);padding:8px 0;
  border-bottom:1px solid var(--line2);text-align:left;font-size:.96rem}
.sugg svg{width:18px;height:18px;color:var(--muted);flex:none}
.sugg .t{flex:1;min-width:0;line-height:1.35}
.sugg .k{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-left:auto;flex:none}
.sugg b{font-weight:700;color:var(--cyber-deep)}

/* ============ ПУСТО / ОШИБКА / СКЕЛЕТ ============ */
.state{text-align:center;padding:44px 18px 30px}
.state svg.big{width:52px;height:52px;margin:0 auto 14px;color:var(--rule)}
.state h3{font-family:var(--font-serif);font-size:1.25rem;font-weight:600;margin:0 0 8px}
.state p{color:var(--muted);font-size:.92rem;max-width:44ch;margin:0 auto 18px}
.state .acts{display:flex;flex-direction:column;gap:10px;max-width:340px;margin:0 auto}
@media(min-width:560px){.state .acts{flex-direction:row;justify-content:center;max-width:none}}
.skel{padding:16px 0 15px;border-bottom:1px solid var(--line)}
.sk{border-radius:6px;background:linear-gradient(90deg,#e6eaee 25%,#f2f5f7 37%,#e6eaee 63%);
  background-size:400% 100%;animation:shim 1.3s infinite linear}
.sk.a{width:112px;height:22px;margin-bottom:10px}
.sk.b{width:100%;height:19px;margin-bottom:7px}
.sk.c{width:72%;height:19px;margin-bottom:12px}
.sk.d{width:58%;height:15px}
@keyframes shim{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media(prefers-reduced-motion:reduce){.sk{animation:none}*{transition:none !important}}

/* ============ ЭКРАН КЕЙСА ============ */
.casetop{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);
  backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);
  border-bottom:1px solid var(--line)}
/* шапка кейса — на белом, как nav корпоративного сайта */
.casetop-in{display:flex;align-items:center;gap:8px;height:54px;max-width:var(--container);margin:0 auto;padding:0 8px}
@media(min-width:720px){.casetop-in{height:64px;padding:0 16px}}
.backbtn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 12px 0 8px;border-radius:12px;
  font-size:.92rem;font-weight:650;color:var(--ink2)}
.backbtn svg{width:20px;height:20px}
.backbtn:hover{background:var(--card)}
.casetop .tt{flex:1;min-width:0;font-size:.86rem;font-weight:650;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;opacity:0;transition:opacity .2s}
.casetop.scrolled .tt{opacity:1}

.casehead{padding:18px 0 16px}
.casehead .cm,.dv-lede .cm{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.casehead h1{font-family:var(--font-serif);font-weight:600;font-size:1.5rem;line-height:1.2;
  letter-spacing:-.02em;margin:0;overflow-wrap:break-word}
@media(min-width:720px){.casehead h1{font-size:2rem;max-width:24ch}.casehead{padding:26px 0 18px}}

.callout{display:flex;gap:11px;align-items:flex-start;border-radius:12px;padding:12px 14px;margin:0 0 16px;font-size:.9rem;line-height:1.45}
.callout svg{width:18px;height:18px;flex:none;margin-top:2px}
.callout.ok{background:var(--okw);border:1px solid var(--okl);color:#14563a}
.callout.ok b{color:var(--ok)}
.callout.warn{background:var(--warnw);border:1px solid var(--warnl);color:#6d4710}
.callout.warn b{color:var(--warn)}
.callout.danger{background:#fdeeee;border:1px solid #f2c9c9;color:#8a1f1f}
.callout.danger b{color:#a01d1d}

/* якорная навигация по разделам */
/* .anchors лежит на уровне body (не внутри .wrap), поэтому отрицательных
   полей ему не нужно — с ними он вылезал на 16 px и давал горизонтальный
   скролл всей страницы кейса. Отступы — на внутреннем контейнере. */
.anchors{position:sticky;top:54px;z-index:50;background:var(--paper);border-bottom:1px solid var(--line)}
@media(min-width:720px){.anchors{top:64px}}
.anchors-in{display:flex;gap:4px;overflow-x:auto;padding:0 16px;scrollbar-width:none;max-width:var(--container);margin:0 auto}
@media(min-width:720px){.anchors-in{padding:0 24px}}
.anchors-in::-webkit-scrollbar{display:none}
.anchors a{flex:none;display:inline-flex;align-items:center;gap:7px;height:46px;padding:0 12px;
  font-size:.86rem;font-weight:650;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap}
.anchors a .n{font-family:var(--font-mono);font-size:.66rem;color:var(--muted)}
.anchors a[aria-current="true"]{color:var(--text);border-bottom-color:var(--cyber)}
.anchors a[aria-current="true"] .n{color:var(--cyber-deep)}
@media(min-width:1000px){.anchors{display:none}}

.sec{scroll-margin-top:106px;padding:20px 0 4px;border-top:1px solid var(--line)}
.sec:first-of-type{border-top:none}
.sec>h2{font-family:var(--font-serif);font-size:1.22rem;font-weight:600;letter-spacing:-.01em;margin:0 0 10px;
  display:flex;align-items:center;gap:10px}
.sec>h2 .n{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;color:var(--muted);
  border:1px solid var(--line);border-radius:6px;padding:3px 7px;font-weight:500}
.prose{font-size:.97rem;line-height:1.66;color:var(--ink2)}
.prose p{margin:0 0 12px}
.prose b{color:var(--text)}
.prose code{font-family:var(--font-mono);font-size:.86em;background:var(--line2);padding:2px 6px;
  border-radius:5px;color:var(--cyber-deep);overflow-wrap:anywhere}
.prose a{color:var(--cyber-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* чек-лист быстрых проверок — крупные строки под палец */
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.checks li{display:flex;gap:12px;align-items:flex-start;padding:13px 12px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;font-size:.93rem;line-height:1.45}
.checks li svg{width:19px;height:19px;color:var(--cyber-ink);flex:none;margin-top:1px}

/* шаги диагностики */
.steps{display:flex;flex-direction:column;gap:10px}
.step{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.step-h{display:flex;align-items:center;gap:11px;padding:13px 14px;font-weight:700;font-size:.95rem}
.step-h .num{flex:none;width:26px;height:26px;border-radius:8px;background:var(--navy);color:#fff;
  font-family:var(--font-mono);font-size:.76rem;display:inline-flex;align-items:center;justify-content:center}
.step-b{padding:0 14px 13px;display:flex;flex-direction:column;gap:9px}
.step-r{display:flex;gap:10px;font-size:.9rem;line-height:1.45}
.step-r .lb{flex:none;width:88px;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);padding-top:3px}
.step-r.norm .vl{color:var(--ok);font-weight:600}
.step-r.bad .vl{color:var(--warn)}
/* На узком экране колонка подписи в 88 px оставляет тексту ~250 px и разгоняет
   шаг на 4–5 строк. Кладём подпись над значением. */
@media(max-width:479px){
  .step-r{flex-direction:column;gap:1px}
  .step-r .lb{width:auto;padding-top:0}
}

/* причины: карточки вместо таблицы — таблица на 375px нечитаема */
.causes{display:flex;flex-direction:column;gap:10px}
.cause{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 14px}
.cause-h{display:flex;align-items:flex-start;gap:9px;margin-bottom:8px}
.cause-h b{font-size:.95rem;line-height:1.35;font-weight:700}
.freq{flex:none;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 8px;border-radius:6px;margin-left:auto}
.freq.hi{background:var(--warnw);color:var(--warn);border:1px solid var(--warnl)}
.freq.lo{background:var(--line2);color:var(--muted);border:1px solid var(--line)}
.cause dl{margin:0;display:flex;flex-direction:column;gap:7px}
.cause dt{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cause dd{margin:0;font-size:.9rem;line-height:1.45;color:var(--ink2)}
@media(min-width:720px){
  .cause{display:grid;grid-template-columns:1fr 1fr;gap:6px 20px}
  .cause-h{grid-column:1 / -1;margin-bottom:2px}
}

/* детали и цены */
.parts{display:flex;flex-direction:column;gap:8px}
.part{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:11px 13px;min-height:var(--tap)}
.part .pn{font-family:var(--font-mono);font-size:.82rem;color:var(--cyber-deep);overflow-wrap:anywhere}
.part .nm{font-size:.82rem;color:var(--muted);line-height:1.35}
.part .pr{margin-left:auto;text-align:right;flex:none}
.part .pr b{font-family:var(--font-mono);font-size:.92rem;white-space:nowrap}
.part .pr span{display:block;font-size:.68rem;color:var(--muted)}

/* Файл из архива: две кнопки вместо одной — наша копия и сайт вендора.
   На узком экране столбиком: рядом они не помещаются, а ужимать до
   нечитаемого нельзя — это единственное действие на карточке. */
.part2{align-items:stretch}
.pr2{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-left:auto;flex:none}
/* класс .pr сюда не ставим намеренно: правило .part .pr span красит подпись
   в серый, и на тёмной кнопке она становится нечитаемой. */
.dlb{display:flex;flex-direction:column;justify-content:center;gap:1px;
  min-height:var(--tap);padding:6px 12px;border-radius:10px;text-align:right;
  font-family:var(--font-mono);font-size:.86rem;white-space:nowrap;
  background:var(--cyber-deep);color:#fff;border:1px solid var(--cyber-deep)}
.dlb span{font-family:var(--font-sans);font-size:.66rem;opacity:.75;white-space:nowrap}
.dlb.alt{background:transparent;color:var(--cyber-deep);border-color:var(--line)}
.dlb.alt span{color:var(--muted);opacity:1}
@media(max-width:520px){
  .part2{flex-wrap:wrap}
  .pr2{margin-left:0;width:100%;justify-content:stretch}
  .pr2 .dlb{flex:1;text-align:center}
}

/* фото */
.shots{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(min-width:720px){.shots{grid-template-columns:repeat(3,1fr)}}
.shot{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(135deg,#dfe5ea,#eef2f5);display:flex;align-items:flex-end}
.shot span{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:rgba(11,18,32,.62);padding:5px 8px;border-radius:0 8px 0 0}
.shot svg{position:absolute;inset:0;margin:auto;width:30px;height:30px;color:#b6c1c9}

/* источник */
.srcbox{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:13px 14px;min-height:var(--tap)}
.srcbox .l{min-width:0}
.srcbox .l b{display:block;font-size:.92rem}
.srcbox .l span{font-size:.78rem;color:var(--muted);word-break:break-all}
.srcbox svg{width:18px;height:18px;color:var(--muted);flex:none;margin-left:auto}

/* ============ ГЕЙТ ПОДПИСКИ ============ */
.gatewrap{position:relative}
.gatewrap .fadeout{
  max-height:230px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 40%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 40%,transparent 100%);
}
.gate{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px 18px 18px;
  box-shadow:var(--shadow);margin-top:-40px;position:relative;z-index:2}
@media(min-width:720px){.gate{padding:26px 26px 22px}}
.gate-i{width:44px;height:44px;border-radius:13px;background:var(--navy);color:var(--tint);
  display:flex;align-items:center;justify-content:center;margin-bottom:13px}
.gate-i svg{width:22px;height:22px}
.gate h2{font-family:var(--font-serif);font-size:1.25rem;font-weight:600;margin:0 0 8px}
.gate>p{color:var(--muted);font-size:.92rem;margin:0 0 14px}
.gate-list{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:9px}
.gate-list li{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--ink2);line-height:1.4}
.gate-list svg{width:17px;height:17px;color:var(--cyber-ink);flex:none;margin-top:2px}
.gate-list li>span{flex:1;min-width:0}
.gate-list b{font-family:var(--font-mono);font-size:.84rem;color:var(--text)}
.gate-acts{display:flex;flex-direction:column;gap:9px}
@media(min-width:560px){.gate-acts{flex-direction:row}.gate-acts .btn{flex:1}}
.gate-fine{margin:13px 0 0;font-size:.78rem;color:var(--muted);text-align:center}

/* ============ НИЖНЯЯ ПАНЕЛЬ КЕЙСА ============ */
.casedock{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;gap:10px;
  padding:10px 12px calc(10px + var(--safe));background:rgba(241,243,245,.95);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.casedock-in{display:flex;gap:10px;width:100%;max-width:var(--container);margin:0 auto;align-items:center}
.casedock .btn{flex:1}
.casedock .ghost{flex:none;width:var(--tap);height:var(--tap);border-radius:999px;background:var(--card);
  border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;color:var(--ink2)}
.casedock .ghost svg{width:21px;height:21px}
@media(min-width:1000px){.casedock{display:none}}

/* ============ ДЕСКТОП: две колонки ============ */
/* ВАЖНО: базовое display:none объявляем ДО медиазапроса, иначе оно перебьёт
   его по правилу «последний выигрывает» и колонка схлопнется. */
.cols{display:block}
.side{display:none}
.casecols{display:block}
.toc{display:none}
@media(min-width:1000px){
  .cols{display:grid;grid-template-columns:250px 1fr;gap:40px;align-items:start;padding-bottom:60px}
  .side{position:sticky;top:88px;display:block}
  .side .fgroup{padding:14px 0}
  .side .fchip{min-height:38px;padding:0 12px;font-size:.85rem}
}
@media(min-width:1000px){
  .casecols{display:grid;grid-template-columns:230px 1fr;gap:44px;align-items:start;padding-bottom:80px}
  .toc{position:sticky;top:92px;display:block}
  .toc h3{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--muted);margin:0 0 10px;font-weight:600}
  .toc>a{display:flex;gap:9px;align-items:center;padding:8px 10px;border-radius:9px;font-size:.88rem;
    color:var(--ink2);font-weight:600;border-left:2px solid transparent}
  .toc>a:hover{background:var(--card)}
  .toc>a[aria-current="true"]{color:var(--cyber-deep);border-left-color:var(--cyber);background:var(--accw)}
  .toc>a .n{font-family:var(--font-mono);font-size:.66rem;color:var(--muted);margin-left:auto}
}

/* ============ ХАБ МОДЕЛИ / ТИП ТЕХНИКИ ============ */
.mlist{display:flex;flex-direction:column}
.mrow{position:relative;display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 0;
  border-bottom:1px solid var(--line)}
@media(hover:hover){.mrow:hover{background:var(--card)}}
.mrow .l{min-width:0;flex:1}
.mrow .code{font-family:var(--font-mono);font-size:.94rem;font-weight:600;overflow-wrap:anywhere;line-height:1.25}
.mrow .sub{font-size:.79rem;color:var(--muted);margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.mrow .r{flex:none;display:flex;align-items:center;gap:10px;color:var(--muted)}
.mrow .r b{font-family:var(--font-mono);font-size:.95rem;color:var(--cyber-deep)}
.mrow .r svg{width:17px;height:17px}
.mrow-hit{position:absolute;inset:0}
.symgroup{margin-top:6px}
/* только прямой потомок: иначе правило перебивало .rec-t (тоже h3) и
   заголовки записей внутри группы теряли Spectral */
.symgroup>h3{display:flex;align-items:center;gap:10px;font-family:var(--font-sans);font-size:.9rem;
  font-weight:700;margin:20px 0 8px;color:var(--text)}
.symgroup>h3 .c{font-family:var(--font-mono);font-size:.7rem;color:var(--muted);font-weight:500}
.symgroup>h3::after{content:"";flex:1;height:1px;background:var(--line)}

/* ============ ПОДВАЛ ============ */
.foot{background:var(--dark);color:#9aa6b2;margin-top:40px;padding:34px 0 30px;font-size:.86rem}
.foot .wm{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;margin-bottom:12px}
.foot .wm i{font-style:normal;color:var(--cyber)}
.foot .wm b{color:#EAEFF5;font-weight:800}
.foot .wm .shield{width:28px;height:32px;flex:none}
.foot a{color:#cfd8e3}
.foot a:hover{color:#fff}
.foot .cols2{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:720px){.foot .cols2{grid-template-columns:1.4fr 1fr 1fr}}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.foot ul a{display:inline-flex;align-items:center;min-height:40px}
.foot h4{color:#fff;font-size:.82rem;margin:0 0 12px;letter-spacing:.02em}
.foot .legal{margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);font-size:.74rem;color:#78848f}

/* =====================================================================
   ВХОД ПО МОДЕЛИ (ось B) — компактный первый экран
   Типы техники едут горизонтальным рельсом, а вертикаль отдана списку
   моделей: плитки в столбик съедали весь первый экран.
   ===================================================================== */

/* «Вы смотрели» — недавние модели, 1 тап до хаба */
.mchip{scroll-snap-align:start;flex:none;display:flex;flex-direction:column;justify-content:center;gap:3px;
  min-height:var(--tap);padding:7px 14px;border-radius:14px;background:var(--card);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:.15s var(--ease);text-align:left}
.mchip:hover{border-color:var(--cyber)}
.mchip .code{font-family:var(--font-mono);font-size:.8rem;font-weight:600;white-space:nowrap;line-height:1.2}
.mchip .c{display:flex;align-items:center;gap:6px;font-size:.68rem;color:var(--muted);white-space:nowrap}
.mchip .c svg{width:13px;height:13px;color:var(--muted)}
.mchip .c b{font-family:var(--font-mono);font-weight:600;color:var(--cyber-deep)}
.railhead .ghostlink{margin-left:auto;font-size:.78rem;font-weight:600;color:var(--muted);
  display:inline-flex;align-items:center;min-height:40px;padding:0 2px}

/* Рельс типов техники: тот же .schip, но с числами в две строки не уходит */
.schip.type .c{color:var(--muted)}

/* «Вторая дверь» — вход к записям без привязки к модели.
   Пунктир и приглушённая подача: путь вторичный, но явный. */
.doorway{position:relative;display:flex;align-items:center;gap:12px;min-height:58px;
  padding:11px 14px;margin:2px 0 6px;border-radius:14px;background:var(--card);
  border:1px dashed var(--rule);transition:.15s var(--ease)}
.doorway:hover{border-color:var(--cyber);border-style:solid}
.doorway>svg{width:20px;height:20px;color:var(--cyber-ink);flex:none}
.doorway .t{flex:1;min-width:0;font-size:.8rem;line-height:1.35;color:var(--muted)}
.doorway .t b{display:block;font-size:.92rem;font-weight:700;color:var(--text)}
.doorway .t i{font-style:normal}
/* На телефоне у двери остаётся только заголовок и счётчик: пояснение
   уводило строку на два ряда и раздувало элемент до 96 px. */
@media(max-width:559px){.doorway{min-height:52px}.doorway .t .long{display:none}}
@media(min-width:560px){.doorway .t b{margin-bottom:2px}.doorway .t .short{display:none}}
.doorway .c{flex:none;font-family:var(--font-mono);font-size:.78rem;font-weight:600;color:var(--cyber-deep)}
.doorway .hit{position:absolute;inset:0;border-radius:14px}
.doorway .hit:focus-visible{outline:2px solid var(--cyber-ink);outline-offset:2px}
@media(max-width:379px){.doorway .t b{font-size:.88rem}}

/* Значки материалов в строке модели */
.mrow .mk{display:inline-flex;align-items:center;gap:5px;margin-top:5px;flex-wrap:wrap}
.mk .m{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 7px;border-radius:6px;
  background:var(--card2);border:1px solid var(--line2);
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mk .m svg{width:11px;height:11px}

.rec.raw{padding:14px 0 13px}
.rec.raw::before{background:var(--rule)}
.rec.raw .rec-t{font-family:var(--font-sans);font-size:.95rem;font-weight:650;line-height:1.4;
  color:var(--ink2);-webkit-line-clamp:2}
@media(min-width:720px){.rec.raw .rec-t{font-size:1rem}}
.rec.raw .rec-fix{border-left-color:var(--line);font-size:.84rem;color:var(--muted);-webkit-line-clamp:2}
.rec.raw .rec-fix b{color:var(--ink2);font-weight:650}
.rec.raw .rec-src{margin-left:0}
.rec.raw .rec-top{margin-bottom:6px;gap:7px}

/* Шапка модели: строка «Все N разборов модели» из кейса */
.crumb{position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px;min-height:44px;
  padding:0 12px 0 10px;margin:-4px 0 6px;border-radius:12px;background:var(--card);
  border:1px solid var(--line);font-size:.82rem;font-weight:650;color:var(--ink2);max-width:100%}
.crumb:hover{border-color:var(--cyber);color:var(--cyber-deep)}
.crumb:focus-visible{outline:2px solid var(--cyber-ink);outline-offset:2px}
.crumb svg{width:16px;height:16px;color:var(--cyber-ink);flex:none}
.crumb .code{font-family:var(--font-mono);font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crumb .c{font-family:var(--font-mono);font-size:.7rem;color:var(--muted);flex:none}
/* ссылка «все разборы модели» в заголовке раздела кейса */
.sec>h2 .more{margin-left:auto;font-family:var(--font-sans);font-size:.8rem;font-weight:650;
  color:var(--cyber-deep);white-space:nowrap;display:inline-flex;align-items:center;min-height:40px}

/* =====================================================================
   БОЕВЫЕ ДОПОЛНЕНИЯ К ЧЕРНОВИКУ
   Всё выше — макет из design/kb-structure. Ниже то, чего в черновике не
   было: вход участника, баннер подтверждения почты, разметка markdown
   (таблицы и списки — они есть в каждом разборе) и служебные отступы.
   ===================================================================== */

/* ---- служебные отступы вместо inline-стилей черновика ---- */
.padrow{padding:22px 0 8px}
.padrow-sm{padding:16px 0 4px}
.anchor-off{scroll-margin-top:64px}

/* ---- вход / регистрация ---- */
.tierpill.guest{cursor:pointer}
.tierpill.guest:hover{border-color:var(--cyber);color:var(--cyber-deep)}
.modal{position:fixed;inset:0;z-index:110;display:none;align-items:flex-start;justify-content:center;
  padding:32px 16px;background:rgba(11,18,32,.5);overflow-y:auto}
.modal.on{display:flex}
.modal-card{background:var(--card);border-radius:var(--radius);max-width:420px;width:100%;
  box-shadow:var(--shadow-lg);overflow:hidden;position:relative}
.authtabs{display:flex;border-bottom:1px solid var(--line)}
.authtab{flex:1;min-height:var(--tap);font-weight:700;color:var(--muted);border-bottom:2px solid transparent}
.authtab.on{color:var(--cyber-deep);border-bottom-color:var(--cyber)}
.authclose{position:absolute;top:6px;right:6px;width:42px;height:42px;border-radius:12px;color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center}
.authclose svg{width:20px;height:20px}
.authform{padding:20px 20px 22px;display:flex;flex-direction:column;gap:12px}
.authform label{font-size:.82rem;color:var(--muted);display:flex;flex-direction:column;gap:5px}
.authform label[hidden]{display:none}
.authform input{font:inherit;font-size:1rem;min-height:var(--tap);padding:0 14px;border:1.5px solid var(--line);
  border-radius:12px;color:var(--text);background:var(--card)}
.authform input:focus{outline:none;border-color:var(--cyber);box-shadow:0 0 0 3px rgba(0,167,224,.14)}
.authform .err{color:#b91c1c;font-size:.85rem;min-height:1.1em}
.authform .hint{margin:0;color:var(--muted);font-size:.82rem;text-align:center}
.authform .hint button{color:var(--cyber-deep);font-weight:650;min-height:40px}

/* ---- баннер «подтвердите почту» ---- */
.verify{background:var(--warnw);border-bottom:1px solid var(--warnl);color:#7c4a12;
  padding:11px 16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:.88rem}
.verify.ok{background:var(--okw);border-color:var(--okl);color:var(--ok)}
.verify .grow{flex:1;min-width:180px}
.verify button{border:1px solid currentColor;border-radius:10px;min-height:40px;padding:0 14px;
  font-weight:650;color:inherit;white-space:nowrap}
.verify .x{border:0;min-width:40px;padding:0 10px}

/* ---- markdown разбора: таблицы и списки ----
   «Причины и что делать» хранится таблицей, «Быстрые проверки» и «Запчасти» —
   списками. В старой витрине они схлопывались в абзацы. */
.prose h1,.prose h2,.prose h3{font-family:var(--font-serif);font-weight:600;letter-spacing:-.01em;
  color:var(--text);margin:18px 0 7px;line-height:1.25}
.prose h1{font-size:1.24rem}.prose h2{font-size:1.12rem}
.prose h3{font-family:var(--font-sans);font-size:.98rem;font-weight:700}
.prose ul,.prose ol{margin:0 0 12px;padding-left:22px}
.prose li{margin:0 0 6px}
.prose blockquote{border-left:2px solid var(--cyber);margin:10px 0;padding:2px 0 2px 14px;color:var(--muted)}
.prose hr{border:0;border-top:1px solid var(--line);margin:18px 0}
.prose img{border-radius:12px;border:1px solid var(--line);margin:10px 0}
.prose .tablewrap{overflow-x:auto;margin:0 0 14px;-webkit-overflow-scrolling:touch}
.prose table{border-collapse:collapse;width:100%;min-width:460px;font-size:.88rem}
.prose th,.prose td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.prose th{background:var(--card2);font-weight:700;font-size:.8rem}
/* Узкий экран: таблица «причин» раскладывается карточками — четыре колонки
   на 375 px нечитаемы. Разметку готовит mdToHtml (data-lb на ячейках). */
@media(max-width:719px){
  .prose table.cards,.prose table.cards tbody,.prose table.cards tr,.prose table.cards td{display:block;width:auto;min-width:0}
  .prose table.cards thead{display:none}
  .prose table.cards tr{background:var(--card);border:1px solid var(--line);border-radius:14px;
    padding:10px 12px;margin:0 0 10px}
  .prose table.cards td{border:0;padding:4px 0}
  .prose table.cards td::before{content:attr(data-lb);display:block;font-family:var(--font-mono);
    font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
  .prose table.cards td:first-child{font-weight:700}
  .prose .tablewrap{overflow:visible}
}

/* ---- подсказки поиска: пусто ---- */
.suggnote{padding:14px 2px;color:var(--muted);font-size:.86rem}

/* стрелка «наверх» — тот же спрайт, что и «дальше», только повёрнут */
.casedock .ghost.up svg{transform:rotate(-90deg)}

/* Имя участника в шапке не должно ломать строку и наезжать на логотип:
   имя ужимается многоточием, уровень доступа виден всегда. */
/* Блок аккаунта — строка: плашка и кнопка выхода рядом, а не друг под другом. */
/* Плашка аккаунта ужимается первой: имя длинное, а меню — навигация. */
.hdr #acct{display:flex;align-items:center;gap:6px;min-width:0;flex:0 1 auto;overflow:hidden}
.hdr .tierpill{max-width:52vw}
.tierpill .who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* На телефоне от имени толку мало — важен уровень доступа, его и оставляем. */
@media(max-width:479px){
  .hdr .tierpill{max-width:none;padding:0 10px}
  .tierpill .who{display:none}
}

/* ---- ручной поиск на десктопе ----
   На телефоне поиск живёт в нижней панели, у пальца. На широком экране панели
   нет, и вбить модель было негде — поле встаёт над списком. */
.deskfind{display:none}
@media(min-width:1000px){
  .deskfind{display:flex;align-items:center;gap:10px;margin:14px 0 2px;padding:0 16px;
    height:52px;background:var(--card);border:1px solid var(--line);border-radius:14px;
    box-shadow:var(--shadow-sm)}
  .deskfind:focus-within{border-color:var(--cyber);box-shadow:0 0 0 3px rgba(0,167,224,.14)}
  .deskfind>svg{width:20px;height:20px;color:var(--cyber-ink);flex:none}
  .deskfind input{flex:1;min-width:0;border:0;background:none;font-family:var(--font-sans);
    font-size:1rem;color:var(--text);outline:none}
  .deskfind input::placeholder{color:#9aa4ac}
  .deskfind input::-webkit-search-cancel-button{display:none}
  .deskfind .clr{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;
    justify-content:center;color:var(--muted);flex:none}
  .deskfind .clr:hover{background:var(--line2);color:var(--text)}
  .deskfind .clr svg{width:16px;height:16px}
  .deskfind .clr[hidden]{display:none}
}

/* ---- поиск на экране подбора ----
   То же поле, что и .deskfind, но видно на любой ширине: нижняя панель с
   поиском на этом экране скрыта, и на телефоне искать было нечем. */
.findbar{display:flex;align-items:center;gap:10px;margin:12px 0 2px;padding:0 14px;
  height:var(--tap);background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-sm)}
.findbar:focus-within{border-color:var(--cyber);box-shadow:0 0 0 3px rgba(0,167,224,.14)}
.findbar>svg{width:20px;height:20px;color:var(--cyber-ink);flex:none}
.findbar input{flex:1;min-width:0;border:0;background:none;font-family:var(--font-sans);
  font-size:1rem;color:var(--text);outline:none}
.findbar input::placeholder{color:#9aa4ac}
.findbar input::-webkit-search-cancel-button{display:none}
.findbar .clr{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;color:var(--muted);flex:none}
.findbar .clr:hover{background:var(--line2);color:var(--text)}
.findbar .clr svg{width:16px;height:16px}
.findbar .clr[hidden]{display:none}
@media(min-width:1000px){.findbar{height:52px;padding:0 16px;margin:14px 0 2px}}

/* ---- лента фильтров подбора ----
   Группы («бренд», «сокет») едут в одном прокручиваемом ряду: на телефоне
   отдельный ряд на каждую группу съел бы пол-экрана. Чипы поменьше обычных —
   иначе в ряд помещается три штуки. */
.vsrail{align-items:center;padding-top:6px}
.vsrail .raillab{flex:none;align-self:center;font-family:var(--font-mono);font-size:.58rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:0 2px 0 6px}
.vsrail .raillab:first-child{padding-left:0}
.schip.sm{min-height:34px;padding:0 12px;border-radius:11px;font-size:.82rem;gap:7px}
.schip.sm svg{width:14px;height:14px}
.schip.sm .c{font-size:.66rem}
@media(min-width:720px){.vsrail{flex-wrap:nowrap;overflow-x:auto}}

/* =====================================================================
   ПРОВЕРКА НАДЁЖНОСТИ ТЕХНИКИ (#/relia)
   Карточка отвечает на «чего ждать от этой железки»: балл, доля обращений
   в сервис против средней по категории, типовые причины и — обязательно —
   чем измеряли и хватает ли данных.
   ===================================================================== */
.relbar{display:grid;gap:12px;margin:0 0 14px}
.relsearch{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 14px;
  background:var(--card);border:1px solid var(--line);border-radius:14px}
.relsearch svg{width:19px;height:19px;color:var(--muted);flex:none}
.relsearch input{flex:1;border:0;background:none;font:inherit;font-size:1rem;color:var(--text);outline:none;min-width:0}
.relchips{display:flex;gap:8px;flex-wrap:wrap}

.relsort{display:inline-flex;align-items:center;gap:8px;color:var(--ink2);font-size:.86rem;font-weight:600}
.relsort svg{width:17px;height:17px;color:var(--muted)}
.relsort select{border:1px solid var(--line);background:var(--card);border-radius:10px;
  min-height:40px;padding:0 10px;font:inherit;font-size:.86rem;color:var(--ink2)}

.relrow{display:grid;gap:9px;padding:16px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);margin:0 0 10px;color:inherit;text-decoration:none;
  transition:.12s var(--ease)}
.relrow:hover{border-color:var(--rule);box-shadow:var(--shadow-sm)}
.relhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.relcode{font-family:var(--font-mono);font-size:.95rem;font-weight:600;color:var(--text)}
.reldev{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--muted)}
.reldev svg{width:15px;height:15px}

.relmid{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.relstars{display:inline-flex;gap:3px}
.relstars i{width:13px;height:13px;border-radius:2px;background:var(--line);display:block}
.relstars i.on{background:#f0a92a}
.relword{font-size:.9rem;font-weight:700;color:var(--text)}
.relrate{font-family:var(--font-mono);font-size:.8rem;padding:3px 9px;border-radius:999px}
.relrate.good{background:var(--okw);color:var(--ok);border:1px solid var(--okl)}
.relrate.bad{background:var(--warnw);color:var(--warn);border:1px solid var(--warnl)}
.relrate .vs{opacity:.75}
.relwarn{display:inline-flex;align-items:center;gap:5px;font-size:.76rem;color:var(--warn)}
.relwarn svg{width:14px;height:14px}

.reltags{display:flex;gap:6px;flex-wrap:wrap}
.reltag{font-size:.76rem;padding:3px 9px;border-radius:999px;background:var(--card2);
  border:1px solid var(--line2);color:var(--ink2)}
.reltag b{font-family:var(--font-mono);font-weight:600}

.relfoot{display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  font-size:.76rem;color:var(--muted);border-top:1px dashed var(--line);padding-top:8px}
.reltrust{font-weight:600;color:var(--ink2)}
.relsrc,.relbuy,.relcases{white-space:nowrap}

@media (min-width:720px){
  .relbar{grid-template-columns:minmax(260px,340px) 1fr;align-items:center}
  .relrow{padding:18px 20px}
}

/* На телефоне карточка не должна занимать пол-экрана: длинную подпись
   источника прячем — она есть в карточке модели, а здесь важнее сам факт. */
@media (max-width:719px){
  .relrow{padding:14px}
  .relfoot{gap:8px}
  .relsrc{display:none}
  .reltags .reltag:nth-child(n+3){display:none}
}

/* Пояснение «как считается оценка» живёт внутри общей свёртки .dv-fold */
.relhow-body{padding:0 16px 16px;font-size:.88rem;line-height:1.55;color:var(--ink2)}
.relhow-body p{margin:0 0 10px}
.relhow-body ul{margin:0 0 10px;padding-left:18px;display:grid;gap:7px}
.relhow-body li{padding-left:2px}
.relhow-body b{color:var(--text)}

/* Видео-разборы: список чужих роликов с главами */
.vlist{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.vrow{padding:0 0 12px;border-bottom:1px solid var(--line)}
.vlist .vrow:last-child{border-bottom:0;padding-bottom:0}
.vtitle{font-weight:600;font-size:.92rem;color:var(--text);text-decoration:none}
.vtitle:hover{color:var(--cyber-deep)}
.vkind{margin-left:8px;font-size:.72rem;padding:2px 8px;border-radius:999px;
  background:var(--card2);border:1px solid var(--line2);color:var(--ink2)}
.vmeta{margin-top:3px;font-size:.78rem;color:var(--muted)}
.vchap{margin-top:6px}
.vchap summary{cursor:pointer;font-size:.8rem;color:var(--muted);list-style:none;
  display:flex;align-items:center;min-height:40px}
.vchap summary::-webkit-details-marker{display:none}
.vchap ul{margin:6px 0 0;padding-left:16px;display:grid;gap:2px;font-size:.82rem}
.vchap li{display:flex;align-items:center;gap:7px;min-height:32px}
.vchap a{font-family:var(--font-mono);color:var(--cyber-deep);
  display:inline-flex;align-items:center;align-self:stretch;min-height:32px;flex:none}
.vchips{margin-top:6px;display:flex;gap:6px;flex-wrap:wrap}

/* Ключевые характеристики строкой в списке надёжности */
.relspecs{display:flex;gap:6px;flex-wrap:wrap;align-items:baseline}
.relspec{font-size:.76rem;color:var(--muted)}
.relspec+.relspec::before{content:'·';margin-right:6px;opacity:.6}
.relspec b{font-family:var(--font-mono);font-weight:600;color:var(--ink2)}

/* ---- рекламные места ----
   Реклама не притворяется содержимым: своя рамка, пометка «Реклама» сверху,
   приглушённая подача. Пустой слот схлопывается — пока рекламы нет, вёрстка
   выглядит ровно как раньше. */
.adslot{margin:18px 0;padding:10px 12px 12px;border:1px dashed var(--line);
  border-radius:14px;background:var(--card2)}
.adslot[hidden]{display:none}
.adslot .adlabel{display:block;margin-bottom:8px;font-family:var(--font-mono);
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.adslot .adbox{min-height:0}
.adslot .adbox:empty{display:none}
/* Партнёрские карточки маркетплейсов */
.adslot.partners .plist{display:grid;gap:8px}
@media(min-width:720px){.adslot.partners .plist{grid-template-columns:repeat(3,1fr)}}
.pcard{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;
  background:var(--card);border:1px solid var(--line);transition:.15s var(--ease)}
.pcard:hover{border-color:var(--cyber)}
.pcard .shop{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cyber-deep)}
.pcard .t{font-weight:650;font-size:.9rem;line-height:1.3;color:var(--text)}
.pcard .n{font-size:.78rem;color:var(--muted);line-height:1.35}
.pcard .erid{margin-top:4px;font-family:var(--font-mono);font-size:.56rem;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- фильтры внутри раздела (сокет, чипсет, серия…) ----
   Второй уровень фильтров: появляется только когда выбран тип техники,
   поэтому подача мельче и с подписью слева — чтобы не спорить с первым рядом. */
.relattrs{display:flex;flex-direction:column;gap:8px;margin:2px 0 14px}
.relattrs[hidden]{display:none}
.relattr{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.relattr .k{flex:none;min-width:96px;padding-top:8px;font-family:var(--font-mono);
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.relattr .vals{display:flex;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
.relattr .fchip{min-height:38px;padding:0 12px;font-size:.84rem}
@media(max-width:559px){
  .relattr{gap:4px}
  .relattr .k{min-width:0;padding-top:0;width:100%}
}

/* =====================================================================
   КАТАЛОГ ТЕХНИКИ (#/catalog) И СРАВНЕНИЕ МОДЕЛЕЙ (#/vs/…)
   Перенесено из черновика design/compare/compare.css. Вариант Б
   (параметр-карточки) не переносился: на телефоне принят вариант А.
   ===================================================================== */
/* ============ КАТАЛОГ: строка модели «что мы знаем» ============ */
/* Наследует .mrow из baza.css; добавляет ленту признаков и кнопку сравнения. */
.mrow.cat{align-items:flex-start;gap:10px}
.mrow.cat .l{padding-top:1px}
.knw{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:6px}
.knw .k{display:inline-flex;align-items:center;gap:5px;height:23px;padding:0 8px;border-radius:6px;
  background:var(--accw);border:1px solid var(--accl);color:var(--cyber-deep);
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.04em;white-space:nowrap}
.knw .k svg{width:12px;height:12px;flex:none}
.knw .k b{font-weight:700}
/* На телефоне у ленты остаются иконка и число: со словами строка модели
   вырастала до 154 px и на экран влезало пять моделей вместо восьми.
   Расшифровка стоит один раз над списком (.knwkey). */
.knw .k .w{display:none}
@media(min-width:720px){.knw .k .w{display:inline}}
.knwkey{display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding:8px 0 2px;
  font-family:var(--font-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted)}
.knwkey span{display:inline-flex;align-items:center;gap:5px}
.knwkey svg{width:12px;height:12px;color:var(--cyber-ink)}
@media(min-width:720px){.knwkey{display:none}}
/* «Знаем только каталожную строку» — приглушённо и словами, а не пустотой */
.knw .k.thin{background:var(--card2);border-color:var(--line);color:var(--muted)}
.knw .k.warnk{background:var(--warnw);border-color:var(--warnl);color:var(--warn)}
.knw .k.okk{background:var(--okw);border-color:var(--okl);color:var(--ok)}
.mrow.cat .r{align-self:center;gap:4px}
/* Кнопка «в сравнение» — своя цель нажатия поверх ссылки-подложки строки */
.addvs{position:relative;z-index:2;width:44px;height:44px;border-radius:12px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--card);color:var(--ink2);transition:.12s var(--ease)}
.addvs svg{width:18px;height:18px}
.addvs:hover{border-color:var(--cyber);color:var(--cyber-deep)}
.addvs[aria-pressed="true"]{background:var(--cyber-ink);border-color:var(--cyber-ink);color:#fff}
.addvs[disabled]{opacity:.4;cursor:not-allowed}
.addvs:focus-visible{outline:2px solid var(--cyber-ink);outline-offset:2px}

/* Честный разделитель: дальше идут модели, про которые известно только имя */
.catsplit{display:flex;align-items:flex-start;gap:12px;margin:22px 0 2px;padding:12px 14px;
  background:var(--card2);border:1px dashed var(--rule);border-radius:var(--radius-s)}
.catsplit svg{width:19px;height:19px;color:var(--muted);flex:none;margin-top:2px}
.catsplit p{margin:0;font-size:.82rem;line-height:1.45;color:var(--ink2)}
.catsplit b{font-family:var(--font-mono);font-weight:600;color:var(--text)}

/* ============ ПОДНОС СРАВНЕНИЯ ============ */
/* Замещает нижнюю панель: пока набираешь сравнение — это режим, а не виджет. */
.tray{position:fixed;left:0;right:0;bottom:0;z-index:75;
  background:rgba(255,255,255,.96);backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-top:1px solid var(--rule);box-shadow:0 -10px 34px rgba(11,18,32,.12);
  padding:10px 12px calc(10px + var(--safe))}
.tray-in{max-width:var(--container);margin:0 auto}
.tray-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.tray-top .cap{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap}
.tray-top .cap b{color:var(--cyber-deep);font-weight:700}
.tray-top .drop{margin-left:auto;min-height:36px;padding:0 8px;border-radius:9px;
  font-size:.78rem;font-weight:650;color:var(--muted)}
.tray-top .drop:hover{color:var(--text)}
.trayline{display:flex;gap:7px;overflow-x:auto;padding:0 12px 9px;margin:0 -12px;scrollbar-width:none}
.trayline::-webkit-scrollbar{display:none}
.traychip{flex:none;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 6px 0 11px;
  border-radius:10px;background:var(--card2);border:1px solid var(--line);
  font-family:var(--font-mono);font-size:.76rem;font-weight:600;color:var(--text);max-width:62vw}
.traychip .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.traychip .x{width:26px;height:26px;border-radius:50%;background:var(--line2);color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;flex:none}
.traychip .x svg{width:13px;height:13px}
.traychip .x:hover{background:var(--rule);color:var(--text)}
/* Пустое место в наборе — видно, сколько ещё можно добавить */
.trayslot{flex:none;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 12px;
  border-radius:10px;border:1px dashed var(--rule);color:var(--muted);font-size:.76rem;white-space:nowrap}
.trayslot svg{width:14px;height:14px}
.tray .btn{width:100%}
.tray .hint{margin:0;text-align:center;font-size:.78rem;color:var(--muted);line-height:1.4}
.tray.full .tray-top .cap b{color:var(--warn)}
@media(min-width:1000px){
  .tray{left:auto;right:24px;bottom:24px;width:400px;border:1px solid var(--rule);
    border-radius:var(--radius);padding:14px 16px}
  .traychip{max-width:320px}
}

/* ============ СРАВНЕНИЕ: шапка экрана ============ */
.cmphead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:14px 0 10px}
.cmphead h1{font-family:var(--font-serif);font-weight:600;font-size:1.34rem;line-height:1.16;
  letter-spacing:-.02em;margin:0}
.cmphead .c{font-family:var(--font-mono);font-size:.72rem;color:var(--muted)}
@media(min-width:720px){.cmphead{padding:24px 0 12px}.cmphead h1{font-size:2rem}}

/* Панель управления: схлопывание одинаковых строк + добавить модель */
.cmpctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 0 10px;
  border-bottom:1px solid var(--rule);margin-bottom:2px}
.cmpctl .sw{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 12px 0 10px;
  border-radius:11px;border:1px solid var(--line);background:var(--card);
  font-size:.82rem;font-weight:600;color:var(--ink2)}
.cmpctl .sw svg{width:16px;height:16px;color:var(--muted)}
.cmpctl .sw[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.cmpctl .sw[aria-pressed="true"] svg{color:var(--tint)}
.cmpctl .sw .c{font-family:var(--font-mono);font-size:.68rem;color:var(--muted)}
.cmpctl .sw[aria-pressed="true"] .c{color:rgba(255,255,255,.66)}
.cmpctl .add{margin-left:auto}

/* Правила чтения — один раз, до первой цифры */
.cmpkey{display:flex;gap:14px;flex-wrap:wrap;align-items:center;padding:9px 0 12px;
  font-size:.75rem;color:var(--muted);line-height:1.35}
.cmpkey span{display:inline-flex;align-items:center;gap:6px}
.cmpkey .kbar{display:inline-block;width:22px;height:7px;border-radius:3px;background:var(--cyber);flex:none}
.cmpkey .kdash{font-family:var(--font-mono);color:var(--muted);
  background:repeating-linear-gradient(135deg,transparent 0 4px,#dfe4e9 4px 5px);
  padding:1px 7px;border-radius:4px}
.cmpkey .kdlt{font-family:var(--font-mono);color:var(--ink2)}

/* ============ СРАВНЕНИЕ: матрица (десктоп + вариант А на телефоне) ============ */
/* --cols задаёт JS: «152px 1fr 1fr 1fr» на широком экране и
   «112px 142px 142px 142px» в свайп-режиме. Через одну переменную со всем
   списком дорожек, а не repeat(var(--n),…): счётчик из переменной внутри
   repeat() поддержан не везде. */
.vs{--cols:152px 1fr 1fr;display:block}
.vsrow{display:grid;grid-template-columns:var(--cols);align-items:stretch;
  border-bottom:1px solid var(--line)}
.vsrow[hidden]{display:none}
.vslab{padding:12px 12px 12px 0;min-width:0}
.vslab .n{display:block;font-size:.82rem;font-weight:650;color:var(--ink2);line-height:1.3;
  overflow-wrap:break-word}
.vslab .d{display:block;margin-top:3px;font-family:var(--font-mono);font-size:.55rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.vslab .d.none{opacity:.75}
.vslab .part{display:inline-flex;align-items:center;gap:4px;margin-top:4px;
  font-size:.66rem;color:var(--warn)}
.vslab .part svg{width:11px;height:11px}

.vscell{padding:12px 10px 12px 0;min-width:0;display:flex;flex-direction:column;
  justify-content:flex-start;gap:5px;border-left:1px solid var(--line2)}
.vscell .v{font-family:var(--font-mono);font-size:.95rem;font-weight:600;color:var(--ink2);
  font-variant-numeric:tabular-nums;line-height:1.2;overflow-wrap:anywhere}
.vscell .v small{font-family:var(--font-sans);font-size:.7rem;font-weight:400;color:var(--muted)}
/* Текстовые значения (сокет, интерфейс) — не цифры, моноширинный им ни к чему */
.vscell.text .v{font-family:var(--font-sans);font-size:.86rem;font-weight:600}
.vscell .bar{display:block;height:7px;border-radius:4px;background:var(--line2);
  overflow:hidden;max-width:120px}
.vscell .bar i{display:block;height:100%;background:#b6c0c8;border-radius:4px}
.vscell .dlt{font-family:var(--font-mono);font-size:.66rem;color:var(--muted);
  font-variant-numeric:tabular-nums}
/* Лидер строки: бренд-голубая заливка и слово. Только цветом не обходимся —
   «лучший» читается и в ч/б, и при дальтонизме. */
.vscell.win .v{color:var(--text);font-weight:700}
.vscell.win .bar i{background:var(--cyber)}
.vscell.win .dlt{color:var(--cyber-deep);font-weight:700;display:inline-flex;align-items:center;gap:4px}
.vscell.win .dlt svg{width:11px;height:11px}
/* Вес оценки. Балл 5/5, посчитанный по трём отзывам, и балл 5/5 по трёмстам —
   разные вещи; без этой подписи цифра врёт. */
.vscell .cnote{display:block;font-size:.64rem;line-height:1.3;color:var(--warn);
  font-family:var(--font-sans);font-weight:400}
/* Источник этой ячейки отличается от источника строки — говорим об этом */
.vscell .src{font-family:var(--font-mono);font-size:.55rem;letter-spacing:.08em;text-transform:uppercase;
  color:#8d97a0;display:inline-flex;align-items:center;gap:4px}
.vscell .src::before{content:"";width:5px;height:5px;border-radius:50%;background:#c2cad1;flex:none}
/* Нет данных: штриховка вместо полоски — дыра, а не ноль */
.vscell.nod{background:repeating-linear-gradient(135deg,transparent 0 5px,rgba(150,163,173,.13) 5px 6px)}
.vscell.nod .v{color:#8d97a0;font-weight:400}
.vscell.nod .dlt{color:#8d97a0}

/* Заголовок раздела внутри матрицы */
.vssec{display:flex;align-items:baseline;gap:10px;margin:26px 0 0;padding:0 0 7px;
  border-bottom:2px solid var(--graphite)}
.vssec h2{font-family:var(--font-serif);font-size:1.14rem;font-weight:600;letter-spacing:-.01em;margin:0}
.vssec .c{font-family:var(--font-mono);font-size:.68rem;color:var(--muted)}
/* Раздела нет ни у кого — говорим почему, а не прячем молча */
.vsempty{padding:14px 0 16px;border-bottom:1px solid var(--line);font-size:.84rem;
  line-height:1.5;color:var(--muted);max-width:64ch}
.vsempty b{color:var(--ink2);font-weight:650}
/* Сводка схлопнутых строк */
.samefold{display:flex;align-items:flex-start;gap:10px;padding:11px 0 12px;
  border-bottom:1px solid var(--line);font-size:.8rem;line-height:1.45;color:var(--muted)}
.samefold svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--ok)}
.samefold b{color:var(--ink2);font-weight:600}
.samefold button{margin-left:auto;flex:none;min-height:44px;margin-top:-6px;padding:0 8px;font-size:.78rem;
  font-weight:650;color:var(--cyber-deep);white-space:nowrap}

/* ============ СРАВНЕНИЕ: карточки моделей в шапке матрицы ============ */
.vshead{display:grid;grid-template-columns:var(--cols);align-items:stretch;
  border-bottom:2px solid var(--graphite);background:var(--paper)}
.vshead .pad{padding:10px 12px 10px 0}
.vshead .pad .lg{font-family:var(--font-mono);font-size:.55rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.vscard{position:relative;padding:10px 10px 12px;border-left:1px solid var(--line2);min-width:0}
.vscard .ix{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;
  border-radius:5px;font-family:var(--font-mono);font-size:.66rem;font-weight:700;margin-bottom:6px}
.vscard .code{font-family:var(--font-mono);font-size:.8rem;font-weight:600;line-height:1.25;
  color:var(--text);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.vscard .meta{margin-top:4px;font-size:.68rem;color:var(--muted);line-height:1.35}
/* Ссылка ведёт в нашу карточку модели, а не в магазин — и называется так же.
   Наличие в рознице ушло в строку .meta: это признак, а не действие. */
.vscard .tocard{position:relative;z-index:2;display:inline-flex;align-items:center;gap:5px;margin-top:6px;
  min-height:30px;padding:0 8px;border-radius:7px;background:var(--card2);border:1px solid var(--line);
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.04em;color:var(--cyber-deep);
  white-space:nowrap;max-width:100%}
.vscard .tocard svg{width:11px;height:11px;flex:none}
.vscard .tocard .nm{overflow:hidden;text-overflow:ellipsis}
.vscard .tocard:hover{border-color:var(--cyber)}
/* Откуда цифры в колонке. Если строка целиком из одного источника — подпись
   стоит в подписи строки; в ячейке появляется, только когда источник другой. */
.vscard .from{margin-top:6px;display:block;font-family:var(--font-mono);font-size:.55rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);line-height:1.4;
  overflow-wrap:anywhere}
.vscard .rm{position:absolute;top:4px;right:2px;width:32px;height:32px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;color:var(--muted)}
.vscard .rm svg{width:14px;height:14px}
.vscard .rm:hover{background:var(--line2);color:var(--text)}
/* Крестик рисуем маленьким — колонка узкая, — но палец ловим на 44 px.
   То же для крестика в подносе и для ссылки в магазин. */
.vscard .rm::before{content:"";position:absolute;inset:-6px}
.traychip .x,.vscard .tocard{position:relative}
.traychip .x::before,.vscard .tocard::before{content:"";position:absolute;inset:-9px}
.vsadd{border-left:1px dashed var(--rule);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;padding:12px 8px;color:var(--muted);font-size:.72rem;text-align:center}
.vsadd svg{width:20px;height:20px}
.vsadd:hover{color:var(--cyber-deep)}
/* Метки моделей: навий / бренд / графит / контур — различимы и в ч/б */
.ix1{background:var(--navy);color:#fff}
.ix2{background:var(--cyber);color:#fff}
.ix3{background:var(--graphite);color:#fff}
/* Четвёртая метка — контурная. Рамку берём графитовую, а не серую линейку:
   со светлой рамкой колонка читалась как выключенная. */
.ix4{background:var(--card);color:var(--graphite);border:1.5px solid var(--graphite)}

/* ============ ТЕЛЕФОН, ВАРИАНТ А: липкая колонка + свайп ============ */
/* Скроллер НЕ выпускаем под края экрана: с внутренним padding у него разъезжались
   три системы координат — смещение sticky, точка прилипания scroll-snap и край
   окна. Липкая подпись наезжала на первую модель на 16 px. Без padding всё три
   считаются от одного нуля, а полоска справа обрезается по полю страницы и сама
   намекает, что дальше есть ещё колонка.
   scroll-padding-left должен быть равен ширине колонки подписей. */
.vsswipe{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;scroll-padding-left:116px;
  margin:0;padding:0;scrollbar-width:none}
.vsswipe::-webkit-scrollbar{display:none}
.vsswipe>.vs{min-width:max-content}
/* z-index выше, чем у содержимого карточек: у ссылки «Карточка модели»
   свой z-index 2, и при равных значениях выигрывала она — уезжающая
   колонка проступала сквозь липкую подпись. */
.vsswipe .vslab,.vsswipe .vshead .pad{position:sticky;left:0;z-index:6;background:var(--paper);
  padding-right:8px;box-shadow:8px 0 8px -8px rgba(11,18,32,.18)}
.vsswipe .vslab .n{font-size:.79rem}
.vsswipe .vscard{scroll-snap-align:start;padding:9px 8px 11px}
.vsswipe .vscard .code{font-size:.74rem}
.vsswipe .vscard .rm{top:2px;right:0;width:28px;height:28px}
.vsswipe .vscell{padding:11px 8px 11px 0}
.vsswipe .vscell .v{font-size:.88rem}
/* Заголовки разделов, сводка одинаковых строк и объяснение пустого раздела —
   это текст, а не данные: он не должен уезжать вбок вместе с колонками,
   иначе кнопка «Показать» оказывается за краем экрана. */
.vsswipe .vssec,.vsswipe .samefold,.vsswipe .vsempty{position:sticky;left:0;z-index:5;
  width:calc(100vw - 32px);background:var(--paper)}
/* Оговорка про подменённый источник — тоже текст, а не данные: вбок она
   уезжала вместе с колонками и обрывалась на полуслове. */
.vsswipe .vssubst{position:sticky;left:0;z-index:5;width:calc(100vw - 32px)}
/* В узкой колонке полоска тянется на всю ширину ячейки */
.vsswipe .vscell .bar{max-width:none}
/* Указатель «где я»: активная метка — та колонка, что сейчас в кадре */
.swipedots{display:flex;gap:5px;align-items:center;justify-content:center;padding:8px 0 2px}
.swipedots i{width:6px;height:6px;border-radius:50%;background:var(--rule);transition:.15s var(--ease)}
.swipedots i.on{background:var(--cyber-ink);width:18px;border-radius:3px}
.swipehint{text-align:center;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);padding:0 0 8px}

/* Липкая легенда «кто под каким номером» — общая для обоих вариантов */
.cmplegend{position:sticky;top:54px;z-index:35;display:flex;gap:6px;overflow-x:auto;
  background:var(--paper);border-bottom:1px solid var(--rule);
  padding:8px 16px;margin:0 -16px;scrollbar-width:none}
.cmplegend::-webkit-scrollbar{display:none}
.lchip{flex:none;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 10px;
  border-radius:9px;background:var(--card);border:1px solid var(--line);
  font-family:var(--font-mono);font-size:.72rem;font-weight:600;color:var(--ink2);max-width:56vw}
.lchip .ix{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
  border-radius:4px;font-size:.58rem;font-weight:700;flex:none}
.lchip .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lchip.dim{opacity:.42}
@media(min-width:720px){.cmplegend{top:64px;padding:8px 24px;margin:0 -24px}}

/* ============ СРАВНЕНИЕ: итог сверху ============ */
/* Первый экран отвечает «ну и что», а не начинается с шестидесяти строк. */
.verdict{display:grid;gap:9px;padding:14px 16px;margin:12px 0 4px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.verdict h2{font-family:var(--font-serif);font-size:1.04rem;font-weight:600;margin:0}
.verdict ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.verdict li{display:flex;gap:9px;align-items:flex-start;font-size:.85rem;line-height:1.45;color:var(--ink2)}
.verdict li svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--cyber-ink)}
.verdict li b{font-weight:650;color:var(--text)}
.verdict li .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.verdict .thin{font-size:.78rem;color:var(--muted);margin:0}
.verdict.short{border-style:dashed;background:var(--card2);box-shadow:none}
.verdict.short li svg{color:var(--warn)}

/* Мало данных — предупреждение до таблицы, а не после */
.thinwarn{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;margin:12px 0 4px;
  background:var(--warnw);border:1px solid var(--warnl);border-radius:var(--radius)}
.thinwarn>svg{width:18px;height:18px;color:var(--warn);flex:none;margin-top:2px}
.thinwarn .b{min-width:0}
.thinwarn b{display:block;font-size:.9rem;color:#7c4a12;margin-bottom:3px}
.thinwarn p{margin:0 0 9px;font-size:.82rem;line-height:1.45;color:#7c4a12}
.thinwarn .acts{display:flex;gap:8px;flex-wrap:wrap}
.thinwarn .acts button,.thinwarn .acts a{display:inline-flex;align-items:center;gap:6px;min-height:40px;
  padding:0 12px;border-radius:10px;border:1px solid var(--warnl);background:rgba(255,255,255,.6);
  font-size:.8rem;font-weight:650;color:#7c4a12}
.thinwarn .acts svg{width:14px;height:14px}

/* ============ ВЫБОР МОДЕЛЕЙ ============ */
.pickhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:2px 0 10px}
.picktype{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 11px;border-radius:9px;
  background:var(--accw);border:1px solid var(--accl);color:var(--cyber-deep);
  font-size:.78rem;font-weight:650}
.picktype svg{width:14px;height:14px}
.pickrow{position:relative;display:flex;align-items:center;gap:11px;min-height:60px;padding:10px 0;
  border-bottom:1px solid var(--line2)}
.pickrow .l{flex:1;min-width:0}
.pickrow .code{font-family:var(--font-mono);font-size:.88rem;font-weight:600;line-height:1.25;
  overflow-wrap:anywhere}
.pickrow .sub{margin-top:2px;font-size:.74rem;color:var(--muted)}
.pickrow.off .code,.pickrow.off .l{opacity:.55}
.pickrow.off .sub{color:var(--warn);opacity:1}
.pickgrp{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:18px 0 4px;font-weight:600}
.pickgrp:first-child{margin-top:6px}

/* ============ ДЕСКТОП ============ */
@media(min-width:1000px){
  .cmplegend{display:none}
  .vsswipe{overflow:visible;margin:0;padding:0}
  .vsswipe>.vs{min-width:0}
  .vsswipe .vslab,.vsswipe .vshead .pad{position:static;box-shadow:none}
  /* Обязательно снять: calc(100vw - 32px) считает и полосу прокрутки, поэтому
     на десктопе заголовки разделов вылезали за колонки и тянули всю страницу
     в горизонтальный скролл. */
  .vsswipe .vssec,.vsswipe .samefold,.vsswipe .vsempty{position:static;width:auto}
  .vscell{padding:14px 16px 14px 0}
  .vscell .v{font-size:1.05rem}
  .vslab{padding:14px 16px 14px 0}
  .vslab .n{font-size:.88rem}
  .vscard{padding:12px 14px 14px}
  .vscard .code{font-size:.92rem}
  .verdict{padding:18px 22px}
  .verdict h2{font-size:1.2rem}
  .vssec h2{font-size:1.3rem}
  /* Шапка матрицы едет с прокруткой — на 60 строках без неё теряешь,
     где чья колонка. */
  .vshead{position:sticky;top:64px;z-index:34;box-shadow:0 8px 14px -12px rgba(11,18,32,.5)}
  .vssec{position:sticky;top:64px;z-index:33;background:var(--paper);margin-top:34px}
}


/* «Плюс» в подсказке поиска — третья дверь в сравнение. Кнопка живёт внутри
   ссылки-подсказки, поэтому ей нужен свой слой: иначе палец попадает по
   ссылке и уезжает в модель вместо того, чтобы добрать её в набор. */
.sugg .addvs{position:relative;z-index:2;flex:none;width:44px;height:44px;margin:-6px 0}
.sugg svg{flex:none}

/* ============ ЭКРАН ПОДБОРА МОДЕЛЕЙ ДЛЯ СРАВНЕНИЯ ============ */
/* Набранное здесь — главное содержимое экрана, а не фоновый режим, поэтому
   поднос на этом экране не показываем: две одинаковые полки сбивают. */
.vsset{padding:12px 14px;margin:10px 0 16px;background:var(--card);
  border:1px solid var(--line);border-radius:14px}
.vsset-top{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.vsset-top .cap{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.vsset-top .cap b{color:var(--cyber-deep);font-weight:700}
.vsset-top .drop{margin-left:auto;min-height:36px;padding:0 8px;border-radius:9px;
  font-size:.78rem;color:var(--muted)}
.vsset-top .drop:hover{color:var(--text)}
.vsset .btn{width:100%;margin-top:4px}
.vsset .hint{margin:6px 0 0;text-align:center;font-size:.8rem;color:var(--muted)}
/* Пустой набор объясняет, что делать, а не молчит серым прямоугольником */
.vsempty-set{display:flex;align-items:flex-start;gap:11px;padding:14px 15px;margin:10px 0 16px;
  border:1px dashed var(--rule);border-radius:14px;font-size:.85rem;line-height:1.45;color:var(--muted)}
.vsempty-set svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--cyber-ink)}

/* Оговорка источника над разделом сравнения: замеры сняты не с самой модели,
   а с парного варианта чипа. Ставим до цифр — после них это уже оправдание. */
.vssubst{display:flex;gap:9px;align-items:flex-start;padding:9px 12px;margin:6px 0 2px;
  background:var(--warnw);border:1px solid var(--warnl);border-radius:10px}
.vssubst svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--warn)}
.vssubst p{margin:0;font-size:.78rem;line-height:1.45;color:#7c4a12}
.vssubst b{font-weight:650}
@media(min-width:1000px){.vssubst{position:sticky;left:0;width:auto}}

/* Строка подбора нажимается целиком — см. обработчик в baza.js.
   Выключенная строка (другой тип техники) кликом ничего не делает, поэтому
   и курсор ей остаётся обычный. */
.pickrow{cursor:pointer;transition:background .12s}
.pickrow:hover{background:var(--card2)}
.pickrow:active{background:var(--line2)}
.pickrow.off{cursor:default}
.pickrow.off:hover,.pickrow.off:active{background:none}

/* ============ КАК МЫ ЭТО СЧИТАЕМ ============
   Сводка вместо подписей «откуда цифры» под каждым разделом. Стоит после
   таблицы: сначала человек смотрит числа, вопрос «можно ли им верить»
   приходит следом. Свёрнута: это пояснение, а не данные, и разворачивает его
   тот, у кого вопрос возник. Коробку рисует .dv-fold — здесь только начинка. */
.method{margin:24px 0 0}
.method .lead{margin:0;font-size:.86rem;line-height:1.5;color:var(--ink2)}
.method ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:13px}
.method li{display:flex;gap:11px;align-items:flex-start}
.method li svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--cyber-deep)}
.method li b{display:block;font-size:.86rem;font-weight:650}
.method li p{margin:2px 0 0;font-size:.82rem;line-height:1.5;color:var(--muted)}
/* Класс намеренно не .foot: так зовётся подвал сайта, и его тёмный фон
   прилетал сюда чёрной полосой. */
.method .mfoot{margin:14px 0 0;padding-top:13px;border-top:1px solid var(--line2);
  font-size:.8rem;line-height:1.5;color:var(--muted)}
@media(min-width:1000px){
  .method ul{grid-template-columns:1fr 1fr;gap:16px 26px}
}

/* На телефоне чипы фильтров надёжности переносились по строкам: десять типов
   техники и полтора десятка серий занимали полтора экрана, и до самого списка
   моделей приходилось прокручивать вслепую. Даём каждой группе один ряд с
   горизонтальной прокруткой — как в ленте подбора. На широком экране всё
   помещается, там оставляем перенос. */
@media(max-width:719px){
  .relchips,.relattr .vals{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
    padding:2px 16px 4px;margin:0 -16px;-ms-overflow-style:none;scrollbar-width:none}
  .relchips::-webkit-scrollbar,.relattr .vals::-webkit-scrollbar{display:none}
  .relchips .fchip,.relattr .vals .fchip{flex:none;scroll-snap-align:start}
  .relattr .k{padding-left:0}
}

/* ============ ПРАВКИ ПОСЛЕ ОБХОДА ЭКРАНОВ НА ТЕЛЕФОНЕ ============
   Горизонтального вылета нигде нет, но нашлись цели меньше пальца и подписи
   мельче, чем читается с рук. Правила стоят в конце файла намеренно: они
   переопределяют размеры, заданные выше по месту. */

/* Крестик у активного фильтра — 22 px. Рисунок оставляем, палец ловим на 44. */
.actchip .x{position:relative}
.actchip .x::before{content:"";position:absolute;inset:-11px}
/* Крестик колонки сравнения на телефоне ужимался до 28 px. Расширять его
   невидимым слоем бесполезно — колонка обрезает всё, что вылезло за край,
   поэтому растим саму кнопку, а значок оставляем прежним. */
.vsswipe .vscard .rm{width:38px;height:38px}

/* Поле ввода занимало 22 px внутри полосы в 52: нажатие мимо строки текста
   не попадало никуда. Пусть тянется на всю высоту — тогда попадает вся полоса. */
.findbar input,.relsearch input{align-self:stretch}

/* Ссылки-строки: 16–21 px по высоте мало для пальца. */
.vtitle{display:inline-flex;align-items:center;min-height:34px}

/* Подписи мельче 10 px с рук уже не читаются — поднимаем до 10,5–11. */
.knwkey{font-size:.66rem}
.knw .k{font-size:.66rem}
.pickgrp{font-size:.66rem}
.swipehint{font-size:.64rem}
.vscard .tocard{font-size:.68rem}

/* Значок внутри кнопки. Свои размеры у <svg> не заданы (иконки берутся из
   спрайта через <use>), и без этого правила браузер рисовал его в размер по
   умолчанию — 300×150. В подносе сравнения кнопка «Сравнить N моделей»
   превращалась в синюю плашку на треть экрана. */
.btn > svg{width:18px;height:18px;flex:none}



/* Карточка файла бывает кнопкой: гостю она предлагает регистрацию, а не ведёт
   на отдачу. Кнопке нужно вернуть шрифт и выравнивание — браузер по умолчанию
   даёт ей свой мелкий шрифт и центр. */
button.part{font:inherit;text-align:left;width:100%;cursor:pointer}

/* «Почти всё бесплатно»: у заголовка базы и в самих воротах. Не выделяем
   цветом и не раздуваем — это факт, а не баннер. */
.lede-free{margin:6px 0 0;color:var(--muted);font-size:.92rem}
.lede-free .n{font-family:var(--font-mono);color:var(--ink);font-weight:600}
.gate-free{margin:14px 0 0;color:var(--muted);font-size:.88rem;text-align:center}
.gate-free .n{font-family:var(--font-mono);color:var(--ink);font-weight:600}

/* =====================================================================
   Страница разбора для поисковика (/kb/<id>-<слаг>).
   Отдаётся приложением, а не витриной: у неё нет ни шапки с поиском, ни
   нижней панели — только сам разбор в гостевом объёме и вход в базу.
   Классы свои, чтобы правки витрины её не задевали.
   ===================================================================== */
.kb-page{padding-bottom:40px}
.kb-top{border-bottom:1px solid var(--line);background:var(--card)}
.kb-top a{display:inline-block;padding:14px 16px;font-family:var(--font-mono);font-size:.82rem;
  color:var(--cyber-deep);text-decoration:none}
.kb-top a:hover{text-decoration:underline}
.kb-crumbs{padding:14px 0 0;font-size:.78rem;color:var(--muted)}
.kb-crumbs a{color:var(--muted);text-decoration:none}
.kb-crumbs a:hover{color:var(--cyber-deep);text-decoration:underline}
.kb-page .lede h1{font-size:1.62rem}
.kb-page .wrap{max-width:760px}
.kb-gate{background:var(--card2);border-radius:var(--radius);padding:18px;margin-top:22px;border-top:0}
.kb-free{margin:0 0 16px;font-size:.86rem;color:var(--muted)}
.kb-free b{font-family:var(--font-mono);color:var(--text)}
.kb-facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;
  font-size:.88rem;color:var(--ink2)}
.kb-facts a{color:var(--cyber-deep)}
.kb-foot{margin-top:36px;padding:18px 16px;border-top:1px solid var(--line);
  font-size:.82rem;color:var(--muted);text-align:center}
.kb-foot a{color:var(--cyber-deep)}

/* Раздел статей: список и тело статьи. Ширина уже, чем у витрины — длинную
   строку неудобно читать, а статью читают целиком, а не сканируют. */
.kb-list{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.kb-list a{display:block;padding:16px 0;border-top:1px solid var(--line);text-decoration:none;color:inherit}
.kb-list li:last-child a{border-bottom:1px solid var(--line)}
.kb-list a:hover b{color:var(--cyber-deep)}
.kb-list b{display:block;font-family:var(--font-serif);font-size:1.12rem;font-weight:600;line-height:1.25}
.kb-list span{display:block;margin-top:5px;font-size:.86rem;color:var(--muted);line-height:1.45}
.kb-body{margin-top:8px}
.kb-body h1{font-family:var(--font-serif);font-weight:600;font-size:1.62rem;line-height:1.15;margin:18px 0 14px}
.kb-body h2{font-family:var(--font-serif);font-weight:600;font-size:1.24rem;line-height:1.25;
  margin:30px 0 10px;padding-top:18px;border-top:1px solid var(--line)}
.kb-body ul,.kb-body ol{margin:0 0 14px;padding-left:22px}
.kb-body li{margin-bottom:7px}
.kb-body code{font-family:var(--font-mono);font-size:.86em;background:var(--line2);padding:2px 6px;border-radius:5px}
.kb-cta{background:var(--card2);border-radius:var(--radius);padding:18px;margin-top:28px;border-top:0}
.kb-cta h2{margin-top:0}
/* Таблицы прокручиваются внутри себя: коды деталей в первой колонке стоят
   nowrap, и на телефоне таблица оказывалась шире экрана — вбок ехала вся
   страница. Полоска справа сама намекает, что таблица длиннее кадра. */
.kb-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 16px;
  -ms-overflow-style:none;scrollbar-width:thin}
.kb-tablewrap>table{margin-bottom:0}
.kb-body table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:.9rem}
.kb-body th{text-align:left;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);font-weight:500;padding:8px 10px 8px 0;
  border-bottom:1px solid var(--rule)}
.kb-body td{padding:10px 10px 10px 0;border-bottom:1px solid var(--line2);vertical-align:top;color:var(--ink2)}
.kb-body td:first-child{white-space:nowrap}
.kb-body table code{background:none;padding:0;color:var(--cyber-deep)}
/* Разборы, на которых стоит статья, — свёрнуты. Читателю нужен ответ, а не
   наша библиография: развёрнутый список ссылок в конце перетягивал внимание
   и уводил со статьи. Заголовок раскрывается, число разборов видно сразу. */
.kb-sources{margin:30px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.kb-sources summary{display:flex;align-items:center;gap:9px;min-height:var(--tap);
  cursor:pointer;list-style:none;font-family:var(--font-serif);font-weight:600;
  font-size:1.06rem;color:var(--ink2)}
.kb-sources summary::-webkit-details-marker{display:none}
.kb-sources summary::after{content:'';margin-left:auto;width:9px;height:9px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:.15s var(--ease)}
.kb-sources[open] summary::after{transform:rotate(-135deg)}
.kb-sources-body{padding-top:6px;font-size:.92rem}
.kb-sources-body ul{margin:0;padding-left:22px}
.kb-sources-body li{margin-bottom:9px;color:var(--muted)}
.kb-sources-body a{color:var(--cyber-deep);font-weight:600}

.kb-inart{margin:10px 0 0;padding:10px 12px;background:var(--accw);border-radius:var(--radius-s);
  font-size:.86rem;color:var(--ink2)}
.kb-inart a{color:var(--cyber-deep);font-weight:600}

/* Иллюстрации в статьях: фотография неисправного узла или снимок замера.
   Подпись — часть картинки, а не соседний абзац: она объясняет, что снято и
   куда смотреть. Ширина по колонке текста, высота по содержимому. */
.kb-body figure{margin:20px 0;padding:0}
.kb-body figure img,.kb-body p>img{display:block;width:100%;height:auto;border-radius:var(--radius-s);
  border:1px solid var(--line);background:var(--card)}
.kb-body figcaption{margin-top:8px;font-size:.82rem;color:var(--muted);line-height:1.45}
.kb-body figcaption b{color:var(--ink2)}

/* Постоянный адрес модели: витрина живёт в хэше, поделиться ею нельзя.
   Ссылка уводит на страницу устройства — тот же набор данных обычным
   адресом. */
.permalink{margin:12px 0 0;font-size:.86rem;font-weight:650}
.permalink a{color:var(--cyber-deep);display:inline-flex;align-items:center;min-height:34px}
.permalink a:hover{text-decoration:underline}

/* Закрытый итог подтверждённого разбора: результат есть, но он для своих.
   Тон приглушённый — строка сообщает о статусе, а не несёт содержание. */
.rec-fix-lock{color:var(--muted)}
.rec-fix-lock b{color:var(--ink2)}
.kb-fixlock .prose{color:var(--ink2)}

/* ============ УВЕДОМЛЕНИЕ О COOKIE ============
   Скрипт /cookie.js один на весь сайт, а стилей у страниц два набора:
   остальные страницы берут styles.css, витрина базы — этот файл. Правила
   были только в styles.css, поэтому на витрине уведомление создавалось,
   добавлялось в страницу и оставалось невидимым: без position:fixed оно
   уезжало в самый низ документа, за пределы первого экрана.
   Проявлялось это как «куки вообще не спрашивают» — то есть как отсутствие
   согласия там, где по закону оно требуется.

   Значения повторяют styles.css намеренно: там они заданы числами, а не
   переменными, и расхождение в одном пикселе между страницами заметнее,
   чем дубль в двух файлах. */
.ctcookie{position:fixed;left:12px;right:12px;bottom:12px;z-index:200;
  display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;
  max-width:920px;margin:0 auto;padding:16px 18px;border-radius:16px;
  background:#fff;color:#1a1a1a;border:1px solid var(--line);
  box-shadow:0 18px 48px rgba(11,18,32,.18);
  font-family:var(--font-sans);font-size:.9rem;line-height:1.5;
  transform:translateY(8px);opacity:0;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),opacity .25s}
.ctcookie.on{transform:none;opacity:1}
.ctcookie p{margin:0 0 4px}
.ctcookie .fine{margin:0;color:var(--muted);font-size:.82rem}
.ctcookie a{color:var(--cyber-deep);text-decoration:underline;text-underline-offset:2px}
.ctcookie .txt{flex:1;min-width:240px}
.ctcookie button{flex:none;min-height:44px;padding:0 22px;border:0;border-radius:999px;
  background:var(--cyber-ink);color:#fff;font:inherit;font-weight:600;cursor:pointer;
  transition:background .2s}
.ctcookie button:hover{background:var(--cyber-deep)}
.ctcookie button.only{background:transparent;color:#39444d;border:1px solid #cdd5db}
.ctcookie button.only:hover{background:#f1f3f5;color:#1a1a1a}
.ctcookie button:focus-visible{outline:2px solid var(--cyber-ink);outline-offset:3px}
@media(max-width:559px){.ctcookie{padding:14px 16px;font-size:.86rem}
  .ctcookie button{width:100%}}
@media(prefers-reduced-motion:reduce){.ctcookie{transition:none}}

/* Компактный вид: сразу видна одна строка, подробности — по «Подробнее».
   До этого плашка занимала 354 точки из 812 на телефоне и закрывала собой
   первый экран обеим страницам. */
.ctcookie .ctcookie-more{margin-top:2px}
.ctcookie .ctcookie-more>summary{
  cursor:pointer;font-size:.82rem;font-weight:600;color:#00688F;
  list-style:none;padding:2px 0;min-height:24px;display:inline-block}
.ctcookie .ctcookie-more>summary::-webkit-details-marker{display:none}
.ctcookie .ctcookie-more>summary::after{content:' ▾'}
.ctcookie .ctcookie-more[open]>summary::after{content:' ▴'}
.ctcookie .ctcookie-more>p{margin:6px 0 0}
.ctcookie-acts{display:flex;gap:8px;flex:none;align-items:center}
@media(max-width:559px){
  .ctcookie{padding:12px 14px;gap:10px}
  .ctcookie-acts{width:100%}
  .ctcookie-acts button{flex:1;width:auto;padding:0 12px;font-size:.86rem}
}

/* ============ КРУПНЫЙ ВХОД В ПОИСК ============
   Поиск должен выглядеть как поиск. До этого настоящее поле было скрыто на
   телефоне вовсе, а вход жил полосой в нижней панели и читался как навигация:
   за три замера подряд — ни одного запроса. Здесь он наверху, на любой
   ширине, и по виду это поле, а не пункт меню. */
.bigfind{
  display:flex;align-items:center;gap:12px;width:100%;
  margin:14px 0 6px;padding:0 8px 0 18px;min-height:60px;
  background:var(--card);border:1.5px solid var(--rule);border-radius:16px;
  box-shadow:var(--shadow-sm);text-align:left;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.bigfind:hover{border-color:var(--cyber);box-shadow:var(--shadow)}
.bigfind:focus-visible{outline:2px solid var(--cyber-ink);outline-offset:2px}
.bigfind>svg{width:24px;height:24px;color:var(--cyber-ink);flex:none}
.bigfind-t{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--muted);font-size:1.02rem;
}
.bigfind-go{
  flex:none;display:inline-flex;align-items:center;height:44px;padding:0 20px;
  border-radius:12px;background:var(--cyber-ink);color:#fff;
  font-weight:700;font-size:.95rem;
}
.bigfind:hover .bigfind-go{background:var(--cyber-deep)}
@media(max-width:479px){
  .bigfind{padding-left:14px;gap:9px;min-height:56px}
  .bigfind-t{font-size:.95rem}
  .bigfind-go{padding:0 14px;height:40px;font-size:.9rem}
}
.bigfind-t i{font-style:normal}
@media(max-width:479px){.bigfind-t .long{display:none}}
@media(min-width:480px){.bigfind-t .short{display:none}}

/* Хлебные крошки на телефоне: строка в 15px — цель для пальца никакая.
   Разводим по вертикали только на узком экране, на десктопе курсор точнее. */
@media(max-width:720px){
  .kb-crumbs a{display:inline-block;padding:10px 2px}
  .kb-crumbs{padding-top:6px}
}

/* Ссылка на модель в карточке записи — единственный путь «разбор → техника»,
   а по высоте это строка в 17px. На телефоне разводим её по вертикали; на
   десктопе курсор попадает и так. */
@media(max-width:720px){
  .kb-facts a{display:inline-block;padding:10px 0}
}

/* Подвал витрины: с блоком статей колонок стало четыре. На широком экране
   заголовки тем длиннее пунктов меню, поэтому им колонка пошире. */
@media(min-width:720px){.foot .cols2{grid-template-columns:1.3fr 1fr 1.2fr 1fr}}
#footarts a{line-height:1.35;padding:6px 0;min-height:40px}

/* Сводка «есть только у одной модели» — та же строка, что и у совпавших,
   только значок нейтральный: это не совпадение, а отсутствие пары. */
.lonefold{display:flex;align-items:flex-start;gap:10px;padding:11px 0 12px;
  border-bottom:1px solid var(--line);font-size:.8rem;line-height:1.45;color:var(--muted)}
.lonefold svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--muted)}
.lonefold b{color:var(--ink2);font-weight:600}
.lonefold button{margin-left:auto;flex:none;min-height:44px;margin-top:-6px;padding:0 8px;
  font-size:.78rem;font-weight:650;color:var(--cyber-deep);white-space:nowrap}
.vsswipe .lonefold{position:sticky;left:0;z-index:5;width:calc(100vw - 32px);background:var(--paper)}