@import url('/fonts/faces.css');

/* ============================================================================
   happapp.cc — справочник по приложению Happ.

   Визуальный ключ: светлый «стеклянный» интерфейс — почти белый фон с мягкой
   подсветкой, крупная типографика Inter, индиго-акцент, карточки со скруглением
   24 px и еле заметными тенями. Главный элемент первого экрана — круглая кнопка
   питания с конической подсветкой и медленной пульсацией.

   Дизайн-система
   Цвет      фон #F7F8FB · поверхность #FFFFFF · графит #0B0C10 · второстепенный #5B6270
             линии #E6E8EE · акцент #4F46E5 · второй акцент #C13BD9
             семантика: ok #0F9960, warn #B7791F, bad #D64545 — только для состояний
   Шрифт     Inter 400/500/600/700, данные — системный моно
   Размеры   12 13 14 15 17 20 24 30 40 56 — крупные через clamp()
   Отступы   4 8 12 16 24 32 48 64 96
   Радиусы   8 / 14 / 24 · кнопки — таблетка · тени мягкие, многослойные
   ========================================================================== */

:root {
  --paper:      #FFFFFF;
  --bg:         #F7F8FB;
  --sub:        #F2F4F8;
  --ink:        #0B0C10;
  --muted:      #5B6270;
  --muted2:     #858C9A;
  --line:       #E6E8EE;
  --line2:      #D8DCE6;
  --accent:     #4F46E5;
  --accent-ink: #3E37C4;
  --accent2:    #C13BD9;
  --accent-bg:  #EEF0FE;
  --ok:         #0F9960;
  --ok-bg:      #E9F7F0;
  --warn:       #B7791F;
  --warn-bg:    #FDF5E6;
  --bad:        #D64545;
  --bad-bg:     #FDEEEE;

  --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 24px;

  --shadow-card: 0 1px 0 0 rgba(255,255,255,.6) inset, 0 4px 24px rgba(11,12,20,.06);
  --shadow-pop:  0 1px 0 0 rgba(255,255,255,.6) inset, 0 12px 40px rgba(11,12,20,.10);

  --side-w: 268px;
  --toc-w:  208px;
  --hdr-h:  64px;
  --maxw:   1440px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #12141C;
    --bg:         #0B0D13;
    --sub:        #171A24;
    --ink:        #EEF0F6;
    --muted:      #A2A9B8;
    --muted2:     #7B8395;
    --line:       #232733;
    --line2:      #2E3444;
    --accent:     #8B84FF;
    --accent-ink: #A9A3FF;
    --accent2:    #E070F5;
    --accent-bg:  #1C1B3A;
    --ok:         #4ED39B;
    --ok-bg:      #10241C;
    --warn:       #E5B45F;
    --warn-bg:    #2A2113;
    --bad:        #F08A8A;
    --bad-bg:     #2C1717;
    --shadow-card: 0 1px 0 0 rgba(255,255,255,.04) inset, 0 4px 24px rgba(0,0,0,.35);
    --shadow-pop:  0 1px 0 0 rgba(255,255,255,.05) inset, 0 12px 40px rgba(0,0,0,.45);
  }
}

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 15.5px/1.65 var(--f-body);
  font-feature-settings: 'cv11' 1, 'ss01' 1, 'kern' 1;
  -webkit-font-smoothing: antialiased;
}

/* Мягкая подсветка вверху страницы — тот же приём, что даёт «воздух» на первом экране.
   Рисуем фоном обычного блока: fixed-слои с blur ломают захват скриншотов. */
.page {
  background:
    radial-gradient(1100px 460px at 22% -8%, rgba(79,70,229,.10), transparent 60%),
    radial-gradient(900px 420px at 82% -4%, rgba(193,59,217,.09), transparent 62%);
}

a { color: var(--accent); text-decoration: none }
a:hover { text-decoration: underline }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px;
}

code {
  font: 400 .87em/1.45 var(--f-mono);
  background: var(--sub); border: 1px solid var(--line);
  border-radius: 6px; padding: .1em .36em; word-break: break-word;
}
pre {
  font: 400 13px/1.6 var(--f-mono);
  background: var(--sub); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 16px; overflow-x: auto; margin: 16px 0;
}

.skip { position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--ink); color: var(--paper); padding: 8px 16px; border-radius: var(--r-sm) }
.skip:focus { left: 12px; top: 12px }

.tag { font: 500 11.5px/1 var(--f-body); letter-spacing: .04em; text-transform: uppercase; color: var(--muted2) }

/* ---------- верхняя полоса состояния -------------------------------------- */
.topbar {
  background: var(--paper); border-bottom: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted);
}
.topbar__in {
  max-width: var(--maxw); margin: 0 auto; padding: 8px 24px;
  display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center;
}
.topbar__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 3px rgba(15,153,96,.15); flex: none;
}
.topbar b { color: var(--ink); font-weight: 600 }

