/* Manrope — свои файлы, без запроса к Google Fonts (render-blocking CSS) */
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: optional;
  src: url('../fonts/manrope-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: optional;
  src: url('../fonts/manrope-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: optional;
  src: url('../fonts/manrope-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: optional;
  src: url('../fonts/manrope-800.woff2') format('woff2');
}

@charset "utf-8";

/* ==========================================================================
   fast-android.ru — базовые токены и каркас
   Все классы темы носят префикс ap- (application). Префикс выбран так, чтобы
   не пересекаться ни с engine.css движка (form__, d-flex, dle-, fa-), ни с
   классами покупной темы Droid Tools, на которой сайт работает сейчас.
   ========================================================================== */

/* ─── Токены из макета ─────────────────────────────────────────────────── */
:root {
  --ap-bg:            #F2F6FB;
  --ap-surface:       #FFFFFF;
  --ap-surface-2:     #E9EFF7;
  --ap-text:          #0F1E30;
  --ap-text-muted:    #5A6B84;
  --ap-border:        #DBE3EE;
  --ap-brand:         #1D5C8F;
  --ap-brand-2:       #16A88F;
  --ap-brand-soft:    #DCEAF7;
  --ap-accent:        #16A55C;
  --ap-accent-hover:  #128C4D;
  --ap-accent-soft:   #E4F6EC;
  --ap-on-accent:     #FFFFFF;
  --ap-gold:          #E8A200;
  --ap-gold-soft:     #FFF4DA;
  --ap-danger:        #DC3A3A;
  --ap-danger-soft:   #FDE8E8;
  --ap-link:          #1F6FD0;
  --ap-star:          #F5A524;
  --ap-shadow:        #0F1E301A;
  --ap-footer-bg:     #172335;

  --ap-radius-card: 14px;
  --ap-radius-btn:  12px;
  --ap-radius-pill: 999px;

  --ap-gap-sm: 10px;
  --ap-gap-md: 16px;
  --ap-gap-lg: 24px;
  --ap-pad:    16px;
  /* Ширина содержимого на широком экране — 1280, как в макете.
     Поля растут вместе с экраном, страница не расползается. */
  --ap-side:   16px;
  --ap-content: 1280px;

  --ap-font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

[data-theme="dark"] {
  --ap-bg:            #0F1720;
  --ap-surface:       #182430;
  --ap-surface-2:     #1F2C3A;
  --ap-text:          #E8EEF6;
  --ap-text-muted:    #93A2B7;
  --ap-border:        #2A3A4B;
  --ap-brand:         #2C7FBF;
  --ap-brand-2:       #19C2A5;
  --ap-brand-soft:    #12283A;
  --ap-accent:        #1BBE6B;
  --ap-accent-hover:  #16A55C;
  --ap-accent-soft:   #12301F;
  --ap-gold:          #FFCB3D;
  --ap-gold-soft:     #33280E;
  --ap-danger:        #FF5A5A;
  --ap-danger-soft:   #331717;
  --ap-link:          #5AA9FF;
  --ap-shadow:        #00000066;
  --ap-footer-bg:     #0B1220;
}

/* ─── Сброс ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ap-bg);
  color: var(--ap-text);
  font-family: var(--ap-font);
  font-size: 15px;
  /* Pencil считает высоту строки по метрикам шрифта, если lineHeight не задан.
     Для Manrope это ровно то же, что line-height: normal — 14px даёт 19,
     17px даёт 23. Множители ставим только там, где они есть в макете. */
  line-height: normal;
}

/* Короткие страницы (404, облако тегов) иначе оставляют подвал висеть
   посреди экрана — прижимаем его к низу окна. */
body { min-height: 100vh; display: flex; flex-direction: column; }
.ap-main { flex: 1 0 auto; }

img, svg, video { max-width: 100%; }
img { height: auto; border: 0; }

a { color: var(--ap-link); text-decoration: none; }

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

.ap-icon { width: 1em; height: 1em; display: block; fill: none;
  stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Скрытый от глаз, но доступный скринридеру текст */
.ap-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ─── Контейнер ────────────────────────────────────────────────────────── */
.ap-wrap { width: 100%; padding-inline: var(--ap-pad); margin-inline: auto; }

/* ─── Логотип ──────────────────────────────────────────────────────────── */
.ap-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; color: inherit; }
.ap-logo__mark {
  width: 38px; height: 38px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; padding: 5px;
  border-radius: 11px;
  background-image: linear-gradient(-135deg, #16A88F 14.645%, #1D5C8F 85.355%);
}
.ap-logo__mark img { width: 28px; height: 28px; display: block; }
.ap-logo__words { display: flex; flex-direction: column; gap: 1px; }
.ap-logo__top { font-size: 11px; font-weight: 700; color: var(--ap-text-muted); }
.ap-logo__name { font-size: 15px; font-weight: 800; letter-spacing: .3px; color: var(--ap-text); }

/* ─── Шапка ────────────────────────────────────────────────────────────── */
/* Разделитель тенью, а не бордером: в макете обводка нарисована внутри
   границ фрейма и высоту не увеличивает — border добавил бы лишний пиксель. */
.ap-hd { background: var(--ap-surface); box-shadow: inset 0 -1px 0 var(--ap-border); }

/* Сетка, а не flex-wrap: строка шапки должна быть ровно 58px независимо от
   высоты содержимого, а поиск на узком экране уезжает во вторую строку той же
   сеткой — без второго экземпляра разметки. */
.ap-hd__bar {
  display: grid; align-items: center;
  grid-template-columns: auto auto 1fr auto auto;
  grid-template-rows: 58px auto;
  column-gap: 10px; padding: 0 16px 12px;
}
.ap-hd__burger { grid-area: 1 / 1; color: var(--ap-text); }
.ap-hd__burger .ap-icon { width: 24px; height: 24px; }
.ap-hd .ap-logo { grid-area: 1 / 2; }
.ap-hd__caption { display: none; }

.ap-hd__theme { grid-area: 1 / 4; justify-self: end; color: var(--ap-text-muted); }
.ap-hd__theme .ap-icon { width: 21px; height: 21px; }

.ap-hd__login {
  grid-area: 1 / 5;
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 16px; border-radius: var(--ap-radius-pill);
  background: var(--ap-brand); color: #FFFFFF; font-size: 13px; font-weight: 700;
}

.ap-hd .ap-search { grid-area: 2 / 1 / 3 / -1; }

.ap-search {
  display: flex; align-items: center; gap: 9px;
  height: 42px; padding: 0 14px;
  background: var(--ap-surface-2); box-shadow: inset 0 0 0 1px var(--ap-border);
  border-radius: var(--ap-radius-btn);
}
.ap-search__icon { width: 17px; height: 17px; color: var(--ap-text-muted); flex-shrink: 0; }
.ap-search__input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font-size: 14px; color: var(--ap-text);
}
.ap-search__input::placeholder { color: var(--ap-text-muted); opacity: 1; }

/* ─── Меню разделов (десктоп) ──────────────────────────────────────────── */
.ap-nav { display: none; }

/* ─── Подвал ───────────────────────────────────────────────────────────── */
.ap-ft {
  background: var(--ap-footer-bg); box-shadow: inset 0 1px 0 var(--ap-border);
  color: #FFFFFFCC;
}
.ap-ft__in { display: flex; flex-direction: column; gap: 16px; padding: 24px 16px; }
.ap-ft__text { font-size: 13px; }
/* На узком экране «Контакты» уходят на свою строку с зазором 2px, на широком
   строка одна — поэтому копирайт блочный только до брейкпоинта. */
.ap-ft__copy { display: block; margin-bottom: 2px; line-height: 1.5; }
.ap-ft__text a { color: #FFFFFF; font-weight: 600; }
.ap-ft__row { display: flex; align-items: center; gap: 20px; }
.ap-ft__soc {
  width: 30px; height: 30px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #2DAAE1; border-radius: var(--ap-radius-pill); color: #FFFFFF;
}
.ap-ft__soc .ap-icon { width: 15px; height: 15px; }
.ap-ft__li {
  width: 31px; height: 31px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #FFFFFF1A; border: 1px solid #FFFFFF33; border-radius: 4px;
  font-size: 9px; font-weight: 700; color: #FFFFFF99;
}

/* ═══════════════════════ КОМПОНЕНТЫ ═══════════════════════
   Обводки везде рисуются inset-тенью, а не border: в Pencil обводка лежит
   внутри границ фрейма и размер не меняет — border добавлял бы по 2px к
   каждой карточке и чипу.
   Шрифт 12px — единственный размер, где Chrome и Pencil расходятся в высоте
   строки (17 против 16), поэтому для него line-height задан явно.
   ══════════════════════════════════════════════════════════ */

/* ─── Кнопка «Скачать» ─────────────────────────────────────────────────── */
.ap-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 20px; border-radius: var(--ap-radius-btn);
  background: var(--ap-accent); color: #FFFFFF;
  font-size: 16px; font-weight: 700; text-align: center;
  box-shadow: 0 6px 16px -4px #16A55C4D;
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ap-btn .ap-icon { width: 20px; height: 20px; flex-shrink: 0; }
.ap-btn:hover {
  background: var(--ap-accent-hover);
  box-shadow: 0 10px 24px -4px #16A55C73;
  transform: translateY(-2px);
}
.ap-btn--block { display: flex; width: 100%; }

/* ─── Бейдж версии ─────────────────────────────────────────────────────── */
.ap-ver {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--ap-radius-pill);
  background: var(--ap-surface-2); box-shadow: inset 0 0 0 1px var(--ap-border);
  font-size: 12px; line-height: 16px; font-weight: 700; color: var(--ap-text);
}
.ap-ver::before {
  content: ""; width: 6px; height: 6px; flex-shrink: 0;
  border-radius: var(--ap-radius-pill); background: var(--ap-accent);
}

/* ─── Чип раздела ──────────────────────────────────────────────────────── */
.ap-chip {
  display: inline-flex; align-items: center;
  padding: 9px 14px; border-radius: var(--ap-radius-pill);
  background: var(--ap-surface); box-shadow: inset 0 0 0 1px var(--ap-border);
  font-size: 14px; font-weight: 600; color: var(--ap-text);
  transition: background .15s ease, box-shadow .15s ease, color .15s ease;
}
.ap-chip:hover {
  background: var(--ap-accent); box-shadow: inset 0 0 0 1px var(--ap-accent);
  color: #FFFFFF;
}
.ap-chip.is-active {
  background: var(--ap-brand); box-shadow: inset 0 0 0 1px var(--ap-brand);
  color: #FFFFFF;
}
/* Тот же чип на тёмной подложке героя */
.ap-chip--hero {
  background: #FFFFFF26; box-shadow: inset 0 0 0 1px #FFFFFF66; color: #FFFFFF;
}
.ap-chip--hero.is-active {
  background: #FFFFFF; box-shadow: inset 0 0 0 1px #FFFFFF; color: var(--ap-text);
}

/* ─── Плашка «Обновлено» ───────────────────────────────────────────────── */
.ap-label {
  display: inline-flex; align-items: center;
  padding: 4px 8px; border-radius: 6px;
  background: var(--ap-gold-soft); color: var(--ap-gold);
  font-size: 11px; font-weight: 700;
}

/* ─── Рейтинг ──────────────────────────────────────────────────────────── */
.ap-rate {
  width: 32px; height: 32px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--ap-radius-pill); background: var(--ap-accent);
  font-size: 12px; line-height: 16px; font-weight: 700; color: #FFFFFF;
}

.ap-stars { display: flex; align-items: center; gap: 8px; }
.ap-stars__row { display: flex; gap: 2px; }
.ap-stars__row .ap-icon {
  width: 16px; height: 16px; fill: var(--ap-star); stroke: var(--ap-star);
}
.ap-stars__row .ap-icon.is-empty { fill: none; stroke: var(--ap-border); }
.ap-stars__value { font-size: 14px; font-weight: 700; color: var(--ap-text); }
.ap-stars__count { font-size: 13px; color: var(--ap-text-muted); }

/* ─── Мета-чипы ────────────────────────────────────────────────────────── */
.ap-meta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: var(--ap-radius-pill);
  background: var(--ap-surface-2); box-shadow: inset 0 0 0 1px var(--ap-border);
  font-size: 12px; line-height: 16px; font-weight: 700; color: var(--ap-text);
}
.ap-meta .ap-icon { width: 14px; height: 14px; flex-shrink: 0; color: var(--ap-text-muted); }

.ap-feat {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: var(--ap-radius-pill);
  background: var(--ap-brand-soft); color: var(--ap-brand);
  font-size: 11px; font-weight: 700;
}
.ap-feat .ap-icon { width: 12px; height: 12px; flex-shrink: 0; }

/* ─── Рекламный слот ───────────────────────────────────────────────────── */
.ap-ad {
  display: flex; flex-direction: column; gap: 4px;
  align-items: center; justify-content: center;
  height: 100px; border-radius: 10px;
  background: var(--ap-surface-2); box-shadow: inset 0 0 0 1px var(--ap-border);
  color: var(--ap-text-muted); text-align: center;
}
.ap-ad__title { font-size: 13px; font-weight: 700; }
.ap-ad__note { font-size: 11px; }

