/* ============================================================
   Расширения — общая дизайн-система
   Чистый, доверительный стиль каталога приложений
   ============================================================ */

/* Golos Text, served from our own domain. Loading it from fonts.googleapis.com
   put a third-party stylesheet in the critical path (~800ms before first paint);
   an @import here was worse still, because it was only discovered after this
   file had downloaded. The font is variable, so one file per subset covers
   every weight, and unicode-range means only the needed subset is fetched. */

@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/golos-text-cyrillic-ext.c7635a080bad.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/golos-text-cyrillic.2b8fbbb33a14.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/golos-text-latin-ext.b0503aa2cc13.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/golos-text-latin.f57df9832ab8.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  /* Цвета */
  --bg:            #ffffff;
  --bg-soft:       #f5f6f8;
  --bg-sunken:     #eef0f3;
  --surface:       #ffffff;
  --line:          #e6e8ec;
  --line-strong:   #d4d7dd;

  --ink:           #15181d;
  --ink-2:         #41464e;
  --ink-3:         #6b7280;
  --ink-4:         #9aa1ab;

  --accent:        #2b6ef2;
  --accent-hover:  #1f5ddb;
  --accent-soft:   #eaf1fe;
  --accent-ink:    #16469c;

  --green:         #119b62;
  --green-soft:    #e6f6ee;
  --amber:         #c9851a;
  --amber-soft:    #fdf3e0;
  --rose:          #d94a5b;
  --rose-soft:     #fdecee;

  /* Реклама */
  --ad-line:       #e0b54a;
  --ad-tint:       #fcf7ea;
  --ad-ink:        #9a7715;

  /* Геометрия */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --r-xl: 22px;

  --shadow-sm: 0 1px 2px rgba(16,20,28,.06), 0 1px 1px rgba(16,20,28,.04);
  --shadow:    0 2px 6px rgba(16,20,28,.06), 0 8px 24px rgba(16,20,28,.07);
  --shadow-lg: 0 10px 30px rgba(16,20,28,.10), 0 30px 60px rgba(16,20,28,.10);

  --maxw: 1240px;
  --header-h: 64px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Golos Text', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg-soft);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; }

::selection { background: var(--accent-soft); }

/* ---------- Утилиты ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.muted { color: var(--ink-3); }
.tiny { font-size: 12px; }
.center { text-align: center; }
.row { display: flex; align-items: center; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.spacer { flex: 1; }
.hide { display: none !important; }

h1,h2,h3,h4 { margin: 0; line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }
h1 { font-size: 34px; font-weight: 800; }
h2 { font-size: 24px; }
h3 { font-size: 18px; }
p { margin: 0 0 1em; }

/* ============================================================
   Шапка
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  height: var(--header-h);
  display: flex; align-items: center; gap: 20px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; letter-spacing: -0.02em; }
.brand__mark {
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(140deg, var(--accent), #6aa0ff);
  display: grid; place-items: center; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), var(--shadow-sm);
  flex: none;
}
.brand__mark::before {
  content: ""; width: 12px; height: 12px; border-radius: 4px;
  background: #fff; box-shadow: 6px 6px 0 -2px rgba(255,255,255,.55);
}

.search {
  flex: 0 1 380px; position: relative; margin-left: auto;
}
.search input {
  width: 100%; height: 40px; border: 1px solid var(--line-strong);
  background: var(--bg-soft); border-radius: 999px;
  padding: 0 16px 0 42px; font-size: 14px; color: var(--ink);
  outline: none; transition: .15s;
}
.search input:focus { background: #fff; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.search__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-4); }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  padding: 8px 12px; border-radius: 8px; color: var(--ink-2);
  font-weight: 500; font-size: 14px; transition: .12s;
}
.nav a:hover { background: var(--bg-soft); color: var(--ink); }
.nav a.active { color: var(--accent); }

.lang {
  display: inline-flex; align-items: center; gap: 5px; padding: 7px 11px;
  border: 1px solid var(--line-strong); border-radius: 8px; font-size: 13px;
  font-weight: 600; color: var(--ink-2); background: #fff;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px; border-radius: 10px; border: 1px solid transparent;
  font-weight: 600; font-size: 14px; transition: .14s; white-space: nowrap;
}
.btn--primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn--ghost { background: #fff; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--bg-soft); }
.btn--green { background: var(--green); color: #fff; }
.btn--green:hover { filter: brightness(.95); }
.btn--lg { height: 48px; padding: 0 26px; font-size: 15px; border-radius: 12px; }
.btn--sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn--block { width: 100%; }
.btn--disabled { background: var(--bg-soft); color: var(--ink-3); border-color: var(--line); cursor: not-allowed; pointer-events: none; }

/* Иконка-переключатель рекламных зон */
.adzone-toggle {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px;
  border: 1px solid var(--line-strong); border-radius: 8px; background: #fff;
  font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap;
}
.adzone-toggle .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ad-line); transition: .15s; }
.adzone-toggle.on { background: var(--ad-tint); border-color: var(--ad-line); color: var(--ad-ink); }