/* ---------- шапка --------------------------------------------------------- */
.hdr { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.86); border-bottom: 1px solid var(--line) }
@media (prefers-color-scheme: dark) { .hdr { background: rgba(18,20,28,.86) } }
.hdr__in {
  max-width: var(--maxw); margin: 0 auto; height: var(--hdr-h);
  display: flex; align-items: center; gap: 18px; padding: 0 24px;
}
.brand { display: flex; align-items: baseline; gap: 8px; color: var(--ink) }
.brand:hover { text-decoration: none }
.brand__mark { font: 700 19px/1 var(--f-body); letter-spacing: -.02em }
.brand__mark i { font-style: normal; color: var(--accent) }
.brand__sub { font: 500 10.5px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted2) }

.hdr__nav { margin-left: auto; display: flex; align-items: center; gap: 14px }
.hdr__links { display: flex; gap: 4px }
.hdr__links a {
  color: var(--muted); font-size: 14.5px; font-weight: 500;
  padding: 7px 12px; border-radius: 999px;
}
.hdr__links a:hover { color: var(--ink); background: var(--sub); text-decoration: none }
.hdr__links a[aria-current] { color: var(--ink); background: var(--sub) }

.searchbtn, .side__srchbtn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); font: 400 13.5px/1 var(--f-body); padding: 9px 14px; cursor: pointer;
  box-shadow: var(--shadow-card);
}
.searchbtn:hover, .side__srchbtn:hover { border-color: var(--line2); color: var(--ink) }
.searchbtn kbd, .side__srchbtn kbd {
  font: 500 10.5px/1 var(--f-mono); border: 1px solid var(--line2);
  border-radius: 5px; padding: 3px 5px; color: var(--muted2);
}
.hdr__go {
  display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 999px;
  background: var(--accent); color: #fff; font: 600 14px/1 var(--f-body); white-space: nowrap;
  box-shadow: 0 6px 18px rgba(79,70,229,.28);
}
.hdr__go:hover { background: var(--accent-ink); text-decoration: none }
.burger {
  display: none; background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  color: var(--ink); font-size: 16px; line-height: 1; padding: 9px 12px; cursor: pointer;
}

/* ---------- раскладка ----------------------------------------------------- */
.layout {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr) var(--toc-w); align-items: start;
}
.layout--wide { grid-template-columns: var(--side-w) minmax(0, 1fr) }
.layout--landing { grid-template-columns: minmax(0, 1fr) }
.layout--landing main { max-width: 1140px; margin: 0 auto; padding: 40px 24px 88px }
main { min-width: 0; padding: 28px 40px 80px; min-height: 60vh }

/* ---------- сайдбар ------------------------------------------------------- */
.side {
  position: sticky; top: var(--hdr-h); max-height: calc(100vh - var(--hdr-h));
  overflow-y: auto; overscroll-behavior: contain; padding: 22px 16px 40px 24px;
}
.side__srchbtn { width: 100%; justify-content: flex-start; margin-bottom: 18px }
.side__srchbtn kbd { margin-left: auto }

.side__grp { border-top: 1px solid var(--line) }
.side__grp:first-of-type { border-top: 0 }
.side__ttl {
  display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  font: 600 13px/1.3 var(--f-body); color: var(--ink); padding: 13px 0;
}
.side__ttl::-webkit-details-marker { display: none }
.side__ttl::before { content: '+'; font: 400 13px/1 var(--f-mono); color: var(--muted2); width: 10px; text-align: center }
details[open] > .side__ttl::before { content: '–' }
.side__n {
  margin-left: auto; font: 500 10.5px/1 var(--f-body); color: var(--muted2);
  background: var(--sub); border-radius: 999px; padding: 4px 8px; font-style: normal;
}
.side__grp ul { list-style: none; margin: 0 0 12px; padding: 0 }
.side__grp a {
  display: block; color: var(--muted); font-size: 13.5px; line-height: 1.35;
  padding: 7px 12px; border-radius: 10px; margin-bottom: 1px;
}
.side__grp a:hover { color: var(--ink); background: var(--sub); text-decoration: none }
.side__grp a[aria-current] { color: var(--accent); background: var(--accent-bg); font-weight: 600 }
.side__hub { font-style: italic }

.side__cta {
  margin-top: 12px; padding: 18px; border-radius: var(--r-lg);
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-card);
}
.side__cta-tag { font: 600 11px/1 var(--f-body); letter-spacing: .05em; text-transform: uppercase; color: var(--accent) }
.side__cta-ttl { font: 600 16px/1.3 var(--f-body); margin: 10px 0 6px; letter-spacing: -.01em }
.side__cta-txt { font-size: 13px; line-height: 1.55; color: var(--muted); margin: 0 0 14px }
.side__cta-fine { display: block; margin-top: 10px; font-size: 11.5px; color: var(--muted2) }

