/* Ретро-скин. Подключён отдельным файлом и включается атрибутом
   data-skin="retro" на <html>. Снять скин = убрать атрибут, файл при этом
   остаётся и ничего в основной вёрстке не трогает.

   Цвета. Всё, что рисует скин, ходит через токены --dp-*: окно, шахта,
   бевелы, чернила, акценты. Литералов в правилах ниже нет, поэтому схему
   можно менять целиком, не трогая вёрстку. Палитра выбирается атрибутом
   data-palette на <html>:

     dendy  (по умолчанию) — серый пластик приставки и яркие наклейки
     dos                   — янтарный монитор и тёплый уголь
     tetris                — зелёный экран и холодный графит

   Палитра из системы перевёрнута в светлую: серые окна, белые вставки и
   бевелы на светлом фоне читаются как настоящий рабочий стол. Первая
   попытка была тёмной, и цвет не передавала: в системе окно серое, а не
   чёрное, и вся узнаваемость держится на этом.

   Шрифты. Дизайн-система называет Host Grotesk и IBM Plex, но тянуть
   веб-шрифты ради превью нельзя: сайт с нулём зависимостей и грузится
   с одного сервера. Поэтому стеки начинаются с этих имён (если шрифт когда-то
   появится локально, он подхватится сам), а дальше идут системные. */

/* ---------- Денди: светлая схема по умолчанию ----------
   Серый пластик приставки, жёлтые наклейки на картриджах, синие заголовки
   окон, белые вставки для чтения. Самая «предметная» из трёх: узнается по
   серому столу и ярким цветным полям, а не по оттенку чернил. */

[data-skin="retro"] {
  color-scheme: light;

  /* поверхности */
  --dp-desktop: #c0c0c0;
  --dp-window: #d4d4d4;
  --dp-window-2: #c8c8c8;
  --dp-well: #ffffff;
  --dp-empty: #e4e4e4;
  --dp-line: #808080;
  --dp-line-2: #a0a0a0;
  --dp-shadow-inner: #808080;
  --dp-tile: rgba(0, 0, 0, .07);
  --dp-frame: #000000;
  --dp-offset: #000000;

  /* чернила */
  --dp-ink: #000000;
  --dp-ink-2: #1a1a1a;
  --dp-ink-dim: #262626;
  --dp-ink-mute: #3a3a3a;
  --dp-ink-faint: #4a4a4a;
  --dp-placeholder: #767676;

  /* бевелы */
  --dp-bevel-dark: #808080;
  --dp-bevel-light: #ffffff;
  --dp-bevel-mid: #a0a0a0;
  --dp-bevel-soft: #b4b4b4;
  --dp-well-hi: #ffffff;

  /* заголовок окна */
  --dp-titlebar: #000080;
  --dp-titlebar-ink: #ffffff;
  --dp-titlebar-ink-2: #ffffff;
  --dp-titlebar-hover: #0000a8;
  --dp-titlebar-line: #4040c8;
  --dp-titlebar-hi: #4040c8;

  /* клавиши */
  --dp-btn: #d4d4d4;
  --dp-btn-hover: #e2e2e2;
  --dp-btn-ghost: #c8c8c8;
  --dp-btn-hi: #ffffff;
  --dp-btn-lo: #808080;

  /* чипы */
  --dp-chip: #d4d4d4;
  --dp-chip-hover: #e2e2e2;
  --dp-chip-hi: #ffffff;

  /* акценты */
  --dp-accent: #6600ff;
  --dp-accent-hi: #9966ff;
  --dp-accent-hi-2: #4d00cc;
  --dp-accent-ink: #ffffff;
  --dp-accent-2: #008080;
  --dp-emphasis: #ff00b8;
  --dp-highlight: #ffff00;
  --dp-highlight-hover: #ffff66;
  --dp-highlight-hi: #ffffcc;
  --dp-highlight-lo: #b3b300;
  --dp-highlight-line: #808000;
  --dp-on-highlight: #000000;
  --dp-link-hover: #0000ff;
  --dp-ok-bg: #b8e6b8;
  --dp-ok-fg: #004d00;
  --dp-ok-line: #4a9a4a;

  /* кнопка в цветном поле первого экрана: свой токен, потому что акцент
     и цвет поля могут совпасть (в mint оба мятные) и кнопка исчезает */
  --dp-cta: #6600ff;
  --dp-cta-hi: #4d00cc;
  --dp-cta-ink: #ffffff;
  /* Красный для «удалить/скрыть»: в светлой схеме темный, в темных
     приглушенный розовый, иначе он проваливается в фон. */
  --dp-danger: #b3261e;
  --dp-danger-fill: #b3261e;
  --dp-danger-fill-hover: #931f18;

  /* шрифтовые стеки */
  --dp-display: "Host Grotesk", "Arial Black", "Segoe UI", system-ui, sans-serif;
  --dp-interface: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --dp-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  /* подмена переменных сайта: всё, что уже написано через var(), получает
     значения схемы само, без правки каждого правила */
  --bg: var(--dp-desktop);
  --field: var(--dp-window);
  --fg: var(--dp-ink);
  --fg-2: var(--dp-ink-2);
  --muted: var(--dp-ink-dim);
  --dim: var(--dp-ink-mute);
  --faint: var(--dp-ink-faint);
  --line: var(--dp-line);
  --line-2: var(--dp-line-2);
  --soft: var(--dp-window-2);
  --hover: var(--dp-chip);
  --btn-bg: var(--dp-btn);
  --btn-fg: var(--dp-ink);
  --btn-hover: var(--dp-btn-hover);
  --shadow: rgba(0, 0, 0, .35);
  --star: var(--dp-highlight);

  font-family: var(--dp-interface);
  font-size: 16px;
  background: var(--dp-desktop);
  color: var(--dp-ink);
}

/* ---------- DOS: янтарный монитор ----------
   Тёплый уголь и янтарь, как монохромный монитор на 286-м. Никакого
   пурпура и розового: два акцента, янтарь ведёт, терракота подпирает. */