/* ============================================================
   Рекламный слот (AdSense-заглушка)
   ============================================================ */
.ad {
  position: relative; border: 1.5px dashed var(--line-strong);
  border-radius: var(--r); background:
    repeating-linear-gradient(135deg, #fafbfc 0 11px, #f3f4f7 11px 22px);
  display: grid; place-items: center; text-align: center;
  color: var(--ink-4); min-height: 90px; overflow: hidden;
}
.ad__label {
  position: absolute; top: 8px; left: 8px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-4); background: rgba(255,255,255,.8); padding: 2px 7px; border-radius: 999px;
}
.ad__body { font-size: 12px; font-weight: 600; color: var(--ink-4); display: grid; gap: 3px; padding: 12px; }
.ad__body b { color: var(--ink-3); font-size: 13px; letter-spacing: .02em; }
.ad__size { font-size: 11px; color: var(--ink-4); font-variant-numeric: tabular-nums; }

.ad--leaderboard { min-height: 110px; }
.ad--rect { min-height: 250px; }
.ad--feed { min-height: 100%; }
.ad--tower { min-height: 600px; }
.ad--inarticle { min-height: 180px; margin: 28px 0; }

/* Подсветка зон при включённом тумблере */
body.show-adzones .ad {
  border-color: var(--ad-line);
  background: var(--ad-tint);
  box-shadow: 0 0 0 3px rgba(224,181,74,.22);
}
body.show-adzones .ad__label { background: var(--ad-line); color: #fff; }
body.show-adzones .partner-block { box-shadow: 0 0 0 3px rgba(17,155,98,.22); }
body.show-adzones [data-zone]::after {
  content: attr(data-zone);
  position: absolute; top: 6px; right: 6px; z-index: 5;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  background: var(--ad-ink); color: #fff; padding: 3px 8px; border-radius: 999px;
}
[data-zone] { position: relative; }

/* Партнёрский блок */
.partner-block {
  border: 1px solid var(--green); border-radius: var(--r);
  background: var(--green-soft); padding: 16px; position: relative; overflow: hidden;
}
.partner-block__tag {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--green); margin-bottom: 8px;
}
.partner-block h4 { font-size: 16px; margin-bottom: 4px; }
.partner-block p { font-size: 13px; color: var(--ink-2); margin-bottom: 12px; }

/* ============================================================
   Карточка расширения
   ============================================================ */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.ext-card {
  display: flex; flex-direction: column; gap: 14px; padding: 18px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  transition: .16s; height: 100%;
}
.ext-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: var(--line-strong); }
.ext-card__top { display: flex; gap: 13px; align-items: flex-start; }
.ext-icon {
  width: 52px; height: 52px; border-radius: 14px; flex: none;
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 22px;
}
.ext-icon img { width: 100%; height: 100%; object-fit: contain; }
.ext-card__name { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.ext-card__cat { font-size: 12px; color: var(--ink-3); font-weight: 500; }
.ext-card__desc { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; flex: 1; }
.ext-card__meta { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--ink-3); font-weight: 500; }
.ext-card__foot { display: flex; align-items: center; gap: 10px; }
.stars { color: var(--amber); letter-spacing: 1px; font-size: 13px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line);
  font-size: 12px; font-weight: 600; color: var(--ink-2);
}
.chip--accent { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }

/* ============================================================
   Сетка каталога + сайдбар
   ============================================================ */
.layout {
  display: grid; grid-template-columns: 1fr 320px; gap: 28px;
  align-items: start; padding: 0 0 60px;
}
/* Grid and flex items default to min-width:auto, which refuses to shrink below
   their content. On phones that widened the column instead of letting wide
   content (tables, the hero) scroll or wrap, scrolling the whole page sideways. */