/* ─── Строка характеристик ─────────────────────────────────────────────── */
.ap-spec {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 2px; box-shadow: inset 0 -1px 0 var(--ap-border);
}
.ap-spec__key { display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ap-text-muted); }
.ap-spec__key .ap-icon { width: 15px; height: 15px; flex-shrink: 0; }
.ap-spec__val { font-size: 13px; font-weight: 700; color: var(--ap-text); text-align: right; }

/* ─── Общая мета-строка карточек: версия + размер ──────────────────────── */
.ap-tags { display: flex; align-items: center; gap: 6px; }
.ap-tags__ver,
.ap-tags__size {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: var(--ap-radius-pill);
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.ap-tags__ver { background: var(--ap-brand-soft); color: var(--ap-brand); }
.ap-tags__size { background: var(--ap-surface-2); color: var(--ap-text); font-weight: 600; }
.ap-tags__size .ap-icon { width: 11px; height: 11px; flex-shrink: 0; color: var(--ap-text-muted); }

/* ─── Карточка: сетка ──────────────────────────────────────────────────── */
.ap-card {
  position: relative; display: block;
  background: var(--ap-surface); border-radius: var(--ap-radius-card);
  box-shadow: inset 0 0 0 1px var(--ap-border), 0 2px 8px var(--ap-shadow);
  color: inherit;
  transition: box-shadow .18s ease;
}
.ap-card:hover {
  box-shadow: inset 0 0 0 1px var(--ap-border),
              0 30px 60px #0F172A33, 0 6px 16px #0F172A14;
}

.ap-card--grid { display: flex; flex-direction: column; gap: 7px; padding: 10px; }
.ap-card--grid .ap-card__thumb {
  position: relative; height: 146px; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: flex-end; padding: 8px;
  border-radius: 18px; background: var(--ap-surface-2);
  box-shadow: inset 0 0 0 1px var(--ap-border);
  transition: box-shadow .18s ease;
}
.ap-card--grid:hover .ap-card__thumb { box-shadow: inset 0 0 0 2px var(--ap-brand); }
.ap-card__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.ap-card__ph { width: 26px; height: 26px; color: var(--ap-text-muted); margin: auto; }
.ap-card--grid .ap-rate { position: relative; width: 26px; height: 26px; font-size: 11px; }

.ap-card--grid .ap-card__title {
  height: 36px; font-size: 14px; line-height: 1.25; font-weight: 700;
  color: var(--ap-text); overflow: hidden;
  display: flex; align-items: center;
  transition: color .18s ease;
}
.ap-card--grid:hover .ap-card__title { color: var(--ap-link); }
.ap-card__cat { font-size: 11px; color: var(--ap-text-muted); }
.ap-card__label { position: absolute; top: 14px; left: 14px; z-index: 2; }

/* ─── Карточка: список ─────────────────────────────────────────────────── */
.ap-card--list { display: flex; align-items: flex-start; gap: 12px; padding: 12px; }
.ap-card--list .ap-card__thumb {
  width: 56px; height: 56px; flex-shrink: 0; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px; background: var(--ap-surface-2);
  box-shadow: inset 0 0 0 1px var(--ap-border);
}
.ap-card--list .ap-card__ph { width: 24px; height: 24px; }
.ap-card__col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
/* Колонки сетки не должны растягиваться под длинное слово: 1fr не опускается
   ниже min-content, поэтому везде minmax(0, 1fr), а текст переносится. */
.ap-card__title, .ap-card__desc, .ap-card__cat { overflow-wrap: break-word; }
.ap-card--list .ap-card__title {
  font-size: 15px; line-height: 20px; font-weight: 700; color: var(--ap-text);
}
/* Множители 1.3 и 1.4 из макета дают дробные 19.5 и 16.8; Pencil округляет
   высоту каждого текстового блока вверх, поэтому ставим целые пиксели. */
.ap-card__desc { font-size: 12px; line-height: 17px; color: var(--ap-text-muted); }
.ap-card--list .ap-tags__ver,
.ap-card--list .ap-tags__size { font-size: 12px; line-height: 16px; }

/* ─── Карточка: слайд ──────────────────────────────────────────────────── */
.ap-card--slide { display: flex; flex-direction: column; overflow: hidden; }
.ap-card__poster {
  position: relative; height: 120px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--ap-surface-2);
}
.ap-card__bottom { display: flex; align-items: center; gap: 10px; padding: 12px; }
.ap-card--slide .ap-card__thumb {
  width: 44px; height: 44px; flex-shrink: 0; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; background: var(--ap-surface-2);
  box-shadow: inset 0 0 0 1px var(--ap-border);
}
.ap-card--slide .ap-card__ph { width: 20px; height: 20px; }
.ap-card--slide .ap-card__col { gap: 3px; }
.ap-card--slide .ap-card__title {
  font-size: 14px; line-height: 1.3; font-weight: 700; color: var(--ap-text);
}

/* ─── Герой главной ────────────────────────────────────────────────────── */
/* Угол градиента в Pencil задан относительно пропорций блока, поэтому в CSS
   он разный для узкого и широкого экрана — значения взяты из экспорта. */
.ap-hero {
  position: relative; overflow: hidden;
  padding: 26px 16px 82px;
  background-image: linear-gradient(-163.937deg, #16A88F 8.559%, #1D5C8F 91.441%);
  color: #FFFFFF;
}
/* Декор позиционируется от колонки содержимого: иначе на широком
   экране кольца и маскот уезжают от заголовка. */
.ap-hero__deco {
  position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 1440px; pointer-events: none;
}
.ap-hero__ring2,
.ap-hero__ring1,
.ap-hero__circle { position: absolute; border-radius: 50%; }
.ap-hero__ring2  { width: 500px; height: 500px; left: 54px;  top: 211px; background: #FFFFFF14; }
.ap-hero__ring1  { width: 420px; height: 420px; left: 94px;  top: 251px; background: #FFFFFF1F; }
.ap-hero__circle { width: 340px; height: 340px; left: 134px; top: 291px; background: var(--ap-accent); }
.ap-hero__mascot { display: none; }

.ap-hero__in { position: relative; display: flex; flex-direction: column; gap: 16px; }

.ap-hero__h1 {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  align-self: flex-start; width: fit-content;
  font-size: 28px; line-height: 31px; font-weight: 800; color: #FFFFFF;
}
.ap-hero__hl {
  padding: 3px 10px; border-radius: 6px; background: var(--ap-danger);
}

.ap-hero__usp { display: flex; flex-direction: column; gap: 8px; }
.ap-hero__usp li { display: flex; align-items: flex-start; gap: 9px;
  font-size: 14px; line-height: 20px; font-weight: 600; }
.ap-hero__usp .ap-icon { width: 17px; height: 17px; flex-shrink: 0; color: var(--ap-gold); }

/* На узком экране чипы идут одной строкой с горизонтальной прокруткой.
   Отрицательные поля выводят ленту к краям экрана, внутренний padding
   оставляет первый и последний чип на общей сетке в 16px. */
.ap-hero__cats {
  display: flex; flex-wrap: nowrap; gap: 8px;
  overflow-x: auto; overscroll-behavior-x: contain;
  margin-inline: -16px; padding-inline: 16px;
  scrollbar-width: none; -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}
.ap-hero__cats::-webkit-scrollbar { display: none; }
.ap-hero__cats .ap-chip { flex: none; scroll-snap-align: start; }
.ap-hero .ap-chip--hero { font-size: 13px; }

.ap-hero__more {
  display: inline-flex; align-items: center; align-self: flex-start; gap: 7px;
  font-size: 14px; line-height: 19px; font-weight: 700; color: #FFFFFF;
}
.ap-hero__more .ap-icon { width: 16px; height: 16px; }

/* ─── Свежие обновления: сетка карточек поверх героя ───────────────────── */
/* Блок заезжает на нижний отступ героя — в макете он вынесен во «внахлёст». */
.ap-fresh {
  position: relative; z-index: 1; margin-top: -60px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  padding: 16px 16px 8px;
}
.ap-label--new { background: var(--ap-danger-soft); color: var(--ap-danger); }

/* ─── Секции главной ───────────────────────────────────────────────────── */
.ap-sec { display: flex; flex-direction: column; gap: 12px; padding: 22px 16px 10px; }
/* Тонированные секции на узком экране идут градиентом, на широком —
   ровной подложкой: так задано в макете, это не упрощение. */
.ap-sec--tint {
  gap: 14px; padding: 22px 16px; color: #FFFFFF;
  background-image: linear-gradient(-152.003deg, #16A88F 16.078%, #1D5C8F 83.922%);
}
.ap-sec--last { padding-bottom: 24px; }

.ap-sec__head { display: flex; align-items: center; gap: 10px; }
.ap-sec__h2 { flex: 1; min-width: 0; font-size: 19px; font-weight: 800; }
.ap-sec__arrow { display: none; }
.ap-sec__all {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  font-size: 12px; line-height: 16px; font-weight: 700; color: inherit;
}
.ap-sec__all .ap-icon { width: 14px; height: 14px; }

/* Лента с горизонтальной прокруткой: отрицательные поля выводят её к краям
   экрана, внутренний padding держит первую карточку на общей сетке. */
.ap-strip {
  display: flex; gap: 12px;
  overflow-x: auto; overscroll-behavior-x: contain;
  margin-inline: -16px; padding-inline: 16px;
  scrollbar-width: none; -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}
.ap-strip::-webkit-scrollbar { display: none; }
.ap-strip > * { flex: none; width: 250px; scroll-snap-align: start; }

.ap-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; row-gap: 12px; }

/* ─── Плитка подборки ──────────────────────────────────────────────────── */
.ap-tile {
  display: flex; flex-direction: column; overflow: hidden; color: inherit;
  background: var(--ap-surface); border-radius: var(--ap-radius-card);
  box-shadow: inset 0 0 0 1px var(--ap-border), 0 2px 8px var(--ap-shadow);
  transition: box-shadow .18s ease;
}
.ap-tile:hover {
  box-shadow: inset 0 0 0 1px var(--ap-border),
              0 30px 60px #0F172A33, 0 6px 16px #0F172A14;
}
.ap-tile__poster { display: block; height: 120px; overflow: hidden; background: var(--ap-surface-2); }
.ap-tile__poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-tile__body { display: flex; flex-direction: column; gap: 4px; padding: 12px; }
.ap-tile__title { font-size: 15px; line-height: 20px; font-weight: 700; color: var(--ap-text); }
.ap-tile__count { font-size: 11px; font-weight: 600; color: var(--ap-text-muted); }

/* ─── Карточка приложения ──────────────────────────────────────────────── */
/* Хлебные крошки лежат на градиенте, а карточка заезжает на них снизу —
   так же, как сетка на главной наезжает на герой. */
.ap-crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 16px 16px 76px;
  background-image: linear-gradient(-163.937deg, #16A88F 8.559%, #1D5C8F 91.441%);
  font-size: 13px; font-weight: 600; color: #FFFFFF;
}
.ap-crumbs .ap-icon { width: 15px; height: 15px; color: #FFFFFFCC; flex-shrink: 0; }
.ap-crumbs a { color: #FFFFFF; }
.ap-crumbs__sep { color: #FFFFFFAA; font-weight: 400; }

/* Секции в макете идут вплотную, каждая со своим нижним отступом 16 —
   в вёрстке это один контейнер с gap. */
.ap-page {
  position: relative; z-index: 1; margin-top: -60px; padding: 0 16px 16px;
  display: flex; flex-direction: column; gap: 16px;
}
.ap-page__main, .ap-page__side { display: contents; }

.ap-app {
  display: flex; flex-direction: column; gap: 14px; padding: 16px;
  background: var(--ap-surface); border-radius: var(--ap-radius-card);
  box-shadow: inset 0 0 0 1px var(--ap-border), 0 2px 10px var(--ap-shadow);
}

.ap-app__top { display: flex; gap: 14px; }
.ap-app__icon {
  width: 84px; height: 84px; flex-shrink: 0; overflow: hidden;
  border-radius: 20px; background: var(--ap-surface-2);
  box-shadow: inset 0 0 0 1px var(--ap-border);
}
.ap-app__icon img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ap-app__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
/* 22 x 1.2 = 26.4 — Pencil округляет строку до 26, ставим целым */
.ap-app__h1 { font-size: 22px; line-height: 26px; font-weight: 800; overflow-wrap: break-word; }

.ap-app__rating { display: flex; align-items: center; gap: 12px; }
.ap-app__score {
  width: 46px; height: 46px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--ap-radius-pill); background: var(--ap-accent);
  font-size: 19px; font-weight: 800; color: #FFFFFF;
}
.ap-app__ratecol { display: flex; flex-direction: column; gap: 3px; }
.ap-app__ratecap { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ap-text-muted); }
.ap-app__votes { font-size: 12px; line-height: 16px; color: var(--ap-text-muted); }
.ap-app__ratecol .ap-stars__row .ap-icon { width: 16px; height: 16px; }

/* Обе группы характеристик на узком экране сливаются в один список */
.ap-app__spec { display: flex; flex-direction: column; }
.ap-app__specgroup { display: contents; }

.ap-app__bar {
  position: relative; height: 30px; overflow: hidden; border-radius: var(--ap-radius-pill);
  background: var(--ap-surface-2);
}
.ap-app__barfill {
  display: block; height: 100%;
  border-radius: var(--ap-radius-pill); background: var(--ap-accent);
}
/* Подпись лежит поверх всей полоски, а не внутри заливки — при 20% её не режет */
.ap-app__bartext {
  position: absolute; inset: 0; text-align: center;
  font-size: 12px; line-height: 30px; font-weight: 700; color: #FFFFFF; white-space: nowrap;
}
.ap-app__bar.is-low .ap-app__bartext { color: var(--ap-text); }

.ap-app__actions { display: flex; flex-wrap: wrap; gap: 14px 10px; }
.ap-app__dl { flex: 1 0 100%; }
.ap-abtn {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 42px; border-radius: var(--ap-radius-btn);
  background: var(--ap-surface-2); box-shadow: inset 0 0 0 1px var(--ap-border);
  font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ap-text);
  padding: 0; white-space: nowrap;
}
.ap-abtn .ap-icon { width: 15px; height: 15px; flex-shrink: 0; color: var(--ap-text-muted); }

/* ─── Секции внутренней страницы ───────────────────────────────────────── */
.ap-sect { display: flex; flex-direction: column; gap: 12px; }
.ap-sect__h2 { font-size: 19px; line-height: 1.25; font-weight: 800; }

.ap-box {
  padding: 16px; background: var(--ap-surface); border-radius: var(--ap-radius-card);
  box-shadow: inset 0 0 0 1px var(--ap-border), 0 2px 10px var(--ap-shadow);
}

/* ─── Скриншоты ────────────────────────────────────────────────────────── */
.ap-shots {
  display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain;
  margin-inline: -16px; padding-inline: 16px;
  scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity;
}
.ap-shots::-webkit-scrollbar { display: none; }
.ap-shot {
  flex: none; width: 210px; height: 118px; overflow: hidden;
  border-radius: 12px; box-shadow: inset 0 0 0 1px var(--ap-border);
  scroll-snap-align: start; background: var(--ap-surface-2);
}
.ap-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ─── Описание ─────────────────────────────────────────────────────────── */
.ap-prose { display: flex; flex-direction: column; gap: 12px; }
/* Pencil округляет высоту каждого текстового блока, поэтому множители из
   макета переведены в целые пиксели: 14 x 1.6 = 22.4 -> 22 и так далее. */
.ap-prose p { font-size: 14px; line-height: 22px; }
.ap-prose h3 { font-size: 16px; font-weight: 800; }

.ap-feats { display: flex; flex-direction: column; gap: 9px; }
.ap-feats li { display: flex; gap: 10px; }
.ap-feats .ap-icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--ap-accent); }
.ap-feats__c { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ap-feats__c b { font-size: 14px; font-weight: 700; }
.ap-feats__c span { font-size: 13px; line-height: 19px; color: var(--ap-text-muted); }

/* Строка категорий на узком экране — лента с прокруткой, как чипы в герое:
   список разделов приходит из базы и в 358px укладывается не всегда. */
.ap-tagsrow {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 8px;
  overflow-x: auto; overscroll-behavior-x: contain;
  margin-inline: -16px; padding-inline: 16px;
  scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity;
}
.ap-tagsrow::-webkit-scrollbar { display: none; }
.ap-tagsrow > * { flex: none; scroll-snap-align: start; }
.ap-tagsrow__label { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--ap-text-muted); }
.ap-chip--sm { font-size: 12px; line-height: 16px; }

/* ─── FAQ ──────────────────────────────────────────────────────────────── */
.ap-faq { display: flex; flex-direction: column; gap: 10px; }
.ap-faq__i {
  padding: 14px; background: var(--ap-surface); border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--ap-border);
}
.ap-faq__q {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer; list-style: none;
  font-size: 14px; line-height: 19px; font-weight: 700;
}
.ap-faq__q::-webkit-details-marker { display: none; }
.ap-faq__q .ap-icon {
  width: 17px; height: 17px; flex-shrink: 0; margin-left: auto;
  color: var(--ap-text-muted); transition: transform .15s ease;
}
.ap-faq__i[open] .ap-faq__q .ap-icon { transform: rotate(180deg); }
.ap-faq__a { margin-top: 8px; font-size: 13px; line-height: 20px; color: var(--ap-text-muted); }