[data-skin="retro"][data-palette="dos"] {
  color-scheme: dark;
  --dp-tile: rgba(255, 255, 255, .022);
  --dp-frame: #0a0806;
  --dp-offset: rgba(0, 0, 0, .55);
  --dp-desktop: #14110d;
  --dp-window: #241e18;
  --dp-window-2: #1c1712;
  --dp-well: #0f0c09;
  --dp-empty: #1a1510;
  --dp-line: #3a3229;
  --dp-line-2: #4d4237;
  --dp-shadow-inner: #120e0a;

  --dp-ink: #efe6da;
  --dp-ink-2: #d8cbbc;
  --dp-ink-dim: #b3a696;
  --dp-ink-mute: #9c8f80;
  --dp-ink-faint: #8a7d6e;
  --dp-placeholder: #7d7161;

  --dp-bevel-dark: #0a0806;
  --dp-bevel-light: #4a3f33;
  --dp-bevel-mid: #6b5c4b;
  --dp-bevel-soft: #574a3d;
  --dp-well-hi: #3a3128;

  --dp-titlebar: #2a1d12;
  --dp-titlebar-ink: #e6d3b8;
  --dp-titlebar-ink-2: #fff6e8;
  --dp-titlebar-hover: #3d2a19;
  --dp-titlebar-line: #6b4c2c;
  --dp-titlebar-hi: #5a3d22;

  --dp-btn: #3a3229;
  --dp-btn-hover: #473d32;
  --dp-btn-ghost: #2b241d;
  --dp-btn-hi: #6b5c4b;
  --dp-btn-lo: #17120e;

  --dp-chip: #332c24;
  --dp-chip-hover: #40382e;
  --dp-chip-hi: #5c5145;

  --dp-accent: #ff9d2e;
  --dp-accent-hi: #ffc06b;
  --dp-accent-hi-2: #e08a20;
  --dp-accent-ink: #1a1208;
  --dp-accent-2: #57b98c;
  --dp-emphasis: #e05c3e;
  --dp-highlight: #ffc247;
  --dp-highlight-hover: #ffd27a;
  --dp-highlight-hi: #fff0c2;
  --dp-highlight-lo: #c08a1e;
  --dp-highlight-line: #a8761a;
  --dp-on-highlight: #1a1208;
  --dp-link-hover: #ffc06b;
  --dp-ok-bg: #1f4a34;
  --dp-ok-fg: #b8f0cf;
  --dp-ok-line: #0e2a1c;
  --dp-cta: #e05c3e;
  --dp-cta-hi: #c94a2e;
  --dp-cta-ink: #1a1208;
  --dp-danger: #ff8f7a;
  --dp-danger-fill: #c2452c;
  --dp-danger-fill-hover: #9e3520;
}

/* ---------- Тетрис: зелёный экран ----------
   Почти монохром: цвет есть только у действия и у пары плашек.
   Самый спокойный из трёх, ближе к экрану карманной приставки, чем к игрушке. */

[data-skin="retro"][data-palette="tetris"] {
  color-scheme: dark;
  --dp-tile: rgba(255, 255, 255, .022);
  --dp-frame: #04090a;
  --dp-offset: rgba(0, 0, 0, .55);
  --dp-desktop: #0b1011;
  --dp-window: #161e20;
  --dp-window-2: #111a1b;
  --dp-well: #070c0d;
  --dp-empty: #101819;
  --dp-line: #263436;
  --dp-line-2: #364a4d;
  --dp-shadow-inner: #0a1112;

  --dp-ink: #e2f0ee;
  --dp-ink-2: #c3d6d3;
  --dp-ink-dim: #9fb5b2;
  --dp-ink-mute: #8ba09d;
  --dp-ink-faint: #7c918e;
  --dp-placeholder: #6d827f;

  --dp-bevel-dark: #04090a;
  --dp-bevel-light: #3a4d4f;
  --dp-bevel-mid: #526a6c;
  --dp-bevel-soft: #42575a;
  --dp-well-hi: #2c3b3d;

  --dp-titlebar: #0f2b2a;
  --dp-titlebar-ink: #b9e6df;
  --dp-titlebar-ink-2: #effffc;
  --dp-titlebar-hover: #17403d;
  --dp-titlebar-line: #2f6f68;
  --dp-titlebar-hi: #1d4f4a;

  --dp-btn: #2c3b3d;
  --dp-btn-hover: #374a4c;
  --dp-btn-ghost: #212d2f;
  --dp-btn-hi: #526a6c;
  --dp-btn-lo: #101819;

  --dp-chip: #263436;
  --dp-chip-hover: #304244;
  --dp-chip-hi: #4a6164;

  --dp-accent: #3ddc97;
  --dp-accent-hi: #8df0c4;
  --dp-accent-hi-2: #2bb87b;
  --dp-accent-ink: #04150e;
  --dp-accent-2: #7aa7ff;
  --dp-emphasis: #ff7a6b;
  --dp-highlight: #3ddc97;
  --dp-highlight-hover: #62e8ac;
  --dp-highlight-hi: #b9f7d8;
  --dp-highlight-lo: #22a06f;
  --dp-highlight-line: #1c8a5f;
  --dp-on-highlight: #04150e;
  --dp-link-hover: #8df0c4;
  --dp-ok-bg: #12402c;
  --dp-ok-fg: #a9f2cc;
  --dp-ok-line: #082418;
  --dp-cta: #ff7a6b;
  --dp-cta-hi: #e86254;
  --dp-cta-ink: #1a0a08;
  --dp-danger: #ff8f8a;
  --dp-danger-fill: #bf4438;
  --dp-danger-fill-hover: #9a332a;
}

/* Рабочий стол: мелкая плитка. Рисуется градиентами, файлов не тянет. */
[data-skin="retro"] body {
  background-color: var(--dp-desktop);
  background-image:
    linear-gradient(var(--dp-tile) 1px, transparent 1px),
    linear-gradient(90deg, var(--dp-tile) 1px, transparent 1px);
  background-size: 4px 4px;
}

[data-skin="retro"] ::selection { background: var(--dp-highlight); color: var(--dp-on-highlight); }

/* ---------- окно как базовый приём ---------- */

[data-skin="retro"] .card,
[data-skin="retro"] .guide-card,
[data-skin="retro"] .editor,
[data-skin="retro"] .guide-cta,
[data-skin="retro"] .panel,
[data-skin="retro"] .ftr {
  border: 2px solid var(--dp-frame);
  border-radius: 0;
  background: var(--dp-window);
  box-shadow:
    inset 1px 1px 0 var(--dp-bevel-light),
    inset -1px -1px 0 var(--dp-shadow-inner),
    3px 3px 0 var(--dp-offset);
}

/* ---------- шапка ---------- */

/* Шапка это серая панель, а не синий заголовок окна: синий в системе
   закреплен за заголовками, и если красить им еще и шапку, окна теряют
   смысл. Ссылки в шапке пурпурные, как в референсе. */
[data-skin="retro"] .hdr {
  background: var(--dp-window);
  border-bottom: 2px solid var(--dp-frame);
  box-shadow: inset 0 1px 0 var(--dp-bevel-light);
}
[data-skin="retro"] .hdr-in { height: 54px; }
[data-skin="retro"] .logo {
  font-family: var(--dp-display);
  font-size: 17px; letter-spacing: .02em; text-transform: uppercase;
  color: var(--dp-ink);
}
[data-skin="retro"] .hdr nav { gap: 6px; font-size: 13.5px; }
[data-skin="retro"] .hdr nav a {
  color: var(--dp-ink); padding: 6px 9px; text-decoration: none;
  border: 1px solid transparent;
}
[data-skin="retro"] .hdr nav a:hover {
  color: var(--dp-accent); background: transparent;
  border-color: transparent; text-decoration: underline;
  text-underline-offset: 3px;
}
/* Скин темный по определению: color-scheme: dark зафиксирован выше, поэтому
   переключатель темы ничего бы не менял. Прячем, чтобы не врал. */