.layout > main, .sidebar { min-width: 0; }
/* Top ad spacing only applies when the slot actually has a block. */
.promo-top:has(*) { margin-bottom: 24px; }
.content-panel { padding: 24px; margin-bottom: 24px; }
.install-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  flex-wrap: wrap; padding: 18px 0 0; margin: 18px 0 0;
  border-top: 1px solid var(--line);
}
.install-bar__dev { font-size: 14px; color: var(--ink-2); }
.install-bar__dev b { color: var(--ink); }
.install-bar .btn { flex: none; }
/* Hero: icon in its own column, the rest stacked beside it. Laid out with grid
   areas so phones can regroup it without changing the markup. Children must be
   allowed to shrink (min-width:0) or their content sets a minimum width wider
   than a phone screen. */
.ext-hero {
  display: grid; grid-template-columns: 88px minmax(0, 1fr);
  gap: 0 22px; align-items: start; padding: 8px 0;
  grid-template-areas: "icon badge" "icon title" "icon desc" "icon meta" "icon sigs";
}
.ext-hero > * { min-width: 0; }
.ext-hero .ext-icon { grid-area: icon; }
.ext-hero__badge { grid-area: badge; justify-self: start; }
.ext-hero__title { grid-area: title; font-size: 30px; margin: 6px 0; }
.ext-hero__desc { grid-area: desc; margin-bottom: 12px; }
.ext-hero__metarow {
  grid-area: meta; display: flex; flex-wrap: wrap;
  gap: 6px 18px; align-items: center; font-size: 14px;
}
.ext-hero .sigs { grid-area: sigs; }

@media (max-width: 560px) {
  /* Icon and badge share the first line; everything else spans both columns. */
  .ext-hero {
    grid-template-columns: auto minmax(0, 1fr); align-items: center;
    grid-template-areas: "icon badge" "title title" "desc desc" "meta meta" "sigs sigs";
  }
  .ext-hero__title { margin-top: 14px; }
}
/* The store button carries a long label ("Install from Chromium extensions").
   On the narrowest phones it has to be allowed to shrink (flex:none above
   forbids it) and to wrap; on wider screens it keeps its one-line shape. */