/* ---------- оглавление ---------------------------------------------------- */
.toc { padding: 32px 24px 40px 8px }
.toc__in { position: sticky; top: calc(var(--hdr-h) + 24px) }
.toc__ttl { display: block; font: 600 11.5px/1 var(--f-body); letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted2); margin-bottom: 12px }
.toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line) }
.toc a { display: block; padding: 6px 0 6px 14px; margin-left: -1px;
  border-left: 2px solid transparent; color: var(--muted); font-size: 13px; line-height: 1.45 }
.toc a:hover { color: var(--ink); text-decoration: none }
.toc a.is-on { color: var(--accent); border-left-color: var(--accent); font-weight: 500 }

/* ---------- статья -------------------------------------------------------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--muted2); margin-bottom: 18px }
.crumbs a { color: var(--muted2) }
.crumbs i { font-style: normal; opacity: .55 }
.crumbs span { color: var(--muted) }

.art { max-width: 760px }
.art h1 { font: 700 clamp(28px, 3.6vw, 40px)/1.15 var(--f-body); letter-spacing: -.03em; margin: 0 0 12px }
.art__meta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  font-size: 12.5px; color: var(--muted2); padding-bottom: 18px;
  border-bottom: 1px solid var(--line); margin-bottom: 24px }
.art__lead { font-size: 17.5px; line-height: 1.6; color: var(--muted); margin: 0 0 26px }
.art__lead b, .art__lead strong { color: var(--ink); font-weight: 600 }

.art h2 { font: 600 24px/1.3 var(--f-body); letter-spacing: -.02em; margin: 44px 0 14px; scroll-margin-top: 88px }
.art h3 { font: 600 17.5px/1.4 var(--f-body); letter-spacing: -.01em; margin: 30px 0 8px }
.art p { margin: 0 0 15px }
.art ul:not([class]), .art ol:not([class]) { margin: 0 0 18px; padding-left: 0; list-style: none }
.art ul:not([class]) > li, .art ol:not([class]) > li { position: relative; padding-left: 26px; margin-bottom: 9px }
.art ul:not([class]) > li::before {
  content: ''; position: absolute; left: 7px; top: .62em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--accent); opacity: .55;
}
.art ol:not([class]) { counter-reset: n }
.art ol:not([class]) > li { counter-increment: n }
.art ol:not([class]) > li::before {
  content: counter(n); position: absolute; left: 0; top: .15em;
  width: 18px; height: 18px; border-radius: 50%; background: var(--accent-bg); color: var(--accent);
  font: 600 11px/18px var(--f-body); text-align: center;
}

/* ---------- КНОПКА ПИТАНИЯ ------------------------------------------------ */
.power {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 320px; height: 320px; border-radius: 50%; flex: none;
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.power:hover { transform: scale(1.05); text-decoration: none }
.power:active { transform: scale(.97) }
.power__glow {
  position: absolute; inset: -12px; border-radius: 50%; opacity: .5; filter: blur(40px);
  background: conic-gradient(from 180deg, #5865F2, #C13BD9 25%, #22C7A9 50%, #7A6CFF 75%, #5865F2);
  transition: opacity .3s;
}
.power:hover .power__glow { opacity: .8 }
.power__face {
  position: absolute; inset: 8px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(123,123,255,.92), rgba(59,47,160,.92) 70%);
  box-shadow: 0 0 0 20px rgba(79,70,229,.03), 0 0 0 40px rgba(79,70,229,.02),
              0 24px 60px rgba(59,47,160,.45);
  animation: power-pulse 2.6s ease-in-out infinite;
}
.power__gloss {
  position: absolute; inset: 8px; border-radius: 50%; background: rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,.35), inset 0 -30px 40px -20px rgba(0,0,0,.25);
}
.power__ring {
  position: absolute; inset: 20px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3);
  background: linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.05) 50%, transparent);
}
.power__spot { position: absolute; inset: 30%; border-radius: 50%; background: rgba(255,255,255,.15); filter: blur(24px) }
.power__icon { position: relative; width: 116px; height: 116px; color: #fff; filter: drop-shadow(0 4px 16px rgba(0,0,0,.4)) }

@keyframes power-pulse {
  0%, 100% { box-shadow: 0 0 0 18px rgba(79,70,229,.05), 0 0 0 36px rgba(79,70,229,.03), 0 24px 60px rgba(59,47,160,.45) }
  50%      { box-shadow: 0 0 0 26px rgba(79,70,229,.02), 0 0 0 52px rgba(79,70,229,.01), 0 24px 70px rgba(59,47,160,.55) }
}
@media (prefers-reduced-motion: reduce) { .power__face { animation: none } }

.power-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; margin: 8px 0 12px }
.power-cap { font-size: 14.5px; color: var(--muted); text-align: center; max-width: 52ch; text-wrap: balance }
.power-cap b { color: var(--ink); font-weight: 600 }
.power--sm { width: 200px; height: 200px }
.power--sm .power__icon { width: 72px; height: 72px }

