/* Общий слой для всех трёх вариантов.
   Цвета берутся из переменных сайта: --acc (акцент), --accInk (текст на акценте),
   --srf (поверхность), --srfInk (текст на поверхности), --hair (линия). */

/* ---------- прогресс чтения ---------- */
.kp-prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--acc);z-index:990;
  transition:width .12s linear;pointer-events:none}

/* ---------- липкий CTA на мобильном ---------- */
.kp-bar{position:fixed;left:0;right:0;bottom:0;z-index:880;display:none;
  align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;
  background:var(--srf);border-top:1px solid var(--hair);
  transform:translateY(120%);transition:transform .4s cubic-bezier(.4,0,.2,1)}
.kp-bar.on{transform:translateY(0)}
.kp-bar .kp-pr{line-height:1.15}
.kp-bar .kp-pr b{display:block;font-size:17px;font-weight:700;color:var(--srfInk)}
.kp-bar .kp-pr span{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;opacity:.6;color:var(--srfInk)}
.kp-bar a{flex:none;background:var(--acc);color:var(--accInk);padding:13px 20px;
  font-size:13px;font-weight:700;letter-spacing:.05em;text-align:center;white-space:nowrap}
@media(max-width:820px){.kp-bar{display:flex}body{padding-bottom:66px}}

/* ---------- лайтбокс скриншотов ---------- */
.kp-lb{position:fixed;inset:0;z-index:995;background:rgba(6,10,9,.94);backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;padding:56px 16px 84px;
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.kp-lb.on{opacity:1;visibility:visible}
.kp-lb img{max-width:min(420px,86vw);max-height:100%;object-fit:contain;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.8);transform:scale(.94);transition:transform .4s cubic-bezier(.16,1,.3,1)}
.kp-lb.on img{transform:scale(1)}
.kp-lb .kp-cap{position:absolute;left:0;right:0;bottom:26px;text-align:center;color:#fff;
  font-size:14px;letter-spacing:.06em;opacity:.85}
.kp-lb .kp-cap b{color:var(--acc);font-size:19px;display:block;margin-bottom:4px}
body.kp-nobar .kp-bar{display:none}
.kp-lb .kp-x{position:absolute;top:16px;right:18px;width:42px;height:42px;font-family:system-ui,sans-serif;border:1px solid rgba(255,255,255,.3);
  color:#fff;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:.3s;background:none}
.kp-lb .kp-x:hover{background:var(--acc);color:var(--accInk);border-color:var(--acc)}
.kp-lb .kp-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:60px;color:#fff;
  font-size:22px;display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:rgba(255,255,255,.07);border:0;transition:.3s}
.kp-lb .kp-nav:hover{background:var(--acc);color:var(--accInk)}
.kp-lb .kp-prev{left:12px}.kp-lb .kp-next{right:12px}
@media(max-width:640px){.kp-lb .kp-nav{width:38px;height:48px}}

/* ---------- страховка появления ---------- */
.kp-safe .rv{opacity:1!important;transform:none!important}