[data-skin="retro"] .hdr nav a.theme { display: none; }

/* ---------- кнопки как клавиши ---------- */

[data-skin="retro"] .btn,
[data-skin="retro"] button.btn,
[data-skin="retro"] .save-btn,
[data-skin="retro"] button:not(.link):not(.save-btn):not(.amp-key):not(.link-btn) {
  border-radius: 0;
  border: 1px solid var(--dp-bevel-dark);
  background: var(--dp-btn);
  color: var(--dp-ink);
  box-shadow:
    inset 1px 1px 0 var(--dp-btn-hi),
    inset -1px -1px 0 var(--dp-btn-lo),
    2px 2px 0 var(--dp-bevel-dark);
  font-family: var(--dp-interface);
  font-weight: 600;
}
[data-skin="retro"] .btn:hover,
[data-skin="retro"] .save-btn:hover,
[data-skin="retro"] button:not(.link):not(.save-btn):not(.amp-key):not(.link-btn):hover {
  background: var(--dp-btn-hover); border-color: var(--dp-bevel-dark);
}
/* Нажатие: клавиша уходит вниз и бевел выворачивается. Это единственная
   анимация в скине, и она мгновенная. */
[data-skin="retro"] .btn:active,
[data-skin="retro"] .save-btn:active,
[data-skin="retro"] button:not(.link):not(.save-btn):not(.amp-key):not(.link-btn):active {
  transform: translate(2px, 2px);
  box-shadow: inset 1px 1px 0 var(--dp-btn-lo), inset -1px -1px 0 var(--dp-btn-hi);
}
[data-skin="retro"] .btn-ghost { background: var(--dp-btn-ghost); }

/* Текстовые кнопки («скрыть», «в архив», «удалить») живут рядом со ссылкой
   «изменить» и должны выглядеть так же. Клавиша с фаской в этом ряду
   читается как отдельное действие, хотя это тот же пульт строки. */
[data-skin="retro"] .link-btn {
  background: none; border: 0; box-shadow: none; padding: 2px 0;
  font-family: inherit; font-size: inherit; font-weight: 400;
  color: var(--dp-ink-mute); cursor: pointer;
}
[data-skin="retro"] .link-btn:hover {
  background: none; color: var(--dp-ink); text-decoration: underline;
}
/* Красным красим только наведение: в списке из восемнадцати строк
   постоянно горящие «скрыть» и «в архив» превращают пульт в гирлянду. */
[data-skin="retro"] .link-btn.danger { color: var(--dp-ink-mute); }
[data-skin="retro"] .link-btn.danger:hover { color: var(--dp-danger); }

/* Главное действие красим акцентом: без него первый экран остаётся серым. */
[data-skin="retro"] .hero .btn:first-of-type,
[data-skin="retro"] .hdr nav a.btn {
  background: var(--dp-highlight);
  color: var(--dp-on-highlight);
  border-color: var(--dp-highlight-line);
  box-shadow:
    inset 1px 1px 0 var(--dp-highlight-hi),
    inset -1px -1px 0 var(--dp-highlight-lo),
    2px 2px 0 var(--dp-bevel-dark);
}
[data-skin="retro"] .hero .btn:first-of-type:hover,
[data-skin="retro"] .hdr nav a.btn:hover {
  background: var(--dp-highlight-hover); color: var(--dp-on-highlight);
}

/* ---------- поля ввода: утопленная шахта ---------- */

[data-skin="retro"] input,
[data-skin="retro"] textarea,
[data-skin="retro"] select {
  border-radius: 0;
  border: 1px solid var(--dp-bevel-dark);
  background: var(--dp-well);
  color: var(--dp-ink);
  box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 var(--dp-well-hi);
  font-family: var(--dp-interface);
}
[data-skin="retro"] input::placeholder,
[data-skin="retro"] textarea::placeholder { color: var(--dp-placeholder); }
[data-skin="retro"] input:focus,
[data-skin="retro"] textarea:focus,
[data-skin="retro"] select:focus {
  outline: 2px dashed var(--dp-highlight); outline-offset: 1px;
}

/* ---------- типографика ---------- */

[data-skin="retro"] h1,
[data-skin="retro"] h2,
[data-skin="retro"] .page-h1,
[data-skin="retro"] .land-h1 {
  font-family: var(--dp-display);
  letter-spacing: -.015em;
  color: var(--dp-ink);
}
[data-skin="retro"] .hero h1 {
  text-transform: uppercase;
  font-size: clamp(38px, 6vw, 62px);
  line-height: .96;
  letter-spacing: -.03em;
}
[data-skin="retro"] .page-h1 { font-size: 34px; }
[data-skin="retro"] .page-sub { color: var(--dp-ink-dim); }
[data-skin="retro"] .hero .sub { color: var(--dp-ink-dim); font-size: 17px; }

[data-skin="retro"] a { color: var(--dp-ink); }
[data-skin="retro"] a:hover { color: var(--dp-link-hover); }

/* ---------- карточка продукта ---------- */

[data-skin="retro"] .card { padding: 0 0 14px; background: var(--dp-well); }
[data-skin="retro"] .card-shot {
  margin: 0 0 14px; border-radius: 0;
  border-bottom: 2px solid var(--dp-frame);
  box-shadow: inset 0 0 0 1px var(--dp-shadow-inner);
}
[data-skin="retro"] .card-shot.is-empty {
  background-image:
    linear-gradient(var(--dp-empty) 1px, transparent 1px),
    linear-gradient(90deg, var(--dp-empty) 1px, transparent 1px);
  background-size: 12px 12px;
  background-color: var(--dp-window-2);
}
[data-skin="retro"] .card-shot.is-empty span {
  background: var(--dp-window); color: var(--dp-ink-dim);
  border: 1px solid var(--dp-bevel-dark);
  font-family: var(--dp-display);
}
[data-skin="retro"] .card-top,
[data-skin="retro"] .card h3,
[data-skin="retro"] .card p,
[data-skin="retro"] .card-feats,
[data-skin="retro"] .card-who,
[data-skin="retro"] .card-foot { margin-left: 14px; margin-right: 14px; }
[data-skin="retro"] .card h3 {
  font-family: var(--dp-display);
  font-size: 18px; line-height: 1.24; letter-spacing: -.01em;
}
[data-skin="retro"] .card-who {
  border-top: 1px solid var(--dp-line); color: var(--dp-ink-dim);
}
[data-skin="retro"] .card-foot {
  color: var(--dp-ink-faint); font-family: var(--dp-mono); font-size: 11.5px;
}
[data-skin="retro"] .card:hover {
  box-shadow:
    inset 1px 1px 0 var(--dp-bevel-light),
    inset -1px -1px 0 var(--dp-shadow-inner),
    0 0 0 1px var(--dp-accent);
}
[data-skin="retro"] .card-save { top: 8px; right: 8px; }
[data-skin="retro"] .save-btn {
  width: 24px; height: 24px; font-size: 13px; background: var(--dp-btn);
}