/* ---------- главная ------------------------------------------------------- */
.hero { text-align: center; padding: 40px 0 8px }
.hero h1 {
  font: 700 clamp(34px, 5.2vw, 60px)/1.06 var(--f-body); letter-spacing: -.035em;
  margin: 0 auto 18px; max-width: 16ch; text-wrap: balance;
}
.hero h1 .grad {
  background: linear-gradient(95deg, var(--accent) 0%, var(--accent2) 55%, #8B84FF 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__lead { font-size: 18px; line-height: 1.55; color: var(--muted); max-width: 62ch; margin: 0 auto 28px; text-wrap: pretty }
.hero__lead b { color: var(--ink); font-weight: 600 }
.hero__row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px }
.hero__fine { margin-top: 14px; font-size: 13px; color: var(--muted2) }

.steps3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 8px 0 8px }
.step3 { position: relative; padding: 24px; border-radius: var(--r-lg);
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-card) }
.step3__n {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--accent); color: #fff; font: 600 14px/1 var(--f-body); margin-bottom: 12px;
}
.step3__t { display: block; font: 600 16.5px/1.35 var(--f-body); letter-spacing: -.01em; margin-bottom: 6px }
.step3__d { font-size: 14px; line-height: 1.55; color: var(--muted) }

.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 16px; margin-bottom: 36px }
.card {
  display: flex; flex-direction: column; gap: 7px; padding: 22px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card); transition: transform .18s, box-shadow .18s, border-color .18s;
}
.card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-pop); border-color: var(--line2) }
.card__code { font: 600 11px/1 var(--f-body); letter-spacing: .07em; color: var(--accent) }
.card__ttl { font: 600 17px/1.3 var(--f-body); letter-spacing: -.015em }
.card__txt { font-size: 13.5px; line-height: 1.55; color: var(--muted) }
.card__n { margin-top: 8px; font-size: 12px; color: var(--muted2) }

.hsec { margin: 0 0 20px; padding-top: 56px }
.hsec__ttl { font: 700 clamp(24px, 3vw, 34px)/1.2 var(--f-body); letter-spacing: -.03em; margin: 0 0 8px; text-align: center }
.hsec__sub { font-size: 15.5px; color: var(--muted); margin: 0 auto 28px; text-align: center; max-width: 64ch }

.plat { width: 100% }
.plat__nm { font-weight: 600; white-space: nowrap }

/* ---------- SIGNATURE: карта экранов -------------------------------------- */
.map { margin: 0 0 8px }
.map__hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-bottom: 14px; justify-content: center }
.map__hint { font-size: 13.5px; color: var(--muted2) }
.map__win {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-areas: 'status status' 'servers connect' 'tabs tabs';
  gap: 12px; padding: 14px; border-radius: var(--r-lg);
  background: var(--sub); border: 1px solid var(--line);
}
.map__tabs { grid-area: tabs; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
.map__zone {
  display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-card); transition: transform .18s, border-color .18s, box-shadow .18s;
}
.map__zone:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-pop) }
.map__zone--status { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: baseline; gap: 4px 12px }
.map__zone--status .map__go { display: none }
.map__zone--servers { min-height: 128px }
.map__zone--connect { min-height: 128px; justify-content: center }
.map__code { font: 600 11px/1 var(--f-body); letter-spacing: .07em; color: var(--accent) }
.map__nm { font: 600 15.5px/1.3 var(--f-body); letter-spacing: -.01em }
.map__note { font-size: 13px; line-height: 1.5; color: var(--muted) }
.map__go { margin-top: auto; font-size: 12px; color: var(--muted2); opacity: 0; transition: opacity .18s }
.map__zone:hover .map__go { opacity: 1 }
.map__zone--servers::after {
  content: ''; display: block; margin-top: 10px; height: 36px;
  background:
    linear-gradient(var(--line), var(--line)) 0 2px / 62% 6px no-repeat,
    linear-gradient(var(--line), var(--line)) 0 16px / 48% 6px no-repeat,
    linear-gradient(var(--line), var(--line)) 0 30px / 55% 6px no-repeat;
}
.map__zone--connect::after {
  content: 'ПОДКЛЮЧИТЬ'; display: block; margin-top: 12px;
  font: 600 11px/1 var(--f-body); letter-spacing: .08em; color: #fff; text-align: center;
  background: linear-gradient(135deg, var(--accent), #7A6CFF); border-radius: 999px; padding: 10px;
}

.smap {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 14px; margin: 0 0 26px; border-radius: var(--r-md);
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-card);
}
.smap__cap { font: 600 11px/1 var(--f-body); letter-spacing: .05em; text-transform: uppercase; color: var(--muted2) }
.smap__row { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0 }
.smap__b a {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
  background: var(--sub); color: var(--muted); font-size: 12.5px;
}
.smap__b a:hover { color: var(--ink); text-decoration: none }
.smap__code { font: 600 10.5px/1 var(--f-body); color: var(--muted2) }
.smap__b.is-here a { background: var(--accent-bg); color: var(--accent); font-weight: 600 }
.smap__b.is-here .smap__code { color: var(--accent) }