/* ─── Автор ────────────────────────────────────────────────────────────── */
.ap-author { display: flex; flex-direction: column; gap: 12px; }
.ap-author__h { font-size: 16px; font-weight: 800; }
.ap-author__row { display: flex; gap: 14px; }
.ap-author__ava {
  width: 56px; height: 56px; flex-shrink: 0; overflow: hidden;
  border-radius: var(--ap-radius-pill); box-shadow: inset 0 0 0 1px var(--ap-border);
  background: var(--ap-surface-2);
}
.ap-author__ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-author__col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ap-author__name { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.ap-author__n { font-size: 15px; font-weight: 800; }
.ap-online {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px;
  border-radius: var(--ap-radius-pill); background: var(--ap-accent-soft);
  font-size: 11px; font-weight: 700; color: var(--ap-accent);
}
.ap-online::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ap-accent);
}
.ap-author__pos { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ap-text-muted); }
.ap-author__bio { font-size: 13px; line-height: 20px; color: var(--ap-text-muted); }

/* ─── Блок загрузки ────────────────────────────────────────────────────── */
.ap-dl__head { display: flex; align-items: center; gap: 10px; }
.ap-dl__ico {
  width: 38px; height: 38px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px; background: var(--ap-accent-soft); color: var(--ap-accent);
}
.ap-dl__ico .ap-icon { width: 18px; height: 18px; }
.ap-dl__share { font-size: 13px; font-weight: 600; color: var(--ap-text-muted); }