/* Категория: плоское поле без скруглений и полупрозрачности. Оттенок задаёт
   переменная --h из разметки, поэтому цвет категории остается узнаваемым
   в любой палитре: в монохромных схемах он живет только в тексте и в планке
   слева, а не заливает всю плашку. */
[data-skin="retro"] .tag {
  border-radius: 0; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 6px;
  /* Категория уступает место метке «Проверено», но не обрезается заранее.
     Процентный max-width здесь врал: ширина контейнера зависит от самой
     метки, и у карточек без галочки «HR и найм» превращалось в «HR и ...».
     Теперь метка сжимается только когда места правда не хватает. */
  min-width: 0; flex-shrink: 1;
  background: hsl(var(--h, 220) 72% 88%);
  color: hsl(var(--h, 220) 52% 22%);
  border: 1px solid hsl(var(--h, 220) 45% 62%);
}
[data-skin="retro"][data-palette="dos"] .tag,
[data-skin="retro"][data-palette="tetris"] .tag {
  background: var(--dp-window-2);
  border: 1px solid var(--dp-line);
  border-left: 3px solid hsl(var(--h, 220) 55% 55%);
  color: hsl(var(--h, 220) 45% 76%);
}
[data-skin="retro"] .badge-b.b-ok {
  border-radius: 0; background: var(--dp-ok-bg); color: var(--dp-ok-fg);
  border: 1px solid var(--dp-ok-line); font-weight: 700;
  padding: 1px 5px; font-size: 11px;
}
/* Остальные бейджи: в базовой вёрстке это скругленные плашки, в скине
   скруглений нет. Цвет остается свой у каждого класса. */
[data-skin="retro"] .badge-b {
  border-radius: 0; border: 1px solid hsl(var(--h) 45% 58%);
  font-weight: 600; padding: 1px 5px;
}
[data-skin="retro"] .badge {
  border-radius: 0; border: 1px solid var(--dp-frame);
  font-weight: 600; padding: 1px 6px;
}
/* Полоса «кому подходит» и скриншоты: те же вставки, что и остальные блоки */
[data-skin="retro"] .forwhom {
  border-radius: 0;
  background: var(--dp-window);
  border: 1px solid var(--dp-frame);
  box-shadow: inset 1px 1px 0 var(--dp-bevel-light), inset -1px -1px 0 var(--dp-shadow-inner);
}
[data-skin="retro"] .forwhom b { color: var(--dp-ink); }
[data-skin="retro"] .shots img {
  border-radius: 0; border: 2px solid var(--dp-frame);
  box-shadow: 3px 3px 0 var(--dp-offset);
}
[data-skin="retro"] .price,
[data-skin="retro"] .price-lg {
  font-family: var(--dp-mono); font-weight: 700; color: var(--dp-ink);
}
[data-skin="retro"] .trial {
  border-radius: 0; background: var(--dp-highlight); color: var(--dp-on-highlight);
  font-weight: 700; padding: 1px 5px;
}

/* ---------- плитки и чипы ---------- */

[data-skin="retro"] .chip {
  border-radius: 0; border: 1px solid var(--dp-frame);
  background: var(--dp-chip); color: var(--dp-ink);
  box-shadow: inset 1px 1px 0 var(--dp-chip-hi), inset -1px -1px 0 var(--dp-bevel-dark);
}
[data-skin="retro"] .chip:hover { background: var(--dp-chip-hover); }
[data-skin="retro"] .chip.on,
[data-skin="retro"] .chip[aria-current] {
  background: var(--dp-accent); color: var(--dp-accent-ink);
  box-shadow: inset 1px 1px 0 var(--dp-accent-hi);
}

/* ---------- первый экран ---------- */

[data-skin="retro"] .hero { padding: 46px 0 34px; }
[data-skin="retro"] .hero h1 { margin-bottom: 14px; }
[data-skin="retro"] .split > * {
  border: 2px solid var(--dp-frame); border-radius: 0;
  background: var(--dp-well);
  box-shadow:
    inset 1px 1px 0 var(--dp-bevel-light),
    inset -1px -1px 0 var(--dp-shadow-inner),
    3px 3px 0 var(--dp-offset);
  padding: 16px 18px;
}
/* Две карточки-развилки красим по-разному. Так первый экран перестает быть
   серым прямоугольником и повторяет цветовые поля системы. */
[data-skin="retro"] .split > *:nth-child(1) { border-top: 3px solid var(--dp-accent-2); }
[data-skin="retro"] .split > *:nth-child(2) { border-top: 3px solid var(--dp-emphasis); }
[data-skin="retro"] .split b { font-family: var(--dp-display); font-size: 15px; }

/* Заголовки секций: короткая цветная планка перед текстом */
[data-skin="retro"] .sec-hd h2 { position: relative; }
[data-skin="retro"] .sec-hd h2::before {
  content: ""; display: inline-block; width: 10px; height: 10px;
  background: var(--dp-accent); margin-right: 9px; vertical-align: 1px;
  box-shadow: inset 1px 1px 0 var(--dp-accent-hi);
}

/* ---------- гайды ---------- */

[data-skin="retro"] .guide-card { overflow: hidden; background: var(--dp-well); }
[data-skin="retro"] .guide-cover { border-bottom: 2px solid var(--dp-frame); }
[data-skin="retro"] .guide-body b { font-family: var(--dp-display); font-size: 16px; }
[data-skin="retro"] .guide-card em { font-family: var(--dp-mono); font-size: 11.5px; }

/* ---------- разбор редакции ---------- */

[data-skin="retro"] .editor { padding: 14px 16px; background: var(--dp-well); }
[data-skin="retro"] .editor-label {
  font-family: var(--dp-mono); letter-spacing: .1em; color: var(--dp-accent);
}
[data-skin="retro"] .editor-verdict { color: var(--dp-ink); font-weight: 600; }
[data-skin="retro"] .editor-body p { color: var(--dp-ink-dim); font-size: 15px; }
[data-skin="retro"] .editor-body h2,
[data-skin="retro"] .editor-body h3 { color: var(--dp-ink); font-family: var(--dp-display); }