/* ---------- матрица доступности ------------------------------------------- */
.avail { margin: 0 0 26px; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; background: var(--paper); box-shadow: var(--shadow-card) }
.avail__cap { display: block; padding: 12px 18px; border-bottom: 1px solid var(--line);
  font: 600 11px/1 var(--f-body); letter-spacing: .05em; text-transform: uppercase; color: var(--muted2) }
.avail__row { display: grid; grid-template-columns: repeat(6, 1fr); list-style: none; margin: 0; padding: 0 }
.avail__c { padding: 14px 8px; text-align: center; border-left: 1px solid var(--line) }
.avail__c:first-child { border-left: 0 }
.avail__p { display: block; font-size: 12.5px; color: var(--muted) }
.avail__v { display: block; margin-top: 4px; font: 600 13px/1.2 var(--f-body) }
.avail__c--y .avail__v { color: var(--ok) }
.avail__c--n .avail__v { color: var(--bad) }
.avail__c--p .avail__v { color: var(--warn) }
.avail__c--u .avail__v { color: var(--muted2) }
.avail__note { margin: 0; padding: 12px 18px; border-top: 1px solid var(--line);
  font-size: 13px; line-height: 1.55; color: var(--muted); background: var(--sub) }

/* ---------- карточка параметра -------------------------------------------- */
.spec { margin: 0 0 26px; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; background: var(--paper); box-shadow: var(--shadow-card) }
.spec > div { display: grid; grid-template-columns: 176px minmax(0, 1fr); border-top: 1px solid var(--line) }
.spec > div:first-child { border-top: 0 }
.spec dt { padding: 12px 18px; background: var(--sub); border-right: 1px solid var(--line);
  font: 600 12px/1.5 var(--f-body); letter-spacing: .03em; text-transform: uppercase; color: var(--muted2) }
.spec dd { margin: 0; padding: 12px 18px; font-size: 14px; line-height: 1.55 }

/* ---------- таблицы ------------------------------------------------------- */
.tw { overflow-x: auto; margin: 0 0 26px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--paper); box-shadow: var(--shadow-card) }
table { border-collapse: collapse; width: 100%; font-size: 14px }
th, td { text-align: left; padding: 12px 16px; border-top: 1px solid var(--line); vertical-align: top }
thead th { border-top: 0; background: var(--sub); color: var(--muted2);
  font: 600 11.5px/1.4 var(--f-body); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap }
tbody tr:hover { background: var(--sub) }
td code { white-space: nowrap }

/* ---------- врезки -------------------------------------------------------- */
.note { margin: 0 0 26px; padding: 18px 20px; border-radius: var(--r-lg);
  background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--line2);
  box-shadow: var(--shadow-card); font-size: 14.5px }
.note p { margin: 0 0 8px }
.note p:last-child, .note ul:last-child { margin-bottom: 0 }
.note__ttl { display: block; font: 600 15px/1.4 var(--f-body); margin-bottom: 6px }
.note ul { margin: 8px 0 0; padding-left: 20px }
.note--info { border-left-color: var(--accent); background: var(--accent-bg) }
.note--ok   { border-left-color: var(--ok);   background: var(--ok-bg) }
.note--warn { border-left-color: var(--warn); background: var(--warn-bg) }
.note--down { border-left-color: var(--bad);  background: var(--bad-bg) }

/* ---------- шаги ---------------------------------------------------------- */
.steps { list-style: none; counter-reset: s; margin: 0 0 26px; padding: 0 }
.steps > li { counter-increment: s; position: relative; padding: 0 0 24px 46px;
  border-left: 2px solid var(--line); margin-left: 14px }