@media (max-width: 480px) {
  .install-bar .btn { flex: 0 1 auto; white-space: normal; }
}
.edit-fab { position: fixed; right: 18px; bottom: 18px; z-index: 60; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; box-shadow: var(--shadow); }
.edit-fab:hover { background: var(--accent); color: #fff; }

/* Single source of the gap below the header — applies to every content page,
   with or without breadcrumbs. */
.page { padding-top: 24px; }
.breadcrumbs { padding: 0 0 14px; font-size: 13.5px; color: var(--ink-3); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.breadcrumbs a { color: var(--ink-3); }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs .sep { color: var(--ink-4); }
.breadcrumbs .current { color: var(--ink-2); font-weight: 600; }

.ext-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; grid-auto-rows: minmax(250px, auto); }
/* In-feed ad cell matches the extension cards (standard ~300x250 responsive slot). */
.ext-grid .ad { min-height: 100%; height: 100%; margin: 0; }
.sidebar { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 20px; }

@media (max-width: 1080px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; grid-template-columns: 1fr 1fr; }
  .ad--tower { min-height: 250px; }
}
@media (max-width: 720px) {
  .ext-grid { grid-template-columns: 1fr; }
  .sidebar { grid-template-columns: 1fr; }
  .search { display: none; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero { padding: 40px 0 26px; }
.hero h1 { font-size: 40px; max-width: 16ch; margin-bottom: 12px; }
.hero p { font-size: 17px; color: var(--ink-2); max-width: 56ch; }
.hero__cats { display: flex; flex-wrap: wrap; gap: 9px; }

/* Стор + категории */
.catbar { padding: 0 0 16px; display: grid; gap: 16px; }
.store-tabs { display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); }
.store-tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 4px 12px;
  border: 0; background: none; font-size: 15px; font-weight: 700; color: var(--ink);
  border-bottom: 2px solid transparent; margin-bottom: -1px; letter-spacing: -0.01em;
}
.store-tab.active { border-bottom-color: var(--accent); color: var(--accent-ink); }
.store-dot { width: 14px; height: 14px; border-radius: 50%; background: conic-gradient(from 90deg, #ea4335, #fbbc05, #34a853, #4285f4, #ea4335); box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 5px var(--line); }
.store-soon { font-size: 12.5px; color: var(--ink-4); font-weight: 500; }

.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.section-head h2 { font-size: 21px; }
.section-head a { color: var(--accent); font-weight: 600; font-size: 14px; }

/* ============================================================
   Липкий нижний баннер
   ============================================================ */
.sticky-ad {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: rgba(255,255,255,.94); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line-strong); box-shadow: 0 -6px 20px rgba(16,20,28,.07);
  transform: translateY(0); transition: transform .3s ease;
}
.sticky-ad.dismissed { transform: translateY(110%); }
.sticky-ad__inner { display: flex; align-items: center; gap: 16px; padding: 10px 0; }
.sticky-ad .ad { flex: 1; min-height: 70px; max-height: 90px; }
.sticky-ad__close {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line-strong);
  background: #fff; color: var(--ink-3); display: grid; place-items: center; flex: none; font-size: 16px;
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: var(--ink); color: #c7cbd2; padding: 48px 0 30px; margin-top: auto; }
.site-footer a { color: #c7cbd2; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(2, 1fr); gap: 32px; }
.footer-col h5 { color: #fff; font-size: 13px; margin: 0 0 14px; letter-spacing: .02em; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 14px; }
.footer-bottom { margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; font-size: 13px; color: #8b92a0; }
@media (max-width: 720px){ .footer-grid { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   Breadcrumbs
   ============================================================ */
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); padding: 18px 0; flex-wrap: wrap; }
.crumbs a:hover { color: var(--accent); }
.crumbs .sep { color: var(--ink-4); }

/* badges */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge--green { background: var(--green-soft); color: var(--green); }
.badge--blue { background: var(--accent-soft); color: var(--accent-ink); }

/* generic toast */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: #fff; padding: 13px 20px; border-radius: 12px;
  font-size: 14px; font-weight: 500; box-shadow: var(--shadow-lg); opacity: 0;
  pointer-events: none; transition: .25s; z-index: 200; display: flex; align-items: center; gap: 10px;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   Лайтбокс галереи скриншотов
   ============================================================ */
.lightbox {
  position: fixed; inset: 0; z-index: 210; display: none;
  align-items: center; justify-content: center; padding: 5vh 5vw;
  background: rgba(12,15,22,.9); backdrop-filter: blur(6px);
  animation: lightbox-in .18s ease;
}
.lightbox.open { display: flex; }
@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }
.lightbox__img {
  max-width: 92vw; max-height: 88vh; border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0,0,0,.55); object-fit: contain;
}
.lightbox__close, .lightbox__nav {
  position: absolute; display: grid; place-items: center;
  border: 0; cursor: pointer; color: #fff;
  background: rgba(255,255,255,.12); transition: .15s;
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255,255,255,.24); }
.lightbox__close { top: 20px; right: 24px; width: 42px; height: 42px; border-radius: 50%; font-size: 24px; line-height: 1; }
.lightbox__nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; font-size: 30px; line-height: 1; }
.lightbox__prev { left: 20px; }
.lightbox__next { right: 20px; }
@media (max-width: 600px) {
  .lightbox__nav { width: 42px; height: 42px; font-size: 24px; }
  .lightbox__prev { left: 10px; } .lightbox__next { right: 10px; }
}

/* ============================================================
   Spotlight (pick of the week) — softer than the demo hero
   ============================================================ */
.spotlight {
  position: relative; overflow: hidden;
  margin: 26px 0 6px; border-radius: var(--r-xl);
  display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 24px;
  padding: 42px 44px;
  /* soft, muted gradient (not the harsh saturated purple of the demo) */
  background: linear-gradient(135deg, #3a3661 0%, #4b4787 55%, #5c569e 100%);
  color: #fff;
  box-shadow: var(--shadow);
}
.spotlight__badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.14); color: #fff;
  padding: 7px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.spotlight__title { font-size: 38px; font-weight: 800; margin: 18px 0 12px; max-width: 14ch; }
.spotlight__sub { font-size: 16px; color: rgba(255,255,255,.82); max-width: 46ch; margin: 0 0 16px; }
.spotlight__meta { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255,255,255,.88); margin-bottom: 22px; }
.spotlight__meta .stars { color: #ffd24a; letter-spacing: 2px; }
.spotlight__dot { color: rgba(255,255,255,.45); }
.spotlight__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.spotlight__btn-ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.28); }
.spotlight__btn-ghost:hover { background: rgba(255,255,255,.2); }