/* ---------- подвал ---------- */

[data-skin="retro"] .ftr {
  margin-top: 48px; padding: 18px 20px;
  color: var(--dp-ink-dim);
}
[data-skin="retro"] .ftr-links a { color: var(--dp-ink); }
[data-skin="retro"] .ftr-links a:hover { color: var(--dp-link-hover); }

/* ---------- доступность ---------- */

/* Фокус видно всегда, даже на клавишах с бевелом: пунктир акцентом поверх. */
[data-skin="retro"] a:focus-visible,
[data-skin="retro"] button:focus-visible,
[data-skin="retro"] .card:focus-visible,
[data-skin="retro"] input:focus-visible,
[data-skin="retro"] select:focus-visible,
[data-skin="retro"] textarea:focus-visible {
  outline: 2px dashed var(--dp-highlight);
  outline-offset: 2px;
}

/* Переходы в скине не нужны: клавиши реагируют мгновенно, окна не плавают. */
[data-skin="retro"] *,
[data-skin="retro"] *::before,
[data-skin="retro"] *::after {
  transition-duration: .01ms !important;
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
}
@media (prefers-reduced-motion: reduce) {
  [data-skin="retro"] * { transition: none !important; animation: none !important; }
}

/* ---------- узкие экраны ---------- */

@media (max-width: 760px) {
  [data-skin="retro"] .hero h1 { font-size: clamp(30px, 9vw, 40px); }
  /* Горизонтальный отступ обязателен: .hdr-in живет внутри .wrap, и padding: 8px 0
     съедал отступ контейнера — логотип прилипал к краю экрана. */
  [data-skin="retro"] .hdr-in { height: auto; min-height: 54px; padding: 8px 16px; flex-wrap: wrap; }
  [data-skin="retro"] .hdr nav { flex-wrap: wrap; }
  [data-skin="retro"] .card-top,
  [data-skin="retro"] .card h3,
  [data-skin="retro"] .card p,
  [data-skin="retro"] .card-feats,
  [data-skin="retro"] .card-who,
  [data-skin="retro"] .card-foot { margin-left: 12px; margin-right: 12px; }
}

/* ---------- главная: панель «что внутри», полоса, три колонки ---------- */

[data-skin="retro"] .side-win {
  border: 2px solid var(--dp-frame); border-radius: 0;
  background: var(--dp-well);
  box-shadow:
    inset 1px 1px 0 var(--dp-bevel-light),
    3px 3px 0 var(--dp-offset);
}
[data-skin="retro"] .side-win-hd {
  background: var(--dp-titlebar); color: var(--dp-titlebar-ink-2);
  border-bottom: 2px solid var(--dp-frame);
  font-family: var(--dp-mono); font-size: 11px; letter-spacing: .1em;
  box-shadow: inset 0 1px 0 var(--dp-titlebar-hi);
}
[data-skin="retro"] .side-nums { border-bottom: 1px solid var(--dp-line); }
[data-skin="retro"] .side-nums > div { border-right: 1px solid var(--dp-line); }
[data-skin="retro"] .side-nums b { font-family: var(--dp-display); }
[data-skin="retro"] .side-nums span,
[data-skin="retro"] .side-cats-hd { color: var(--dp-ink-dim); font-family: var(--dp-mono); }
[data-skin="retro"] .side-cats a {
  border-radius: 0; border: 1px solid var(--dp-frame);
  background: var(--dp-chip); color: var(--dp-ink);
  box-shadow: inset 1px 1px 0 var(--dp-chip-hi), inset -1px -1px 0 var(--dp-bevel-dark);
}
[data-skin="retro"] .side-cats a:hover { background: var(--dp-chip-hover); color: var(--dp-ink); }
[data-skin="retro"] .side-cats a b { color: var(--dp-ink-dim); }

[data-skin="retro"] .band {
  border: 2px solid var(--dp-frame); border-radius: 0;
  background: var(--dp-well);
  box-shadow:
    inset 1px 1px 0 var(--dp-bevel-light),
    inset -1px -1px 0 var(--dp-shadow-inner),
    3px 3px 0 var(--dp-offset);
}
[data-skin="retro"] .band-hd { font-family: var(--dp-mono); color: var(--dp-ink-dim); }

/* Боковые панели карточки продукта: в базовой вёрстке это прозрачная
   рамка на фоне страницы. На сером рабочем столе подпись «разработчик»
   пропадала, поэтому панель становится белой вставкой, как и остальные
   блоки скина. */
[data-skin="retro"] .box {
  border: 2px solid var(--dp-frame); border-radius: 0;
  background: var(--dp-well);
  box-shadow:
    inset 1px 1px 0 var(--dp-bevel-light),
    inset -1px -1px 0 var(--dp-shadow-inner),
    3px 3px 0 var(--dp-offset);
  padding: 16px 18px; margin-bottom: 16px;
}
[data-skin="retro"] .box h2 { font-family: var(--dp-display); }
[data-skin="retro"] .ab-hd { color: var(--dp-ink-faint); }
/* Прогресс до ста продуктов: в скине это шкала, а не скругленная полоска */
[data-skin="retro"] .goal-bar {
  height: 10px; border-radius: 0;
  background: var(--dp-empty);
  border: 1px solid var(--dp-frame);
  box-shadow: inset 1px 1px 0 var(--dp-shadow-inner);
}
[data-skin="retro"] .goal-bar span { border-radius: 0; background: var(--dp-highlight); }
[data-skin="retro"] .goal-txt { font-family: var(--dp-mono); }

[data-skin="retro"] .about-col b { font-family: var(--dp-display); }
[data-skin="retro"] .faq dt { font-family: var(--dp-display); font-size: 14.5px; }

/* Переключатель схемы: маленькое окно поверх страницы, как остальные панели */
[data-skin="retro"] .skin-switch {
  border: 2px solid var(--dp-bevel-dark); border-radius: 0;
  background: var(--dp-window);
  box-shadow:
    inset 1px 1px 0 var(--dp-bevel-light),
    3px 3px 0 rgba(0, 0, 0, .45);
  font-family: var(--dp-mono);
}
[data-skin="retro"] .skin-switch a { border-radius: 0; border: 1px solid transparent; }
[data-skin="retro"] .skin-switch a:hover {
  color: var(--dp-ink); border-color: var(--dp-bevel-dark); background: var(--dp-chip);
}
[data-skin="retro"] .skin-switch a.on {
  color: var(--dp-on-highlight); background: var(--dp-highlight);
  border-color: var(--dp-bevel-dark);
  box-shadow: inset 1px 1px 0 var(--dp-highlight-hi), inset -1px -1px 0 var(--dp-highlight-lo);
}