.steps > li:last-child { border-left-color: transparent; padding-bottom: 0 }
.steps > li::before {
  content: counter(s); position: absolute; left: -15px; top: -2px; width: 28px; height: 28px;
  border-radius: 50%; background: var(--paper); border: 1px solid var(--line2); color: var(--accent);
  font: 600 13px/26px var(--f-body); text-align: center; box-shadow: var(--shadow-card);
}
.step__ttl { display: block; font: 600 16.5px/1.4 var(--f-body); letter-spacing: -.01em; margin-bottom: 6px }
.steps p { margin: 0 0 8px }
.steps ul { margin: 0 0 8px; padding-left: 20px }

/* ---------- вопросы ------------------------------------------------------- */
.faq { margin: 0 0 26px }
.faq h3 { font: 600 16px/1.45 var(--f-body); margin: 0; padding: 18px 0 6px; letter-spacing: -.01em }
.faq p { margin: 0 0 18px; color: var(--muted); font-size: 14.5px }
.faq h3:not(:first-of-type) { border-top: 1px solid var(--line) }

/* ---------- строки-хабы --------------------------------------------------- */
.rows { list-style: none; margin: 0 0 26px; padding: 0; border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; background: var(--paper); box-shadow: var(--shadow-card) }
.rows li + li .row { border-top: 1px solid var(--line) }
.row { display: grid; grid-template-columns: 52px minmax(0, 1fr) 24px; align-items: center; gap: 14px;
  padding: 16px 18px; color: var(--ink) }
.row:hover { background: var(--sub); text-decoration: none }
.row__idx { font: 600 11.5px/1 var(--f-body); letter-spacing: .05em; color: var(--accent) }
.row__ttl { display: block; font-weight: 600; font-size: 15px; letter-spacing: -.01em }
.row__sub { display: block; font-size: 13.5px; color: var(--muted); line-height: 1.5; margin-top: 3px }
.row__go { color: var(--muted2); text-align: right; font-size: 15px }

/* ---------- загрузки ------------------------------------------------------ */
.dl { margin: 0 0 26px; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; background: var(--paper); box-shadow: var(--shadow-card) }
.dl__hd { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
  padding: 14px 18px; background: var(--sub); border-bottom: 1px solid var(--line) }
.dl__cap { font: 600 14px/1.3 var(--f-body); letter-spacing: -.01em }
.dl__checked { margin-left: auto; font-size: 12px; color: var(--muted2) }
.dl__list { list-style: none; margin: 0; padding: 0 }
.dl__row { display: grid; grid-template-columns: 124px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 14px 18px; border-top: 1px solid var(--line); font-size: 14px }
.dl__row:first-child { border-top: 0 }
.dl__plat { font-weight: 600 }
.dl__kind { display: inline-block; margin-right: 10px; padding: 3px 9px; border-radius: 999px;
  background: var(--sub); font: 600 10.5px/1.4 var(--f-body); text-transform: uppercase; color: var(--muted2) }
.dl__kind--site, .dl__kind--store { background: var(--ok-bg); color: var(--ok) }
.dl__go { white-space: nowrap; font-size: 13.5px; font-weight: 500 }
.dl__go--none { color: var(--muted2) }
.dl__warn, .dl__note, .dl__disc { margin: 0; padding: 14px 18px; border-top: 1px solid var(--line);
  font-size: 13px; line-height: 1.6 }
.dl__warn { background: var(--warn-bg) }
.dl__note, .dl__disc { background: var(--sub); color: var(--muted) }

/* ---------- скриншоты ----------------------------------------------------- */
.shot { margin: 0 0 26px }
.shot__frame { display: flex; align-items: center; justify-content: center; min-height: 140px;
  border: 1px dashed var(--line2); border-radius: var(--r-lg); background: var(--sub) }
.shot__code { font: 600 11.5px/1 var(--f-body); letter-spacing: .07em; color: var(--muted2) }
.shot__link { display: block; position: relative }
.shot img { display: block; max-width: 100%; max-height: 520px; width: auto; margin: 0 auto;
  border: 1px solid var(--line); border-radius: var(--r-md) }
.shot__zoom { position: absolute; right: 10px; bottom: 10px; font-size: 11px; color: var(--muted);
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px }
.shot__cap { margin-top: 10px; font-size: 13px; line-height: 1.55; color: var(--muted) }
.shot__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.shot__part { position: relative }
.shot__part img { max-height: 400px }
.shot__mark { position: absolute; left: 8px; top: 8px; z-index: 1; font: 600 11px/1 var(--f-body);
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 5px 9px }
.shot__partcap { display: block; margin-top: 8px; font-size: 12.5px; color: var(--muted) }