.ap-soc { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-soc__i {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: 11px; font-weight: 800; color: #FFFFFF;
}
.ap-soc__i--vk { background: #0077FF; }
.ap-soc__i--tg { background: #2DAAE1; }
.ap-soc__i--x  { background: #111111; }
.ap-soc__i--ok { background: #EE8208; }
.ap-soc__i--p  { background: #E60023; }
.ap-soc__i--wa { background: #25D366; }
.ap-soc__i--r  { background: #FF4500; }

.ap-file {
  display: flex; flex-direction: column; gap: 12px; padding: 14px;
  background: var(--ap-surface); border-radius: var(--ap-radius-card);
  box-shadow: inset 0 0 0 1px var(--ap-border), 0 2px 10px var(--ap-shadow);
}
.ap-file--main { box-shadow: inset 0 0 0 1.5px var(--ap-accent), 0 2px 10px var(--ap-shadow); }
.ap-file__left { display: contents; }
/* Шапка файла — один поток: бейдж расширения прибит слева, заголовок
   занимает строку, дальше бейджи. На мобильном чипы размера уходят отдельной
   строкой от левого края карточки, на десктопе встают в строку к бейджам. */
.ap-file__head {
  position: relative; display: flex; flex-wrap: wrap; align-items: center;
  gap: 5px 6px; padding-left: 58px; min-height: 46px;
}
.ap-file__ext {
  position: absolute; left: 0; top: 0; width: 46px; height: 46px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border-radius: 12px; background: var(--ap-surface-2); box-shadow: inset 0 0 0 1px var(--ap-border);
  font-size: 9px; line-height: 12px; font-weight: 800; color: var(--ap-text-muted);
}
.ap-file__ext .ap-icon { width: 16px; height: 16px; color: var(--ap-accent); }
.ap-file__col, .ap-file__badges { display: contents; }
.ap-file__title { flex: 1 0 100%; font-size: 15px; line-height: 20px; font-weight: 700; overflow-wrap: break-word; }
.ap-hack {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px;
  border-radius: var(--ap-radius-pill); background: var(--ap-gold-soft);
  font-size: 11px; line-height: 15px; font-weight: 800; color: var(--ap-gold);
}
.ap-hack .ap-icon { width: 12px; height: 12px; flex-shrink: 0; }
.ap-file__meta {
  display: flex; flex-wrap: wrap; gap: 7px;
  flex: 1 0 calc(100% + 58px); margin-left: -58px; margin-top: 7px;
}
.ap-file__feats { display: flex; flex-direction: column; gap: 12px; }
.ap-file__lbl { font-size: 12px; line-height: 16px; font-weight: 800; color: var(--ap-text-muted); }
.ap-file__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ap-trust {
  display: flex; align-items: center; gap: 8px; padding: 9px 11px;
  border-radius: 10px; background: var(--ap-accent-soft);
  font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ap-accent);
}
.ap-trust .ap-icon { width: 16px; height: 16px; flex-shrink: 0; }
.ap-file__btn { font-size: 15px; }

.ap-tg {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  height: 46px; border-radius: var(--ap-radius-btn);
  background: var(--ap-brand); color: #FFFFFF; font-size: 14px; font-weight: 700;
}
.ap-tg .ap-icon { width: 17px; height: 17px; }

/* ─── Инструкции ───────────────────────────────────────────────────────── */
.ap-tabs {
  display: flex; gap: 4px; padding: 4px;
  border-radius: var(--ap-radius-btn); background: var(--ap-surface-2);
}
.ap-tabs__b {
  flex: 1; min-width: 0; height: 38px; border-radius: 9px;
  font-size: 12px; font-weight: 600; color: var(--ap-text-muted);
}
.ap-tabs__b.is-active { background: var(--ap-surface); color: var(--ap-text); font-weight: 700; }

.ap-panel { display: flex; flex-direction: column; gap: 12px; padding: 14px; }
.ap-note {
  display: flex; gap: 9px; padding: 11px; border-radius: 10px;
  background: var(--ap-gold-soft); font-size: 12px; line-height: 17px; color: var(--ap-gold);
}
.ap-note .ap-icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.ap-note--grey { background: var(--ap-surface-2); color: var(--ap-text-muted); }
/* Плашка «комментариев ещё нет» в макете крупнее и с большим отступом */
.ap-note--empty { padding: 12px; font-size: 13px; line-height: 18px; }

.ap-panel__cols { display: flex; flex-direction: column; gap: 12px; }
.ap-steps { display: flex; flex-direction: column; gap: 12px; }
.ap-steps h3 { font-size: 15px; font-weight: 800; }
.ap-steps ol { display: flex; flex-direction: column; gap: 10px; }
.ap-steps li { display: flex; gap: 10px; font-size: 13px; line-height: 19px; }
.ap-steps__n {
  width: 24px; height: 24px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--ap-radius-pill); background: var(--ap-accent-soft);
  font-size: 12px; font-weight: 800; color: var(--ap-accent);
}

/* ─── Форма комментария ────────────────────────────────────────────────── */
.ap-form { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.ap-form__row { display: flex; flex-direction: column; gap: 10px; }
.ap-input {
  width: 100%; height: 42px; padding: 11px 12px; border: 0; outline: none;
  border-radius: 10px; background: var(--ap-surface-2);
  font-size: 13px; color: var(--ap-text);
}
.ap-input::placeholder { color: var(--ap-text-muted); opacity: 1; }
.ap-input--area { height: 84px; resize: vertical; }
.ap-submit {
  height: 44px; border-radius: var(--ap-radius-btn);
  background: var(--ap-accent); color: #FFFFFF; font-size: 14px; font-weight: 700;
}

.ap-vlist { display: grid; gap: 12px; }

/* ─── Рекламные слоты ──────────────────────────────────────────────────── */
/* Разметка слотов оставлена на местах из макета, но пока в них нет кода —
   пустой слот схлопывается и не занимает места. Секция-обёртка прячется
   вместе с ним, чтобы не оставался лишний зазор между блоками. */
.ap-adslot { display: block; }
.ap-adslot:empty { display: none; }
.ap-sect--ad:has(> .ap-adslot:empty) { display: none; }

/* ─── Страница загрузки ────────────────────────────────────────────────── */
.ap-dlpage {
  position: relative; z-index: 1; margin-top: -60px;
  display: flex; flex-direction: column; gap: 20px;
  padding: 0 16px 24px;
}

.ap-dl2 {
  display: flex; flex-direction: column; gap: 16px; padding: 16px;
  background: var(--ap-surface); border-radius: var(--ap-radius-card);
  box-shadow: inset 0 0 0 1px var(--ap-border), 0 2px 10px var(--ap-shadow);
}

.ap-dl2__top { display: flex; gap: 14px; }
.ap-dl2__icon {
  width: 76px; height: 76px; flex-shrink: 0; overflow: hidden;
  border-radius: 18px; background: var(--ap-surface-2);
  box-shadow: inset 0 0 0 1px var(--ap-border);
}
.ap-dl2__icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-dl2__spec { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.ap-dl2__progress { display: flex; flex-direction: column; gap: 8px; }
.ap-dl2__bar {
  height: 40px; overflow: hidden; border-radius: var(--ap-radius-pill);
  background: var(--ap-surface-2);
}
.ap-dl2__fill {
  display: block; height: 100%; border-radius: var(--ap-radius-pill);
  background: var(--ap-accent);
}
.ap-dl2__label {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 13px; line-height: 18px; font-weight: 700; color: var(--ap-text-muted);
}
.ap-dl2__label .ap-icon { width: 15px; height: 15px; flex-shrink: 0; }

.ap-dl2__controls { display: flex; flex-direction: column; gap: 10px; }
/* Пока файл готовится, кнопка приглушена и не кликается */
.ap-dl2__go[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.ap-dl2__back {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; border-radius: var(--ap-radius-btn);
  background: var(--ap-surface); box-shadow: inset 0 0 0 1px var(--ap-border);
  font-size: 14px; font-weight: 600; color: var(--ap-text);
}
.ap-dl2__back .ap-icon { width: 16px; height: 16px; flex-shrink: 0; }

/* Состояние «файл готов»: полоса заполнена, подпись зелёная, кнопка активна */
.ap-dl2.is-ready .ap-dl2__fill { width: 100% !important; }
.ap-dl2.is-ready .ap-dl2__label { color: var(--ap-accent); }
.ap-dl2.is-ready .ap-dl2__label .ap-icon { display: none; }

/* ─── Хлебные крошки над героем раздела ────────────────────────────────── */
.ap-speedbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 12px 16px 0;
  font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ap-text-muted);
}
.ap-speedbar a { color: var(--ap-link); }
.ap-speedbar__sep { font-weight: 400; }

/* ─── Герой раздела ────────────────────────────────────────────────────── */
/* Тот же герой, что на главной, но без списка преимуществ и с другим
   положением колец. */
.ap-hero--cat .ap-hero__ring2  { top: 156px; }
.ap-hero--cat .ap-hero__ring1  { top: 196px; }
.ap-hero--cat .ap-hero__circle { top: 236px; }
.ap-hero--cat .ap-chip--hero { font-size: 14px; }

/* ─── Листинг раздела и постраничная навигация ─────────────────────────── */
.ap-catpage {
  position: relative; z-index: 1; margin-top: -90px;
  display: flex; flex-direction: column; gap: 16px;
  padding: 16px 16px 24px;
}

.ap-pager { display: flex; flex-direction: column; gap: 14px; }
.ap-pager__more {
  display: flex; align-items: center; justify-content: center;
  height: 46px; border-radius: var(--ap-radius-btn);
  background: var(--ap-surface); box-shadow: inset 0 0 0 1px var(--ap-border);
  font-size: 15px; font-weight: 700; color: var(--ap-text);
}
.ap-pager__pages { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ap-pager__p {
  width: 36px; height: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--ap-radius-pill);
  background: var(--ap-surface); box-shadow: inset 0 0 0 1px var(--ap-border);
  font-size: 13px; line-height: 18px; font-weight: 700; color: var(--ap-text);
}
.ap-pager__p.is-active {
  background: var(--ap-accent); box-shadow: none; color: #FFFFFF;
}
.ap-pager__p .ap-icon { width: 16px; height: 16px; }
.ap-pager__dots { font-size: 13px; line-height: 18px; font-weight: 700; color: var(--ap-text-muted); }

/* В листинге раздела зазор одинаковый по обеим осям — 10, а не 10/12,
   как в блоке «Новинки» на главной. */
#s-listing { row-gap: 10px; }

/* ─── Облако разделов ──────────────────────────────────────────────────── */
.ap-cloud { display: flex; flex-wrap: wrap; gap: 8px; }

/* ─── Подкатегория ─────────────────────────────────────────────────────── */
/* Вместо списка чипов в шапке — SEO-описание раздела. Мобильного фрейма у
   этого экрана в макете нет: размеры взяты по тем же правилам, что у
   остальных мобильных героев (текст 14px, как в списке преимуществ). */
.ap-hero__desc { font-size: 14px; line-height: 22px; color: #FFFFFF; opacity: .92; }

.ap-catpage--sub { gap: 16px; }
.ap-catpage--sub #s-listing { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

.ap-pager--simple { align-items: center; }

/* ─── Поиск ────────────────────────────────────────────────────────────── */
.ap-searchpage { position: relative; z-index: 1; margin-top: -60px; padding: 0 16px 4px; }

.ap-sform {
  display: flex; flex-direction: column; gap: 12px; padding: 16px;
  background: var(--ap-surface); border-radius: var(--ap-radius-card);
}
.ap-sform__h { font-size: 20px; line-height: 27px; font-weight: 800; }
/* Узкий экран: поле на всю ширину, под ним две кнопки поровну.
   Широкий: всё в одну строку — та же разметка, другая раскладка. */
.ap-sform__row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px;
}
.ap-sform__input {
  grid-column: 1 / -1;
  height: 46px; padding: 0 14px; border: 0; outline: none;
  border-radius: var(--ap-radius-btn);
  background: var(--ap-surface); box-shadow: inset 0 0 0 1px var(--ap-border);
  font-size: 15px; color: var(--ap-text);
}
.ap-sform__input::placeholder { color: var(--ap-text-muted); opacity: 1; }
.ap-sform__go,
.ap-sform__adv {
  display: flex; align-items: center; justify-content: center;
  height: 46px; border-radius: var(--ap-radius-btn); font-weight: 700;
}
.ap-sform__go { background: var(--ap-accent); color: #FFFFFF; font-size: 15px; }
.ap-sform__go:hover { background: var(--ap-accent-hover); }
.ap-sform__adv {
  background: var(--ap-surface-2); box-shadow: inset 0 0 0 1px var(--ap-border);
  color: var(--ap-text); font-size: 14px;
}

/* Листинг выдачи наследует раздел, но без наезда на шапку */
.ap-catpage--search { margin-top: 0; padding: 16px 16px 24px; }
.ap-pager--pages { align-items: flex-start; }

/* ─── Сообщение движка (message-info) ──────────────────────────────────── */
.ap-msg {
  display: flex; gap: 16px; padding: 24px;
  background: var(--ap-surface); border-radius: var(--ap-radius-card);
}
.ap-msg__ico {
  width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--ap-radius-pill); background: var(--ap-brand-soft); color: var(--ap-brand);
}
.ap-msg__ico .ap-icon { width: 22px; height: 22px; }
.ap-msg__col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ap-msg__h { font-size: 18px; font-weight: 800; }
.ap-msg__t { font-size: 15px; line-height: 23px; }

/* ─── Топ 100 ──────────────────────────────────────────────────────────── */
/* У этого героя нет колец и маскота — только крошки и заголовок на градиенте.
   Мобильного фрейма в макете нет: отступы взяты как у остальных мобильных
   героев, крошки — 13px, как в шапке карточки приложения. */
.ap-hero--top { padding: 26px 16px 82px; }
.ap-hero--top .ap-hero__in { gap: 16px; }
.ap-hero__crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 13px; line-height: 18px; font-weight: 600; color: #FFFFFF;
}
.ap-hero__crumbs a { color: #FFFFFF; }

.ap-catpage--top { margin-top: 0; padding: 16px 16px 24px; }

/* ─── Облако тегов ─────────────────────────────────────────────────────── */
/* В макете страница только для широкого экрана; на узком отступы взяты как у
   остальных внутренних страниц. Само облако — переносящийся ряд чипов,
   в движке заполняется тегом {tags}. */
.ap-tagspage {
  position: relative; z-index: 1; margin-top: -60px;
  display: flex; flex-direction: column; gap: 18px;
  padding: 16px 16px 24px;
}

/* ─── Страница тега ────────────────────────────────────────────────────── */
/* Крошки здесь с домиком, в отличие от раздела. */
.ap-speedbar--home .ap-icon { width: 15px; height: 15px; flex-shrink: 0; color: var(--ap-text-muted); }
/* Короткий герой (поиск, тег): те же кольца, но подняты выше — заголовок в
   одну строку, декор смещён вслед за ним. */
.ap-hero--short .ap-hero__ring2  { top: -20px; }
.ap-hero--short .ap-hero__ring1  { top: 20px; }
.ap-hero--short .ap-hero__circle { top: 60px; }

/* ─── Статическая страница ─────────────────────────────────────────────── */
/* Мобильного фрейма нет: кегли уменьшены по тем же пропорциям, что в парах
   макета (заголовок карточки 32 -> 22, текст 16 -> 14), отступы — как у
   остальных мобильных карточек. */
.ap-staticpage { position: relative; z-index: 1; margin-top: -60px; padding: 0 16px 24px; }

.ap-article {
  display: flex; flex-direction: column; gap: 16px; padding: 20px;
  background: var(--ap-surface); border-radius: var(--ap-radius-card);
  color: var(--ap-text);
}
.ap-article h1 { font-size: 22px; line-height: 27px; font-weight: 800; }
.ap-article h2 { font-size: 18px; line-height: 24px; font-weight: 800; }
.ap-article h3 { font-size: 15px; line-height: 21px; font-weight: 700; }
.ap-article p  { font-size: 14px; line-height: 22px; }

/* В макете пункты списка — такие же дети статьи, как абзацы, с тем же
   зазором 18. Список оставляем семантическим, но ритм держим общий. */
.ap-article__list { display: flex; flex-direction: column; gap: 16px; }
.ap-article__list li { display: flex; gap: 10px; font-size: 14px; line-height: 22px; }
.ap-article__m { flex-shrink: 0; font-weight: 700; color: var(--ap-accent); }

/* ─── Обратная связь ───────────────────────────────────────────────────── */
/* Мобильного фрейма нет: карточка растягивается на всю ширину, кегли и
   отступы — по тем же правилам, что на статической странице. */
.ap-formpage { position: relative; z-index: 1; margin-top: -60px; padding: 0 16px 24px; }

.ap-fbform {
  display: flex; flex-direction: column; gap: 16px; padding: 20px;
  background: var(--ap-surface); border-radius: var(--ap-radius-card);
}
/* У этого заголовка в макете высота строки не задана — считается по
   метрикам шрифта, поэтому здесь normal, а не множитель как в статье. */
.ap-fbform__h { font-size: 22px; line-height: normal; font-weight: 800; }

.ap-fld { display: flex; flex-direction: column; gap: 8px; }
.ap-fld__l { font-size: 14px; line-height: 19px; font-weight: 700; color: var(--ap-text); }
.ap-fld__req { margin-left: 3px; color: var(--ap-danger); }
/* Поля на фоне страницы, а не на подложке карточек — так в макете */
.ap-fld__c {
  width: 100%; height: 48px; padding: 0 16px; border: 0; outline: none;
  border-radius: var(--ap-radius-btn); background: var(--ap-bg);
  font-size: 15px; color: var(--ap-text);
}
.ap-fld__c::placeholder { color: var(--ap-text-muted); opacity: 1; }
.ap-fld__c--area { height: 170px; padding: 14px 16px; resize: vertical; }

/* Картинка кода на узком экране уходит на свою строку — иначе поле сжимается
   до нечитаемого. */
.ap-fld__captcha { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ap-fld__captcha .ap-fld__c { flex: 1 1 200px; width: auto; }
.ap-fld__code {
  width: 160px; height: 80px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--ap-surface-2);
  font-size: 22px; font-weight: 800; color: var(--ap-text-muted); letter-spacing: 2px;
}

.ap-fbform__go {
  align-self: flex-start; height: 50px; padding: 0 34px;
  border-radius: var(--ap-radius-btn); background: var(--ap-accent);
  color: #FFFFFF; font-size: 15px; font-weight: 700;
}
.ap-fbform__go:hover { background: var(--ap-accent-hover); }

/* ─── Стол заказов ─────────────────────────────────────────────────────── */
/* Мобильного фрейма нет. Таблица заявок из пяти колонок в 358px не влезает,
   поэтому она прокручивается внутри своей рамки, а страница — нет. */
.ap-od {
  display: flex; flex-direction: column; gap: 16px; padding: 20px;
  background: var(--ap-surface); border-radius: var(--ap-radius-card);
}
.ap-od__top { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.ap-od__h { flex: 1; min-width: 0; font-size: 22px; line-height: normal; font-weight: 800; }
.ap-od__add {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  height: 46px; padding: 0 22px; border-radius: var(--ap-radius-btn);
  background: var(--ap-accent); color: #FFFFFF; font-size: 15px; font-weight: 700;
}
.ap-od__add:hover { background: var(--ap-accent-hover); }
.ap-od__add .ap-icon { width: 18px; height: 18px; }

.ap-od__notice {
  padding: 14px 18px; border-radius: 10px;
  background: var(--ap-gold-soft); box-shadow: inset 0 0 0 1px var(--ap-gold);
  font-size: 15px; line-height: 23px; color: var(--ap-text);
}

.ap-od__legend { display: flex; flex-wrap: wrap; gap: 12px 22px; }
.ap-od__leg {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; line-height: 19px; font-weight: 600; color: var(--ap-link);
}
.ap-od__dot { width: 12px; height: 12px; flex: none; border-radius: 50%; }
.ap-od__dot--all  { background: var(--ap-brand); }
.ap-od__dot--wait { background: var(--ap-gold); }
.ap-od__dot--done { background: var(--ap-accent); }
.ap-od__dot--deny { background: var(--ap-danger); }
.ap-od__dot--top  { background: var(--ap-brand-2); }

.ap-od__scroll { overflow-x: auto; overscroll-behavior-x: contain; }
/* Разделители в макете — отдельные полоски в 1px, они добавляют высоту.
   Даём таблице фон цвета границы и разводим строки зазором в пиксель. */
.ap-od__table {
  min-width: 640px; overflow: hidden;
  display: flex; flex-direction: column; gap: 1px;
  border-radius: var(--ap-radius-btn); box-shadow: inset 0 0 0 1px var(--ap-border);
  background: var(--ap-border);
}
.ap-od__row {
  display: flex; align-items: center; gap: 16px; height: 52px; padding: 0 16px;
  background: var(--ap-surface);
}
.ap-od__name {
  flex: 1; min-width: 0; font-size: 15px; font-weight: 600; color: var(--ap-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ap-od__who  { width: 150px; flex: none; font-size: 14px; color: var(--ap-text-muted); }
.ap-od__date { width: 120px; flex: none; font-size: 14px; color: var(--ap-text-muted); }
.ap-od__cnt {
  width: 34px; height: 26px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--ap-surface-2);
  font-size: 13px; line-height: 18px; font-weight: 700; color: var(--ap-text-muted);
}

/* ─── Страница ошибки ──────────────────────────────────────────────────── */
.ap-errpage { position: relative; z-index: 1; margin-top: -60px; padding: 16px 16px 40px; }
.ap-msg--err { flex-direction: column; gap: 14px; padding: 20px; }
.ap-msg--err .ap-msg__ico {
  width: 48px; height: 48px; background: var(--ap-danger-soft); color: var(--ap-danger);
}
.ap-msg--err .ap-msg__ico .ap-icon { width: 24px; height: 24px; }
/* На узком экране иконка, заголовок и текст идут одной колонкой с общим
   зазором 14 — обёртки с меньшим отступом в макете нет. */
.ap-msg--err .ap-msg__col { gap: 14px; }
.ap-msg--err .ap-msg__h { font-size: 19px; }
.ap-msg--err .ap-msg__t { font-size: 15px; line-height: 23px; }

/* ─── Мобильное меню ───────────────────────────────────────────────────── */
body.is-locked { overflow: hidden; }

.ap-mm { position: fixed; inset: 0; z-index: 50; }
.ap-mm[hidden] { display: none; }
.ap-mm::before { content: ""; position: absolute; inset: 0; background: #0F172A99; }
.ap-mm__panel {
  position: relative; width: 280px; max-width: 85vw; height: 100%;
  display: flex; flex-direction: column; overflow-y: auto;
  background: var(--ap-bg);
}
.ap-mm__head {
  display: flex; align-items: center; gap: 10px; padding: 10px; min-height: 60px;
  background-image: linear-gradient(-152.003deg, #16A88F 16.078%, #1D5C8F 83.922%);
}
.ap-mm__head .ap-logo__top,
.ap-mm__head .ap-logo__name { color: #FFFFFF; }
.ap-mm__close {
  width: 40px; height: 40px; margin-left: auto; flex: none;
  display: flex; align-items: center; justify-content: center; color: #FFFFFF;
}
.ap-mm__close .ap-icon { width: 24px; height: 24px; }

.ap-mm__content { display: flex; flex-direction: column; gap: 8px; padding: 20px; }
.ap-mm__link {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
  border-radius: 8px; background: var(--ap-surface);
  box-shadow: inset 0 0 0 1px var(--ap-border);
  font-size: 14px; font-weight: 700; color: var(--ap-text);
}
.ap-mm__link span { flex: 1; min-width: 0; }
.ap-mm__link .ap-icon { width: 14px; height: 14px; flex: none; color: var(--ap-text-muted); }
.ap-mm__link[aria-expanded="false"] .ap-icon { transform: rotate(180deg); }

.ap-mm__sub {
  display: flex; flex-direction: column; gap: 2px; padding: 6px 0 10px;
  border-radius: 8px; background: var(--ap-surface-2);
}
.ap-mm__sub[hidden] { display: none; }
.ap-mm__sub a { padding: 6px 14px; font-size: 13px; font-weight: 600; color: var(--ap-text); }

.ap-mm__service { display: flex; flex-direction: column; gap: 2px; padding: 12px 0 0; }
.ap-mm__service a { padding: 7px 16px; font-size: 13px; font-weight: 600; color: var(--ap-text-muted); }

/* ─── Выпадающие меню шапки (широкий экран) ────────────────────────────── */
.ap-nav__item { position: relative; display: flex; align-items: center; }
.ap-drop {
  position: absolute; top: 100%; left: 0; z-index: 40;
  background: var(--ap-surface); border-radius: var(--ap-radius-btn);
  box-shadow: inset 0 0 0 1px var(--ap-border), 0 12px 32px var(--ap-shadow);
}
.ap-drop[hidden] { display: none; }
.ap-drop--menu {
  width: 700px; max-width: calc(100vw - 32px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 16px; padding: 16px 18px;
}
.ap-drop--menu a {
  display: flex; align-items: center; gap: 8px; padding: 4px 6px;
  font-size: 14px; font-weight: 600; color: var(--ap-text);
}
.ap-drop--menu a::before {
  content: ""; width: 8px; height: 8px; flex: none;
  border-radius: 50%; background: var(--ap-accent);
}
.ap-drop--service { right: 0; left: auto; width: 280px; padding: 15px 0; }
.ap-drop--service a {
  display: block; padding: 8px 20px; font-size: 14px; font-weight: 600; color: var(--ap-text);
}
.ap-drop a:hover { color: var(--ap-link); }

/* ═══ МОСТ К ВЫВОДУ ДВИЖКА ═══════════════════════════════════════════════
   DLE рисует часть блоков сам и своих классов не даёт: постраничная
   навигация, ссылки на разделы, звёзды рейтинга, галерея скриншотов.
   Здесь они подгоняются под оформление темы по структуре, а не по классам.
   ════════════════════════════════════════════════════════════════════════ */

/* Постраничная навигация: {pages} отдаёт голые <a> и <span> */
.ap-pager__pages a,
.ap-pager__pages span:not(.ap-pager__dots) {
  width: 36px; height: 36px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--ap-radius-pill);
  background: var(--ap-surface); box-shadow: inset 0 0 0 1px var(--ap-border);
  font-size: 13px; line-height: 18px; font-weight: 700; color: var(--ap-text);
}
.ap-pager__pages span.pnext,
.ap-pager__pages span.pprev { background: none; box-shadow: none; }
.ap-pager__pages > span:not([class]) {
  background: var(--ap-accent); box-shadow: none; color: #FFFFFF;
}

/* Ссылки на разделы под описанием — те же чипы */
.ap-tagsrow a {
  display: inline-flex; align-items: center;
  padding: 9px 14px; border-radius: var(--ap-radius-pill);
  background: var(--ap-surface); box-shadow: inset 0 0 0 1px var(--ap-border);
  font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ap-text);
}
.ap-tagsrow a:hover { background: var(--ap-accent); box-shadow: inset 0 0 0 1px var(--ap-accent); color: #FFFFFF; }

/* Звёзды рейтинга: движок отдаёт свой виджет */
.ap-app__ratecol .rating,
.ap-app__ratecol .unit-rating { display: flex; align-items: center; gap: 2px; height: 16px; }

/* Галерея скриншотов из поля-imagegalery */
.ap-shots a {
  flex: none; width: 210px; height: 118px; overflow: hidden;
  border-radius: 12px; box-shadow: inset 0 0 0 1px var(--ap-border);
  scroll-snap-align: start; background: var(--ap-surface-2); display: block;
}
.ap-shots img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-shots br { display: none; }

/* Редактор комментариев и подписка */
.ap-form__editor { width: 100%; }
.ap-form__editor textarea { width: 100%; min-height: 120px; }
.ap-form__bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ap-form__sub { font-size: 13px; color: var(--ap-text-muted); }

/* Комментарий */
.ap-cmt {
  display: flex; gap: 12px; padding: 16px; margin-bottom: 12px;
  background: var(--ap-surface); border-radius: var(--ap-radius-card);
  box-shadow: inset 0 0 0 1px var(--ap-border);
}
.ap-cmt__ava {
  width: 44px; height: 44px; flex: none; overflow: hidden;
  border-radius: var(--ap-radius-pill); background: var(--ap-surface-2);
}
.ap-cmt__ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-cmt__col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ap-cmt__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ap-cmt__author { font-size: 15px; font-weight: 800; }
.ap-cmt__date { font-size: 12px; line-height: 16px; color: var(--ap-text-muted); }
.ap-cmt__text { font-size: 14px; line-height: 22px; }
.ap-cmt__foot { font-size: 12px; line-height: 16px; color: var(--ap-text-muted); }

/* Вход в шапке */
.ap-hd__user { grid-area: 1 / 5; position: relative; display: flex; align-items: center; }
.ap-drop--login {
  right: 0; left: auto; width: 280px; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.ap-drop--login .ap-fld__c { background: var(--ap-bg); }
.ap-drop__save { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ap-text-muted); }
.ap-drop__links { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; }

/* Стол заказов: модуль отдаёт настоящую таблицу */
.ap-od__table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--ap-surface); }
.ap-od__cell { height: 52px; padding: 0 8px; background: var(--ap-surface); vertical-align: middle; }
.ap-od__row + .ap-od__row .ap-od__cell { box-shadow: inset 0 1px 0 var(--ap-border); }
.ap-od__cell--check { width: 32px; }
.ap-od__cell--st { width: 30px; padding-left: 16px; }
.ap-od__cellcnt { width: 50px; padding-right: 16px; text-align: right; }
.ap-od__cnt { display: inline-flex; }
.ap-od__cnt.is-plus { background: var(--ap-accent-soft); color: var(--ap-accent); }
.ap-od__empty { height: 64px; text-align: center; font-size: 15px; font-weight: 600; color: var(--ap-text-muted); }
.ap-od__form { display: flex; flex-direction: column; gap: 12px; }
.ap-od__checks { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.ap-od__formbtns { display: flex; flex-wrap: wrap; gap: 10px; }
.ap-od__mass { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 13px; }

/* Крошки внутри градиента: отдельной светлой полосой над героем они
   выглядели чужой белой прослойкой между меню и фоном с маскотом. */
.ap-hero--crumbs { padding-top: 16px; }
.ap-hero__crumbs .ap-icon { color: #FFFFFFCC; }
.ap-hero__crumbs a { color: #FFFFFF; }
.ap-hero__crumbs a:hover { text-decoration: underline; }

/* ══════════════════════ ДЕСКТОП ══════════════════════ */
@media (min-width: 1024px) {
  :root { --ap-side: max(80px, calc((100% - var(--ap-content)) / 2)); }
  .ap-wrap { padding-inline: var(--ap-side); }

  .ap-hd__bar {
    grid-template-columns: auto auto 1fr auto auto;
    grid-template-rows: 72px;
    column-gap: 24px; padding: 0 var(--ap-side);
  }
  .ap-hd__burger { display: none; }

  .ap-hd .ap-logo { grid-area: 1 / 1; }
  .ap-hd .ap-logo__name { font-size: 17px; }

  .ap-hd__caption {
    grid-area: 1 / 2; display: flex; align-items: center;
    padding-left: 20px; font-size: 12px; line-height: 1.4; color: var(--ap-text-muted);
  }
  .ap-hd__caption::before {
    content: ""; width: 1px; height: 40px; margin-right: 18px;
    background: var(--ap-border);
  }

  .ap-hd .ap-search { grid-area: 1 / 3; height: 44px; gap: 10px; padding: 0 16px; }
  .ap-hd .ap-search__icon { width: 18px; height: 18px; }
  .ap-hd .ap-search__input { font-size: 15px; }

  .ap-hd__theme { grid-area: 1 / 4; justify-self: center; }
  .ap-hd__theme .ap-icon { width: 22px; height: 22px; }

  .ap-hd__login { grid-area: 1 / 5; height: 42px; padding: 0 20px; font-size: 14px; }

  .ap-nav {
    display: flex; align-items: center; gap: 26px;
    height: 46px; padding: 0 var(--ap-side); background: var(--ap-surface-2);
  }
  .ap-nav__link {
    display: flex; align-items: center; gap: 5px;
    font-size: 14px; font-weight: 600; color: var(--ap-text);
  }
  .ap-nav__link .ap-icon { width: 13px; height: 13px; color: var(--ap-text-muted); }
  .ap-nav__link.is-active { color: var(--ap-accent); font-weight: 700; }
  .ap-nav__more {
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    border-radius: 8px; color: var(--ap-text-muted);
  }
  .ap-nav__more .ap-icon { width: 18px; height: 18px; }

  /* Подвал: порядок блоков другой, но разметка та же — раскрываем строку */
  .ap-ft__in { flex-direction: row; align-items: center; gap: 20px; padding: 30px var(--ap-side); }
  .ap-ft__row { display: contents; }
  .ap-ft__soc { order: 1; }
  .ap-ft__text { order: 2; flex: 1; font-size: 14px; }
  .ap-ft__copy { display: inline; margin-bottom: 0; }
  .ap-ft__li { order: 3; }

  /* ─── Герой: широкий экран ─────────────────────────────────────────── */
  .ap-hero {
    padding: 56px var(--ap-side) 148px;
    background-image: linear-gradient(-135.048deg, #16A88F 24.905%, #1D5C8F 75.095%);
  }
  .ap-hero__ring2  { width: 560px; height: 560px; left: 800px; top: 65px; }
  .ap-hero__ring1  { width: 480px; height: 480px; left: 840px; top: 105px; }
  .ap-hero__circle { width: 400px; height: 400px; left: 880px; top: 145px; }
  .ap-hero__mascot { display: block; position: absolute; left: 970px; top: 55px;
    width: 320px; height: 320px; object-fit: contain; }

  .ap-hero__in { width: 900px; gap: 22px; }

  .ap-hero__h1 {
    flex-direction: row; align-items: center; gap: 12px;
    font-size: 44px; line-height: 48px;
  }
  .ap-hero__hl { padding: 4px 14px; border-radius: 8px; }

  .ap-hero__usp { gap: 10px; }
  .ap-hero__usp li { align-items: center; gap: 10px; font-size: 18px; line-height: 25px; }
  .ap-hero__usp .ap-icon { width: 20px; height: 20px; }

  .ap-hero__cats {
    flex-wrap: wrap; gap: 10px;
    overflow: visible; margin-inline: 0; padding-inline: 0;
  }
  .ap-hero .ap-chip--hero { font-size: 14px; }

  .ap-hero__more { font-size: 15px; line-height: 20px; }
  .ap-hero__more .ap-icon { width: 17px; height: 17px; }

  .ap-fresh {
    margin-top: -100px; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px;
    padding: 28px var(--ap-side) 12px;
  }

  /* ─── Секции главной: широкий экран ────────────────────────────────── */
  .ap-sec { gap: 18px; padding: 32px var(--ap-side) 16px; }
  .ap-sec--tint {
    padding: 32px var(--ap-side); color: var(--ap-text);
    background-image: none; background: var(--ap-surface-2);
  }
  .ap-sec--last { padding-bottom: 40px; }

  .ap-sec__head { gap: 12px; }
  .ap-sec__h2 { font-size: 26px; }
  .ap-sec__arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: var(--ap-radius-pill);
    background: var(--ap-surface); box-shadow: inset 0 0 0 1px var(--ap-border);
    color: var(--ap-text);
  }
  .ap-sec__arrow .ap-icon { width: 17px; height: 17px; }
  .ap-sec__all { gap: 5px; font-size: 14px; line-height: 19px; color: var(--ap-link); }
  .ap-sec__all .ap-icon { width: 15px; height: 15px; }

  .ap-strip { gap: 16px; margin-inline: 0; padding-inline: 0; }
  .ap-strip > * { width: 308px; }

  .ap-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; row-gap: 18px; }
  .ap-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 16px; row-gap: 18px; }

  .ap-tile__poster { height: 150px; }
  .ap-tile__body { gap: 4px; padding: 14px; }
  .ap-tile__title { font-size: 16px; line-height: 22px; }
  .ap-tile__count { font-size: 12px; line-height: 16px; }

  /* ─── Карточка приложения: широкий экран ───────────────────────────── */
  .ap-crumbs { gap: 8px; padding: 22px var(--ap-side) 122px; font-size: 14px; }
  .ap-crumbs .ap-icon { width: 16px; height: 16px; }

  /* Две колонки: содержимое 908 и боковая 340 при контейнере 1280 */
  .ap-page {
    margin-top: -100px; padding: 0 var(--ap-side) 48px;
    display: grid; grid-template-columns: minmax(0, 908fr) minmax(0, 340fr);
    column-gap: 32px; align-items: start;
  }
  .ap-page__main { display: flex; flex-direction: column; gap: 24px; }
  .ap-page__side { display: flex; flex-direction: column; gap: 20px; }

  .ap-app { gap: 18px; padding: 22px; }

  .ap-app__top { gap: 20px; }
  .ap-app__icon { width: 118px; height: 118px; border-radius: 26px; }
  .ap-app__titles { gap: 10px; }
  .ap-app__h1 { font-size: 32px; line-height: 38px; }

  .ap-app__rating { gap: 14px; }
  .ap-app__score { width: 54px; height: 54px; font-size: 22px; }
  .ap-app__ratecol { gap: 4px; }
  .ap-app__ratecap,
  .ap-app__votes { font-size: 13px; line-height: 18px; }

  .ap-app__spec {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px;
  }
  .ap-app__specgroup { display: flex; flex-direction: column; }

  .ap-app__bar { height: 34px; }
  .ap-app__bartext { font-size: 13px; line-height: 34px; }

  .ap-app__actions { flex-wrap: nowrap; align-items: center; gap: 12px; }
  .ap-app__dl { flex: 0 0 320px; }
  .ap-abtn {
    flex: 0 0 auto; height: 50px; padding: 0 18px; gap: 8px;
    font-size: 13px; line-height: 18px;
  }
  .ap-abtn .ap-icon { width: 16px; height: 16px; }

  /* ─── Внутренняя страница: широкий экран ───────────────────────────── */
  .ap-sect { gap: 14px; }
  .ap-sect__h2 { font-size: 24px; }
  .ap-page__side .ap-sect { gap: 12px; }
  .ap-page__side .ap-sect__h2 { font-size: 17px; }

  .ap-box { padding: 22px; }

  /* Скриншоты становятся обычным рядом: три кадра делят ширину поровну */
  .ap-shots { gap: 14px; margin-inline: 0; padding-inline: 0; overflow: visible; }
  .ap-shot { flex: 1 1 0; width: auto; height: 170px; }

  .ap-prose { gap: 16px; }
  .ap-prose p { font-size: 15px; line-height: 24px; }
  .ap-prose h3 { font-size: 18px; }
  /* В макете особенности заполняются по колонкам, а не по строкам:
     первые три слева, остальные справа. Многоколоночная раскладка делает
     ровно это и не ломается при другом числе пунктов. */
  .ap-feats { display: block; columns: 2; column-gap: 24px; }
  .ap-feats li { break-inside: avoid; margin-bottom: 10px; }
  .ap-feats li:last-child { margin-bottom: 0; }

  .ap-tagsrow {
    flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0;
  }
  .ap-tagsrow__label { font-size: 13px; line-height: 18px; }
  .ap-chip--sm { font-size: 13px; line-height: 18px; }

  .ap-faq__i { padding: 18px; }
  .ap-faq__q { gap: 12px; font-size: 16px; line-height: 22px; }
  .ap-faq__a { margin-top: 9px; font-size: 14px; line-height: 21px; }

  .ap-author { gap: 16px; }
  .ap-author__h { font-size: 18px; }
  .ap-author__row { gap: 16px; }
  .ap-author__ava { width: 64px; height: 64px; }
  .ap-author__col { gap: 5px; }
  .ap-author__name { gap: 10px; }
  .ap-author__n { font-size: 17px; }
  .ap-online { padding: 4px 9px; }
  .ap-author__pos { font-size: 13px; line-height: 18px; }
  .ap-author__bio { font-size: 14px; line-height: 21px; }

  .ap-ad { height: 120px; }

  /* Блок загрузки: карточка файла раскладывается в строку, кнопка справа */
  /* На широком экране у заголовка загрузки нет иконки-квадрата — только H2 */
  .ap-dl__head { display: contents; }
  .ap-dl__ico { display: none; }
  .ap-dl__share { font-size: 14px; }
  .ap-file { flex-direction: row; align-items: center; gap: 22px; padding: 18px; }
  .ap-file__left { display: flex; flex-direction: column; gap: 11px; flex: 1; min-width: 0; }
  .ap-file__head { gap: 6px 7px; padding-left: 61px; min-height: 48px; }
  .ap-file__ext { width: 48px; height: 48px; }
  .ap-file__ext .ap-icon { width: 17px; height: 17px; }
  .ap-file__title { font-size: 17px; line-height: 23px; }
  .ap-hack { padding: 4px 10px; }
  /* чипы размера встают в строку к бейджам */
  .ap-file__meta { display: contents; }
  .ap-file__feats { gap: 7px; }
  .ap-trust { align-self: flex-start; padding: 8px 12px; }
  .ap-file__btn { flex: 0 0 240px; }

  .ap-tg { height: 50px; gap: 10px; font-size: 15px; }

  .ap-tabs { width: fit-content; }
  .ap-tabs__b { flex: 0 0 auto; height: 42px; padding: 0 20px; font-size: 14px; }

  .ap-panel { gap: 16px; padding: 20px; }
  .ap-note { gap: 10px; padding: 14px; font-size: 14px; line-height: 20px; }
  .ap-panel__cols { flex-direction: row; gap: 28px; }
  .ap-steps { flex: 1; min-width: 0; }
  .ap-steps h3 { font-size: 16px; }
  .ap-steps li { gap: 11px; font-size: 14px; line-height: 20px; }
  .ap-steps__n { width: 26px; height: 26px; font-size: 13px; }

  .ap-form { gap: 12px; padding: 20px; }
  .ap-form__row { flex-direction: row; gap: 12px; }
  .ap-input { height: 46px; padding: 0 14px; font-size: 14px; }
  .ap-input--area { height: 96px; padding: 14px; }
  .ap-submit { align-self: flex-start; height: 46px; padding: 0 28px; font-size: 15px; }

  /* Боковая колонка: свои раскладки списков, а не как на главной */
  .ap-page__side .ap-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ap-page__side .ap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 12px; }
  .ap-page__side .ap-card--list .ap-tags__ver,
  .ap-page__side .ap-card--list .ap-tags__size { font-size: 12px; line-height: 16px; }

  /* ─── Страница загрузки: широкий экран ─────────────────────────────── */
  .ap-dlpage { margin-top: -100px; gap: 24px; padding: 0 var(--ap-side) 48px; }

  .ap-dl2 { gap: 20px; padding: 24px; }
  .ap-dl2__top { gap: 24px; }
  .ap-dl2__icon { width: 118px; height: 118px; border-radius: 26px; }

  .ap-dl2__bar { height: 44px; }
  .ap-dl2__label { font-size: 14px; line-height: 19px; }

  /* На широком экране «Вернуться назад» стоит первой, обе кнопки по контенту */
  .ap-dl2__controls { flex-direction: row; align-items: center; gap: 14px; }
  .ap-dl2__back { order: 1; height: 52px; padding: 0 22px; gap: 9px; }
  .ap-dl2__go { order: 2; }

  #s-fresh2 .ap-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; row-gap: 16px;
  }

  /* ─── Раздел: широкий экран ────────────────────────────────────────── */
  .ap-speedbar { gap: 8px; padding: 14px var(--ap-side) 0; font-size: 13px; line-height: 18px; }

  .ap-hero--cat .ap-hero__ring2  { top: 58px; }
  .ap-hero--cat .ap-hero__ring1  { top: 98px; }
  .ap-hero--cat .ap-hero__circle { top: 138px; }
  .ap-hero--cat .ap-hero__mascot { top: 48px; }
  .ap-hero--cat .ap-hero__in { gap: 22px; }

  .ap-catpage { margin-top: -100px; gap: 20px; padding: 28px var(--ap-side) 32px; }
  #s-listing { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 16px; row-gap: 16px; }

  .ap-pager { gap: 18px; }
  .ap-pager__more { width: 360px; }
  .ap-pager__p { width: 38px; height: 38px; font-size: 14px; line-height: 19px; }
  .ap-pager__dots { font-size: 14px; line-height: 19px; }

  .ap-cloud { gap: 10px; }

  .ap-hero--sub .ap-hero__in { gap: 22px; }
  .ap-hero__desc { font-size: 16px; line-height: 25px; }

  .ap-catpage--sub { gap: 20px; }
  .ap-catpage--sub #s-listing {
    grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; row-gap: 16px;
  }

  .ap-searchpage { margin-top: -100px; padding: 0 var(--ap-side) 8px; }
  .ap-sform { gap: 18px; padding: 28px; }
  .ap-sform__h { font-size: 26px; line-height: 36px; }
  .ap-sform__row { display: flex; gap: 12px; }
  .ap-sform__input { flex: 1; min-width: 0; height: 48px; padding: 0 16px; }
  .ap-sform__go { height: 48px; padding: 0 26px; }
  .ap-sform__adv { height: 48px; padding: 0 22px; font-size: 15px; }

  .ap-catpage--search { margin-top: 0; padding: 28px var(--ap-side) 32px; }

  .ap-hero--top { padding: 22px var(--ap-side) 122px; }
  .ap-hero--top .ap-hero__in { width: 100%; gap: 22px; }
  .ap-hero--top .ap-hero__h1 { font-size: 30px; line-height: 41px; }
  .ap-hero__crumbs { gap: 8px; font-size: 14px; line-height: 19px; }

  .ap-catpage--top { margin-top: 0; padding: 28px var(--ap-side) 32px; }

  .ap-tagspage { margin-top: -100px; padding: 28px var(--ap-side) 40px; }

  .ap-hero--short .ap-hero__ring2  { top: 30px; }
  .ap-hero--short .ap-hero__ring1  { top: 70px; }
  .ap-hero--short .ap-hero__circle { top: 110px; }
  .ap-hero--short .ap-hero__mascot { top: 20px; }

  .ap-staticpage { margin-top: -100px; padding: 32px var(--ap-side) 40px; }
  .ap-article { gap: 18px; padding: 36px; }
  .ap-article h1 { font-size: 30px; line-height: 36px; }
  .ap-article h2 { font-size: 22px; line-height: 29px; }
  .ap-article h3 { font-size: 17px; line-height: 24px; }
  .ap-article p  { font-size: 16px; line-height: 26px; }
  .ap-article__list { gap: 18px; }
  .ap-article__list li { font-size: 16px; line-height: 26px; }
  .ap-article__m { font-size: 16px; line-height: 22px; }

  .ap-formpage { margin-top: -100px; padding: 32px var(--ap-side) 40px; }
  .ap-fbform { width: 720px; gap: 18px; padding: 36px; }
  .ap-fbform__h { font-size: 30px; }
  .ap-fld__captcha { flex-wrap: nowrap; }

  .ap-od { gap: 20px; padding: 36px; }
  .ap-od__h { font-size: 30px; }
  .ap-od__legend { gap: 22px; }
  .ap-od__scroll { overflow: visible; }
  .ap-od__table { min-width: 0; }

  .ap-errpage { margin-top: -100px; padding: 32px var(--ap-side) 60px; }
  .ap-msg--err { flex-direction: row; gap: 18px; padding: 32px; width: 720px; }
  .ap-msg--err .ap-msg__ico { width: 52px; height: 52px; }
  .ap-msg--err .ap-msg__ico .ap-icon { width: 26px; height: 26px; }
  .ap-msg--err .ap-msg__col { gap: 8px; }
  .ap-msg--err .ap-msg__h { font-size: 22px; }
  .ap-msg--err .ap-msg__t { font-size: 16px; line-height: 26px; }

  .ap-hero--crumbs { padding-top: 22px; }
}

/* ─── Служебные страницы движка ────────────────────────────────────────────
   Их нет в макете: регистрация, профиль, ЛС, статистика, добавление
   публикации, восстановление пароля. Собраны из тех же кирпичей, что и
   форма обратной связи, чтобы не заводить второй визуальный язык. */
.ap-serv {
  display: flex; flex-direction: column; gap: 16px; padding: 20px;
  background: var(--ap-surface); border-radius: var(--ap-radius-card);
}
.ap-serv + .ap-serv { margin-top: 16px; }
.ap-serv__h { font-size: 22px; line-height: normal; font-weight: 800; }
.ap-serv__sub { font-size: 16px; line-height: 22px; font-weight: 800; }
.ap-serv__note,
.ap-fbform__note { font-size: 14px; line-height: 22px; color: var(--ap-text-muted); }
.ap-serv__note a, .ap-fbform__note a, .ap-serv__list a { color: var(--ap-link); }

.ap-serv__list { display: flex; flex-direction: column; gap: 8px; }
.ap-serv__list li { font-size: 14px; line-height: 22px; color: var(--ap-text-muted); }
.ap-serv__list b { color: var(--ap-text); font-weight: 700; }

.ap-serv__cols { display: flex; flex-direction: column; gap: 16px; }
.ap-serv__col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* Таблицы движка шире мобильного экрана — прокручиваются внутри своей рамки */
.ap-serv__scroll { overflow-x: auto; }
.ap-serv__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ap-serv__table td, .ap-serv__table th { padding: 10px 12px; text-align: left; white-space: nowrap; }
.ap-serv__table tr + tr td { box-shadow: inset 0 1px 0 var(--ap-border); }

.ap-serv__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-serv__tabs a, .ap-serv__tabs span {
  display: inline-flex; align-items: center; height: 38px; padding: 0 16px;
  border-radius: var(--ap-radius-pill); background: var(--ap-bg);
  font-size: 14px; font-weight: 700; color: var(--ap-text); text-decoration: none;
}
.ap-serv__tabs a:hover { background: var(--ap-brand-soft); }

.ap-serv__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.ap-serv__vote { display: flex; flex-direction: column; gap: 16px; }

.ap-fbform__aux {
  align-self: flex-start; height: 40px; padding: 0 18px;
  display: inline-flex; align-items: center; border-radius: var(--ap-radius-btn);
  background: var(--ap-bg); color: var(--ap-text);
  font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer;
}
.ap-fbform__aux:hover { background: var(--ap-brand-soft); }
.ap-fld__hint { font-size: 13px; line-height: 19px; color: var(--ap-text-muted); }
.ap-fld__c--file { height: auto; padding: 12px 16px; }
.ap-editor { display: flex; flex-direction: column; gap: 8px; }
.ap-xf { width: 100%; }
.ap-xf td { padding: 6px 0; font-size: 14px; vertical-align: top; }

.ap-chk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.ap-chk--group { flex-direction: column; align-items: flex-start; }
.ap-chk label { cursor: pointer; }

.ap-regsoc { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-regsoc__i {
  display: inline-flex; align-items: center; height: 38px; padding: 0 16px;
  border-radius: var(--ap-radius-pill); background: var(--ap-bg);
  font-size: 14px; font-weight: 700; color: var(--ap-text); text-decoration: none;
}
.ap-regsoc__i:hover { background: var(--ap-brand-soft); }

/* Профиль пользователя и всплывающая карточка */
.ap-us { display: flex; flex-direction: column; gap: 16px; }
.ap-us__side { display: flex; align-items: center; gap: 12px; }
.ap-us__foto { width: 72px; height: 72px; flex: none; border-radius: var(--ap-radius-btn); overflow: hidden; background: var(--ap-bg); }
.ap-us__foto img { width: 100%; height: 100%; object-fit: cover; }
.ap-us__state { font-size: 13px; font-weight: 700; color: var(--ap-text-muted); }
.ap-us__state.is-on { color: var(--ap-accent); }
.ap-us__body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ap-us__nums { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ap-us__num {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 16px;
  border-radius: var(--ap-radius-btn); background: var(--ap-bg);
  font-size: 13px; color: var(--ap-text-muted);
}
.ap-us__num b { font-size: 17px; font-weight: 800; color: var(--ap-text); }
.ap-us__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ap-us__sign { font-size: 14px; line-height: 22px; color: var(--ap-text-muted); }

/* Личные сообщения */
.ap-pm { display: flex; gap: 12px; }
.ap-pm__foto { width: 56px; height: 56px; flex: none; border-radius: var(--ap-radius-btn); overflow: hidden; background: var(--ap-bg); }
.ap-pm__foto img { width: 100%; height: 100%; object-fit: cover; }
.ap-pm__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ap-pm__meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--ap-text-muted); }
.ap-pm__meta b { color: var(--ap-text); }
.ap-pm__text { font-size: 14px; line-height: 22px; }
.ap-pm__acts { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; }

/* Опросы */
.ap-vote {
  display: flex; flex-direction: column; gap: 12px; padding: 20px;
  background: var(--ap-surface); border-radius: var(--ap-radius-card);
}
.ap-vote__h { font-size: 17px; line-height: 23px; font-weight: 800; }
.ap-vote__cap, .ap-vote__total { font-size: 13px; color: var(--ap-text-muted); }
.ap-vote__list { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.ap-vote__btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* Вложения */
.ap-att {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border-radius: var(--ap-radius-btn); background: var(--ap-bg);
}
.ap-att__ext { font-size: 13px; font-weight: 800; color: var(--ap-brand); }
.ap-att__col { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ap-att__name { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-att__meta { font-size: 13px; color: var(--ap-text-muted); }
.ap-att__go {
  flex: none; height: 40px; padding: 0 18px; display: inline-flex; align-items: center;
  border-radius: var(--ap-radius-btn); background: var(--ap-accent);
  color: #FFFFFF; font-size: 14px; font-weight: 700; text-decoration: none;
}
.ap-att__online, .ap-att__deny { font-size: 14px; line-height: 22px; color: var(--ap-text-muted); }

/* Подсказки быстрого поиска */
.ap-fs { display: flex; align-items: center; gap: 12px; padding: 10px 12px; text-decoration: none; color: var(--ap-text); }
.ap-fs:hover { background: var(--ap-bg); }
.ap-fs__img { width: 44px; height: 44px; flex: none; border-radius: 10px; overflow: hidden; background: var(--ap-bg); }
.ap-fs__img img { width: 100%; height: 100%; object-fit: cover; }
.ap-fs__col { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ap-fs__t { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-fs__m { font-size: 12px; line-height: 17px; color: var(--ap-text-muted); }

/* Информер и топ-новости — блоки для внешних вставок движка */
.ap-informer { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.ap-informer__d { color: var(--ap-text-muted); }
.ap-top { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ap-text); }
.ap-top__img { width: 44px; height: 44px; flex: none; border-radius: 10px; overflow: hidden; }
.ap-top__img img { width: 100%; height: 100%; object-fit: cover; }
.ap-top__t { font-size: 14px; font-weight: 700; }

/* Печать и страница отключённого сайта */
.ap-print__bar { display: flex; gap: 16px; margin-bottom: 16px; font-size: 14px; }
.ap-print__bar button { background: none; color: var(--ap-link); cursor: pointer; font: inherit; }
.ap-offline { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 16px; }
@media print {
  .ap-print__bar { display: none; }
}

@media (min-width: 1024px) {
  .ap-serv { gap: 20px; padding: 28px 32px; }
  .ap-serv__h { font-size: 30px; }
  .ap-serv__sub { font-size: 18px; line-height: 24px; }
  .ap-serv__cols { flex-direction: row; gap: 32px; }
  .ap-serv__col { flex: 1; }
  .ap-serv__list li { font-size: 15px; line-height: 24px; }
  .ap-us { flex-direction: row; gap: 24px; }
  .ap-us__side { flex-direction: column; align-items: flex-start; flex: none; width: 120px; }
  .ap-us__foto { width: 120px; height: 120px; }
  .ap-us__body { flex: 1; }
}

/* ─── Вывод движка внутри карточки: подгон под макет ──────────────────────
   Звёзды рейтинга, галерея скриншотов и списки в тексте приходят из DLE
   своей разметкой — здесь она приводится к виду макета без правки контента. */

/* Рейтинг: как в старой теме — каждая звезда свой li со ссылкой, текущая
   оценка лежит поверх отдельным слоем и не ловит клики. Шаг 18px, звезда 16. */
.ap-app__ratecol .rating { display: block; }
.ap-app__ratecol .unit-rating {
  position: relative; display: flex; width: 88px; height: 16px;
  margin: 0; padding: 0; list-style: none; gap: 0;
}
.ap-app__ratecol .unit-rating li {
  position: relative; width: 18px; height: 16px; margin: 0; padding: 0;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 24' fill='none' stroke='%23DBE3EE' stroke-width='2' stroke-linejoin='round'><path d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/></svg>") 0 0 / 18px 16px no-repeat;
}
.ap-app__ratecol .unit-rating li a {
  display: block; width: 18px; height: 16px; text-indent: -9999px; overflow: hidden; cursor: pointer;
}
.ap-app__ratecol .unit-rating .current-rating {
  position: absolute; left: 0; top: 0; height: 16px; z-index: 1; pointer-events: none;
  text-indent: -9999px; overflow: hidden;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 24' fill='%23F5A524' stroke='%23F5A524' stroke-width='2' stroke-linejoin='round'><path d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/></svg>") 0 0 / 18px 16px repeat-x;
}
/* наведение: звёзды до курсора включительно заливаются */
.ap-app__ratecol .unit-rating:hover li { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 24' fill='%23F5A524' stroke='%23F5A524' stroke-width='2' stroke-linejoin='round'><path d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/></svg>"); }
.ap-app__ratecol .unit-rating li:hover ~ li { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 24' fill='none' stroke='%23DBE3EE' stroke-width='2' stroke-linejoin='round'><path d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/></svg>"); }
.ap-app__ratecol .unit-rating:hover .current-rating { opacity: 0; }

/* Галерея скриншотов: ul растворяется, кадры становятся детьми ленты */
.ap-shots .xfieldimagegallery { display: contents; }
.ap-shots li {
  flex: none; width: 210px; height: 118px; overflow: hidden; list-style: none;
  border-radius: 12px; box-shadow: inset 0 0 0 1px var(--ap-border);
  scroll-snap-align: start; background: var(--ap-surface-2);
}
.ap-shots li a { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
.ap-shots li img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Списки в описании: как «Особенности» в макете — галочка, две колонки */
.ap-prose h2 { font-size: 16px; line-height: 22px; font-weight: 800; }
.ap-prose ul { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; }
.ap-prose ul li { position: relative; padding-left: 26px; font-size: 13px; line-height: 1.45; color: var(--ap-text-muted); }
/* пункт без жирного заголовка — просто строка основного цвета */
.ap-prose ul li:not(:has(b, strong)) { font-size: 14px; line-height: 19px; color: var(--ap-text); }
.ap-prose ul li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 16px; height: 16px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316A55C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center / contain no-repeat;
}
.ap-prose ul li b, .ap-prose ul li strong { display: block; margin-bottom: 2px; font-size: 14px; line-height: 19px; font-weight: 700; color: var(--ap-text); }
/* Нумерованный список в тексте — как шаги «Как установить» в макете:
   номер в зелёном кружке, без стандартных маркеров */
.ap-prose ol { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: ap-ol; }
.ap-prose ol li { display: flex; gap: 10px; font-size: 14px; line-height: 22px; counter-increment: ap-ol; }
.ap-prose ol li::before {
  content: counter(ap-ol); width: 24px; height: 24px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--ap-radius-pill); background: var(--ap-accent-soft);
  font-size: 12px; line-height: 1; font-weight: 800; color: var(--ap-accent);
}

/* Особенности мода под кнопкой файла: список из поля → чипы с галочкой */
/* .ap-prose задаёт колонку — здесь снова ряд, иначе чипы растягиваются на всю ширину */
.ap-file__chips.ap-prose { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 7px; }
.ap-file__chips.ap-prose ul { display: contents; }
.ap-file__chips.ap-prose ul li {
  display: inline-flex; align-items: center; flex: none; width: auto; padding: 5px 10px 5px 25px;
  border-radius: var(--ap-radius-pill); background: var(--ap-brand-soft); color: var(--ap-brand);
  font-size: 11px; line-height: normal; font-weight: 700;
}
.ap-file__chips.ap-prose ul li::before {
  left: 9px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D5C8F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
}
.ap-file__chips.ap-prose ul li span, .ap-file__chips.ap-prose p { display: contents; }

@media (min-width: 1024px) {
  .ap-shots li { flex: 1 1 0; width: auto; height: 170px; }
  .ap-prose h2 { font-size: 18px; line-height: 24px; }
  .ap-prose ul { display: block; columns: 2; column-gap: 24px; }
  .ap-prose ul li { break-inside: avoid; margin-bottom: 10px; padding-left: 27px; }
  .ap-prose ul li::before { width: 17px; height: 17px; }
  .ap-prose ul li:last-child { margin-bottom: 0; }
  .ap-prose ol li { gap: 11px; font-size: 15px; line-height: 24px; }
  .ap-prose ol li::before { width: 26px; height: 26px; font-size: 13px; }
  .ap-file__chips.ap-prose ul li { margin: 0; font-size: 11px; line-height: normal; padding: 5px 10px 5px 25px; }
}

/* Вкладки «Как установить»: содержимое поля (h3 + ol) — как .ap-steps в макете */
/* .ap-prose ставит display:flex и перебивает атрибут hidden — скрытые вкладки вылезали */
.ap-panel[hidden] { display: none; }
.ap-panel__flow { display: flex; flex-direction: column; gap: 12px; }
.ap-panel__flow h3 { font-size: 15px; font-weight: 800; }
.ap-panel__flow ol { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: ap-step; }
.ap-panel__flow ol li { display: flex; gap: 10px; margin: 0; font-size: 13px; line-height: 19px; counter-increment: ap-step; }
.ap-panel__flow ol li::before {
  content: counter(ap-step); width: 24px; height: 24px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--ap-radius-pill); background: var(--ap-accent-soft);
  font-size: 12px; font-weight: 800; color: var(--ap-accent);
}
.ap-panel__flow p { font-size: 13px; line-height: 19px; }
@media (min-width: 1024px) {
  .ap-panel__flow { display: block; columns: 2; column-gap: 28px; }
  .ap-panel__flow h3 { font-size: 16px; margin-bottom: 12px; break-after: avoid; }
  .ap-panel__flow ol { margin-bottom: 12px; break-inside: avoid; }
  .ap-panel__flow ol li { gap: 11px; font-size: 14px; line-height: 20px; }
  .ap-panel__flow ol li::before { width: 26px; height: 26px; font-size: 13px; }
  .ap-panel__flow p { font-size: 14px; line-height: 20px; break-inside: avoid; }
}

/* Абзацы вида «<strong>Название.</strong> описание», разделённые <br>, — это
   список особенностей, набранный в редакторе без <ul>. Оформляю его как
   список в макете: галочка, жирный заголовок, серое описание. */
.ap-prose p:has(> strong:first-child) {
  position: relative; padding-left: 26px;
  font-size: 13px; line-height: 1.45; color: var(--ap-text-muted);
}
.ap-prose p:has(> strong:first-child) > strong {
  display: block; margin: 10px 0 2px; font-size: 14px; line-height: 19px; font-weight: 700; color: var(--ap-text);
}
.ap-prose p:has(> strong:first-child) > strong:first-child { margin-top: 0; }
.ap-prose p:has(> strong:first-child) > strong::before {
  content: ""; float: left; width: 16px; height: 16px; margin: 1px 0 0 -26px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316A55C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center / contain no-repeat;
}
.ap-prose p:has(> strong:first-child) > br { display: none; }
@media (min-width: 1024px) {
  .ap-prose p { line-height: 1.65; }
  .ap-prose p:has(> strong:first-child) { padding-left: 27px; }
  .ap-prose p:has(> strong:first-child) > strong::before { width: 17px; height: 17px; margin-left: -27px; }
}

/* ─── Уведомления движка (DLEPush) ────────────────────────────────────────
   Движок рисует их сам (оценка, закладки, жалобы), стили обычно приходят из
   engine.css старой темы. Здесь — в оформлении макета: карточка, радиус 14,
   цветная полоса-иконка слева. */
.DLEPush {
  position: fixed; right: 16px; top: 16px; z-index: 99999;
  width: calc(100% - 32px); max-width: 400px;
}
@keyframes ap-push-in { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
.DLEPush-notification.wrapper {
  position: relative; display: grid; grid-template-columns: 46px 1fr; align-items: center;
  margin-bottom: 10px; padding-right: 36px; overflow: hidden;
  background: var(--ap-surface); color: var(--ap-text);
  border-radius: var(--ap-radius-card); box-shadow: 0 10px 24px var(--ap-shadow), inset 0 0 0 1px var(--ap-border);
  animation: ap-push-in .3s ease;
}
.DLEPush-notification .DLEPush-icon {
  grid-column: 1; grid-row: 1 / span 2; align-self: stretch;
  display: flex; align-items: center; justify-content: center;
  color: #FFFFFF; background: var(--ap-brand);
}
.DLEPush-notification .DLEPush-icon svg { width: 22px; height: 22px; }
.DLEPush-notification .DLEPush-header {
  grid-column: 2; grid-row: 1; margin: 12px 0 0 14px;
  font-size: 14px; line-height: 19px; font-weight: 800;
}
.DLEPush-notification .DLEPush-header:empty { margin: 0; }
.DLEPush-notification .DLEPush-message {
  grid-column: 2; grid-row: 2; margin: 4px 14px 12px;
  font-size: 13px; line-height: 19px; color: var(--ap-text-muted);
}
.DLEPush-notification .DLEPush-header:empty + .DLEPush-message { margin-top: 12px; color: var(--ap-text); }
.DLEPush-notification .DLEPush-message ul, .DLEPush-notification .DLEPush-message li { list-style: none; margin: 0; padding: 0; }
.DLEPush-notification .DLEPush-close {
  position: absolute; top: 8px; right: 10px; padding: 4px; border: 0; background: none;
  font-size: 18px; line-height: 1; color: var(--ap-text-muted); cursor: pointer; opacity: .8;
}
.DLEPush-notification .DLEPush-close:hover { opacity: 1; }
.DLEPush-notification.wrapper.push-success .DLEPush-icon { background: var(--ap-accent); }
.DLEPush-notification.wrapper.push-warning .DLEPush-icon { background: var(--ap-star); }
.DLEPush-notification.wrapper.push-error   .DLEPush-icon { background: var(--ap-danger); }

/* ─── Действия у комментария ───────────────────────────────────────────── */
.ap-cmt__news { font-size: 13px; font-weight: 700; color: var(--ap-link); text-decoration: none; }
.ap-cmt__likes { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 12px; color: var(--ap-text-muted); }
.ap-cmt__likes .ap-icon { width: 14px; height: 14px; }
.ap-cmt__images { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ap-cmt__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.ap-cmt__acts, .ap-cmt__ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.ap-cmt__acts a, .ap-cmt__ctrl a {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; line-height: 16px; font-weight: 700; color: var(--ap-text-muted); text-decoration: none;
}
.ap-cmt__acts a:hover, .ap-cmt__ctrl a:hover { color: var(--ap-brand); }
.ap-cmt__acts .ap-icon { width: 14px; height: 14px; }
.ap-cmt__ip { font-size: 12px; color: var(--ap-text-muted); }

/* Ссылку «В избранное» генерирует движок внутри кнопки — наследует её вид */
.ap-abtn--fav a { color: inherit; text-decoration: none; }
/* [complaint] оборачивает кнопку ссылкой снаружи — растворяю её, чтобы кнопка
   осталась прямым ребёнком ряда и делила ширину как в макете */
.ap-app__actions > a:not(.ap-btn):not(.ap-abtn) { display: contents; }

/* ─── Диалоги движка (jQuery UI): жалоба, подтверждения, профиль ─────────
   Стили раньше приходили из engine.css старой темы. */
.ui-front { z-index: 1000; }
.ui-helper-hidden-accessible { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ui-widget-overlay { position: fixed; inset: 0; background: #0F1E30; opacity: .6; }
.ui-dialog {
  position: absolute; width: 600px; max-width: calc(100% - 32px) !important; overflow: hidden;
  background: var(--ap-surface); color: var(--ap-text);
  border-radius: var(--ap-radius-card); box-shadow: 0 16px 40px var(--ap-shadow);
}
.ui-dialog-titlebar {
  display: flex; align-items: center; gap: 10px; padding: 16px 20px;
  background: var(--ap-surface-2); box-shadow: inset 0 -1px 0 var(--ap-border);
}
.ui-dialog-title { flex: 1; min-width: 0; font-size: 17px; line-height: 23px; font-weight: 800; }
.ui-dialog-titlebar-close {
  position: relative; width: 32px; height: 32px; flex: none; margin-right: -6px;
  border: 0; border-radius: 8px; background: none; color: var(--ap-text-muted);
  font-size: 0; cursor: pointer;
}
.ui-dialog-titlebar-close:hover { background: var(--ap-bg); color: var(--ap-text); }
.ui-dialog-titlebar-close::before { content: "\00d7"; font-size: 24px; line-height: 32px; }
.ui-dialog-titlebar-close .ui-icon, .ui-dialog-titlebar-close .ui-button-icon-space { display: none; }
.ui-dialog-content { padding: 20px; font-size: 14px; line-height: 22px; overflow: auto; }
.ui-dialog-content textarea, .ui-dialog-content input[type=text], .ui-dialog-content select {
  width: 100% !important; padding: 12px 16px; border: 0; outline: 0;
  border-radius: var(--ap-radius-btn); background: var(--ap-bg); color: var(--ap-text);
  font: inherit; font-size: 15px;
}
.ui-dialog-content textarea { min-height: 120px; resize: vertical; }
.ui-dialog-content br + input, .ui-dialog-content br + select { margin-top: 10px; }
.ui-dialog-buttonpane { padding: 0 20px 20px; }
.ui-dialog-buttonset { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
/* движок ставит «Отмена» первой, действие — последней: зелёная только последняя */
.ui-dialog-buttonset button {
  height: 44px; padding: 0 22px; border: 0; border-radius: var(--ap-radius-btn);
  background: var(--ap-surface-2); color: var(--ap-text); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.ui-dialog-buttonset button:hover { background: var(--ap-bg); }
.ui-dialog-buttonset button:last-child { background: var(--ap-accent); color: #FFFFFF; }
.ui-dialog-buttonset button:last-child:hover { background: var(--ap-accent-hover); }
.ui-dialog .ui-resizable-handle { display: none; }
.dle-popup-userprofile .ui-dialog-content { padding: 20px; }

/* Индикатор загрузки движка */
#loading-layer {
  display: flex; align-items: center; gap: 14px; padding: 16px 20px;
  background: var(--ap-surface); color: var(--ap-text); border-radius: var(--ap-radius-card);
  box-shadow: 0 10px 24px var(--ap-shadow); font-size: 14px; font-weight: 700;
}
#loading-layer::before {
  content: ""; width: 28px; height: 28px; flex: none; border-radius: 50%;
  border: 4px solid var(--ap-border); border-top-color: var(--ap-accent);
  animation: ap-spin .9s linear infinite;
}
#loading-layer svg { display: none; }
@keyframes ap-spin { to { transform: rotate(360deg); } }

/* Счётчик LiveInternet живёт в бейдже подвала */
.ap-ft__li img { display: block; width: 29px; height: 29px; border-radius: 3px; }

/* Топ 100 приходит статической страницей с собственным героем: крошки и
   обёртка служебной страницы из main.tpl здесь не нужны. */
.ap-crumbs:has(+ .ap-staticpage > .ap-hero--top) { display: none; }
.ap-staticpage:has(> .ap-hero--top) { margin-top: 0; padding: 0; }

/* Раздел с карточками-строками (short_tpl раздела = custom-short-seo):
   сетка листинга перестраивается под них, как .ap-list */
.ap-catpage .ap-grid:has(> .ap-card--list) { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ap-catpage:has(> .ap-grid > .ap-card--list) { gap: 16px; }
@media (min-width: 1024px) {
  .ap-catpage .ap-grid:has(> .ap-card--list) { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; row-gap: 16px; }
  .ap-catpage:has(> .ap-grid > .ap-card--list) { gap: 20px; }
  .ap-hero--cat:has(+ .ap-catpage > .ap-grid > .ap-card--list) .ap-hero__in { gap: 22px; }
}

/* ─── Мобильные ленты: в макете они не навылет, а внутри полей страницы ─────
   (Scroll x=16, w=358, clip): лента скриншотов, чипы категорий в герое и
   лента «Популярное» начинаются с отступа 16 и режутся на правом поле. */
.ap-shots, .ap-hero__cats, .ap-strip, .ap-tagsrow { margin-inline: 0; padding-inline: 0; }

/* Узкие экраны (<390): «Запросить обновление» не влезает в одну строку —
   разрешаю перенос, кнопка растёт по высоте, а не вылезает за край */
/* Кнопки карточки на мобильном — колонкой во всю ширину, по просьбе заказчика:
   так текст никогда не упирается в край, на десктопе остаётся ряд из макета */
.ap-app__actions { flex-direction: column; gap: 10px; }
.ap-abtn { flex: none; width: 100%; }
@media (min-width: 1024px) {
  .ap-app__actions { flex-direction: row; }
  .ap-abtn { width: auto; }
}

/* Категории в карточках и в строке «Жанр»: названия через точку-разделитель */
.ap-cats__i { white-space: nowrap; }
.ap-cats__sep { font-style: normal; margin: 0 5px; font-weight: 800; color: var(--ap-text-muted); opacity: .7; }
.ap-card__cat .ap-cats__sep { margin: 0 4px; }

/* Пока галерея не вставлена — держим её высоту, чтобы не было сдвига */
.ap-shots--wait { min-height: 118px; }
@media (min-width: 1024px) { .ap-shots--wait { min-height: 170px; } }