/* ---------- окно-герой, бегущая полоса, плеер ----------
   Главная собрана как рабочий стол: окно с заголовком, под ним цветная
   полоса, под ней плеер. Заголовок окна называет содержимое, а не украшает:
   «VibeIndex.exe» это и есть страница. */

.win {
  background: var(--dp-window);
  border: 2px solid var(--dp-frame);
  box-shadow:
    inset 1px 1px 0 var(--dp-bevel-light),
    inset -1px -1px 0 var(--dp-shadow-inner),
    4px 4px 0 var(--dp-offset);
}
.win-bar {
  display: flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 6px;
  background: var(--dp-titlebar);
  color: #fff;
  border-bottom: 2px solid var(--dp-frame);
  box-shadow: inset 0 1px 0 var(--dp-titlebar-hi);
  font-family: var(--dp-mono);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}
.win-bar b { flex: 1; text-align: center; font-weight: 700; }
.win-ico, .win-dots i {
  background: var(--dp-window);
  border: 1px solid var(--dp-frame);
  box-shadow: inset 1px 1px 0 var(--dp-bevel-light), inset -1px -1px 0 var(--dp-bevel-dark);
  flex: none;
}
.win-ico { width: 12px; height: 12px; }
.win-dots { display: flex; gap: 2px; }
.win-dots i { width: 12px; height: 11px; display: block; position: relative; }
/* Три кнопки заголовка должны читаться как в системе: тире, квадрат,
   крестик. Одни тире подряд выглядели как случайная поломка. */