/* ---------- конверсия ----------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border-radius: 999px; border: 1px solid transparent;
  background: var(--accent); color: #fff; font: 600 15px/1.2 var(--f-body); cursor: pointer;
  box-shadow: 0 8px 24px rgba(79,70,229,.26); transition: transform .15s, box-shadow .15s, background .15s;
}
.btn:hover { background: var(--accent-ink); text-decoration: none; transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(79,70,229,.32) }
.btn:active { transform: translateY(0) }
.btn--ghost { background: var(--paper); color: var(--ink); border-color: var(--line);
  box-shadow: var(--shadow-card) }
.btn--ghost:hover { background: var(--paper); color: var(--accent); border-color: var(--line2) }

.cta { margin: 0 0 26px; padding: 26px; border-radius: var(--r-lg);
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-card) }
.cta__tag { font: 600 11px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--accent) }
.cta__ttl { font: 600 21px/1.3 var(--f-body); letter-spacing: -.02em; margin: 10px 0 10px }
.cta p { margin: 0 0 14px; font-size: 14.5px; color: var(--muted) }
.cta p b { color: var(--ink) }
.cta__pts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 18px; padding: 0 }
.cta__pts li { font-size: 13px; color: var(--muted); padding-left: 20px; position: relative }
.cta__pts li::before { content: '✓'; position: absolute; left: 0; color: var(--ok); font-weight: 700 }
.cta__row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px }
.cta__fine { font-size: 12.5px; color: var(--muted2) }

.probe { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 22px; align-items: center;
  margin: 0 0 30px; padding: 18px 20px; border-radius: var(--r-lg);
  background: linear-gradient(120deg, var(--accent-bg), var(--paper) 70%);
  border: 1px solid var(--line); box-shadow: var(--shadow-card) }
.probe__tag { font: 600 11px/1 var(--f-body); letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent) }
.probe__txt { margin: 10px 0 16px; font-size: 14.5px; line-height: 1.6 }
.probe > .btn, .probe > .power { justify-self: end }
.probe:not(.probe--foot) .probe__tag { grid-column: 1 / -1 }
.probe:not(.probe--foot) .probe__txt { margin: 0 }

/* В конце статьи предложение подаётся тем же фирменным элементом, что на главной:
   кнопка питания рядом с текстом — она же ссылка в воронку. */
.probe--foot { margin: 48px 0 28px; padding: 26px 28px; align-items: center }
.probe--foot .probe__body { min-width: 0 }
.probe--foot .power { margin: -10px 0 }

/* ---------- «смотрите также» и оценка ------------------------------------- */
.also { margin: 0 0 26px; padding-top: 24px; border-top: 1px solid var(--line) }
.also__cap { display: block; font: 600 11.5px/1 var(--f-body); letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted2); margin-bottom: 14px }
.also__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.also__list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 14.5px }
.also__site { font-size: 12px; color: var(--muted2) }

.helpful { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 18px 20px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper);
  box-shadow: var(--shadow-card); font-size: 14.5px }
.helpful__btns { margin-left: auto; display: flex; gap: 10px }
.helpful button { background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink); font: 600 14px/1 var(--f-body); padding: 10px 20px; cursor: pointer }
.helpful button:hover { border-color: var(--accent); color: var(--accent) }
.helpful[data-done] .helpful__btns { display: none }
.helpful__thanks { color: var(--ok); font-size: 14px }

/* ---------- инструменты --------------------------------------------------- */
.tool { margin: 0 0 26px; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; background: var(--paper); box-shadow: var(--shadow-card) }
.tool__hd { display: flex; gap: 12px; align-items: baseline; padding: 14px 18px;
  background: var(--sub); border-bottom: 1px solid var(--line) }
.tool__cap { font: 600 14px/1.3 var(--f-body) }
.tool__note2 { margin-left: auto; font-size: 12px; color: var(--muted2) }
.tool__bd { padding: 18px }
.tool label { display: block; font: 600 11.5px/1 var(--f-body); letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted2); margin-bottom: 8px }
.tool textarea, .tool input { width: 100%; background: var(--paper); color: var(--ink);
  border: 1px solid var(--line2); border-radius: var(--r-md); padding: 12px 14px;
  font: 400 13.5px/1.5 var(--f-mono); resize: vertical }
.tool__f { margin-bottom: 16px }
.tool__row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 14px }
.tool__out:not(:empty) { margin-top: 16px }
.kv { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-md) }
.kv li { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; padding: 10px 14px;
  border-top: 1px solid var(--line); font-size: 13.5px }
.kv li:first-child { border-top: 0 }
.kv b { font: 600 11px/1.6 var(--f-body); text-transform: uppercase; color: var(--muted2) }
.kv span { word-break: break-word; font-family: var(--f-mono); font-size: 12.5px }