.spotlight__art { position: relative; min-height: 220px; display: flex; justify-content: center; align-items: center; }
.spotlight__img {
  border-radius: var(--r-lg); object-fit: cover;
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
}
/* offset stacking of the two images */
.spotlight__img--front { width: 150px; height: 150px; position: relative; z-index: 2; transform: rotate(-4deg); }
.spotlight__img--back {
  position: absolute; width: 240px; height: 160px; right: 0; top: 18px;
  z-index: 1; transform: rotate(5deg) translateX(28px); opacity: .92;
}

@media (max-width: 820px){
  .spotlight { grid-template-columns: 1fr; padding: 32px 26px; }
  .spotlight__title { font-size: 30px; }
  .spotlight__art { display: none; }
}

/* ============================================================
   Install / onboarding page
   ============================================================ */
.install-body > h1:first-child { font-size: 29px; margin: 0 0 5px; }
.install-body > h1:first-child + p { font-size: 16px; color: var(--ink-2); margin: 0 0 14px; }
/* Cap step screenshots — they drive most of the page height and push the
   partner block below the fold. */
.install-body figure { margin-top: 10px; margin-bottom: 0; }
.install-body img { max-width: 520px; }
.article figure { margin-left: auto; margin-right: auto; }
.article img { margin-left: auto; margin-right: auto; }

.onboard { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 15px; counter-reset: step; }
.onboard-step { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; }
.onboard-step::before {
  counter-increment: step; content: counter(step);
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: #fff; font-weight: 700;
  display: grid; place-items: center;
}
.onboard-step h3 { font-size: 17px; margin: 4px 0 3px; }
.onboard-step p { margin: 0; color: var(--ink-2); }

.ip-callout {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 5px; margin: 6px 0; padding: 16px 20px; border-radius: 12px;
  background: linear-gradient(135deg, #eef3ff, #e3ecff);
  border: 1px solid #cdddfb;
}
.ip-callout__icon { font-size: 22px; }
.ip-callout h3 { margin: 0; font-size: 16px; color: var(--accent-ink); }
.ip-callout p { margin: 0; max-width: 52ch; font-size: 13.5px; color: var(--accent-ink); opacity: .9; }
.ip-callout .btn { height: 36px; padding: 0 20px; font-size: 14px; margin-top: 6px; }
.ip-callout__disc { font-size: 11px; color: var(--accent-ink); opacity: .6; }

.install-caps { margin-top: 36px; }
.install-caps h2 { margin-bottom: 16px; }
.install-caps ul { columns: 2; gap: 28px; margin: 0; padding-left: 18px; }
.install-caps li { margin-bottom: 8px; color: var(--ink-2); }
@media (max-width: 560px){ .install-caps ul { columns: 1; } }

/* --- Category comparison table on item pages --- */
.cmp { width: 100%; border-collapse: collapse; font-size: 14px; }
.cmp th, .cmp td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.cmp th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.cmp td:first-child { white-space: normal; }
.cmp tbody tr:last-child td { border-bottom: 0; }
.cmp__self td { background: var(--bg-soft); font-weight: 600; }

/* ============================================================
   Данные из пакета расширения: сигналы доступа, разрешения, паспорт
   ============================================================ */
.sigs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.sig {
  display: inline-flex; align-items: center; padding: 3px 9px;
  border-radius: 999px; font-size: 12px; font-weight: 600;
  border: 1px solid transparent; white-space: nowrap;
}
.sig--warn { background: var(--amber-soft); color: var(--amber); }
.sig--ok { background: var(--green-soft); color: var(--green); }
.cmp .sig { font-size: 11px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
a.chip { text-decoration: none; }
a.chip:hover { border-color: var(--line-strong); }

.access-line {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-soft); margin-bottom: 14px;
}
.access-line__label {
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3);
}
.access-line__value { font-weight: 600; }
.access-line__value--warn { color: var(--amber); }

.permtable code { font-size: 12px; }
.permtable td:last-child { white-space: normal; }

.passport {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
}
.passport__row {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding: 10px 14px; background: var(--surface); font-size: 14px;
}
.passport__row span { color: var(--ink-3); }

.langs { margin-top: 14px; }
.langs summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.langs__list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

kbd {
  display: inline-block; padding: 2px 7px; border-radius: 5px;
  border: 1px solid var(--line-strong); background: var(--bg-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
}