.win-dots i::before,
.win-dots i::after { content: ""; position: absolute; background: #000; }
.win-dots i:nth-child(1)::before { left: 3px; right: 3px; bottom: 2px; height: 1px; }
.win-dots i:nth-child(2)::before {
  left: 3px; top: 2px; width: 5px; height: 4px;
  background: none; border: 1px solid #000;
}
.win-dots i:nth-child(3)::before,
.win-dots i:nth-child(3)::after {
  left: 50%; top: 50%; width: 7px; height: 1px;
  transform: translate(-50%, -50%) rotate(45deg);
}
.win-dots i:nth-child(3)::after { transform: translate(-50%, -50%) rotate(-45deg); }

.hero-win { margin: 34px 0 0; }
.hero-win .win-body {
  background: var(--dp-highlight);
  padding: 22px 24px 26px;
  display: grid; gap: 14px;
}
.hero-kick {
  font-family: var(--dp-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: #333300;
}
[data-skin="retro"] .hero-win h1 {
  margin: 0; color: #000;
  font-family: var(--dp-display);
  font-size: clamp(32px, 5.1vw, 60px);
  line-height: .94; letter-spacing: -.03em; text-transform: uppercase;
  /* Розовый сдвиг за буквами: главный приём из референса, на жёлтом
     он читается как печать в две краски. */
  text-shadow: 3px 3px 0 var(--dp-emphasis);
}
[data-skin="retro"] .hero-win .sub {
  margin: 0; max-width: 640px;
  color: #1f1f00; font-size: 15.5px; line-height: 1.5;
}
[data-skin="retro"] .hero-win .hero-cta { justify-content: flex-start; }
/* Главная кнопка в цветном поле не может быть того же цвета, что поле:
   берем отдельный токен --dp-cta. Цвет текста тоже токен, а не белый:
   в схеме mint акцент мятный, и белые буквы на нем давали 1.9 к 1. */
[data-skin="retro"] .hero-win .btn:first-of-type {
  background: var(--dp-cta); color: var(--dp-cta-ink);
  border-color: var(--dp-cta-hi);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .45),
    inset -1px -1px 0 var(--dp-cta-hi),
    2px 2px 0 #000;
}
[data-skin="retro"] .hero-win .btn:first-of-type:hover {
  background: var(--dp-cta-hi); color: var(--dp-cta-ink);
}

/* Полоса-тикер: розовое поле с треугольниками по краям */
.ticker {
  display: flex; align-items: center; gap: 14px;
  margin: 14px 0 30px; padding: 8px 14px;
  background: var(--dp-emphasis);
  border: 2px solid var(--dp-frame);
  box-shadow: 3px 3px 0 var(--dp-offset);
  color: #000;
  font-family: var(--dp-mono);
  font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  overflow: hidden;
}
.tick-txt {
  flex: 1; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tick-arr { flex: none; animation: tick-shift 2s steps(2, end) infinite; }
@keyframes tick-shift {
  0% { transform: translateX(0); }
  50% { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .tick-arr { animation: none; }
}

@media (max-width: 760px) {
  .hero-win .win-body { padding: 16px 16px 18px; gap: 10px; }
  .ticker { font-size: 10.5px; letter-spacing: .02em; gap: 8px; padding: 6px 10px; }
  /* На узком экране строке не хватает места и она обрывалась на «клиенты
     пишут вам н...». Пусть лучше переносится на вторую строку. */
  .tick-txt { text-align: left; white-space: normal; overflow: visible; text-overflow: clip; }
}

/* Ссылки разделов: в базовой вёрстке это скругленные пилюли, в скине
   такие формы запрещены. Делаем клавиши. */
[data-skin="retro"] .cat-links a {
  border-radius: 0;
  border: 1px solid var(--dp-frame);
  background: var(--dp-chip);
  color: var(--dp-ink);
  box-shadow:
    inset 1px 1px 0 var(--dp-chip-hi),
    inset -1px -1px 0 var(--dp-bevel-dark);
  font-size: 13px;
  padding: 5px 10px;
}
[data-skin="retro"] .cat-links a:hover {
  background: var(--dp-chip-hover); color: var(--dp-ink);
  border-color: var(--dp-frame);
}
[data-skin="retro"] .cat-links b {
  font-family: var(--dp-mono);
  color: var(--dp-ink-dim);
  background: transparent;
  border: 0;
}

/* ==========================================================================
   Действие, чтение и акценты

   Ниже то, что появилось после разбора макета: серые кнопки не звали
   нажать, длинные тексты лежали прямо на рабочем столе, а блоки-призывы
   ничем не отличались от обычных абзацев. Правило одно: если элемент
   просит действие или держит внимание, он получает цвет, рамку и тень,
   а не оттенок серого.
   ========================================================================== */

/* ---------- кнопка действия ----------
   Раньше все кнопки были серыми клавишами, и главная кнопка страницы
   не отличалась от «Отмена». Теперь действие красится акцентом, а
   второстепенные остаются клавишами через .btn-ghost и .btn-soft. */

[data-skin="retro"] .btn:not(.btn-ghost):not(.btn-soft):not(.btn-danger),
[data-skin="retro"] button.btn:not(.btn-ghost):not(.btn-soft):not(.btn-danger) {
  background: var(--dp-cta);
  color: var(--dp-cta-ink);
  border: 2px solid var(--dp-frame);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .45),
    inset -1px -1px 0 var(--dp-cta-hi),
    3px 3px 0 var(--dp-offset);
  font-weight: 700;
}
[data-skin="retro"] .btn:not(.btn-ghost):not(.btn-soft):not(.btn-danger):hover,
[data-skin="retro"] button.btn:not(.btn-ghost):not(.btn-soft):not(.btn-danger):hover {
  background: var(--dp-cta-hi); color: var(--dp-cta-ink);
}
[data-skin="retro"] .btn:not(.btn-ghost):not(.btn-soft):not(.btn-danger):active,
[data-skin="retro"] button.btn:not(.btn-ghost):not(.btn-soft):not(.btn-danger):active {
  transform: translate(3px, 3px);
  box-shadow: inset 1px 1px 0 var(--dp-cta-hi);
}

/* ---------- выход в шапке ----------
   Кнопка жила в inline-форме, из-за этого вставала выше соседних ссылок
   и читалась как случайный текст. Форма становится прозрачной для флекса,
   кнопка получает вид клавиши: видно, что это действие, а не раздел. */

[data-skin="retro"] .hdr nav form.inline { display: contents; }
[data-skin="retro"] .hdr nav .link {
  font-family: var(--dp-mono);
  font-size: 12px; line-height: 1.2; letter-spacing: .04em;
  padding: 5px 9px;
  color: var(--dp-ink);
  /* Фон белый, а не как у шапки: серая клавиша на серой панели сливалась. */
  background: var(--dp-well);
  border: 1px solid var(--dp-frame);
  box-shadow: inset 1px 1px 0 var(--dp-bevel-light), inset -1px -1px 0 var(--dp-bevel-dark);
}
[data-skin="retro"] .hdr nav .link:hover {
  background: var(--dp-highlight); color: #000;
}
[data-skin="retro"] .hdr nav .link:active {
  box-shadow: inset 1px 1px 0 var(--dp-bevel-dark), inset -1px -1px 0 var(--dp-chip-hi);
}

/* ---------- подсказки под полями ----------
   «Двух-трёх предложений хватит» было почти не видно: 12px серым по
   серому столу. Подсказка нужна, чтобы ее читали, поэтому темнее и
   чуть крупнее, но все равно тише основного текста. */

[data-skin="retro"] .hint,
[data-skin="retro"] .file-note {
  color: var(--dp-ink-dim); font-size: 13px;
}
[data-skin="retro"] .hint b { color: var(--dp-ink); }
/* Подпись над предпросмотром карточки и под ним: тот же мелкий серый,
   что и подсказки, и так же терялся на столе. */
[data-skin="retro"] .form-preview .pv-hd,
[data-skin="retro"] .form-preview .pv-note { color: var(--dp-ink-mute); }

/* ---------- правовые страницы: лист документа ----------
   Соглашение, политика и «как мы проверяем» это полотно текста. На голом
   рабочем столе оно сливалось с фоном; белый лист с рамкой отделяет
   документ от интерфейса и заодно поднимает контраст. */

[data-skin="retro"] .legal.sheet {
  background: var(--dp-well);
  border: 2px solid var(--dp-frame);
  box-shadow:
    inset 1px 1px 0 var(--dp-bevel-light),
    inset -1px -1px 0 var(--dp-shadow-inner),
    4px 4px 0 var(--dp-offset);
  padding: 26px 30px 30px;
  margin: 34px 0 44px;
}
[data-skin="retro"] .legal.sheet > .page-h1:first-child { margin-top: 0; }
[data-skin="retro"] .legal.sheet h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 24px; }

/* ---------- контакты ----------
   Страница была самой блеклой на сайте: две серые рамки на сером столе.
   Карточки становятся белыми вставками, адрес — желтой наклейкой,
   потому что это единственное, за чем сюда пришли. */

[data-skin="retro"] .contact-card {
  background: var(--dp-well);
  border: 2px solid var(--dp-frame);
  border-radius: 0;
  box-shadow:
    inset 1px 1px 0 var(--dp-bevel-light),
    inset -1px -1px 0 var(--dp-shadow-inner),
    4px 4px 0 var(--dp-offset);
  padding: 18px 20px;
  margin: 0 0 18px;
}
[data-skin="retro"] .contact-card h2 {
  font-family: var(--dp-display);
  margin: 0 0 10px;
}
[data-skin="retro"] .contact-mail { margin: 0 0 12px; }
[data-skin="retro"] .contact-mail a {
  display: inline-block;
  font-family: var(--dp-mono);
  font-size: 15px; font-weight: 700;
  color: #000; background: var(--dp-highlight);
  border: 2px solid var(--dp-highlight-line);
  padding: 3px 8px;
  text-decoration: none;
  box-shadow: 2px 2px 0 var(--dp-offset);
}
[data-skin="retro"] .contact-mail a:hover {
  background: var(--dp-highlight-hover); color: #000;
}

/* ---------- страница гайда ----------
   Заголовок получает желтое поле, как первый экран главной: это якорь,
   за который цепляется глаз при переходе из поиска. Текст уезжает на
   белый лист, иначе длинный разбор читать невозможно. */

[data-skin="retro"] .guide-page { max-width: 760px; }
[data-skin="retro"] .guide-win { margin: 34px 0 44px; }
[data-skin="retro"] .guide-head {
  background: var(--dp-highlight);
  border-bottom: 2px solid var(--dp-frame);
  padding: 20px 26px 22px;
}
[data-skin="retro"] .guide-kick {
  margin: 0 0 10px;
  font-family: var(--dp-mono);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: #3a3a00;
}
[data-skin="retro"] .guide-head .page-h1 {
  margin: 0; color: #000;
  font-family: var(--dp-display);
  font-size: clamp(26px, 3.3vw, 38px);
  line-height: 1.02; letter-spacing: -.02em;
  text-shadow: 2px 2px 0 var(--dp-emphasis);
}
[data-skin="retro"] .guide-text {
  background: var(--dp-well);
  padding: 24px 28px 28px;
}
/* .legal ограничивает колонку 680 пикселями, а окно шире: без сброса
   текст прилипал к левому краю и справа оставалась белая полоса. */
[data-skin="retro"] .guide-text.legal { max-width: none; }
[data-skin="retro"] .guide-text .legal h2,
[data-skin="retro"] .guide-text h2 { border-top-color: var(--dp-line-2); }
[data-skin="retro"] .guide-cover-single {
  border-radius: 0; border: 2px solid var(--dp-frame);
  box-shadow: 4px 4px 0 var(--dp-offset);
}
[data-skin="retro"] .guide code {
  border-radius: 0; border: 1px solid var(--dp-line);
  background: var(--dp-window-2); color: var(--dp-ink);
}

/* Призыв в конце разбора: желтая плашка, чтобы его не пролистали вместе
   с последним абзацем. */
[data-skin="retro"] .guide-cta {
  border: 2px solid var(--dp-frame); border-radius: 0;
  background: var(--dp-highlight);
  box-shadow: 3px 3px 0 var(--dp-offset);
  padding: 16px 18px;
}
[data-skin="retro"] .guide-cta p { color: #1a1a00; }
[data-skin="retro"] .guide-cta .btn { box-shadow: 2px 2px 0 var(--dp-offset); }

/* «Смотрите также»: заголовок маркером, чипы уже клавиши. */
[data-skin="retro"] .guide-cats { border-top: 2px solid var(--dp-frame); padding-top: 16px; }
[data-skin="retro"] .guide-cats h2 {
  display: inline-block; margin: 0 0 12px;
  background: var(--dp-highlight); color: #000;
  padding: 3px 8px; border: 1px solid var(--dp-highlight-line);
}
[data-skin="retro"] .guide-more h2 {
  display: inline-block; margin: 0 0 10px;
  background: var(--dp-chip); color: var(--dp-ink);
  padding: 3px 8px; border: 1px solid var(--dp-frame);
}

/* ---------- переключатель схемы ----------
   Служебная панель на время правок, но и она не должна выпадать из скина. */
[data-skin="retro"] .skin-switch {
  border-radius: 0; border: 2px solid var(--dp-frame);
  background: var(--dp-window); color: var(--dp-ink-mute);
  box-shadow: 3px 3px 0 var(--dp-offset);
}
[data-skin="retro"] .skin-switch a {
  border-radius: 0; border: 1px solid transparent;
  color: var(--dp-ink); font-family: var(--dp-mono); font-size: 11.5px;
}
[data-skin="retro"] .skin-switch a:hover {
  background: var(--dp-chip); border-color: var(--dp-frame); color: var(--dp-ink);
}
[data-skin="retro"] .skin-switch a.on {
  background: var(--dp-highlight); color: #000;
  border-color: var(--dp-highlight-line);
  box-shadow: inset 1px 1px 0 var(--dp-highlight-hi), inset -1px -1px 0 var(--dp-highlight-lo);
}

/* Документные колонки стоят по центру рабочего стола. Без этого узкий лист
   прижимался влево, а справа оставалась пустая половина экрана. */
[data-skin="retro"] .legal,
[data-skin="retro"] .about-page,
[data-skin="retro"] .guide-page,
[data-skin="retro"] .contacts { margin-left: auto; margin-right: auto; }
[data-skin="retro"] .legal.sheet { margin: 34px auto 44px; }
[data-skin="retro"] .about-win,
[data-skin="retro"] .guide-win { margin-top: 34px; }

/* На телефоне внутренние отступы листа и окна ужимаются: 30 пикселей с
   каждой стороны съедали четверть ширины экрана. */
@media (max-width: 600px) {
  [data-skin="retro"] .legal.sheet { padding: 18px 16px 22px; }
  [data-skin="retro"] .guide-head { padding: 16px 16px 18px; }
  [data-skin="retro"] .guide-text { padding: 16px 16px 20px; }
  [data-skin="retro"] .contact-card { padding: 14px 14px; }
  [data-skin="retro"] .guide-cta { padding: 14px 14px; }
}

/* Длинные заголовки правовых страниц («Пользовательское соглашение»)
   на телефоне вылезали за лист: 34 пикселя капсом шире экрана. */
@media (max-width: 600px) {
  [data-skin="retro"] .page-h1 { font-size: 27px; letter-spacing: -.5px; }
  [data-skin="retro"] .legal h1,
  [data-skin="retro"] .legal h2,
  [data-skin="retro"] .page-h1 { overflow-wrap: break-word; }
}

/* ---------- страница категории ----------
   Текст под каталогом («на что смотреть при выборе») это тот же документ,
   что и гайд: он уезжает на белый лист, а заголовки соседних блоков
   получают маркер. Иначе после карточек начинается серое полотно. */

[data-skin="retro"] .cat-text {
  max-width: 760px;
  background: var(--dp-well);
  border: 2px solid var(--dp-frame);
  box-shadow:
    inset 1px 1px 0 var(--dp-bevel-light),
    inset -1px -1px 0 var(--dp-shadow-inner),
    4px 4px 0 var(--dp-offset);
  padding: 22px 26px 24px;
  margin: 40px 0 0;
}
[data-skin="retro"] .cat-text .feats li::before { color: var(--dp-ok-line); font-weight: 700; }
[data-skin="retro"] .cat-text h2 {
  display: inline-block;
  background: var(--dp-highlight); color: #000;
  padding: 3px 8px; border: 1px solid var(--dp-highlight-line);
  font-family: var(--dp-display); font-size: 16px;
}
[data-skin="retro"] .cat-guides { margin-top: 30px; max-width: 760px; }
[data-skin="retro"] .cat-guides h2,
[data-skin="retro"] .cat-more h2 {
  display: inline-block; margin: 0 0 12px;
  background: var(--dp-chip); color: var(--dp-ink);
  padding: 3px 8px; border: 1px solid var(--dp-frame);
  font-family: var(--dp-mono); font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase;
}
[data-skin="retro"] .cat-more { border-top: 2px solid var(--dp-frame); max-width: 760px; }

/* Короткие страницы (вход, 404, форма) оставляли подвал висеть посередине
   экрана, а под ним зиял пустой рабочий стол. Тянем main на всю высоту. */
[data-skin="retro"] body {
  display: flex; flex-direction: column; min-height: 100vh;
}
[data-skin="retro"] main.wrap { flex: 1 0 auto; width: 100%; }

/* Удаление не может быть акцентной кнопкой: красный остается красным,
   иначе «Удалить» и «Сохранить» выглядят одинаково. */
[data-skin="retro"] .btn-danger {
  background: var(--dp-danger-fill, #b3261e);
  color: #fff;
  border: 2px solid var(--dp-frame);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .35),
    inset -1px -1px 0 rgba(0, 0, 0, .45),
    3px 3px 0 var(--dp-offset);
}
[data-skin="retro"] .btn-danger:hover {
  background: var(--dp-danger-fill-hover, #931f18); color: #fff;
}

/* Клавиши плеера живут в своей палитре: это не элемент сайта, а вещь в себе.
   Скин перекрашивал ссылки-клавиши в цвет чернил схемы, и в темных схемах
   надписи «открыть», ADD и LIST исчезали на светлой клавише. */
[data-skin="retro"] .amp a.amp-key,
[data-skin="retro"] .amp a.amp-key:hover,
[data-skin="retro"] .amp a.amp-go,
[data-skin="retro"] .amp a.amp-go:hover { color: #000; }
[data-skin="retro"] .amp button.amp-key { background: var(--amp-face); color: #000; }