/* ---------- поиск --------------------------------------------------------- */
.sdlg { position: fixed; inset: 0; z-index: 60; display: none }
.sdlg.is-open { display: block }
.sdlg__bd { position: absolute; inset: 0; background: rgba(11,13,19,.42) }
.sdlg__box { position: relative; max-width: 640px; margin: 10vh auto 0; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-pop) }
.sdlg input { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: var(--paper);
  color: var(--ink); font: 400 16px/1.4 var(--f-body); padding: 18px 20px }
.sdlg input:focus { outline: none }
.sres { list-style: none; margin: 0; padding: 8px; max-height: 52vh; overflow-y: auto }
.sres a { display: flex; gap: 12px; align-items: baseline; padding: 12px 14px; color: var(--ink); border-radius: var(--r-md) }
.sres a:hover, .sres a.is-sel { background: var(--accent-bg); text-decoration: none }
.sres__t { font-size: 14.5px }
.sres__p { margin-left: auto; font-size: 11px; color: var(--muted2); white-space: nowrap }
.sdlg__foot { padding: 12px 20px; border-top: 1px solid var(--line); background: var(--sub);
  font-size: 12px; color: var(--muted2) }

/* ---------- нижняя панель (телефон) --------------------------------------- */
.gobar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: none; padding: 10px }
.gobar.is-on { display: block }
.gobar__in { display: flex; align-items: center; gap: 12px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 14px; box-shadow: var(--shadow-pop) }
.gobar__txt { display: flex; flex-direction: column; font-size: 13px; line-height: 1.3; font-weight: 600 }
.gobar__txt span { color: var(--muted); font-size: 12px; font-weight: 400 }
.gobar .btn { padding: 10px 16px; font-size: 14px }
.gobar__x { background: none; border: 0; color: var(--muted2); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px }
body.has-gobar { padding-bottom: 84px }

/* ---------- подвал -------------------------------------------------------- */
.ftr { border-top: 1px solid var(--line); background: var(--paper); margin-top: 40px }
.ftr__in { max-width: var(--maxw); margin: 0 auto; padding: 36px 24px 40px }
.ftr__disc { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 18px 20px; margin-bottom: 28px; border: 1px solid var(--line);
  border-left: 4px solid var(--warn); border-radius: var(--r-lg); background: var(--warn-bg) }
.ftr__disc-tag { font: 600 11px/1.6 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--warn) }
.ftr__disc p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--muted) }
.ftr__disc b { color: var(--ink) }
.ftr__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px }
.ftr__ttl { display: block; font: 600 13px/1 var(--f-body); color: var(--ink); margin-bottom: 12px }
.ftr__grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.ftr__grid a { color: var(--muted); font-size: 13.5px }
.ftr__grid a:hover { color: var(--accent) }
.ftr__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 28px;
  padding-top: 20px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted2) }
.ftr__bar a { color: var(--muted2) }
.ftr__cp { margin-left: auto }

/* ---------- адаптив ------------------------------------------------------- */
@media (max-width: 1180px) {
  .layout { grid-template-columns: var(--side-w) minmax(0, 1fr) }
  .toc { display: none }
}
@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr) }
  .burger { display: inline-block }
  .hdr__links { display: none }
  .searchbtn__t { display: none }
  .hdr__go { padding: 9px 14px; font-size: 13.5px }
  .side { display: none; position: static; max-height: none; overflow: visible;
    padding: 12px 20px 24px; border-bottom: 1px solid var(--line) }
  .side.is-open { display: block }
  main { padding: 20px 20px 64px }
  .hero { padding: 24px 0 0 }
  .power { width: 240px; height: 240px }
  .power__icon { width: 88px; height: 88px }
  .map__win { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'status' 'servers' 'connect' 'tabs' }
  .map__tabs { grid-template-columns: 1fr }
  .map__zone--status { display: flex; flex-direction: column }
  .map__zone--servers, .map__zone--connect { min-height: 0 }
  .spec > div { grid-template-columns: 1fr }
  .spec dt { border-right: 0; border-bottom: 1px solid var(--line) }
  .avail__row { grid-template-columns: repeat(3, 1fr) }
  .avail__c:nth-child(4) { border-left: 0 }
  .avail__c:nth-child(n+4) { border-top: 1px solid var(--line) }
  .dl__row { grid-template-columns: minmax(0, 1fr); gap: 6px }
  .dl__go { justify-self: start }
  .shot img { max-height: none }
  .shot__pair { grid-template-columns: 1fr }
  .probe { grid-template-columns: minmax(0, 1fr) }
  .probe--foot { justify-items: center; text-align: center }
  .probe--foot .power { margin: 8px auto 0 }
  .ftr__disc { grid-template-columns: minmax(0, 1fr) }
  .helpful__btns { margin-left: 0 }
  .topbar__in { font-size: 11.5px; padding: 7px 16px }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important } }