/* vpnlab.io v2 - дизайн-система редизайна 2026.
   Один файл на весь /v2: переменные, шапка, кнопки, карточки, фильтры, подвал. */


:root{
  --bg:#fbfbfc; --panel:#fff; --ink:#0c1116; --muted:#5c6672; --line:#e5e8ec;
  --accent:#2f6fed; --ok:#0f9d6b; --warm:#ff5a2b;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Inter","Helvetica Neue",Arial,sans-serif;
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

.nav{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:30}
.nav .row{display:flex;align-items:center;gap:26px;height:60px}
.logo{display:flex;align-items:center;gap:9px;font-weight:750;font-size:16px;letter-spacing:-.3px}
.logo .mark{width:24px;height:24px;border-radius:7px;background:linear-gradient(140deg,var(--accent),#7aa5ff)}
.nav nav{display:flex;gap:20px;font-size:14px;color:var(--muted)}
.nav nav a:hover{color:var(--ink)}
.nav .right{margin-left:auto;display:flex;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;padding:10px 18px;border-radius:9px;border:1px solid transparent;cursor:pointer}
.btn.primary{background:var(--accent);color:#fff}
.btn.go{background:var(--ok);color:#fff}
.btn.ghost{border-color:var(--line);background:#fff}
.btn.sm{padding:7px 13px;font-size:13px}

/* хлебные крошки: только путь, без бренда-дубля */
.crumbs{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);padding:22px 0 0}
.crumbs a{color:var(--accent)}
.crumbs span.sep{color:#c4cad2}

/* шапка сервиса */
.svc{display:flex;align-items:flex-start;gap:18px;padding:14px 0 18px;flex-wrap:wrap}
.svc .brandmark{width:52px;height:52px;border-radius:13px;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.svc .brandmark img{width:34px;height:34px;object-fit:contain}
.svc .titles{flex:1;min-width:260px}
.svc h1{font-size:31px;line-height:1.16;letter-spacing:-.9px;font-weight:760}
.svc .sub{display:flex;align-items:center;gap:14px;margin-top:8px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.svc .price b{color:var(--ink);font-size:16px}
.chip{font-family:var(--mono);font-size:11px;letter-spacing:.6px;text-transform:uppercase;border:1px solid var(--line);border-radius:6px;padding:3px 8px;background:#fff}
.chip.good{border-color:#c8ecdc;background:#f0fbf6;color:#0b7a53}
.svc .cta{display:flex;gap:10px;align-items:center}

/* вкладки */
.tabs{position:sticky;top:60px;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.tabs .row{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.tabs .row::-webkit-scrollbar{display:none}
.tab{padding:13px 15px;font-size:14.5px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;cursor:pointer;background:none;border-top:0;border-left:0;border-right:0;font-family:inherit}
.tab[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.tab .n{font-family:var(--mono);font-size:11px;color:#9aa3b0;margin-left:6px}

.pane{padding:26px 0 10px}
.pane[hidden]{display:none}
h2{font-size:21px;letter-spacing:-.4px;margin:0 0 14px;font-weight:700}
h3{font-size:15px;margin:22px 0 10px;font-weight:650}
p{font-size:15.5px;color:#333d49;margin-bottom:14px}

.grid2{display:grid;grid-template-columns:1fr 320px;gap:26px;align-items:start}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.card h4{font-family:var(--mono);font-size:10.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);margin-bottom:12px;font-weight:500}

/* рейтинги */
.rate{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.rate .big{font-size:44px;font-weight:780;letter-spacing:-1.5px;line-height:1}
.rate .stars{color:#f5a524;font-size:15px;letter-spacing:2px}
.srcs{flex:1;min-width:260px;display:flex;flex-direction:column;gap:9px}
.src{display:flex;align-items:center;gap:12px;font-size:13.5px}
.src .nm{width:132px;color:#333d49}
.src .bar{flex:1;height:6px;border-radius:4px;background:#eef1f5;overflow:hidden}
.src .bar i{display:block;height:100%;background:var(--ok)}
.src .v{font-family:var(--mono);font-size:12.5px;width:74px;text-align:right;color:var(--muted)}
.src .v b{color:var(--ink)}

/* таблица цен */
table{width:100%;border-collapse:collapse;font-size:14.5px}
th{font-family:var(--mono);font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);font-weight:500}
td{padding:14px;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
tr.best td{background:#f5f9ff}
.tag{font-family:var(--mono);font-size:10px;letter-spacing:.7px;text-transform:uppercase;background:#eaf2ff;color:var(--accent);border-radius:5px;padding:2px 7px;margin-left:8px}

/* плитки */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:11px}
.tile{border:1px solid var(--line);border-radius:11px;background:#fff;padding:13px 14px;font-size:14px;display:flex;align-items:center;gap:10px}
.tile .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex-shrink:0}
.tile.off .dot{background:#d3d8de}
.tile.off{color:var(--muted)}

.kv{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--muted)}
.kv .v{font-weight:600}

.note{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;background:#fff;padding:13px 15px;font-size:14px;margin:16px 0}

footer{border-top:1px solid var(--line);background:var(--panel);margin-top:44px;padding:26px 0;font-size:13px;color:var(--muted)}

@media (max-width:900px){
  .grid2{grid-template-columns:1fr}
  .svc h1{font-size:25px;letter-spacing:-.6px}
  .svc{gap:14px}
  .svc .cta{width:100%}
  .svc .cta .btn{flex:1;justify-content:center}
  .tabs{top:56px}
}

/* рейтинги: ровная сетка, иконки источников */
.rate{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:center}
.rate-total{text-align:center}
.rate .big{font-size:46px;font-weight:780;letter-spacing:-1.6px;line-height:1}
.rate .stars{color:#f5a524;font-size:15px;letter-spacing:3px;margin-top:2px}
.rate .cnt{font-size:12px;color:var(--muted);margin-top:6px}
.srcs{display:flex;flex-direction:column;gap:10px}
.src{display:grid;grid-template-columns:22px 150px 1fr 96px;align-items:center;gap:12px;font-size:14px;color:inherit}
.src img{width:20px;height:20px;object-fit:contain}
.src .nm{color:#333d49}
.src .bar{height:6px;border-radius:4px;background:#eef1f5;overflow:hidden}
.src .bar i{display:block;height:100%;background:var(--ok)}
.src .v{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25}
.src .v b{font-family:var(--mono);font-size:13.5px}
.src .v em{font-style:normal;font-size:11px;color:var(--muted)}
.src:hover .nm{color:var(--accent)}

/* плитки-ссылки */
.tile{transition:border-color .15s}
a.tile:hover{border-color:var(--accent)}
.tile .q{margin-left:auto;font-family:var(--mono);font-size:11px;color:#b9c0c9;border:1px solid var(--line);border-radius:50%;width:16px;height:16px;display:flex;align-items:center;justify-content:center}
a.tile:hover .q{color:var(--accent);border-color:var(--accent)}

/* страны */
.countries{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:6px 14px;font-size:14px;color:#333d49;
  max-height:420px;overflow:auto;border:1px solid var(--line);border-radius:12px;background:#fff;padding:14px 16px}
.countries span{padding:3px 0;border-bottom:1px dotted #eef1f5}

@media (max-width:700px){
  .rate{grid-template-columns:1fr;gap:14px}
  .src{grid-template-columns:20px 1fr 70px;gap:9px}
  .src .bar{display:none}
}

/* функции и протоколы: широкие плитки с иконкой и пояснением */
.ftiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:11px}
.ftile{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:13px 14px;color:inherit;transition:border-color .15s}
.ftile:hover{border-color:var(--accent)}
.ftile > i{font-size:19px;color:var(--accent);width:22px;text-align:center;flex-shrink:0}
.ftile .tx{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.ftile .tx b{font-size:14.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ftile .tx em{font-style:normal;font-size:12px;color:var(--muted);margin-top:2px}
.ftile .q{margin-left:auto;font-family:var(--mono);font-size:11px;color:#b9c0c9;border:1px solid var(--line);border-radius:50%;width:17px;height:17px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ftile:hover .q{color:var(--accent);border-color:var(--accent)}
.ftile.off{opacity:.55}
.ftile.off > i{color:#aab2bd}

/* устройства */
.dtiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.dtile{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:11px;background:#fff;padding:12px 14px;font-size:14px}
.dtile i{font-size:18px;color:#33404e}

/* страны с флагами */
.countries span{display:flex;align-items:center;gap:8px}
.countries img{width:19px;height:14px;object-fit:cover;border-radius:2px;border:1px solid #eceff3;flex-shrink:0}

/* новости с обложками */
.nwslist{display:flex;flex-direction:column;gap:12px}
.nws{display:flex;gap:11px;align-items:flex-start}
.nws .th{width:62px;height:44px;border-radius:8px;background-size:cover;background-position:center;flex-shrink:0;border:1px solid var(--line)}
.nws{align-items:center;padding:2px 0}
.nws .tt{font-size:13.5px;line-height:1.35;font-weight:600;color:#1d2733;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(1.35em * 2)}
.nws:hover .tt{color:var(--accent)}

.brandbox{display:flex;align-items:center;justify-content:center;padding:2px 0 12px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.brandbox img{max-width:190px;max-height:52px;width:auto;height:auto;object-fit:contain}

/* поиск по странам */
/* дубль .srch из макета удалён: перебивал настройки каталога */
.srch > i{color:var(--muted)}
.srch input{flex:1;border:0;outline:0;font-size:15px;font-family:inherit;background:transparent;color:var(--ink)}
.srch button{border:0;background:#f1f3f6;border-radius:7px;width:26px;height:26px;cursor:pointer;color:var(--muted);display:flex;align-items:center;justify-content:center}
.srch .cnt{font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap}
.srch .cnt b{color:var(--ink)}
.empty{border:1px dashed var(--line);border-radius:12px;padding:34px;text-align:center;color:var(--muted);font-size:15px}
.empty i{display:block;font-size:26px;margin-bottom:8px;opacity:.5}
.region{margin-bottom:26px}
.regttl{font-size:17px;font-weight:700;margin:0 0 10px;display:flex;align-items:center;gap:9px}
.regttl em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:2px 9px}
.subreg{margin:0 0 14px}
.subttl{font-family:var(--mono);font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);font-weight:500;margin:0 0 8px;display:flex;align-items:center;gap:8px}
.subttl em{font-style:normal;color:#aab2bd}
.ctygrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:5px 14px}
.cty{display:flex;align-items:center;gap:9px;font-size:14px;color:#333d49;padding:5px 0}
.cty img{width:20px;height:15px;object-fit:cover;border-radius:2px;border:1px solid #eceff3;flex-shrink:0}

/* тёмная тема */
:root[data-theme="dark"]{
  --bg:#0f1216; --panel:#161b21; --ink:#e8ecf1; --muted:#98a3b0; --line:#252c35;
  --accent:#5b93ff;
}
:root[data-theme="dark"] .nav{background:#161b21}
:root[data-theme="dark"] .chip,:root[data-theme="dark"] .tile,:root[data-theme="dark"] .ftile,
:root[data-theme="dark"] .dtile,:root[data-theme="dark"] .srch,:root[data-theme="dark"] .countries,
:root[data-theme="dark"] .btn.ghost{background:var(--panel);color:var(--ink)}
:root[data-theme="dark"] p,:root[data-theme="dark"] .cty,:root[data-theme="dark"] .src .nm,
:root[data-theme="dark"] .nws .tt{color:#c9d2dc}
:root[data-theme="dark"] tr.best td{background:#1b2430}
:root[data-theme="dark"] .src .bar,:root[data-theme="dark"] .bar{background:#222932}
:root[data-theme="dark"] .srch button{background:#222932}
.theme{padding:7px 10px}

/* тарифы виджетами */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:14px;align-items:stretch}
.plan{position:relative;border:1px solid var(--line);border-radius:15px;background:var(--panel);padding:20px 18px 18px;display:flex;flex-direction:column}
.plan.best{border-color:var(--ok);box-shadow:0 6px 22px rgba(15,157,107,.10)}
.pribbon{position:absolute;top:-10px;left:18px;background:var(--ok);color:#fff;font-size:11px;font-weight:700;letter-spacing:.4px;padding:4px 10px;border-radius:20px}
.pname{font-size:14px;font-weight:650;color:var(--ink)}
.pname .plus{font-family:var(--mono);font-size:10.5px;color:var(--ok);border:1px solid #c8ecdc;background:#f0fbf6;border-radius:5px;padding:2px 6px;margin-left:6px}
.pmo{display:flex;align-items:baseline;gap:5px;margin:10px 0 2px}
.pmo b{font-size:31px;font-weight:780;letter-spacing:-1.1px}
.pmo span{font-size:13px;color:var(--muted)}
.ptot{font-size:13px;color:var(--muted)}
.pbar{height:5px;border-radius:4px;background:#eef1f5;overflow:hidden;margin:13px 0 12px}
.pbar i{display:block;height:100%;background:var(--accent)}
.plan.best .pbar i{background:var(--ok)}
.pfeat{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:7px}
.pfeat li{font-size:13.5px;color:#3c4855;padding-left:20px;position:relative}
.pfeat li:before{content:"";position:absolute;left:0;top:6px;width:11px;height:6px;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}
.pbtn{margin-top:auto;width:100%;justify-content:center}

/* тёмная тема: то, что оставалось светлым */
:root[data-theme="dark"] .note{background:var(--panel);color:#c9d2dc}
:root[data-theme="dark"] .card,:root[data-theme="dark"] .plan{background:var(--panel)}
:root[data-theme="dark"] .pfeat li{color:#b8c2ce}
:root[data-theme="dark"] .pbar,:root[data-theme="dark"] .pname .plus{background:#222932}
:root[data-theme="dark"] .pname .plus{border-color:#2b4a3d}
:root[data-theme="dark"] .empty{color:var(--muted)}
:root[data-theme="dark"] th{color:var(--muted)}

.brandbox .lg-dark{display:none}
:root[data-theme="dark"] .brandbox .lg-light{display:none}
:root[data-theme="dark"] .brandbox .lg-dark{display:block}

.lang i{font-size:10px;opacity:.6}
.burger{display:none}
@media (max-width:860px){
  .nav nav{display:none}
  .nav .burger{display:inline-flex}
  .nav .row{gap:12px;height:56px}
  .nav .right{gap:7px}
  .lang{padding:7px 11px}
  /* вкладки на мобильном: переносим в 2-3 строки таблетками, чтобы было
     видно все разделы сразу, а не уезжало за край экрана */
  .tabs{border-bottom:0;padding:6px 0 9px}
  .tabs .row{flex-wrap:wrap;overflow:visible;gap:6px;padding-bottom:0}
  .tabs .row::after{display:none}
  .tab{flex:0 1 auto;padding:8px 11px;font-size:13px;line-height:1.1;
       border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--muted)}
  .tab[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
  .tab[aria-selected="true"] .n{color:rgba(255,255,255,.78)}
  .tab .n{margin-left:5px}
}
@media (max-width:860px){
  /* выпадашки прижимаем к правому краю, иначе меню языка вылезает за экран */
  .ddmenu{left:auto;right:0;max-width:calc(100vw - 24px)}
}
@media (max-width:420px){
  .lang{padding:7px 9px;font-size:12.5px}
  .nav .row{gap:8px}
  .logo{font-size:15px}
}

/* выпадающие меню */
.dd{position:relative}
.ddmenu{position:absolute;top:calc(100% + 7px);left:0;min-width:172px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 12px 30px rgba(15,25,45,.13);padding:6px;display:none;z-index:60}
.ddmenu--right{left:auto;right:0}
.dd.open .ddmenu{display:block}
.ddmenu button,.ddmenu a{display:block;width:100%;text-align:left;background:none;border:0;font-family:inherit;
  font-size:14px;color:var(--ink);padding:9px 11px;border-radius:8px;cursor:pointer}
.ddmenu button:hover,.ddmenu a:hover{background:#f2f5f9}
:root[data-theme="dark"] .ddmenu button:hover,:root[data-theme="dark"] .ddmenu a:hover{background:#1e2630}
.ddmenu button[aria-current="true"]{color:var(--accent);font-weight:650}
.lang i{transition:transform .15s}
.dd.open .lang i{transform:rotate(180deg)}

/* кнопка: на десктопе живёт в карточке сервиса справа, на мобильном - под заголовком */
.cta-desk{width:100%;justify-content:center;margin:0 0 16px}
@media (max-width:900px){ .cta-desk{display:none} }
@media (min-width:901px){ .svc .cta-mobile{display:none} }

/* страничная сетка: правая колонка начинается с самого верха */
.pagegrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:26px;align-items:start;padding-top:0}
.colmain{min-width:0}
.colside{position:sticky;top:76px;display:flex;flex-direction:column;gap:16px;padding-top:22px}
.pagegrid .crumbs{padding-top:22px}
.pagegrid .tabs{position:sticky;top:60px}
.pagegrid .tabs .row{padding-right:0}
/* на мобильном шапка ниже (56px), иначе между ней и липкими вкладками просвечивает контент.
   Правило стоит после .pagegrid .tabs - вес селекторов одинаковый, выигрывает последнее. */
@media (max-width:860px){ .pagegrid .tabs{top:55px} }
@media (max-width:900px){
  .pagegrid{grid-template-columns:1fr}
  .colside{position:static;padding-top:0;margin-top:22px}
}

/* ---------- каталог ---------- */
.chead{padding:26px 0 6px}
.chead h1{font-size:33px;letter-spacing:-.8px;line-height:1.15;margin-bottom:10px}
.chead .lead{color:var(--muted);max-width:760px;font-size:15px}
.chead .upd{margin-top:10px;font-size:12.5px;color:var(--muted);display:flex;gap:8px;align-items:center}

.tools{position:sticky;top:60px;z-index:20;background:var(--bg);padding:14px 0 12px;border-bottom:1px solid var(--line)}
.tools .line1{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* поиск, сортировка и чип акции - одна высота 42px и общая базовая линия.
   Базовый .srch со страницы сервиса тянул margin-bottom:16px, из-за него ряд съезжал,
   а .srch button{display:flex} перебивал атрибут hidden, и крестик висел в пустом поле. */
/* дубль .srch из макета удалён: перебивал настройки каталога */
.srch button[hidden]{display:none}
.srch input{border:0;outline:0;background:none;font:inherit;font-size:14px;color:inherit;width:100%;min-width:0}
.srch .x{border:0;background:#eef1f5;border-radius:6px;width:22px;height:22px;min-height:22px;cursor:pointer;
          color:var(--muted);flex:0 0 auto;display:flex;align-items:center;justify-content:center;line-height:1}
.sel{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--muted)}
/* сортировка - тот же выпадающий список, что и переключатель языка в шапке,
   вместо системного select с чужой стрелкой */
.sel .dd > button{height:42px;border-radius:10px;font-size:13.5px;color:var(--ink)}
.sel .ddmenu{min-width:190px}
.tools .line1 .chip{height:42px;padding:0 15px;font-size:13.5px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);
      background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:7px 11px;cursor:pointer}
.chip i{font-size:13px}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.chips .lbl{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#9aa3b0;align-self:center;margin-right:2px}
.fpanel{margin-top:2px}
.fpanel>summary{display:none}
.pjur{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.pjur img{width:16px;height:12px;object-fit:cover;border-radius:2px}
/* плавающая кнопка и нижняя шторка с фильтрами - только мобильный */
.fab{display:none;position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:40;
     align-items:center;gap:8px;background:var(--ink);color:var(--bg);border:0;border-radius:999px;
     padding:12px 20px;font:inherit;font-size:14px;font-weight:650;box-shadow:0 8px 24px rgba(12,17,22,.22);cursor:pointer}
.fab .n{background:var(--accent);color:#fff;border-radius:999px;font-size:11.5px;padding:1px 7px}
.backdrop{position:fixed;inset:0;background:rgba(12,17,22,.45);z-index:41;opacity:0;pointer-events:none;transition:opacity .18s}
.backdrop.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:42;background:var(--panel);border-radius:18px 18px 0 0;
       transform:translateY(102%);transition:transform .22s ease;max-height:82vh;display:flex;flex-direction:column}
.sheet.on{transform:translateY(0)}
.sheet .sh{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 10px;border-bottom:1px solid var(--line)}
.sheet .sh b{font-size:16px}
.sheet .sh button{border:0;background:none;font-size:22px;line-height:1;color:var(--muted);cursor:pointer;padding:0 4px}
.sheet .sb{overflow-y:auto;padding:12px 18px 6px}
.sheet .sf{padding:12px 18px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);display:flex;gap:10px}
.sheet .sf .btn{flex:1;justify-content:center}
.sheet .chips{margin-top:4px;margin-bottom:12px}
.rescnt{display:flex;align-items:center;gap:12px;margin-top:11px;font-size:13px;color:var(--muted)}
.rescnt b{color:var(--ink)}
.rescnt .reset{border:0;background:none;font:inherit;font-size:13px;color:var(--accent);cursor:pointer;padding:0}

.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px;padding:20px 0 8px}
.vcard{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:16px 16px 14px;
       display:flex;flex-direction:column;gap:12px}
.vhead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.vlogo{height:30px;display:flex;align-items:center}
.vlogo img{height:26px;width:auto;max-width:160px;object-fit:contain}
.vlogo .lg-dark{display:none}
.vbadges{display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.badge{font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;white-space:nowrap}
.badge.rec{background:#eaf1ff;color:#2f6fed}
.badge.sale{background:#fff0eb;color:#d9420f}
.vrate{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.vrate b{font-size:19px;letter-spacing:-.4px}
.vrate .stars{color:#f5a623;font-size:11px;letter-spacing:1px}
.vrate .rcount{font-size:12px;color:var(--muted)}
.vprice{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.vprice .pv{font-size:24px;font-weight:750;letter-spacing:-.6px}
.vprice .pm{font-size:13px;color:var(--muted)}
.vprice .pnote{margin-left:auto;font-size:12px;color:var(--muted)}
.vstats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;border-top:1px solid var(--line);
        border-bottom:1px solid var(--line);padding:11px 0}
.vstats div{min-width:0}
.vstats b{display:block;font-size:14px;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vstats em{display:block;font-style:normal;font-size:11px;color:var(--muted);margin-top:1px}
.vfeats{display:flex;flex-wrap:wrap;gap:5px}
.fch{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:#33404e;background:#f3f5f8;
     border-radius:7px;padding:4px 8px}
.fch i{font-size:12px;color:var(--accent)}
.fch.more{background:none;color:var(--muted)}
.vplats{display:flex;flex-wrap:wrap;gap:4px;color:var(--muted)}
.pic{width:24px;height:24px;border-radius:6px;background:#f3f5f8;display:inline-flex;align-items:center;justify-content:center;font-size:12px}
.vcta{display:flex;gap:8px;margin-top:auto}
.vcta .btn{flex:1;justify-content:center}
.empty{padding:40px 0;text-align:center;color:var(--muted)}

.sect{padding:26px 0 6px}
.sect h2{font-size:22px;letter-spacing:-.5px;margin-bottom:6px}
.sect .sub{color:var(--muted);font-size:14px;margin-bottom:14px}
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
table.cmp{border-collapse:collapse;width:100%;min-width:760px;font-size:13.5px}
table.cmp th,table.cmp td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
table.cmp th{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
table.cmp td.nm{font-weight:650}
table.cmp tr:last-child td{border-bottom:0}
.faq{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:13px 15px;margin-bottom:9px}
.faq summary{cursor:pointer;font-weight:650;font-size:14.5px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--muted);font-weight:600}
.faq[open] summary::after{content:"-"}
.faq p{color:var(--muted);font-size:14px;margin-top:9px}
.foot{border-top:1px solid var(--line);margin-top:34px;padding:22px 0 40px;color:var(--muted);font-size:13px}

:root[data-theme="dark"] .vcard,:root[data-theme="dark"] .srch,:root[data-theme="dark"] .chip,
:root[data-theme="dark"] .sel select,:root[data-theme="dark"] .tblwrap,:root[data-theme="dark"] .faq{background:var(--panel)}
:root[data-theme="dark"] .fch,:root[data-theme="dark"] .pic{background:#222932;color:#c9d2dc}
:root[data-theme="dark"] .fch i{color:#7aa5ff}
:root[data-theme="dark"] .srch .x{background:#222932}
:root[data-theme="dark"] .badge.rec{background:#1b2740;color:#8ab0ff}
:root[data-theme="dark"] .badge.sale{background:#3a1f16;color:#ff9066}
:root[data-theme="dark"] .vlogo .lg-light{display:none}
:root[data-theme="dark"] .vlogo .lg-dark{display:block}
:root[data-theme="dark"] .chip[aria-pressed="true"]{color:#0f1216}
/* в тёмной теме акцент светлее, белый текст на нём почти не читался */
:root[data-theme="dark"] .btn.primary{color:#0f1216}
:root[data-theme="dark"] .fab .n{color:#0f1216}

@media (max-width:860px){
  /* панель инструментов больше НЕ липнет: она занимала пол-экрана при скролле.
     Фильтры уезжают в нижнюю шторку, вызов - плавающая кнопка. */
  .tools{position:static;padding:10px 0 8px}
  .fpanel{display:none}
  .fab{display:inline-flex}
  .fcnt{background:var(--accent);color:#fff;border-radius:999px;font-size:11px;padding:1px 7px}
  .chead{padding:18px 0 4px}
  .chead h1{font-size:26px}
  .chead .lead{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .tools{top:56px;padding:10px 0}
  .grid-cards{grid-template-columns:1fr;gap:13px}
  .vstats{grid-template-columns:repeat(2,1fr);row-gap:10px}
  .sel{flex:1 1 100%}
  .sel select{flex:1}
}


/* ---------- инструкции ---------- */
.path{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0 4px}
.pstep{display:flex;gap:12px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:15px}
.pnum{flex:0 0 26px;height:26px;border-radius:8px;background:var(--accent);color:#fff;font-weight:700;
      font-size:13px;display:flex;align-items:center;justify-content:center}
.pstep b{font-size:15px;letter-spacing:-.2px}
.pstep p{color:var(--muted);font-size:13.5px;margin:5px 0 8px}
.plink{color:var(--accent);font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px}

.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;padding:18px 0 6px}
.gcard{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden;
       display:flex;flex-direction:column}
.gimg{position:relative;display:block;aspect-ratio:600/314;background:#eef1f5}
.gimg img{width:100%;height:100%;object-fit:cover;display:block}
.glvl{position:absolute;left:10px;top:10px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;
      background:#fff;color:#33404e}
.glvl.lvl1{background:#e7f6ef;color:#0f7a52}
.glvl.lvl2{background:#fff3e0;color:#a15c00}
.glvl.lvl3{background:#fdeaea;color:#b3261e}
.glvl.lvl0{background:#eef1f5;color:#4a5563}
.gbody{padding:13px 15px 15px;display:flex;flex-direction:column;gap:8px;flex:1}
.gmeta{display:flex;gap:12px;font-size:12px;color:var(--muted)}
.gm{display:inline-flex;align-items:center;gap:5px}
.gcard h3{font-size:16.5px;letter-spacing:-.3px;line-height:1.3}
.gcard p{color:var(--muted);font-size:13.5px}
.gtags{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto;padding-top:4px}
.gt{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:#33404e;background:#f3f5f8;
    border-radius:7px;padding:4px 8px}
.gt i{font-size:12px;color:var(--accent)}

:root[data-theme="dark"] .pnum{color:#0f1216}
:root[data-theme="dark"] .pstep,:root[data-theme="dark"] .gcard{background:var(--panel)}
:root[data-theme="dark"] .gt{background:#222932;color:#c9d2dc}
:root[data-theme="dark"] .gt i{color:#7aa5ff}
:root[data-theme="dark"] .gimg{background:#1b2129}
:root[data-theme="dark"] .glvl{background:#222932;color:#c9d2dc}
:root[data-theme="dark"] .glvl.lvl1{background:#12301f;color:#5fd39d}
:root[data-theme="dark"] .glvl.lvl2{background:#33240c;color:#f0b458}
:root[data-theme="dark"] .glvl.lvl3{background:#3a1616;color:#ff8f86}

@media (max-width:860px){
  .path{grid-template-columns:1fr;gap:10px}
  .ggrid{grid-template-columns:1fr}
}


/* Общие элементы редизайна 2026: подвал и раскладка "подвал прижат к низу".
   Один файл на все страницы: правка здесь меняет подвал везде. */

body{min-height:100vh;display:flex;flex-direction:column}
body > .wrap{flex:1 0 auto}
#site-footer{margin-top:auto}

.site-footer{border-top:1px solid var(--line);background:var(--panel);margin-top:44px}
.site-footer .frow{display:flex;gap:56px;padding:34px 0 26px;flex-wrap:wrap}
.site-footer .fcol{min-width:130px}
.site-footer .fabout{max-width:280px}
.site-footer .fabout .logo{margin-bottom:10px}
.site-footer .fabout p{font-size:13.5px;color:var(--muted);line-height:1.5}
.site-footer .fcol h5{font-family:var(--mono);font-size:10.5px;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--muted);margin-bottom:11px;font-weight:600}
.site-footer .fcol a{display:block;font-size:14px;color:var(--ink);margin-bottom:7px;opacity:.85}
.site-footer .fcol a:hover{opacity:1;color:var(--accent)}
.site-footer .ffine{border-top:1px solid var(--line);padding:15px 0 22px;font-size:12.5px;color:var(--muted);
  display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.site-footer .ffine a{color:var(--muted)}
.site-footer .ffine a:hover{color:var(--accent)}
.site-footer .fdot{opacity:.5}

@media (max-width:860px){
  .site-footer .frow{gap:26px 40px;padding:26px 0 18px}
  .site-footer .fabout{max-width:none;flex:1 1 100%}
  /* плавающая кнопка фильтров не должна накрывать ссылки подвала */
  .site-footer .ffine{padding-bottom:76px}
}

/* видимо только скринридеру: подписи иконок и полей */
.visually-hidden-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* заголовки колонок подвала - настоящие h2, поэтому гасим их типографику */
.site-footer .fh{font-family:var(--mono);font-size:10.5px;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--muted);margin-bottom:11px;font-weight:600}
/* название сервиса в карточке каталога */
.vname{font-size:15px;font-weight:650;letter-spacing:-.2px;margin:-4px 0 -2px}
.vname a{color:var(--ink)}
.vname a:hover{color:var(--accent)}
/* фокус виден на всех интерактивных элементах */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* ---- доступность: контраст по WCAG AA (4.5:1 для обычного текста) ----
   Проверено измерением на светлой и тёмной теме, а не на глаз. */
:root{ --ok:#0a7a52; --accent-link:#2560d8; }
:root[data-theme="dark"]{ --ok:#22b37c; --accent-link:#8ab0ff; }
.crumbs a{color:var(--accent-link)}
.chips .lbl{color:var(--muted)}
.badge.sale{background:#fff0eb;color:#a82c06}
:root[data-theme="dark"] .badge.sale{background:#3a1f16;color:#ffab8a}
.badge.rec{background:#eaf1ff;color:#1e4fb8}
:root[data-theme="dark"] .badge.rec{background:#1b2740;color:#a8c4ff}
:root[data-theme="dark"] .btn.go{color:#0f1216}
.srch .x{width:24px;height:24px}
.fch.more{color:var(--muted)}
.vprice .pnote,.vrate .rcount,.vstats em,.gmeta,.upd{color:var(--muted)}

/* ---- размер зоны нажатия: WCAG 2.5.8 требует минимум 24x24 CSS-пикселя ---- */
.nav nav a{display:inline-flex;align-items:center;min-height:26px}
.crumbs a,.crumbs span{display:inline-flex;align-items:center;min-height:24px}
.site-footer .fcol a{display:flex;align-items:center;min-height:26px;margin-bottom:3px}
.site-footer .ffine a{display:inline-flex;align-items:center;min-height:24px}
.srch .x{width:26px;height:26px;min-height:26px;font-size:15px}
.srch input{min-height:26px}
.ddmenu button,.ddmenu a{min-height:34px;display:flex;align-items:center}
.faq summary{min-height:26px}
.vname a{display:inline-flex;align-items:center;min-height:26px}
.sheet .sh button{width:34px;height:34px;min-height:34px;display:flex;align-items:center;justify-content:center}

/* ---- горизонтальный скролл на мобильном ----
   body стал флекс-колонкой (чтобы подвал прижимался к низу), и .wrap как флекс-элемент
   раздувался под min-content самого широкого потомка - сравнительной таблицы.
   min-width:0 возвращает элементу право сжиматься, таблица скроллится внутри своей обёртки. */
body > .wrap{min-width:0}
.tblwrap{max-width:100%}
.grid-cards,.ggrid{min-width:0}

/* ---- логотип: как на боевом сайте, текст в два цвета ---- */
.logo{font-weight:800;font-size:19px;letter-spacing:-.4px;gap:0}
.logo .lg1{color:#0d6efd}
.logo .lg2{color:var(--ink)}
:root[data-theme="dark"] .logo .lg1{color:#5b93ff}
.site-footer .logo{font-size:18px}

/* ---- десктопная раскладка: контент + боковая колонка ----
   Каталог во всю ширину 1180px читался как простыня; сайдбар возвращает
   привычную структуру сайта и даёт перелинковку на новости и инструкции. */
.pagecols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.colmain{min-width:0}
.colside{position:sticky;top:76px;display:flex;flex-direction:column;gap:14px;padding-top:26px;min-width:0}
.scard{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:15px 16px}
.scard .sh2{font-family:var(--mono);font-size:10.5px;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--muted);margin-bottom:11px;font-weight:600}
.topvpn{display:block;margin-bottom:10px}
.topvpn img{height:24px;width:auto;max-width:150px;object-fit:contain}
.topvpn .lg-dark{display:none}
:root[data-theme="dark"] .topvpn .lg-light{display:none}
:root[data-theme="dark"] .topvpn .lg-dark{display:block}
.topprice{font-size:23px;font-weight:750;letter-spacing:-.6px;display:flex;align-items:baseline;gap:7px}
.topprice span{font-size:13px;font-weight:400;color:var(--muted)}
.topnote{font-size:12.5px;color:var(--muted);margin:3px 0 11px}
.scard .btn.go{width:100%;justify-content:center}
.slist{list-style:none;display:flex;flex-direction:column;gap:9px}
.slist a{font-size:13.5px;line-height:1.35;display:block;color:var(--ink)}
.slist a:hover{color:var(--accent)}
.slist em{font-style:normal;color:var(--muted);font-size:12px}
.smore{display:inline-flex;align-items:center;gap:6px;margin-top:11px;font-size:13px;font-weight:600;color:var(--accent-link)}

@media (max-width:1000px){
  .pagecols{grid-template-columns:1fr}
  .colside{position:static;padding-top:6px}
}

/* переключатель языка: в кнопке двухбуквенный код, в меню код + название */
.lang .lbl{font-weight:700;letter-spacing:.4px}
.langmenu a,.ddmenu button .lcode,.langmenu .lcode{display:inline-flex}
.ddmenu .lcode{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--muted);
  min-width:22px;margin-right:9px;letter-spacing:.5px}
.ddmenu a{display:flex;align-items:center;width:100%;text-align:left;padding:9px 13px;font-size:14px}
.ddmenu a[aria-current="true"],.ddmenu button[aria-current="true"]{color:var(--accent);font-weight:650}
.ddmenu a[aria-current="true"] .lcode,.ddmenu button[aria-current="true"] .lcode{color:var(--accent)}

/* панель фильтров не липнет: на десктопе тоже уезжает вместе со страницей */
.tools{position:static}

/* ---- плотность карточки каталога ----
   Между логотипом, названием, рейтингом и ценой было по 12px плюс собственные
   отступы строк - карточка выглядела разреженной. Ужимаем ритм. */
.vcard{gap:8px;padding:14px 15px 13px}
.vname{margin:0}
.vrate{line-height:1.2}
.vrate b{font-size:18px}
.vprice{line-height:1.15;margin-top:1px}
.vprice .pv{font-size:22px}
.vstats{padding:9px 0}
.vfeats{gap:4px}
@media (max-width:860px){
  .vcard{gap:7px}
  .vprice .pv{font-size:21px}
  .vstats{row-gap:8px}
}

/* ---- главная ---- */
.hero{padding:30px 0 6px;max-width:820px}
.hero h1{font-size:36px;line-height:1.12;letter-spacing:-1px;margin-bottom:12px}
.hero .lead{color:var(--muted);font-size:16px}
.herocta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px}
.heronote{font-size:13px;color:var(--muted)}
.tasks{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.task{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:14px;display:block}
.task i{font-size:18px;color:var(--accent)}
.task b{display:block;font-size:15px;margin:7px 0 3px}
.task em{font-style:normal;font-size:13px;color:var(--muted);line-height:1.4;display:block}
.task:hover{border-color:var(--accent)}
.homecols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.bignews{display:block;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel)}
.bignews img{width:100%;height:auto;display:block;aspect-ratio:760/398;object-fit:cover}
.bntxt{display:block;padding:13px 16px 15px}
.bndate{font-family:var(--mono);font-size:11px;color:var(--muted);display:block;margin-bottom:5px}
.bntxt b{font-size:19px;line-height:1.25;letter-spacing:-.3px}
.newslist{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:14px}
.newslist a{display:flex;gap:11px;align-items:flex-start}
.newslist img{width:104px;height:60px;object-fit:cover;border-radius:9px;flex:0 0 auto}
.newslist span{font-size:14px;line-height:1.35}
.newslist em{display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-bottom:3px}
.toplist{list-style:none;display:flex;flex-direction:column;gap:11px}
.toplist a{display:flex;align-items:center;gap:9px}
.toplist img{height:20px;width:auto;max-width:96px;object-fit:contain}
.toplist .lg-dark{display:none}
:root[data-theme="dark"] .toplist .lg-light{display:none}
:root[data-theme="dark"] .toplist .lg-dark{display:block}
.tprice{margin-left:auto;font-weight:700;font-size:14px;white-space:nowrap}
.tprice em{font-style:normal;font-weight:400;font-size:11.5px;color:var(--muted);margin-left:3px}
@media (max-width:1000px){ .homecols{grid-template-columns:1fr} }
@media (max-width:860px){
  .hero{padding:20px 0 4px}
  .hero h1{font-size:27px}
  .tasks{grid-template-columns:1fr 1fr;gap:9px}
  .newslist{grid-template-columns:1fr}
  .bntxt b{font-size:17px}
}

/* миниатюры в боковых списках */
.slist a{display:flex;gap:9px;align-items:flex-start}
.slist img{width:56px;height:32px;object-fit:cover;border-radius:6px;flex:0 0 auto;background:#eef1f5}
.slist span{display:block;min-width:0}
:root[data-theme="dark"] .slist img{background:#222932}

/* бейджи в одну строку справа от логотипа, а не столбиком */
.vbadges{flex-direction:row;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.vhead{align-items:center;gap:8px}
.badge{white-space:nowrap;line-height:1.5}

/* превью-картинки везде одной пропорции 1.91:1 и с одинаковым скруглением,
   как в блоках "Читайте также" и "Последние статьи" на боевом сайте */
.slist img{width:64px;height:34px;border-radius:7px}
.newslist img{width:104px;height:54px;border-radius:8px}
.bignews img{border-radius:0}

/* длинное название сервиса в кнопке обзора не переносим, а обрезаем */
.vcta{min-width:0}
.vcta .btn{min-width:0}
.vcta .review span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

/* на чипе видно, сколько сервисов под него подходит - сразу понятно, что даст фильтр */
.chip .cn{font-family:var(--mono);font-size:10.5px;color:#9aa3b0;margin-left:6px}
.chip[aria-pressed="true"] .cn{color:rgba(255,255,255,.85)}
:root[data-theme="dark"] .chip[aria-pressed="true"] .cn{color:rgba(15,18,22,.7)}

/* сортируемые заголовки таблицы */
table.cmp th{cursor:pointer;user-select:none;white-space:nowrap}
table.cmp th::after{content:"";display:inline-block;width:0;height:0;margin-left:6px;vertical-align:middle;
  border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid #b9c1cb}
table.cmp th[aria-sort="ascending"]::after{border-top:0;border-bottom:5px solid var(--accent)}
table.cmp th[aria-sort="descending"]::after{border-top:5px solid var(--accent)}
table.cmp th[scope="row"]{cursor:auto}
table.cmp th[scope="row"]::after{display:none}

/* ---- состояния кнопок: наведение, нажатие ---- */
.btn{transition:background-color .15s ease, border-color .15s ease, color .15s ease, transform .06s ease}
.btn.go:hover{background:#0b6c49}
.btn.go:active{transform:translateY(1px)}
.btn.primary:hover{background:#2560d8}
.btn.primary:active{transform:translateY(1px)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn.ghost:active{transform:translateY(1px)}
:root[data-theme="dark"] .btn.go:hover{background:#33c98f}
:root[data-theme="dark"] .btn.primary:hover{background:#7aa9ff}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip[aria-pressed="true"]:hover{background:var(--accent-link);color:#fff}
.task:hover b{color:var(--accent)}

/* ---- страница инструментов ---- */
.myip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--line);
  border-radius:var(--r);background:var(--panel);padding:13px 16px;margin:6px 0 18px}
.myip .mi-label{font-size:12.5px;color:var(--muted)}
.myip b{font-family:var(--mono);font-size:17px;letter-spacing:-.2px}
.myip .mi-country{font-size:13.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.myip .mi-country img{width:18px;height:13px;object-fit:cover;border-radius:2px}
.myip .mi-isp{margin-left:auto;font-size:12.5px;color:var(--muted)}
.tools.tabs .row{display:flex;gap:6px;flex-wrap:wrap;overflow:visible}
.tools.tabs .tab{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;
  background:var(--panel);color:var(--muted);padding:9px 14px;font-size:13.5px;font-weight:600}
.tools.tabs .tab[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.toolpane{padding:18px 0 4px}
.toolpane h2{font-size:20px;letter-spacing:-.4px;margin-bottom:4px}
.tdesc{color:var(--muted);font-size:14px;margin-bottom:14px}
.tform{display:flex;gap:9px;flex-wrap:wrap}
.tinput{flex:1 1 260px;min-width:0;height:44px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel);color:var(--ink);font:inherit;font-size:14.5px;padding:0 14px}
.tinput.tport{flex:0 0 110px}
.tform .btn{height:44px}
.tresult{margin-top:14px;font-size:14px}
.tresult .bg-light,.tresult .border{border-radius:10px}
@media (max-width:860px){ .tform .btn{width:100%} .tinput.tport{flex:1 1 100%} }

/* ---- панель фильтров легче: ниже контролы, компактнее чипы ---- */
/* дубль .srch из макета удалён: перебивал настройки каталога */
.sel .dd > button{height:38px}
.tools .line1 .chip{height:38px}
.chip{padding:6px 10px;font-size:12px}
.chips{gap:5px;margin-top:8px}
.chips .lbl{font-size:11px}
.tools{padding:12px 0 10px}
.rescnt{margin-top:9px}

/* заголовок карточки гайда - настоящий h2 */
.gt2{font-size:16.5px;letter-spacing:-.3px;line-height:1.3}
.gt2 a{color:var(--ink)}
.gt2 a:hover{color:var(--accent)}

/* ---- статья и инструкция ---- */
.art{padding-top:6px;max-width:780px}
.art h1{font-size:33px;line-height:1.16;letter-spacing:-.9px;margin-bottom:12px}
.artmeta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:12.5px;margin-bottom:16px}
.artmeta .glvl{position:static}
.artcover{width:100%;height:auto;border-radius:var(--r);display:block;margin-bottom:18px;aspect-ratio:1024/536;object-fit:cover}
.artlead{font-size:17px;line-height:1.55;color:var(--ink);margin-bottom:18px}
.toc{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:14px 16px;margin-bottom:20px}
.toc b{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.toc ol{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px}
.toc a{font-size:14px}
.toc a:hover{color:var(--accent)}
.artbody{font-size:16px;line-height:1.65}
.artbody h2{font-size:23px;letter-spacing:-.5px;margin:26px 0 10px;scroll-margin-top:70px}
.artbody h3{font-size:18.5px;margin:20px 0 8px}
.artbody p{margin-bottom:14px}
.artbody ul,.artbody ol{margin:0 0 16px 20px;display:flex;flex-direction:column;gap:6px}
.artbody a{color:var(--accent-link);text-decoration:underline;text-underline-offset:2px}
.artbody img{max-width:100%;height:auto;border-radius:10px}
.artbody pre{background:#0f1419;color:#e6edf3;padding:14px 16px;border-radius:10px;overflow-x:auto;font-size:13.5px;margin-bottom:16px}
.artbody code{font-family:var(--mono);font-size:13.5px;background:#f1f3f6;padding:2px 5px;border-radius:5px}
.artbody pre code{background:none;padding:0;color:inherit}
:root[data-theme="dark"] .artbody code{background:#222932}
.artbody table{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:16px}
.artbody th,.artbody td{border:1px solid var(--line);padding:9px 11px;text-align:left}
.artbody .alert,.artbody .alert-info,.artbody .alert-warning{border-radius:10px;padding:14px 16px;margin-bottom:16px}
.artbody .alert-info{background:#eaf1ff;border-left:3px solid var(--accent)}
.artbody .alert-warning{background:#fff6e6;border-left:3px solid #d99100}
:root[data-theme="dark"] .artbody .alert-info{background:#18233a}
:root[data-theme="dark"] .artbody .alert-warning{background:#332711}
:root[data-theme="dark"] .artbody pre{background:#05080b}
@media (max-width:860px){ .art h1{font-size:26px} .artbody{font-size:15.5px} }

.arttags{display:flex;flex-wrap:wrap;gap:5px;margin-top:18px}
.pager{display:flex;align-items:center;gap:14px;justify-content:center;padding:22px 0 6px}
.pinfo{font-size:13.5px;color:var(--muted)}
/* стили страницы VPN-сервиса, перенесены из макета */
/* шапка сервиса */
.svc{display:flex;align-items:flex-start;gap:18px;padding:14px 0 18px;flex-wrap:wrap}
.svc .brandmark{width:52px;height:52px;border-radius:13px;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.svc .brandmark img{width:34px;height:34px;object-fit:contain}
.svc .titles{flex:1;min-width:260px}
.svc h1{font-size:31px;line-height:1.16;letter-spacing:-.9px;font-weight:760}
.svc .sub{display:flex;align-items:center;gap:14px;margin-top:8px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.svc .price b{color:var(--ink);font-size:16px}
.chip{font-family:var(--mono);font-size:11px;letter-spacing:.6px;text-transform:uppercase;border:1px solid var(--line);border-radius:6px;padding:3px 8px;background:#fff}
.chip.good{border-color:#c8ecdc;background:#f0fbf6;color:#0b7a53}
.svc .cta{display:flex;gap:10px;align-items:center}
/* вкладки */
.tabs{position:sticky;top:60px;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.tabs .row{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.tabs .row::-webkit-scrollbar{display:none}
.tab{padding:13px 15px;font-size:14.5px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;cursor:pointer;background:none;border-top:0;border-left:0;border-right:0;font-family:inherit}
.tab[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.tab .n{font-family:var(--mono);font-size:11px;color:#9aa3b0;margin-left:6px}
.pane{padding:26px 0 10px}
.pane[hidden]{display:none}
h2{font-size:21px;letter-spacing:-.4px;margin:0 0 14px;font-weight:700}
h3{font-size:15px;margin:22px 0 10px;font-weight:650}
p{font-size:15.5px;color:#333d49;margin-bottom:14px}
.grid2{display:grid;grid-template-columns:1fr 320px;gap:26px;align-items:start}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.card h4{font-family:var(--mono);font-size:10.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);margin-bottom:12px;font-weight:500}
/* рейтинги */
.rate{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.rate .big{font-size:44px;font-weight:780;letter-spacing:-1.5px;line-height:1}
.rate .stars{color:#f5a524;font-size:15px;letter-spacing:2px}
.srcs{flex:1;min-width:260px;display:flex;flex-direction:column;gap:9px}
.src{display:flex;align-items:center;gap:12px;font-size:13.5px}
.src .nm{width:132px;color:#333d49}
.src .bar{flex:1;height:6px;border-radius:4px;background:#eef1f5;overflow:hidden}
.src .bar i{display:block;height:100%;background:var(--ok)}
.src .v{font-family:var(--mono);font-size:12.5px;width:74px;text-align:right;color:var(--muted)}
.src .v b{color:var(--ink)}
/* таблица цен */
table{width:100%;border-collapse:collapse;font-size:14.5px}
th{font-family:var(--mono);font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);font-weight:500}
td{padding:14px;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
tr.best td{background:#f5f9ff}
.tag{font-family:var(--mono);font-size:10px;letter-spacing:.7px;text-transform:uppercase;background:#eaf2ff;color:var(--accent);border-radius:5px;padding:2px 7px;margin-left:8px}
/* плитки */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:11px}
.tile{border:1px solid var(--line);border-radius:11px;background:#fff;padding:13px 14px;font-size:14px;display:flex;align-items:center;gap:10px}
.tile .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex-shrink:0}
.tile.off .dot{background:#d3d8de}
.tile.off{color:var(--muted)}
.kv{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--muted)}
.kv .v{font-weight:600}
.note{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;background:#fff;padding:13px 15px;font-size:14px;margin:16px 0}
footer{border-top:1px solid var(--line);background:var(--panel);margin-top:44px;padding:26px 0;font-size:13px;color:var(--muted)}
@media (max-width:900px){
  .grid2{grid-template-columns:1fr}
  .svc h1{font-size:25px;letter-spacing:-.6px}
  .svc{gap:14px}
  .svc .cta{width:100%}
  .svc .cta .btn{flex:1;justify-content:center}
  .tabs{top:56px}
}
/* рейтинги: ровная сетка, иконки источников */
.rate{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:center}
.rate-total{text-align:center}
.rate .big{font-size:46px;font-weight:780;letter-spacing:-1.6px;line-height:1}
.rate .stars{color:#f5a524;font-size:15px;letter-spacing:3px;margin-top:2px}
.rate .cnt{font-size:12px;color:var(--muted);margin-top:6px}
.srcs{display:flex;flex-direction:column;gap:10px}
.src{display:grid;grid-template-columns:22px 150px 1fr 96px;align-items:center;gap:12px;font-size:14px;color:inherit}
.src img{width:20px;height:20px;object-fit:contain}
.src .nm{color:#333d49}
.src .bar{height:6px;border-radius:4px;background:#eef1f5;overflow:hidden}
.src .bar i{display:block;height:100%;background:var(--ok)}
.src .v{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25}
.src .v b{font-family:var(--mono);font-size:13.5px}
.src .v em{font-style:normal;font-size:11px;color:var(--muted)}
.src:hover .nm{color:var(--accent)}
/* плитки-ссылки */
.tile{transition:border-color .15s}
a.tile:hover{border-color:var(--accent)}
.tile .q{margin-left:auto;font-family:var(--mono);font-size:11px;color:#b9c0c9;border:1px solid var(--line);border-radius:50%;width:16px;height:16px;display:flex;align-items:center;justify-content:center}
a.tile:hover .q{color:var(--accent);border-color:var(--accent)}
/* страны */
.countries{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:6px 14px;font-size:14px;color:#333d49;
  max-height:420px;overflow:auto;border:1px solid var(--line);border-radius:12px;background:#fff;padding:14px 16px}
.countries span{padding:3px 0;border-bottom:1px dotted #eef1f5}
@media (max-width:700px){
  .rate{grid-template-columns:1fr;gap:14px}
  .src{grid-template-columns:20px 1fr 70px;gap:9px}
  .src .bar{display:none}
}
/* функции и протоколы: широкие плитки с иконкой и пояснением */
.ftiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:11px}
.ftile{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:13px 14px;color:inherit;transition:border-color .15s}
.ftile:hover{border-color:var(--accent)}
.ftile > i{font-size:19px;color:var(--accent);width:22px;text-align:center;flex-shrink:0}
.ftile .tx{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.ftile .tx b{font-size:14.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ftile .tx em{font-style:normal;font-size:12px;color:var(--muted);margin-top:2px}
.ftile .q{margin-left:auto;font-family:var(--mono);font-size:11px;color:#b9c0c9;border:1px solid var(--line);border-radius:50%;width:17px;height:17px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ftile:hover .q{color:var(--accent);border-color:var(--accent)}
.ftile.off{opacity:.55}
.ftile.off > i{color:#aab2bd}
/* устройства */
.dtiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.dtile{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:11px;background:#fff;padding:12px 14px;font-size:14px}
.dtile i{font-size:18px;color:#33404e}
/* страны с флагами */
.countries span{display:flex;align-items:center;gap:8px}
.countries img{width:19px;height:14px;object-fit:cover;border-radius:2px;border:1px solid #eceff3;flex-shrink:0}
/* новости с обложками */
.nwslist{display:flex;flex-direction:column;gap:12px}
.nws{display:flex;gap:11px;align-items:flex-start}
.nws .th{width:62px;height:44px;border-radius:8px;background-size:cover;background-position:center;flex-shrink:0;border:1px solid var(--line)}
.nws{align-items:center;padding:2px 0}
.nws .tt{font-size:13.5px;line-height:1.35;font-weight:600;color:#1d2733;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(1.35em * 2)}
.nws:hover .tt{color:var(--accent)}
.brandbox{display:flex;align-items:center;justify-content:center;padding:2px 0 12px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.brandbox img{max-width:190px;max-height:52px;width:auto;height:auto;object-fit:contain}
/* поиск по странам */
.srch{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:11px;background:#fff;padding:10px 14px;margin-bottom:16px}
.empty{border:1px dashed var(--line);border-radius:12px;padding:34px;text-align:center;color:var(--muted);font-size:15px}
.empty i{display:block;font-size:26px;margin-bottom:8px;opacity:.5}
.region{margin-bottom:26px}
.regttl{font-size:17px;font-weight:700;margin:0 0 10px;display:flex;align-items:center;gap:9px}
.regttl em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:2px 9px}
.subreg{margin:0 0 14px}
.subttl{font-family:var(--mono);font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);font-weight:500;margin:0 0 8px;display:flex;align-items:center;gap:8px}
.subttl em{font-style:normal;color:#aab2bd}
.ctygrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:5px 14px}
.cty{display:flex;align-items:center;gap:9px;font-size:14px;color:#333d49;padding:5px 0}
.cty img{width:20px;height:15px;object-fit:cover;border-radius:2px;border:1px solid #eceff3;flex-shrink:0}
/* тёмная тема */
:root[data-theme="dark"]{
  --bg:#0f1216; --panel:#161b21; --ink:#e8ecf1; --muted:#98a3b0; --line:#252c35;
  --accent:#5b93ff;
}
:root[data-theme="dark"] .nav{background:#161b21}
:root[data-theme="dark"] .chip,:root[data-theme="dark"] .tile,:root[data-theme="dark"] .ftile,
:root[data-theme="dark"] .dtile,:root[data-theme="dark"] .srch,:root[data-theme="dark"] .countries,
:root[data-theme="dark"] .btn.ghost{background:var(--panel);color:var(--ink)}
:root[data-theme="dark"] p,:root[data-theme="dark"] .cty,:root[data-theme="dark"] .src .nm,
:root[data-theme="dark"] .nws .tt{color:#c9d2dc}
:root[data-theme="dark"] tr.best td{background:#1b2430}
:root[data-theme="dark"] .src .bar,:root[data-theme="dark"] .bar{background:#222932}
:root[data-theme="dark"] .srch button{background:#222932}
.theme{padding:7px 10px}
/* тарифы виджетами */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:14px;align-items:stretch}
.plan{position:relative;border:1px solid var(--line);border-radius:15px;background:var(--panel);padding:20px 18px 18px;display:flex;flex-direction:column}
.plan.best{border-color:var(--ok);box-shadow:0 6px 22px rgba(15,157,107,.10)}
.pribbon{position:absolute;top:-10px;left:18px;background:var(--ok);color:#fff;font-size:11px;font-weight:700;letter-spacing:.4px;padding:4px 10px;border-radius:20px}
.pname{font-size:14px;font-weight:650;color:var(--ink)}
.pname .plus{font-family:var(--mono);font-size:10.5px;color:var(--ok);border:1px solid #c8ecdc;background:#f0fbf6;border-radius:5px;padding:2px 6px;margin-left:6px}
.pmo{display:flex;align-items:baseline;gap:5px;margin:10px 0 2px}
.pmo b{font-size:31px;font-weight:780;letter-spacing:-1.1px}
.pmo span{font-size:13px;color:var(--muted)}
.ptot{font-size:13px;color:var(--muted)}
.pbar{height:5px;border-radius:4px;background:#eef1f5;overflow:hidden;margin:13px 0 12px}
.pbar i{display:block;height:100%;background:var(--accent)}
.plan.best .pbar i{background:var(--ok)}
.pfeat{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:7px}
.pfeat li{font-size:13.5px;color:#3c4855;padding-left:20px;position:relative}
.pfeat li:before{content:"";position:absolute;left:0;top:6px;width:11px;height:6px;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}
.pbtn{margin-top:auto;width:100%;justify-content:center}
/* тёмная тема: то, что оставалось светлым */
:root[data-theme="dark"] .note{background:var(--panel);color:#c9d2dc}
:root[data-theme="dark"] .card,:root[data-theme="dark"] .plan{background:var(--panel)}
:root[data-theme="dark"] .pfeat li{color:#b8c2ce}
:root[data-theme="dark"] .pbar,:root[data-theme="dark"] .pname .plus{background:#222932}
:root[data-theme="dark"] .pname .plus{border-color:#2b4a3d}
:root[data-theme="dark"] .empty{color:var(--muted)}
:root[data-theme="dark"] th{color:var(--muted)}
.brandbox .lg-dark{display:none}
:root[data-theme="dark"] .brandbox .lg-light{display:none}
:root[data-theme="dark"] .brandbox .lg-dark{display:block}
.lang i{font-size:10px;opacity:.6}
.burger{display:none}
@media (max-width:860px){
  .nav nav{display:none}
  .nav .burger{display:inline-flex}
  .nav .row{gap:12px;height:56px}
  .nav .right{gap:7px}
  .lang{padding:7px 11px}
  /* вкладки на мобильном: переносим в 2-3 строки таблетками, чтобы было
     видно все разделы сразу, а не уезжало за край экрана */
  .tabs{border-bottom:0;padding:6px 0 9px}
  .tabs .row{flex-wrap:wrap;overflow:visible;gap:6px;padding-bottom:0}
  .tabs .row::after{display:none}
  .tab{flex:0 1 auto;padding:8px 11px;font-size:13px;line-height:1.1;
       border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--muted)}
  .tab[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
  .tab[aria-selected="true"] .n{color:rgba(255,255,255,.78)}
  .tab .n{margin-left:5px}
}
@media (max-width:860px){
  /* выпадашки прижимаем к правому краю, иначе меню языка вылезает за экран */
  .ddmenu{left:auto;right:0;max-width:calc(100vw - 24px)}
}
@media (max-width:420px){
  .lang{padding:7px 9px;font-size:12.5px}
  .nav .row{gap:8px}
}
/* выпадающие меню */
.dd{position:relative}
.ddmenu{position:absolute;top:calc(100% + 7px);left:0;min-width:172px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 12px 30px rgba(15,25,45,.13);padding:6px;display:none;z-index:60}
.ddmenu--right{left:auto;right:0}
.dd.open .ddmenu{display:block}
.ddmenu button,.ddmenu a{display:block;width:100%;text-align:left;background:none;border:0;font-family:inherit;
  font-size:14px;color:var(--ink);padding:9px 11px;border-radius:8px;cursor:pointer}
.ddmenu button:hover,.ddmenu a:hover{background:#f2f5f9}
:root[data-theme="dark"] .ddmenu button:hover,:root[data-theme="dark"] .ddmenu a:hover{background:#1e2630}
.ddmenu button[aria-current="true"]{color:var(--accent);font-weight:650}
.lang i{transition:transform .15s}
.dd.open .lang i{transform:rotate(180deg)}
/* кнопка: на десктопе живёт в карточке сервиса справа, на мобильном - под заголовком */
.cta-desk{width:100%;justify-content:center;margin:0 0 16px}
@media (max-width:900px){
  .cta-desk{display:none}
}
@media (min-width:901px){
  .svc .cta-mobile{display:none}
}
/* страничная сетка: правая колонка начинается с самого верха */
.pagegrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:26px;align-items:start;padding-top:0}
/* на мобильном шапка ниже (56px), иначе между ней и липкими вкладками просвечивает контент.
   Правило стоит после .pagegrid .tabs - вес селекторов одинаковый, выигрывает последнее. */
@media (max-width:860px){ .pagegrid .tabs{top:55px} }

/* ---- страница сервиса: цены и география ---- */
.svcsub{display:flex;gap:9px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:14px;margin-top:2px}
.svcsub strong{color:var(--ink);font-size:16px}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.plan{position:relative;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:16px}
.plan.best{border-color:var(--ok);box-shadow:0 0 0 1px var(--ok)}
.ptag{position:absolute;top:-11px;left:14px;background:var(--ok);color:#fff;font-size:11px;font-weight:700;
  padding:3px 9px;border-radius:999px}
.pname{font-weight:700;font-size:15px;display:flex;align-items:center;gap:8px;margin-bottom:6px}
.pname .plus{font-size:11px;font-weight:700;background:#e7f6ef;color:#0f7a52;border-radius:999px;padding:2px 7px}
.pval{font-size:29px;font-weight:750;letter-spacing:-1px;line-height:1}
.pval span{font-size:13px;font-weight:400;color:var(--muted);margin-left:4px}
.ptot{font-size:12.5px;color:var(--muted);margin:4px 0 9px}
.pbar{display:block;height:5px;border-radius:999px;background:#eef1f5;overflow:hidden;margin-bottom:11px}
.pbar i{display:block;height:100%;background:var(--accent)}
.pfeat{list-style:none;display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--muted);margin-bottom:12px}
.pfeat li::before{content:"✓";color:var(--ok);font-weight:700;margin-right:6px}
.plan .btn{width:100%;justify-content:center}
:root[data-theme="dark"] .pbar{background:#222932}
:root[data-theme="dark"] .pname .plus{background:#12301f;color:#5fd39d}
.ctygrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:7px}
.cty{display:flex;align-items:center;gap:7px;font-size:13px;border:1px solid var(--line);border-radius:9px;
  padding:6px 9px;background:var(--panel)}
.cty img{border-radius:2px;object-fit:cover}
.brandbox{display:flex;align-items:center;justify-content:center;padding:6px 0 14px}
.brandbox img{max-width:150px;height:auto}
.brandbox .lg-dark{display:none}
:root[data-theme="dark"] .brandbox .lg-light{display:none}
:root[data-theme="dark"] .brandbox .lg-dark{display:block}
.scard .btn.go{width:100%;justify-content:center;margin-bottom:10px}

/* контраст: ссылки в крошках и счётчики на чипах были ниже нормы AA */
:root{ --accent-link:#2457c9 }
:root[data-theme="dark"]{ --accent-link:#9dbdff }
.chip .cn{color:var(--muted)}
/* перенесённые из макета правила переопределяли цвет крошек - фиксируем в конце файла */
.crumbs a{color:var(--accent-link)}
.crumbs a:hover{color:var(--accent)}

/* ---- финальные значения (файл собирается из нескольких кусков, поэтому фиксируем в конце) ---- */
.srch{flex:1 1 260px;max-width:520px;display:flex;align-items:center;gap:9px;background:var(--panel);
      border:1px solid var(--line);border-radius:10px;padding:0 13px;height:38px;margin-bottom:0;min-width:0}
.srch input{border:0;outline:0;background:none;font:inherit;font-size:14px;color:inherit;width:100%;min-width:0}
.srch button[hidden]{display:none}
.tools{position:static;padding:12px 0 10px}
.crumbs a{color:var(--accent-link)}
.chip .cn{color:var(--muted)}
/* активная вкладка и её счётчик: синий #2f6fed давал 4.4 на светлом фоне */
.tab[aria-selected="true"]{color:var(--accent-link);border-bottom-color:var(--accent-link)}
.tab .n{color:var(--muted)}
:root[data-theme="dark"] .tab[aria-selected="true"]{color:#9dbdff;border-bottom-color:#9dbdff}

/* ---- инструменты: список, результаты, тест утечки DNS ---- */
.toolnav{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 18px}
.tchip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;
  background:var(--panel);color:var(--muted);padding:8px 13px;font-size:13px;font-weight:600;min-height:34px}
.tchip:hover{border-color:var(--accent);color:var(--accent)}
.tchip.on{background:var(--accent-link);border-color:var(--accent-link);color:#fff}
:root[data-theme="dark"] .tchip.on{color:#0f1216}
.tasks6{grid-template-columns:repeat(3,1fr)}
.myip .mi-copy{margin-left:2px;padding:0 9px;height:30px}
.myip .mi-country{margin-left:auto}

/* результат инструмента: своя рамка, прокрутка и таблица вместо бутстраповской вёрстки */
.tresult:empty{display:none}
.tresult > div{border:1px solid var(--line)!important;border-radius:var(--r);background:var(--panel)!important;
  overflow:hidden;box-shadow:none!important;margin-top:14px!important}
.tresult .bg-light,.tresult .bg-white{background:var(--panel)!important}
.tresult .d-flex.justify-content-between{display:flex;justify-content:space-between;gap:14px;
  padding:9px 14px!important;border-bottom:1px solid var(--line)!important}
.tresult .d-flex.justify-content-between:last-child{border-bottom:0!important}
.tresult .text-muted{color:var(--muted)!important;font-size:11.5px;letter-spacing:.06em}
.tresult .text-dark{color:var(--ink)!important;font-size:14px;text-align:right;word-break:break-word}
.tresult .justify-content-end{display:flex;justify-content:flex-end;padding:7px 10px!important;
  border-bottom:1px solid var(--line)!important}
.tresult .btn-link,.tresult .btn-sm{border:1px solid var(--line);background:var(--bg);border-radius:8px;
  color:var(--muted);padding:5px 10px;font-size:13px;cursor:pointer;min-height:30px}
.tresult .btn-link:hover{border-color:var(--accent);color:var(--accent)}
.tresult pre,.tresult .whois-box,.tresult table{max-height:420px;overflow:auto;display:block}
.tresult pre{font-family:var(--mono);font-size:12.5px;line-height:1.5;padding:14px 16px;margin:0;
  white-space:pre-wrap;word-break:break-word;background:var(--panel);color:var(--ink)}
.tresult table{width:100%;border-collapse:collapse;font-size:13.5px}
.tresult table td,.tresult table th{border-bottom:1px solid var(--line);padding:8px 12px;text-align:left}
.tresult .text-success{color:var(--ok)!important}
.tresult .text-danger{color:#c0392b!important}
:root[data-theme="dark"] .tresult .text-danger{color:#ff8f86!important}
.tresult .leaflet-container{height:320px;border-top:1px solid var(--line)}
.tresult .h5{font-size:16px;font-weight:700;padding:14px;display:block;text-align:center}

/* тест утечки DNS */
.leak .steps{display:flex;align-items:center;justify-content:center;gap:12px;margin:4px 0 16px}
.leak .step{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:13px;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:7px 13px;background:var(--panel)}
.leak .step em{font-style:normal;font-weight:500;font-size:12.5px}
.leak .step.active{border-color:var(--accent-link);color:var(--accent-link)}
.leak .stepline{flex:0 0 40px;height:1px;background:var(--line)}
.leakbox{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:22px 18px;text-align:center}
.leakicon{font-size:26px;color:var(--accent-link);display:block;margin-bottom:8px}
.leakbox h2{font-size:18px;letter-spacing:-.3px;margin-bottom:6px}
.leakbox p{color:var(--muted);font-size:14px;max-width:420px;margin:0 auto 14px}
.leakbox .btn{min-width:220px;justify-content:center}
.lprogress{height:6px;border-radius:999px;background:#eef1f5;overflow:hidden;margin-top:14px}
.lprogress i{display:block;height:100%;background:var(--accent);transition:width .3s}
:root[data-theme="dark"] .lprogress{background:#222932}
.cmpview{display:grid;grid-template-columns:1fr 40px 1fr;gap:12px;align-items:stretch;margin-top:16px}
.cmpcard{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:14px}
.cmpcard h3{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--line);padding-bottom:9px;margin-bottom:10px;text-align:center;font-weight:600}
.cmplist{display:flex;flex-direction:column;gap:7px;font-size:13px;max-height:300px;overflow:auto}
.cmplist .waiting{color:var(--muted);text-align:center;padding:22px 0}
.cmparrow{display:flex;align-items:center;justify-content:center;color:var(--accent-link);font-size:20px}
@media (max-width:860px){
  .tasks6{grid-template-columns:1fr 1fr}
  .cmpview{grid-template-columns:1fr}
  .cmparrow{transform:rotate(90deg)}
  .leak .step em{display:none}
  .myip .mi-country{margin-left:0;flex:1 1 100%}
}

/* заголовок карточки - в одну строку с иконкой, описание под ними */
.task{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 10px;align-items:center}
.task i{grid-row:1;grid-column:1;font-size:17px;line-height:1}
.task b{grid-row:1;grid-column:2;margin:0;font-size:15px}
.task em{grid-column:1 / -1;grid-row:2}
/* содержимое плашки прижато к верху: карточки в ряду одной высоты, текст не должен плавать по центру */
.task{align-content:start}
/* .pager раскладывается флексом, поэтому атрибут hidden сам по себе его не прячет */
.pager[hidden],.rescnt[hidden],.empty[hidden]{display:none}

/* ---- лента новостей: 2 крупные, 3 средние, остальные строками ---- */
.nrow{display:grid;gap:16px;margin-bottom:16px}
.nrow-big{grid-template-columns:repeat(2,1fr)}
.nrow-mid{grid-template-columns:repeat(3,1fr)}
.nrow-sm{grid-template-columns:1fr;gap:0}
.ncard{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden;
  display:flex;flex-direction:column}
.ncard .nimg{display:block;background:#eef1f5}
.ncard .nimg img{width:100%;height:auto;display:block;aspect-ratio:1.91;object-fit:cover}
.ncard .nbody{padding:12px 15px 14px}
.n-big .gt2{font-size:20px;line-height:1.25;letter-spacing:-.4px}
.n-mid .gt2{font-size:16px}
/* мелкие идут строками: миниатюра слева, заголовок справа, без рамки */
.nrow-sm .ncard{flex-direction:row;gap:13px;align-items:flex-start;border:0;border-bottom:1px solid var(--line);
  border-radius:0;background:none;padding:12px 0}
.nrow-sm .ncard:last-child{border-bottom:0}
.nrow-sm .nimg{flex:0 0 auto;border-radius:9px;overflow:hidden}
.nrow-sm .nimg img{width:150px;height:79px}
.nrow-sm .nbody{padding:0}
.nrow-sm .gt2{font-size:15.5px;line-height:1.35}
.nrow-sm .gmeta{margin-bottom:3px}
:root[data-theme="dark"] .ncard .nimg{background:#1b2129}
@media (max-width:860px){
  .nrow-big,.nrow-mid{grid-template-columns:1fr}
  .n-big .gt2{font-size:18px}
  .nrow-sm .nimg img{width:104px;height:55px}
  .nrow-sm .gt2{font-size:14.5px}
}
.nlead{color:var(--muted);font-size:14px;line-height:1.45;margin-top:6px}
.n-mid .nlead{font-size:13.5px}
@media (max-width:860px){ .nlead{font-size:13.5px} }

/* ---- поиск в шапке: иконка раскрывается в поле ---- */
.ssearch{position:relative;display:flex;align-items:center}
.ssearch .sinput{width:0;opacity:0;padding:0;border:1px solid transparent;background:var(--panel);color:var(--ink);
  font:inherit;font-size:14px;height:31px;border-radius:9px;transition:width .18s ease, opacity .15s ease, padding .18s ease;
  pointer-events:none}
.ssearch.open .sinput{width:230px;opacity:1;padding:0 12px;border-color:var(--line);pointer-events:auto;margin-left:6px}
.ssearch.open .sbtn{border-color:var(--accent);color:var(--accent)}
.spanel{position:absolute;top:calc(100% + 8px);right:0;width:380px;max-width:calc(100vw - 24px);max-height:70vh;
  overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 18px 40px rgba(12,17,22,.14);z-index:60;padding:6px}
.spanel .sgroup{padding:8px 10px 4px;font-family:var(--mono);font-size:10.5px;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--muted)}
.spanel a{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:9px;min-height:40px}
.spanel a:hover,.spanel a.on{background:#f2f5f9}
:root[data-theme="dark"] .spanel a:hover,:root[data-theme="dark"] .spanel a.on{background:#1e2630}
.spanel img{width:56px;height:30px;object-fit:cover;border-radius:6px;flex:0 0 auto;background:#eef1f5}
.spanel .st{font-size:13.5px;line-height:1.3;min-width:0}
.spanel .sm2{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.spanel .sempty{padding:14px 12px;color:var(--muted);font-size:13.5px;text-align:center}
.spanel .sall{display:block;text-align:center;font-size:13px;font-weight:600;color:var(--accent-link);padding:9px}
@media (max-width:860px){
  .ssearch.open .sinput{width:150px}
  .spanel{width:calc(100vw - 24px);right:-56px}
}

/* на узком экране открытый поиск занимает всю шапку: соседние иконки прячем,
   иначе они выдавливаются за край и шапка едет */
@media (max-width:860px){
  .nav .right{min-width:0}
  .ssearch{min-width:0}
  .ssearch.open{flex:1 1 auto}
  .ssearch.open ~ .btn,
  .ssearch.open ~ .dd{display:none}
  .ssearch.open .sinput{width:100%;flex:1 1 auto}
  .spanel{right:0;width:calc(100vw - 24px)}
}

/* ширина выпадающей панели = ширине раскрытого поиска, чтобы не висела шире контрола */
.ssearch.open{width:400px}
.ssearch.open .sinput{width:100%;flex:1 1 auto}
.spanel{left:auto;right:0;width:100%;max-width:none}
@media (max-width:860px){
  .ssearch.open{width:auto;flex:1 1 auto}
  .spanel{width:100%}
}
/* на мобильном открытый поиск занимает всю строку шапки, включая место логотипа */
@media (max-width:860px){
  .nav.searching .logo{display:none}
  .nav.searching .row{gap:0}
}
@media (max-width:860px){
  /* освободившееся место логотипа отдаём поиску, иначе поле остаётся узким */
  .nav.searching .right{flex:1 1 auto;width:100%;margin-left:0}
  .nav.searching .ssearch.open{width:100%}
}
/* миниатюра в результатах поиска прижата к верху: заголовок бывает в две-три строки */
.spanel a{align-items:flex-start}
.spanel img{margin-top:2px}

/* ==== подбор VPN (/podbor-vpn) ==== */
.pkcols{display:grid;grid-template-columns:322px minmax(0,1fr);gap:22px;align-items:start;margin-top:16px}
.pkfilters{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:16px}
.pkfilters>summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
  font-size:14px;font-weight:600;color:var(--ink);min-height:26px}
.pkfilters>summary::-webkit-details-marker{display:none}
.pkbody{display:flex;flex-direction:column;gap:17px}
.pkgrp{min-width:0}
.pklbl{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;margin-bottom:7px}
.pklbl label{cursor:pointer}
.pklbl.pkrow{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.pklbl.pkrow b{font-size:13px;text-transform:none;letter-spacing:0;color:var(--accent-link)}
.pkfilters .chips{margin-top:0}
.pkn{background:var(--accent);color:#fff;border-radius:999px;font-size:11px;padding:1px 7px;font-family:var(--mono)}
.pkrange{width:100%;height:24px;accent-color:var(--accent);cursor:pointer}
.pkscale{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin-top:-2px}
.srch.pksrch{margin-bottom:8px;max-width:none;width:100%;flex:0 0 auto}
.pkcsel:empty{display:none}
.pkcsel{margin-bottom:8px}
.pkclist{max-height:190px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:6px;background:var(--bg)}
.pkcc{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:7px;cursor:pointer;font-size:13.5px;min-height:26px}
.pkcc:hover{background:var(--panel)}
.pkcc input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;flex:0 0 auto}
.pkreset{width:100%;justify-content:center}
.pkres{min-width:0}
.pkres .rescnt{margin:0 0 12px}
.pklist{display:flex;flex-direction:column;gap:13px}
.pkcard{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:18px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--panel);padding:16px 18px}
.pkcard.top{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.pkmain{min-width:0}
.pkhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pkname{font-size:17px;margin:9px 0 0;line-height:1.2}
.pkname a{color:var(--ink)}
.pkname a:hover{color:var(--accent-link)}
.pkstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:11px}
.pkstats div{min-width:0}
.pkstats b{display:block;font-size:15px;line-height:1.2;color:var(--ink)}
.pkstats em{font-style:normal;font-size:11.5px;color:var(--muted)}
.pkwhy{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.pkchip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;border-radius:999px;padding:4px 9px;line-height:1.35}
.pkchip i{font-size:12px}
.pkchip.ok{background:#eaf1fe;color:#1c4fbb;border:1px solid #cfdffb}
.pkchip.no{background:transparent;color:var(--muted);border:1px solid transparent;font-weight:500}
.pkhint{font-size:13px;color:var(--muted)}
.pkside{display:flex;flex-direction:column;gap:9px;align-items:stretch;text-align:right}
.pkscore b{display:block;font-size:26px;line-height:1;color:var(--accent-link);font-weight:700}
.pkscore em{font-style:normal;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.pkbar{display:block;height:6px;border-radius:999px;background:var(--line);margin-top:7px;overflow:hidden}
.pkbar i{display:block;height:100%;background:var(--accent);border-radius:999px}
.pkprice{margin:2px 0 0;font-size:17px;font-weight:700;color:var(--ink)}
.pkprice .pm{font-size:12px;font-weight:500;color:var(--muted);margin-left:3px}
.pkside .btn{justify-content:center;text-align:center}
.pknote{color:var(--muted);font-size:14.5px;max-width:900px}
:root[data-theme="dark"] .pkfilters,:root[data-theme="dark"] .pkcard{background:#161b21;border-color:#252c35}
:root[data-theme="dark"] .pkclist{background:#11161b;border-color:#252c35}
:root[data-theme="dark"] .pkcc:hover{background:#1c222a}
:root[data-theme="dark"] .pkchip.ok{background:#16223a;color:#a9c4ff;border-color:#27385c}
:root[data-theme="dark"] .pkcard.top{border-color:var(--accent-link);box-shadow:0 0 0 1px var(--accent-link) inset}
@media (max-width:980px){
  .pkcols{grid-template-columns:1fr;gap:14px}
  .pkfilters{padding:12px 14px}
  .pkfilters[open]>summary{margin-bottom:13px}
  .pkcard{grid-template-columns:1fr;gap:13px}
  .pkside{flex-direction:row;flex-wrap:wrap;align-items:center;text-align:left;gap:10px}
  .pkscore{flex:1 1 110px}
  .pkbar{max-width:150px}
  .pkprice{flex:0 0 auto;margin:0}
  .pkside .btn{flex:1 1 140px}
}
@media (max-width:520px){
  .pkstats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:9px}
  .pkcard{padding:14px}
  .pkside .btn{flex:1 1 100%}
}
/* рейтинг встал пятой ячейкой: под узкий экран ряд перестраивается сам */
.pkstats{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1180px){ .pkstats{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:9px} }
@media (max-width:520px){ .pkstats{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* В тёмной теме общее правило :root[data-theme="dark"] .chip{background:#161b21} перебивало заливку
   нажатого чипа (специфичность выше), а текст оставался тёмным - получался тёмный на тёмном.
   Возвращаем заливку явно и берём светлый акцент, чтобы контраст был с запасом. */
:root[data-theme="dark"] .chip[aria-pressed="true"]{background:var(--accent-link);border-color:var(--accent-link);color:#0f1216}
:root[data-theme="dark"] .chip[aria-pressed="true"]:hover{background:#c3d6ff;border-color:#c3d6ff;color:#0f1216}
:root[data-theme="dark"] .chip[aria-pressed="true"] .cn{color:rgba(15,18,22,.72)}
/* список стран наполняется скриптом: фиксируем высоту, иначе панель подрастает после загрузки */
.pkclist{height:190px;max-height:none}
/* WCAG 2.5.8: цель нажатия не меньше 24px. Флажок страны был 16px - Lighthouse ругался,
   а пальцем в списке из полутора сотен строк промахнуться легко. */
.pkcc{min-height:32px;padding:3px 6px}
.pkcc input{width:24px;height:24px}
/* название сервиса - ссылка, её высота была 20px: добираем до нормы цели нажатия */
.pkname a{display:inline-block;min-height:24px;line-height:24px}
/* свёрнутое поле поиска в шапке оставалось шириной 2px, но принимало фокус:
   с клавиатуры туда можно было провалиться вслепую. Убираем его из порядка обхода. */
.ssearch .sinput{visibility:hidden}
.ssearch.open .sinput{visibility:visible}
/* приглашение перейти в подбор: на главной под плитками задач, в каталоге под описанием */
.pklink{margin-top:12px;font-size:14.5px}
.pklink a{display:inline-flex;align-items:center;gap:7px;color:var(--accent-link);font-weight:600;min-height:26px}
.pklink a:hover{text-decoration:underline}

/* ==== раскрытие поиска в шапке, переделано ====
   Было: .ssearch мгновенно прыгал на 400px, а поле внутри ехало своей анимацией ширины -
   отсюда рывок в два движения, плюс пересчёт всей шапки на каждом кадре.
   Стало: подложка-пилюля растягивается через transform:scaleX от кнопки влево (композитор,
   без layout), поле проявляется поверх. Соседние элементы шапки не двигаются вообще. */
.ssearch{--sw:340px;position:relative;width:auto;flex:0 0 auto;min-width:0}
.ssearch.open{width:auto}
.ssearch::before{content:"";position:absolute;right:0;top:50%;margin-top:-18px;height:36px;width:var(--sw);
  border:1px solid var(--line);border-radius:10px;background:var(--panel);
  transform:scaleX(0);transform-origin:100% 50%;pointer-events:none;z-index:0;
  transition:transform .2s cubic-bezier(.2,0,0,1)}
.ssearch.open::before{transform:scaleX(1)}
.ssearch .sbtn{position:relative;z-index:2}
.ssearch .sinput{position:absolute;right:42px;top:50%;margin-top:-15px;height:30px;z-index:2;
  width:calc(var(--sw) - 54px);margin-left:0;padding:0;border:0;background:transparent;box-shadow:none;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s linear}
.ssearch.open .sinput{opacity:1;visibility:visible;pointer-events:auto;padding:0;width:calc(var(--sw) - 54px);
  transition:opacity .14s linear .08s}
.spanel{position:absolute;top:calc(100% + 10px);right:0;left:auto;width:var(--sw);max-width:calc(100vw - 24px)}
@media (prefers-reduced-motion: reduce){
  .ssearch::before{transition:none}
  .ssearch .sinput{transition:none}
}
/* Узкий экран: пилюля и поле раскрываются поверх шапки на всю строку.
   Соседние кнопки убираем видимостью, а не display - иначе кнопка поиска прыгает вправо. */
@media (max-width:860px){
  .ssearch{--sw:calc(100vw - 24px)}
  .ssearch::before{position:fixed;left:12px;right:12px;width:auto;top:10px;margin-top:0;height:36px}
  .ssearch .sinput{position:fixed;left:24px;right:58px;width:auto;top:13px;margin-top:0;height:30px}
  .ssearch.open .sinput{width:auto}
  .spanel{position:fixed;top:56px;left:12px;right:12px;width:auto;max-width:none}
  .nav.searching .logo{display:block;visibility:hidden}
  .nav.searching .row{gap:12px}
  .nav.searching .right{flex:0 0 auto;width:auto;margin-left:auto}
  .ssearch.open ~ .btn,
  .ssearch.open ~ .dd{display:inline-flex;visibility:hidden}
}
@media (max-width:420px){
  .nav.searching .row{gap:8px}
}

/* body - колоночный флекс (подвал прижат к низу), поэтому .wrap внутри него флекс-элемент.
   Из-за margin:0 auto он не растягивался, а сжимался по содержимому: на странице подбора
   колонка контента вышла 1111px против 1180px в шапке и подвале. Явная ширина это чинит. */
body > .wrap{width:100%}
/* На узком экране поле раскрывается на всю строку шапки, поэтому и кнопку лупы
   переносим к правому краю поля - иначе она оставалась на своём месте посреди поля. */
@media (max-width:860px){
  .ssearch.open .sbtn{position:fixed;right:15px;top:12px;z-index:3}
  .ssearch .sinput{right:62px}
}
/* Фокус подсвечиваем на самой пилюле, а не на поле: браузерная обводка рисовала
   вторую рамку внутри контрола, и это читалось как два вложенных поля. */
.ssearch .sinput{outline:none}
.ssearch:focus-within::before{border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,111,237,.18)}
:root[data-theme="dark"] .ssearch:focus-within::before{border-color:var(--accent-link);box-shadow:0 0 0 3px rgba(157,189,255,.22)}
/* Открытое поле показываем без лупы: кнопка своё дело сделала, закрывается по Esc и клику мимо.
   Подложке даём pointer-events, иначе клик по пустой части пилюли проваливался на пункты меню под ней. */
.ssearch.open::before{pointer-events:auto}
.ssearch.open .sbtn{visibility:hidden}
.ssearch.open .sinput{right:14px;width:calc(var(--sw) - 28px)}
@media (max-width:860px){
  .ssearch.open .sbtn{display:none}
  .ssearch .sinput{right:24px}
  .ssearch.open .sinput{left:24px;right:24px;width:auto}
}
/* Карточки "Читайте также" и списки инструкций: внутри .gbody уже стоит flex-gap,
   а сверху накладывались общие отступы p и h3 (22px до заголовка) - между датой
   и заголовком получалось 44px пустоты. Оставляем только gap. */
.gbody > *{margin:0}
.gbody{gap:7px;padding:12px 15px 14px}
/* Ссылка в карточке шага: заголовок гайда режем средствами CSS, а не обрывом строки в PHP
   (получалось "на VPS (..."). Две строки максимум, стрелка не отрывается от текста. */
.plink{display:flex;align-items:flex-start;gap:6px}
.plink .pltxt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.plink i{flex:0 0 auto;margin-top:2px}

/* Главная кнопка в тёмной теме шла тёмным текстом по светло-синему - выглядит чужеродно.
   Возвращаем белый текст, а фон берём брендовый: белое на #5b93ff даёт всего 2,98:1,
   на #2f6fed - 4,55:1, то есть требование AA выполняется и текст остаётся белым. */
:root[data-theme="dark"] .btn.primary{background:#2f6fed;border-color:#2f6fed;color:#fff}
:root[data-theme="dark"] .btn.primary:hover{background:#2560d8;color:#fff}
:root[data-theme="dark"] .btn.primary .n{color:#fff}
:root[data-theme="dark"] .fab{background:#2f6fed;color:#fff}
:root[data-theme="dark"] .fab .n{background:#fff;color:#2f6fed}

/* Оглавление статьи в боковой колонке: тот же контейнер, что у инструкций,
   но списком без нумерации и с подсветкой текущего раздела. */
.toc.side{margin-bottom:14px}
.toc.side ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.toc.side a{display:block;padding:6px 10px;border-left:2px solid transparent;border-radius:0 7px 7px 0;
  font-size:14px;line-height:1.35;color:var(--ink)}
.toc.side a:hover{background:var(--bg);color:var(--accent-link)}
.toc.side a.on{border-left-color:var(--accent);color:var(--accent-link);font-weight:600;background:var(--bg)}
:root[data-theme="dark"] .toc.side a:hover,:root[data-theme="dark"] .toc.side a.on{background:#11161b}
@media (max-width:1000px){ .toc.side{display:none} }
/* В оглавлении статьи нужна сплошная серая линия слева, на которой активный пункт
   подсвечен синим. Поэтому убираем зазор между пунктами и красим полосу у всех. */
.toc.side ul{gap:0}
.toc.side a{border-left-color:var(--line);padding:7px 10px}
.toc.side a.on{border-left-color:var(--accent)}

/* ==== единая типографика боковой колонки ====
   Заголовки блоков жили в двух вариантах: 10,5px моноширинным у карточек и 12px обычным
   у оглавления, тексты - 13,5 против 14. Сводим к одному набору. */
.colside .scard .sh2,
.colside .toc.side b{
  font-family:var(--mono);font-size:11px;font-weight:600;line-height:1.45;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-bottom:10px;display:block}
.colside .slist a,
.colside .toc.side a{font-size:13.5px;line-height:1.35}
.colside .smore{font-size:13.5px}
.colside .slist em{font-size:12px;line-height:1.3}