/*
 * Ремский Мониторинг — сайт r-mont.ru в стиле «Итог».
 * Один файл на все страницы. Источник правды по стилю программы — docs/design/SETTINGS-DESIGN.md,
 * по сайту — DESIGN.md рядом с этой вёрсткой. Цвета литералами ниже токенов не добавлять.
 *
 * Содержание: 1 шрифты · 2 токены · 3 основа · 4 каркас · 5 компоненты · 6 главная · 7 покупка ключа
 * · 8 «Что нового» · 9 FAQ и документы · 10 магазин · 11 оформление заказа · 12 отзывы · 13 движение · 14 адаптив
 */

/* ============================== 1. Шрифты (OFL, свои файлы, без Google) ============================== */
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400; font-display: optional; src: url("fonts/Onest-Regular.woff2") format("woff2"); }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 500; font-display: optional; src: url("fonts/Onest-Medium.woff2") format("woff2"); }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 600; font-display: optional; src: url("fonts/Onest-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: optional; src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: optional; src: url("fonts/IBMPlexMono-Medium.woff2") format("woff2"); }

/* ============================== 2. Токены ============================== */
:root {
  color-scheme: dark;

  /* палитра программы (App.xaml, Ui*Brush) — один к одному */
  --bg: #0B0C0E;            /* UiBackgroundBrush — фон содержимого */
  --chrome: #090A0C;        /* UiChromeBrush — шапка, навигация, подвал */
  --raised: #14161A;        /* UiRaisedBrush — поля, наведение */
  --selected: #1A1D22;      /* UiSelectedBrush — выбранный пункт, выбранный сегмент */
  --field-border: #262A30;  /* UiFieldBorderBrush — рамка полей и кнопок */
  --line: #1E2126;          /* UiLineBrush — линии строк */
  --line-strong: #353A42;   /* UiStrongLineBrush — полосы блоков, границы колонок */
  --text: #E3E6EA;          /* UiTextBrush */
  --muted: #8A909A;         /* UiMutedTextBrush — второй план */
  --dim: #4F545D;           /* UiDimTextBrush — третий план, только не для текста, который надо читать */
  --accent: #FF6A00;        /* UiAccentBrush — единственный акцент */
  --accent-hover: #FF8330;  /* UiAccentHoverBrush */
  --on-accent: #170A00;     /* UiOnAccentBrush */
  --success: #5BC98A;       /* UiSuccessBrush */
  --danger: #FF8A7A;        /* UiDangerBrush */

  --switch-off: #2A2E35;
  --switch-off-hover: #353A42;
  --switch-knob: #C9CDD3;
  --popup: #16181C;
  --hover-row: rgba(255, 255, 255, .022);
  --close-hover: #C42B1C;

  /* цвета самого оверлея (по умолчанию в программе) — только для сцены предпросмотра */
  --ov-bg: rgba(8, 8, 8, .78);
  --ov-text: #F2F2F2;
  --ov-label: #58A6FF;
  --ov-good: #5BD66F;

  --font-ui: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, "Liberation Mono", monospace;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;

  --frame: 1200px;
  --pad: 40px;              /* поля бэнда по бокам: 40 → 28 → 16 */
  --titlebar-h: 56px;
  --control-h: 44px;
  --aside-w: 390px;         /* правая колонка магазина: корзина, заказ, форма отзыва */
  --shadow-popup: 0 12px 30px -8px rgba(0, 0, 0, .8);

  --icon-size: 16px;
}

/* ============================== 3. Основа ============================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--line-strong) var(--bg);
  scroll-padding-top: calc(var(--titlebar-h) + 16px);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
}

body > main { flex: 1 0 auto; }

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

h1, h2, h3, h4 { margin: 0; font-weight: 600; text-wrap: balance; }
p { margin: 0; }

a { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: rgba(255, 106, 0, .35); color: #fff; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border: 3px solid var(--bg); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--dim); }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.accent { color: var(--accent); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 8px 14px; border-radius: var(--radius);
  background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 8px; }

/* подпись над заголовком: моноширинная, капсом */
.eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* заголовок блока: 12 Medium КАПСОМ с разрядкой — как «ПОКАЗАТЕЛИ» в окне настроек */
.caps {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.lead { color: var(--muted); font-size: 19px; line-height: 1.6; max-width: 60ch; }

/* текстовые ссылки внутри текста — как .link в программе */
.prose a:not(.btn), .legal a:not(.btn), .faq-list a:not(.btn), .contact a:not(.btn), .check a, .check-row a, .notice a:not(.btn), .success-view a:not(.btn) {
  color: var(--accent-hover);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 131, 48, .45);
  transition: color .15s, text-decoration-color .15s;
}
.prose a:not(.btn):hover, .legal a:not(.btn):hover, .faq-list a:not(.btn):hover, .contact a:not(.btn):hover, .check a:hover, .check-row a:hover, .notice a:not(.btn):hover, .success-view a:not(.btn):hover {
  color: var(--text);
  text-decoration-color: var(--accent);
}

/* ============================== 4. Каркас: рамка, шапка-заголовок окна, бэнды, подвал-строка состояния ============================== */

/* рамка страницы: тонкие вертикальные линии по краям, как границы колонок окна */
.frame {
  width: min(var(--frame), 100%);
  margin-inline: auto;
  border-inline: 1px solid var(--line);
}

/* --- шапка = заголовок окна программы: бренд · версия · путь · разделы --- */
.titlebar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--chrome);
  border-bottom: 1px solid var(--line-strong);
}

.titlebar__in {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--titlebar-h);
  padding-left: var(--pad);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
}
.brand b { color: var(--accent); font-weight: 600; }
.brand__mark {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: url("/remnew1_icon.png?v=2") no-repeat center / cover, var(--raised);
  box-shadow: 0 0 0 1px var(--line-strong);
}

/* плашка версии: моно 11,5, рамка, скругление 4 */
.ver {
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 18px;
  padding: 0 6px;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* путь «/ раздел» */
.crumb {
  display: flex;
  align-items: center;
  min-width: 0;
  font-size: 14px;
  color: var(--muted);
  white-space: nowrap;
}
.crumb i { font-style: normal; color: var(--dim); padding: 0 10px; }
.crumb [aria-current] {
  color: var(--text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: itog-crumb .24s var(--ease);
}

.topnav {
  display: flex;
  align-self: stretch;
  margin-left: auto;
}
.topnav a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s, background-color .18s;
}
.topnav a:hover { color: var(--text); background: var(--raised); }
.topnav a[aria-current="page"] { color: var(--text); background: var(--selected); }
.topnav a[aria-current="page"] .ico { color: var(--accent); }

.titlebar__cta { margin: 0 var(--pad) 0 12px; }
.titlebar__cta .mono { font-weight: 500; font-size: 13px; opacity: 1; }

/* --- бэнд: горизонтальная полоса страницы во всю ширину рамки --- */
.band { border-bottom: 1px solid var(--line); }
.frame > :last-child { border-bottom: 0; }

.band-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 0 var(--pad);
  border-bottom: 1px solid var(--line-strong);
}
.band-cap {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--muted);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* шапка внутренней страницы: подпись · заголовок · вводный текст */
.page-head {
  padding: 56px var(--pad) 44px;
  border-bottom: 1px solid var(--line-strong);
}
.page-head h1 {
  font-size: clamp(32px, 4.2vw, 48px);
  line-height: 1.08;
  letter-spacing: -.022em;
}
.page-head h1 span { color: var(--accent); }
.page-head .lead { margin-top: 16px; }

/* ячейки, разделённые линиями — как «Экспорт · Импорт · Сброс» внизу навигации */
.cells { display: grid; }
.cells--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cells--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cells--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cell {
  min-width: 0;
  padding: 28px var(--pad) 32px;
  border-left: 1px solid var(--line);
}
.cells--3 .cell, .cells--4 .cell { padding-inline: 28px; }
.cell:first-child { border-left: 0; }
.cell__label { margin-bottom: 18px; }

/* --- подвал = строка состояния --- */
.statusbar {
  flex: none;
  background: var(--chrome);
  border-top: 1px solid var(--line-strong);
}
.statusbar__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.statusbar__col { padding: 32px var(--pad) 36px; }
.statusbar__col + .statusbar__col { border-left: 1px solid var(--line); }
.statusbar__tagline { margin: 12px 0 20px; color: var(--muted); font-size: 14px; }
.statusbar__docs { display: grid; justify-items: start; gap: 10px; font-size: 14px; }
.statusbar__docs a, .statusbar__bar a {
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 4px;
  transition: color .15s, text-decoration-color .15s;
}
.statusbar__docs a:hover, .statusbar__bar a:hover { color: var(--text); text-decoration-color: var(--accent); }

.seller { margin: 0; font-size: 13.5px; }
.seller__title { margin-bottom: 8px; }
.seller > div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.seller > div:last-child { border-bottom: 0; }
.seller dt { color: var(--muted); }
.seller dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.seller dd.mono { font-size: 13px; }
.seller a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.seller a:hover { text-decoration-color: var(--accent); }

.statusbar__bar {
  border-top: 1px solid var(--line);
}
.statusbar__bar .frame {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 22px;
  min-height: 48px;
  padding: 10px var(--pad);
  color: var(--muted);
  font-size: 13px;
  border-inline-color: transparent;
}
.statusbar__spacer { flex: 1; }

/* ============================== 5. Компоненты ============================== */

/* --- иконки: контур 1,25 на сетке 16×16, как в навигации окна настроек (маски — ниже, блок ICONS) --- */
.ico {
  display: inline-block;
  flex: none;
  width: var(--icon-size);
  height: var(--icon-size);
  background-color: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
  vertical-align: -3px;
}
.ico--20 { --icon-size: 20px; }

/* ICONS:BEGIN — сгенерировано tools/build.py из tools/icons.py, руками не править */
:root {
  --i-general: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4.5h7M12.5 4.5H14M2 11.5h2.5M7.5 11.5H14'/%3E%3Ccircle cx='10.75' cy='4.5' r='1.75'/%3E%3Ccircle cx='6' cy='11.5' r='1.75'/%3E%3C/svg%3E");
  --i-appearance: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2.2a5.8 5.8 0 1 0 0 11.6c1 0 1.4-.7 1.1-1.5-.4-1 .3-1.9 1.3-1.9h1.4A2 2 0 0 0 13.8 8.4 5.9 5.9 0 0 0 8 2.2z'/%3E%3Ccircle cx='5' cy='7' r='.6'/%3E%3Ccircle cx='7.5' cy='4.8' r='.6'/%3E%3Ccircle cx='10.5' cy='5.6' r='.6'/%3E%3C/svg%3E");
  --i-hotkeys: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.5' y='4' width='13' height='8.5' rx='1.5'/%3E%3Cpath d='M4 6.8h.5M6.7 6.8h.5M9.3 6.8h.5M11.7 6.8h.5M5 9.8h6'/%3E%3C/svg%3E");
  --i-fps: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.2 11.8a6 6 0 1 1 11.6 0'/%3E%3Cpath d='M8 10.2l2.6-3.4'/%3E%3Ccircle cx='8' cy='10.6' r='.9'/%3E%3C/svg%3E");
  --i-gpu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.5' y='4' width='13' height='8' rx='1'/%3E%3Ccircle cx='6' cy='8' r='2'/%3E%3Cpath d='M10 6.8h2.5M10 9.2h2.5M3.5 12v1.5M7 12v1.5'/%3E%3C/svg%3E");
  --i-cpu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='8' height='8' rx='1'/%3E%3Cpath d='M6.5 2v2M9.5 2v2M6.5 12v2M9.5 12v2M2 6.5h2M2 9.5h2M12 6.5h2M12 9.5h2'/%3E%3C/svg%3E");
  --i-ram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.5' y='4.5' width='13' height='5.5' rx='.8'/%3E%3Cpath d='M4 6.3v2M6.7 6.3v2M9.3 6.3v2M12 6.3v2M3 10v2M13 10v2M7 10v2'/%3E%3C/svg%3E");
  --i-stats: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13.5V8M8 13.5V3M13 13.5V6'/%3E%3C/svg%3E");
  --i-graph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 10h2.3l1.6-5.5 2.2 8 2-5 1.3 2.5h3.6'/%3E%3C/svg%3E");
  --i-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='8' r='2.8'/%3E%3Cpath d='M7.8 8h6.7M12.2 8v2.5M14.2 8v2'/%3E%3C/svg%3E");
  --i-update: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 8a5.5 5.5 0 1 1-1.6-3.9'/%3E%3Cpath d='M12.2 1.8v2.6H9.6'/%3E%3C/svg%3E");
  --i-diag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 8.5h3l1.6-4.5 3 8.5 1.7-4h3.7'/%3E%3C/svg%3E");
  --i-support: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 3.5h11v7.5h-6l-3 2.5V11h-2z'/%3E%3C/svg%3E");
  --i-battery: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.5' y='5' width='12' height='6' rx='1'/%3E%3Cpath d='M15 7v2'/%3E%3C/svg%3E");
  --i-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2.5v8M4.5 7.5L8 11l3.5-3.5M2.5 13.5h11'/%3E%3C/svg%3E");
  --i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h11M9.5 4l4 4-4 4'/%3E%3C/svg%3E");
  --i-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h-3v9h9v-3M9 2.5h4.5V7M13.5 2.5l-6 6'/%3E%3C/svg%3E");
  --i-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.5' y='3.5' width='13' height='9' rx='1.5'/%3E%3Cpath d='M2 4.5l6 4.5 6-4.5'/%3E%3C/svg%3E");
  --i-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.5' y='5.5' width='8' height='8' rx='1'/%3E%3Cpath d='M3.5 10.5h-1v-8h8v1'/%3E%3C/svg%3E");
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5'/%3E%3C/svg%3E");
  --i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  --i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3v10M3 8h10'/%3E%3C/svg%3E");
  --i-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10'/%3E%3C/svg%3E");
  --i-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E");
  --i-help: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.2'/%3E%3Cpath d='M6.3 6.3a1.8 1.8 0 1 1 2.5 1.7c-.5.2-.8.6-.8 1.1v.4'/%3E%3Cpath d='M8 11.4v.1'/%3E%3C/svg%3E");
  --i-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2.2l6.3 11.3H1.7z'/%3E%3Cpath d='M8 6.5v3.2M8 11.6v.1'/%3E%3C/svg%3E");
  --i-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 1.5h5.2L12 4.3v10.2H4z'/%3E%3Cpath d='M9 1.5v3h3M6 8h4M6 10.5h4'/%3E%3C/svg%3E");
  --i-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 2.5h2l1.7 7.5h7.1l1.4-5.3H4.2'/%3E%3Ccircle cx='6' cy='12.8' r='1'/%3E%3Ccircle cx='11.5' cy='12.8' r='1'/%3E%3C/svg%3E");
  --i-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 1.8l1.9 3.9 4.3.6-3.1 3 .7 4.3L8 11.6l-3.8 2 .7-4.3-3.1-3 4.3-.6z'/%3E%3C/svg%3E");
  --i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 1.8l5 2v3.8c0 3.1-2.1 5.7-5 6.6-2.9-.9-5-3.5-5-6.6V3.8z'/%3E%3Cpath d='M5.8 8.2l1.6 1.6 3-3.2'/%3E%3C/svg%3E");
  --i-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='10' height='7' rx='1'/%3E%3Cpath d='M5.2 7V5a2.8 2.8 0 0 1 5.6 0v2'/%3E%3C/svg%3E");
  --i-truck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 4h8v7h-8zM9.5 6.5h3l2 2.5v2h-5'/%3E%3Ccircle cx='4.5' cy='12' r='1.2'/%3E%3Ccircle cx='12' cy='12' r='1.2'/%3E%3C/svg%3E");
  --i-photo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5h2.8L6 3.4h4L11.2 5H14v7.5H2z'/%3E%3Ccircle cx='8' cy='8.6' r='2.2'/%3E%3C/svg%3E");
  --i-windows: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3.6l5-.7v4.6H2zM8.2 2.7l5.8-.8v5.6H8.2zM2 8.5h5v4.6l-5-.7zM8.2 8.5H14v5.6l-5.8-.8z'/%3E%3C/svg%3E");
}
.ico--general { --i: var(--i-general); }
.ico--appearance { --i: var(--i-appearance); }
.ico--hotkeys { --i: var(--i-hotkeys); }
.ico--fps { --i: var(--i-fps); }
.ico--gpu { --i: var(--i-gpu); }
.ico--cpu { --i: var(--i-cpu); }
.ico--ram { --i: var(--i-ram); }
.ico--stats { --i: var(--i-stats); }
.ico--graph { --i: var(--i-graph); }
.ico--key { --i: var(--i-key); }
.ico--update { --i: var(--i-update); }
.ico--diag { --i: var(--i-diag); }
.ico--support { --i: var(--i-support); }
.ico--battery { --i: var(--i-battery); }
.ico--download { --i: var(--i-download); }
.ico--arrow { --i: var(--i-arrow); }
.ico--external { --i: var(--i-external); }
.ico--mail { --i: var(--i-mail); }
.ico--copy { --i: var(--i-copy); }
.ico--check { --i: var(--i-check); }
.ico--chevron { --i: var(--i-chevron); }
.ico--plus { --i: var(--i-plus); }
.ico--minus { --i: var(--i-minus); }
.ico--close { --i: var(--i-close); }
.ico--help { --i: var(--i-help); }
.ico--warn { --i: var(--i-warn); }
.ico--doc { --i: var(--i-doc); }
.ico--cart { --i: var(--i-cart); }
.ico--star { --i: var(--i-star); }
.ico--shield { --i: var(--i-shield); }
.ico--lock { --i: var(--i-lock); }
.ico--truck { --i: var(--i-truck); }
.ico--photo { --i: var(--i-photo); }
.ico--windows { --i: var(--i-windows); }
/* ICONS:END */

/* --- кнопки. Имена .btn / .secondary / .btn-primary / .btn-secondary / .download-btn оставлены
       прежними: их подставляют скрипты страниц (успешная оплата, корзина и т. д.) --- */
.btn {
  --btn-h: var(--control-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--btn-h);
  padding: 0 20px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background-color .15s, border-color .15s, color .15s, transform .12s var(--ease);
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn:active { transform: translateY(1px); }

.btn.secondary, .btn-secondary, .btn.download-btn, .btn.top-link, .btn.review-cta {
  background: transparent;
  border-color: var(--field-border);
  color: var(--text);
  font-weight: 500;
}
.btn.secondary:hover, .btn-secondary:hover, .btn.download-btn:hover, .btn.top-link:hover, .btn.review-cta:hover {
  background: var(--raised);
  border-color: var(--line-strong);
}

.btn-primary, .btn.download-btn.is-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
.btn-primary:hover, .btn.download-btn.is-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* выключенная главная кнопка — как «Применить» без изменений: прозрачная, приглушённая */
.btn:disabled, .btn[aria-disabled="true"] {
  background: transparent;
  border-color: var(--line);
  color: var(--dim);
  cursor: not-allowed;
  transform: none;
}

.btn--sm { --btn-h: 36px; padding: 0 14px; font-size: 14px; gap: 8px; }
.btn--lg { --btn-h: 52px; padding: 0 24px; font-size: 16px; }
.btn-full { width: 100%; }
.btn .ico { transition: transform .18s var(--ease); }
.btn:hover .ico--arrow { transform: translateX(3px); }

/* значок загрузки рисуется маской, потому что скрипты меняют textContent у этих кнопок */
.download-btn::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--i-download) center / contain no-repeat;
  mask: var(--i-download) center / contain no-repeat;
}

.download-actions { display: grid; justify-items: start; gap: 10px; }
.download-mirror {
  color: var(--muted);
  font-size: 13px;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 4px;
  transition: color .15s, text-decoration-color .15s;
}
.download-mirror:hover, .download-mirror:focus-visible { color: var(--text); text-decoration-color: var(--accent); }

/* ссылка «Открыть …» со стрелкой */
.resource-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-hover);
  font-size: 14px;
  font-weight: 500;
}
.resource-card-link::after {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: var(--i-arrow) center / contain no-repeat;
  mask: var(--i-arrow) center / contain no-repeat;
  transition: transform .18s var(--ease);
}
a:hover > .resource-card-link::after, a:hover .resource-card-link::after { transform: translateX(3px); }

/* клавиша — плашка с толстой нижней гранью */
kbd {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .8em;
  line-height: 1.5;
  padding: 0 6px;
  color: var(--text);
  background: var(--raised);
  border: 1px solid var(--field-border);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* метка «Новое»: моно капсом в рамке цвета акцента */
.badge {
  display: inline-block;
  margin-left: 10px;
  padding: 0 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: middle;
  color: var(--accent);
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
}

/* строки «подпись — значение» во всю ширину, как строки настроек */
.rows { margin: 0; }
.rows > div {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.rows > div:first-child { border-top: 1px solid var(--line); }
.rows dt { color: var(--muted); font-size: 14px; }
.rows dd { margin: 0; font-size: 15px; }
.rows dd::first-letter { text-transform: uppercase; }

/* --- поля ввода: фон поля, рамка, наведение — сильная линия, фокус — акцент --- */
input[type="email"], input[type="text"], input[type="tel"], input[type="search"], input[type="number"], input:not([type]),
textarea, select {
  width: 100%;
  min-height: var(--control-h);
  padding: 0 14px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--raised);
  color: var(--text);
  font-size: 15px;
  outline: none;
  transition: border-color .15s, box-shadow .15s, opacity .15s;
}
textarea { min-height: 116px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
input:hover, textarea:hover, select:hover { border-color: var(--line-strong); }
input:focus, textarea:focus, select:focus, input:focus-visible, textarea:focus-visible, select:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  outline: none;
}
input::placeholder, textarea::placeholder { color: var(--dim); opacity: 1; }
input:disabled, textarea:disabled, select:disabled { opacity: .42; cursor: not-allowed; }
input[type="hidden"] { display: none; }

select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238A909A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 12px;
}
select option { background: var(--raised); color: var(--text); }

/* --- флажок согласия = тумблер-капсула программы (остаётся настоящим checkbox) --- */
.check input[type="checkbox"], .check-row input[type="checkbox"], input[type="checkbox"].switch {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 34px;
  height: 20px;
  margin: 2px 0 0;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  background-color: var(--switch-off);
  background-image: radial-gradient(circle at center, var(--switch-knob) 0 6.5px, transparent 7px);
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: 0 0;
  transition: background-color .2s var(--ease), background-position .2s var(--ease);
}
.check input[type="checkbox"]:hover, .check-row input[type="checkbox"]:hover { background-color: var(--switch-off-hover); }
.check input[type="checkbox"]:checked, .check-row input[type="checkbox"]:checked {
  background-color: var(--accent);
  background-image: radial-gradient(circle at center, #fff 0 6.5px, transparent 7px);
  background-position: 14px 0;
}
.check input[type="checkbox"]:focus-visible, .check-row input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.check input[type="checkbox"]:disabled, .check-row input[type="checkbox"]:disabled { opacity: .42; cursor: not-allowed; }

.checks { display: grid; gap: 14px; margin: 24px 0; }
.check, .check-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.5;
  cursor: pointer;
}

/* --- сообщения: плашка поля + черта слева (успех / ошибка) --- */
.message, .status-note {
  position: relative;
  margin-top: 16px;
  padding: 12px 14px 12px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--raised);
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.55;
  overflow: hidden;
}
.message::before, .status-note::before, .page-shop .notice::before, .page-checkout .notice::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
}
.message.is-error::before, .status-note.is-error::before, .notice.is-error::before { background: var(--danger); }
.message { display: none; }

/* --- таблица --- */
.table-wrap, .system-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.system-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.system-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--chrome);
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.system-table td { padding: 11px 16px; border-bottom: 1px solid var(--line); color: var(--text); vertical-align: top; }
.system-table tr:last-child td { border-bottom: 0; }
.system-table tbody tr { transition: background-color .15s; }
.system-table tbody tr:hover { background: var(--hover-row); }
.system-table td:nth-child(2), .system-table td:nth-child(3) { font-family: var(--font-mono); font-size: 13.5px; white-space: nowrap; }

/* --- навигация документа (FAQ, оферта, политика) = навигация окна настроек --- */
.doc-layout {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  align-items: start;
}
/* колонка навигации тянется на всю высоту (фон и граница), а список внутри «прилипает» под шапкой */
.doc-nav {
  align-self: stretch;
  background: var(--chrome);
  border-right: 1px solid var(--line-strong);
}
.doc-nav__inner {
  position: sticky;
  top: var(--titlebar-h);
  max-height: calc(100vh - var(--titlebar-h));
  overflow-y: auto;
  padding: 6px 0 24px;
  scrollbar-width: thin;
}
.nav-group {
  padding: 16px 20px 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 8px 18px 8px 20px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
  text-decoration: none;
  transition: color .18s, background-color .18s;
}
.nav-item .ico { transition: color .18s; }
.nav-item:hover { color: var(--text); background: var(--raised); }
.nav-item[aria-current="true"], .nav-item[aria-current="location"] { color: var(--text); background: var(--selected); }
.nav-item[aria-current="true"] .ico, .nav-item[aria-current="location"] .ico { color: var(--accent); }
.nav-item .cnt { margin-left: auto; font-family: var(--font-mono); font-size: 11.5px; color: var(--dim); }
.nav-item--toc { font-size: 13.5px; }
.nav-item--toc .toc-n { flex: none; min-width: 22px; font-family: var(--font-mono); font-size: 11.5px; color: var(--dim); }
.nav-item--toc[aria-current] .toc-n { color: var(--accent); }

.doc-body { min-width: 0; }

/* ============================== 6. Главная ============================== */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
  border-bottom: 1px solid var(--line-strong);
}
.hero__text { padding: 76px var(--pad) 64px; }
.hero__text h1 {
  font-size: clamp(40px, 5.4vw, 66px);
  line-height: 1.03;
  letter-spacing: -.03em;
  max-width: 13em;
}
.hero__text .lead { margin-top: 24px; }
.hero__side {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 28px;
  padding: 76px var(--pad) 40px;
  border-left: 1px solid var(--line-strong);
}
.hero__actions { display: grid; gap: 14px; }
.hero__actions .download-actions { justify-items: stretch; text-align: center; }
.hero__actions .download-mirror { justify-self: center; }

/* ---------- демо окна настроек (assets/itog/demo.js) — урезанное окно программы, как в ней самой ---------- */
.preview { border-bottom: 1px solid var(--line-strong); }
.demo-stage { padding: 32px var(--pad) 40px; }
.demo-lead { margin: 0 0 20px; max-width: 70ch; color: var(--muted); font-size: 15px; }

.dw {
  --dw-nav: 208px;
  --dw-pv: 430px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 720px;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
}
.dw button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.dw :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* заголовок окна: бренд · версия · Настройки / раздел */
.dw-tb {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding-left: 16px;
  background: var(--chrome);
  border-bottom: 1px solid var(--line-strong);
  user-select: none;
  white-space: nowrap;
}
.dw-brand { font-size: 13px; font-weight: 600; letter-spacing: .01em; }
.dw-brand b { color: var(--accent); font-weight: 600; }
.dw-ver { font-family: var(--font-mono); font-size: 11px; line-height: 17px; padding: 0 5px; color: var(--muted); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.dw-crumb { display: flex; align-items: center; min-width: 0; font-size: 13px; color: var(--muted); }
.dw-crumb i { font-style: normal; color: var(--dim); padding: 0 9px; }
.dw-crumb b { display: inline-block; font-weight: 500; color: var(--text); }
.dw-crumb b.is-swap { animation: itog-crumb .24s var(--ease); }
.dw-spacer { flex: 1; }
.dw-wbtns { display: flex; align-self: stretch; color: var(--muted); }
.dw-wbtns span { display: grid; place-items: center; width: 46px; }
.dw-wbtns svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1; }

.dw-body { display: grid; grid-template-columns: var(--dw-nav) minmax(0, 1fr) var(--dw-pv); min-height: 0; }

/* навигация: группы капсом, пункт 34 с иконкой; выбранный — светлее фона, иконка оранжевая, без метки слева */
.dw-nav { display: flex; flex-direction: column; min-height: 0; background: var(--chrome); border-right: 1px solid var(--line-strong); }
.dw-nav-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 8px; scrollbar-width: thin; }
.dw-group { padding: 14px 16px 6px; font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); border-top: 1px solid var(--line); }
.dw-group:first-child { border-top: 0; }
.dw .dw-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 34px;
  padding: 0 14px 0 16px;
  color: var(--muted);
  font-size: 13.5px;
  text-align: left;
  white-space: nowrap;
  transition: color .18s, background-color .18s;
}
.dw .dw-item:hover { color: var(--text); background: var(--raised); }
.dw .dw-item[aria-current="page"] { color: var(--text); background: var(--selected); }
.dw-item .ico { transition: color .18s; }
.dw-item[aria-current="page"] .ico { color: var(--accent); }
.dw-cnt { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--accent); opacity: 0; transform: scale(.6); transition: opacity .18s, transform .22s var(--ease); }
.dw-cnt.is-on { opacity: 1; transform: none; }
.dw-navfoot { display: flex; border-top: 1px solid var(--line-strong); }
.dw .dw-navfoot button { flex: 1; height: 38px; font-size: 12.5px; color: var(--muted); border-right: 1px solid var(--line); transition: background-color .15s, color .15s; }
.dw .dw-navfoot button:last-child { border-right: 0; }
.dw .dw-navfoot button:hover { background: var(--raised); color: var(--text); }
.dw .dw-navfoot button.is-danger:hover { color: var(--danger); }

/* содержимое раздела: шапка 60, заголовки блоков с полосой, строки во всю ширину */
.dw-content { min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.dw-content-inner { padding-bottom: 28px; }
.dw-content-inner.is-entering { animation: itog-rise .22s var(--ease); }
.dw-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 60px; padding: 0 24px; border-bottom: 1px solid var(--line-strong); }
.dw-title { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.015em; white-space: nowrap; }
.dw-sub { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); text-align: right; }
.dw-card-title { padding: 20px 24px 8px; font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }

.dw-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 46px;
  padding: 7px 24px;
  border-bottom: 1px solid var(--line);
  transition: background-color .15s, opacity .2s;
}
.dw-row:hover { background: var(--hover-row); }
.dw-row.is-note:hover { background: transparent; }
/* черта «не применено» вырастает по высоте строки */
.dw-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transition: transform .22s var(--ease);
}
.dw-row.is-mod::before { transform: scaleY(1); }
.dw-row.is-off { opacity: .42; }
.dw-row.is-off .dw-ctl { pointer-events: none; }
.dw-row.is-note { min-height: 0; padding: 10px 24px; }
.dw-note { margin: 0; max-width: 60ch; color: var(--muted); font-size: 13px; }
.dw-note a { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 131, 48, .45); white-space: nowrap; }
.dw-note a:hover { color: var(--text); text-decoration-color: var(--accent); }

.dw-label { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dw-label label { cursor: pointer; }
.dw-key {
  flex: none;
  padding: 0 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 15px;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-radius: 3px;
}
.dw-help {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  cursor: help;
  transition: border-color .15s, color .15s;
}
.dw-help:hover, .dw-help:focus-visible { border-color: var(--muted); color: var(--text); }
.dw-tip {
  display: none;
  position: absolute;
  left: 24px;
  top: calc(100% - 4px);
  z-index: 5;
  width: min(300px, calc(100% - 48px));
  padding: 10px 12px;
  background: var(--popup);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-popup);
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.45;
  pointer-events: none;
}
.dw-help:hover + .dw-tip, .dw-help:focus + .dw-tip { display: block; animation: itog-rise .15s var(--ease); }
.dw-ctl { display: flex; align-items: center; gap: 8px; flex: none; }

/* тумблер программы: капсула 34×20, ручка 14; при нажатии ручка вытягивается */
.dw-sw { position: relative; display: inline-flex; }
/* невидимый checkbox лежит поверх нарисованной капсулы — иначе капсула перехватывает нажатие */
.dw-sw input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.dw-track { position: relative; width: 34px; height: 20px; border-radius: 10px; background: var(--switch-off); transition: background-color .2s var(--ease); }
.dw-track::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 14px;
  height: 14px;
  border-radius: 7px;
  background: var(--switch-knob);
  transition: transform .2s var(--ease), width .12s var(--ease), background-color .2s;
}
.dw-sw:hover .dw-track { background: var(--switch-off-hover); }
.dw-sw input:checked + .dw-track { background: var(--accent); }
.dw-sw input:checked + .dw-track::before { transform: translateX(14px); background: #fff; }
.dw-sw input:active + .dw-track::before { width: 18px; }
.dw-sw input:checked:active + .dw-track::before { transform: translateX(10px); }
.dw-sw input:focus-visible + .dw-track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* поля: высота 30, скругление 5 — размеры окна программы, а не полей сайта */
.dw select, .dw input[type="text"] {
  width: auto;
  min-height: 0;
  height: 30px;
  padding: 0 10px;
  border-radius: 5px;
  font-size: 13px;
}
.dw select { min-width: 190px; padding-right: 30px; background-position: right 10px center; background-size: 11px; }
.dw input[type="text"] { width: 180px; }
.dw .dw-clr input[type="text"] { width: 92px; font-family: var(--font-mono); font-size: 12.5px; text-transform: uppercase; }
.dw-clr { display: flex; align-items: center; gap: 8px; }
.dw-swatch { position: relative; width: 22px; height: 22px; flex: none; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); overflow: hidden; }
.dw-swatch input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; cursor: pointer; }

/* ползунок-линейка: линия 1 px, заливка 2 px акцентом, риски через 10 %, узкая ручка */
.dw-rng { display: flex; align-items: center; gap: 12px; }
.dw-rng input[type="range"] {
  --p: 50%;
  width: 150px;
  height: 18px;
  margin: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.dw-rng input[type="range"]::-webkit-slider-runnable-track {
  height: 18px;
  background:
    linear-gradient(var(--accent), var(--accent)) 0 7px / var(--p) 2px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) 0 7.5px / 100% 1px no-repeat,
    linear-gradient(var(--dim), var(--dim)) 100% 100% / 1px 4px no-repeat,
    repeating-linear-gradient(90deg, var(--dim) 0 1px, transparent 1px 10%) 0 100% / 100% 4px no-repeat;
}
.dw-rng input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 6px;
  height: 14px;
  margin-top: 1px;
  border: 0;
  border-radius: 2px;
  background: var(--text);
  transition: background-color .15s, transform .15s var(--ease);
}
.dw-rng input[type="range"]:hover::-webkit-slider-thumb { background: #fff; }
.dw-rng input[type="range"]:active::-webkit-slider-thumb { background: var(--accent); transform: scaleY(1.2); }
.dw-rng input[type="range"]::-moz-range-track {
  height: 18px;
  background:
    linear-gradient(var(--line-strong), var(--line-strong)) 0 7.5px / 100% 1px no-repeat,
    linear-gradient(var(--dim), var(--dim)) 100% 100% / 1px 4px no-repeat,
    repeating-linear-gradient(90deg, var(--dim) 0 1px, transparent 1px 10%) 0 100% / 100% 4px no-repeat;
}
.dw-rng input[type="range"]::-moz-range-progress { height: 2px; background: var(--accent); }
.dw-rng input[type="range"]::-moz-range-thumb { width: 6px; height: 14px; border: 0; border-radius: 2px; background: var(--text); }
.dw-rng input[type="range"]:active::-moz-range-thumb { background: var(--accent); }
.dw-rng input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.dw-rng output { min-width: 56px; font-family: var(--font-mono); font-size: 12px; text-align: right; white-space: nowrap; }

/* колонка предпросмотра: шапка 60 «ПРЕДПРОСМОТР · черновик», сцена во всю колонку */
.dw-pv { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line-strong); }
.dw-pvhead { display: flex; align-items: center; justify-content: space-between; height: 60px; flex: none; padding: 0 16px; border-bottom: 1px solid var(--line-strong); }
.dw-pvtitle { font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.dw-pvcap { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.dw-scene { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #101216; }
.dw-scene-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 44% 50%; }

/* строка состояния: Изменено N · Esc отмена · Ctrl+S применить · сообщение · Отмена / Применить */
.dw-ft { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 12px 0 16px; background: var(--chrome); border-top: 1px solid var(--line-strong); }
.dw-status { display: flex; align-items: center; gap: 22px; flex: 1; min-width: 0; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.dw-count b { display: inline-block; margin-left: 6px; font-family: var(--font-mono); font-weight: 500; color: var(--text); transition: color .2s; }
.dw-ft.is-dirty .dw-count b { color: var(--accent); }
.dw-count b.is-bump { animation: dw-bump .3s var(--ease); }
.dw-hint kbd { margin-right: 7px; font-size: 11px; color: var(--muted); }
.dw-msg { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.dw .dw-btn { min-width: 112px; height: 32px; padding: 0 14px; border: 1px solid var(--field-border); border-radius: 5px; font-size: 13px; transition: background-color .15s, border-color .15s, color .15s; }
.dw .dw-btn:hover { background: var(--raised); border-color: var(--line-strong); }
.dw .dw-btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.dw .dw-btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.dw .dw-btn--primary.is-clean { background: transparent; border-color: var(--line); color: var(--muted); font-weight: 500; }
@keyframes dw-bump { 0% { transform: none; } 40% { transform: scale(1.3); } 100% { transform: none; } }

/* сам оверлей — как рисует программа; размеры считаются от --s (масштаб × размер шрифта), --w (ширина)
   и --k (уменьшение сцены на узком экране, задаётся у .dw-scene) */
.ov {
  --s: 1;
  --w: 236px;
  --ox: 0px;
  --oy: 0px;
  --tx: 0%;
  --ty: 0%;
  position: absolute;
  z-index: 1;
  width: calc(var(--w) * var(--k, 1));
  padding: calc(10px * var(--s) * var(--k, 1)) calc(11px * var(--s) * var(--k, 1));
  color: #F2F2F2;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: calc(12px * var(--s) * var(--k, 1));
  line-height: 1.32;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  user-select: none;
  transform: translate(var(--tx), var(--ty));
  transition: opacity .2s;
}
.ov[data-v="top"] { top: calc(12px + var(--oy)); }
.ov[data-v="bottom"] { bottom: calc(12px + var(--oy)); }
.ov[data-v="middle"] { top: 50%; --ty: -50%; }
.ov[data-h="left"] { left: calc(12px + var(--ox)); }
.ov[data-h="right"] { right: calc(12px + var(--ox)); }
.ov[data-h="center"] { left: 50%; --tx: -50%; }
/* оверлей выше сцены не уходит за верхний край — как в программе, где он не поднимается выше края экрана */
.ov[data-fit="top"] { top: 12px; bottom: auto; --ty: 0%; }
.ov.is-hidden { opacity: .18; }
.ov .o-time { font-weight: 700; font-size: 1.25em; margin-bottom: .2em; }
.ov .o-fps { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; font-size: 1.9em; line-height: 1.1; margin-bottom: .15em; }
.ov .o-det { font-size: .95em; word-spacing: .12em; }
.ov .o-game { font-size: .88em; opacity: .9; margin: .15em 0 .1em; }
.ov .o-api { font-weight: 700; font-size: .95em; }
.ov .o-sep { height: 1px; background: rgba(255, 255, 255, .2); margin: .6em 0 .65em; }
.ov .o-gap { height: .7em; }
.ov .o-title { font-weight: 700; font-size: 1.18em; margin-bottom: .2em; }
.ov .o-row { display: flex; justify-content: space-between; gap: 1em; }
.ov .o-row b { font-weight: 700; }
.ov .o-cores { display: block; width: 100%; height: 2.2em; margin: .35em 0 .2em; }
.ov .o-graph { display: block; width: 100%; margin-top: .7em; }
.ov .o-ms { font-weight: 700; font-size: .88em; }
.ov.line { width: max-content; max-width: calc(100% - 24px); display: flex; flex-wrap: wrap; align-items: center; gap: .15em .9em; padding-block: .45em; }
.ov.line .o-grp { white-space: nowrap; }
.ov.line .o-grp b { font-weight: 700; }

/* полоса «Лёгкий · Точный · Совместимый · Безопасный» */
.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}
.fact { padding: 24px 28px 26px; border-left: 1px solid var(--line); }
.fact:first-child { border-left: 0; padding-left: var(--pad); }
.fact b { display: block; font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.fact span { display: block; color: var(--muted); font-size: 14px; line-height: 1.45; }

/* возможности */
.feature { transition: background-color .18s; }
.feature:hover { background: var(--hover-row); }
.feature__top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); }
.feature__top .ico { transition: color .18s; }
.feature:hover .feature__top .ico { color: var(--accent); }
.feature__n { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.feature h3 { margin: 36px 0 10px; font-size: 19px; letter-spacing: -.01em; line-height: 1.25; }
.feature p { color: var(--muted); font-size: 15px; line-height: 1.6; }

/* версия */
.version-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 0;
  font-family: var(--font-mono);
  font-size: clamp(30px, 3.2vw, 40px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.02em;
}
#versionStatus { margin: 12px 0 24px; color: var(--muted); font-size: 14.5px; }

.notes { margin: 0; padding: 0; list-style: none; }
.notes li, .versions li {
  position: relative;
  padding: 10px 0 10px 20px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
}
.notes li:first-child { border-top: 1px solid var(--line); }
.notes li::before, .versions li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: calc(10px + .78em);
  width: 8px;
  height: 1px;
  background: var(--muted);
}
.news-link-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  color: inherit;
  text-decoration: none;
  transition: background-color .18s;
}
.news-link-card:hover { background: var(--hover-row); }
.news-link-card .resource-card-link { margin-top: 20px; }
.cell p { color: var(--muted); font-size: 15px; }

/* помощь: две большие строки-ссылки */
.link-cell {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 18px;
  color: inherit;
  text-decoration: none;
  transition: background-color .18s;
}
.link-cell:hover { background: var(--hover-row); }
.link-cell > .ico { margin-top: 3px; color: var(--muted); transition: color .18s; }
.link-cell:hover > .ico { color: var(--accent); }
.link-cell h3 { font-size: 19px; letter-spacing: -.01em; margin-bottom: 8px; }
.link-cell p { color: var(--muted); font-size: 15px; margin-bottom: 18px; }

/* ============================== 7. Покупка ключа ============================== */
.buy {
  display: grid;
  justify-items: center;
  padding: 64px var(--pad) 96px;
}
/* .card — контейнер, который скрипт заменяет на «Оплата прошла успешно»: класс не менять */
.page-buy .card {
  width: min(640px, 100%);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.dialog__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 44px;
  padding: 0 20px;
  background: var(--chrome);
  border-bottom: 1px solid var(--line-strong);
}
.dialog__body { padding: 32px 36px 36px; }
.page-buy .card h1 {
  font-size: clamp(28px, 4vw, 36px);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: 12px;
}
.page-buy .card h1 span { color: var(--accent); }
.page-buy .card p { color: var(--muted); font-size: 15.5px; line-height: 1.65; }

.price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 28px 0 4px;
  padding: 16px 0;
  border-block: 1px solid var(--line);
  color: var(--muted);
  font-size: 15px;
}
.price span {
  font-size: 32px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  line-height: 1;
  color: var(--text);
}

.page-buy label.field { display: block; margin: 24px 0 8px; color: var(--muted); font-size: 14px; font-weight: 500; }
.page-buy .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.page-buy .actions .btn { flex: 1 1 200px; }

.page-buy .notice {
  padding: 18px 36px 20px;
  background: var(--chrome);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.65;
}

/* состояние «Оплата прошла успешно» (разметку создаёт скрипт buy-key.html) */
.success-view { padding: 48px 36px 40px; text-align: center; }
.success-mark {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 24px;
  border: 1px solid rgba(91, 201, 138, .45);
  border-radius: 50%;
  color: transparent;
  font-size: 0;
  animation: itog-pop .36s var(--ease) both;
}
.success-mark::before {
  content: "";
  width: 26px;
  height: 26px;
  background: var(--success);
  -webkit-mask: var(--i-check) center / contain no-repeat;
  mask: var(--i-check) center / contain no-repeat;
}
.success-view h1 { margin-bottom: 14px; }
.success-view p { max-width: 52ch; margin-inline: auto; }
.success-note {
  display: grid;
  margin: 28px 0 8px;
  text-align: left;
  border-top: 1px solid var(--line);
}
.success-note > div { padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.success-note strong { color: var(--text); font-weight: 600; }
.success-view .actions { justify-content: center; margin-top: 24px; }

/* ============================== 8. «Что нового» ============================== */
.versions .card {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 24px;
  padding: 28px var(--pad) 32px;
  border-bottom: 1px solid var(--line);
}
.versions .card h2 {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--muted);
  padding-top: 8px;
}
.versions .card:first-child h2 { color: var(--text); }
.versions .card:first-child h2::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 10px;
  vertical-align: 2px;
  border-radius: 50%;
  background: var(--accent);
}
.versions ul { margin: 0; padding: 0; list-style: none; }
.versions li:first-child { border-top: 0; }
.versions li:last-child { border-bottom: 0; }
.versions .empty { grid-column: 1 / -1; color: var(--muted); }

.page-news .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 32px var(--pad) 40px;
  border-top: 1px solid var(--line-strong);
}
.download-group { display: grid; justify-items: start; gap: 10px; }

/* ============================== 9. FAQ и документы ============================== */
.group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 0 var(--pad);
  border-bottom: 1px solid var(--line-strong);
  scroll-margin-top: var(--titlebar-h);
}
.faq-group + .faq-group .group-head, .known-issues, .contact { border-top: 1px solid var(--line-strong); }
.faq-group { scroll-margin-top: var(--titlebar-h); }

.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 0; }
.faq-list summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  gap: 20px;
  align-items: start;
  padding: 18px var(--pad);
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.45;
  list-style: none;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "";
  width: 16px;
  height: 16px;
  margin-top: 4px;
  background: var(--muted);
  -webkit-mask: var(--i-chevron) center / contain no-repeat;
  mask: var(--i-chevron) center / contain no-repeat;
  transition: transform .22s var(--ease), background-color .18s;
}
.faq-list summary:hover { background: var(--hover-row); }
.faq-list details[open] > summary::after { transform: rotate(180deg); background: var(--accent); }
.faq-list details > :not(summary) {
  margin-inline: var(--pad);
  max-width: 76ch;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.7;
}
.faq-list details > :not(summary):last-child { padding-bottom: 24px; }
.faq-list details > p + p, .faq-list details > ol + p, .faq-list details > p + ol { margin-top: 12px; }
.faq-list details[open] > :not(summary) { animation: itog-rise .22s var(--ease); }
.faq-list strong { color: var(--text); font-weight: 600; }

.faq-list ol, .legal ol {
  counter-reset: itog-ol;
  margin: 0;
  padding: 0;
  list-style: none;
}
.faq-list ol li, .legal ol li {
  counter-increment: itog-ol;
  position: relative;
  padding: 10px 0 10px 36px;
  border-bottom: 1px solid var(--line);
}
.faq-list ol li:first-child { border-top: 1px solid var(--line); }
.faq-list ol li::before, .legal ol li::before {
  content: counter(itog-ol, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.7rem;
  color: var(--dim);
}
.list-intro { margin-bottom: 10px; }
.system-support { display: grid; gap: 14px; }
.system-support-note { font-size: 14px; }
.system-support .system-table-wrap { max-width: 100%; }
.faq-list details > .system-support { max-width: none; }

.known-issues, .contact { padding: 0 0 32px; }
.known-issues h2 { font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.known-issues > p, .known-issues > ul { margin-inline: var(--pad); }
.known-issues > p { margin-top: 20px; color: var(--muted); }
.known-issues ul { margin-top: 12px; padding: 0; list-style: none; }
.known-issues li {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.known-issues li:first-child { border-top: 1px solid var(--line); }
.known-issues li::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  background: var(--danger);
  -webkit-mask: var(--i-warn) center / contain no-repeat;
  mask: var(--i-warn) center / contain no-repeat;
}
.contact { display: flex; align-items: center; gap: 18px; padding: 28px var(--pad) 36px; }
.contact::before {
  content: "";
  width: 20px;
  height: 20px;
  flex: none;
  align-self: flex-start;
  margin-top: 3px;
  background: var(--muted);
  -webkit-mask: var(--i-support) center / contain no-repeat;
  mask: var(--i-support) center / contain no-repeat;
}
.contact strong { display: block; margin-bottom: 4px; font-size: 18px; font-weight: 600; }
.contact p { color: var(--muted); }

/* юридические тексты: читаемая колонка, пункты — полосами */
.legal {
  max-width: 820px;
  padding: 12px var(--pad) 64px;
  font-size: 15.5px;
  line-height: 1.75;
}
.legal p { margin: 0 0 12px; color: var(--text); }
.legal > p:first-child { color: var(--muted); font-size: 17px; margin-top: 24px; }
.legal h2 {
  margin: 36px 0 14px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -.01em;
  scroll-margin-top: calc(var(--titlebar-h) + 8px);
}
.legal .section:first-of-type h2, .legal > .intro + .section h2 { margin-top: 32px; }
.legal .intro p { color: var(--muted); font-size: 17px; margin-top: 24px; }
.legal .seller {
  margin: 8px 0 12px;
  border-top: 1px solid var(--line);
  font-size: 15px;
}
.legal .seller p { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--line); }
.legal__back { margin-top: 40px; }

/* ============================== 10. Магазин (/remshop) ============================== */
.page-feedback { --aside-w: 440px; }
.page-shop main > .hero, .page-feedback main > .hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--aside-w);
  border-bottom: 1px solid var(--line-strong);
}
.page-shop main > .hero > div, .page-feedback main > .hero > div:first-child { padding: 64px var(--pad) 52px; }
.page-shop main > .hero h1, .page-feedback main > .hero h1 {
  font-size: clamp(36px, 4.8vw, 58px);
  line-height: 1.04;
  letter-spacing: -.028em;
  margin-bottom: 18px;
}
.page-shop main > .hero h1 span, .page-feedback main > .hero h1 span, .page-checkout h1 span { color: var(--accent); }
.hero-copy { max-width: 56ch; color: var(--muted); font-size: 18px; line-height: 1.6; }
.hero-actions { margin-top: 28px; }
.review-cta-icon { color: var(--accent); font-size: 16px; line-height: 1; }

.hero-side {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--pad) 52px;
  border-left: 1px solid var(--line-strong);
}
.hero-side dl { margin: 0; }
.hero-side dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.hero-side dl > div:first-child { border-top: 1px solid var(--line); }
.hero-side dt { color: var(--muted); font-size: 14px; }
.hero-side dd { margin: 0; font-size: 15px; text-align: right; }

.shop-layout, .checkout-layout, .content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--aside-w);
  align-items: start;
  /* граница колонок во всю высоту, хотя правая колонка «прилипает» при прокрутке */
  background: linear-gradient(var(--line-strong), var(--line-strong)) calc(100% - var(--aside-w)) 0 / 1px 100% no-repeat;
}
.shop-layout > div, .form-stack, .reviews-column { min-width: 0; }
.checkout, .page-checkout .summary, .form-column {
  position: sticky;
  top: var(--titlebar-h);
  min-width: 0;
}

.panel { border-bottom: 1px solid var(--line-strong); }
.panel:last-child { border-bottom: 0; }
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--line);
}
.panel-head h2, .panel-head h3 {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.panel-head .btn { --btn-h: 32px; padding: 0 12px; font-size: 13px; }
.panel-body { padding: 20px 24px 24px; }

.form-stack .panel-head, .form-stack .panel-body, .reviews-column .panel-head, .reviews-column .panel-body { padding-inline: var(--pad); }

/* карточка товара (разметку создаёт скрипт /remshop) */
.products { display: grid; }
.product-card {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  border-bottom: 1px solid var(--line);
}
.product-card:last-child { border-bottom: 0; }
.product-media {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 28px 24px 28px var(--pad);
  border-right: 1px solid var(--line);
}
.thumb-rail {
  display: grid;
  grid-auto-rows: 72px;
  gap: 8px;
  max-height: 560px;
  overflow-y: auto;
  scrollbar-width: none;
}
.thumb-rail::-webkit-scrollbar { display: none; }
.thumb {
  display: block;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--raised);
  overflow: hidden;
  opacity: .62;
  cursor: pointer;
  transition: opacity .18s, border-color .18s;
}
.thumb:hover { opacity: 1; border-color: var(--line-strong); }
.thumb.is-active { opacity: 1; border-color: var(--text); }
.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-stage {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--raised);
}
.main-photo { display: block; width: 100%; height: auto; animation: itog-fade .22s var(--ease); }

.product-body { padding: 28px var(--pad) 32px 28px; }
.product-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-strong);
}
.product-title-row h3 { font-size: 28px; letter-spacing: -.02em; line-height: 1.15; }
.product-title-row .price {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 26px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.product-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 18px 0; list-style: none; }
.product-meta li {
  padding: 0 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 24px;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}
.option-block { padding: 18px 0 20px; border-top: 1px solid var(--line); }
.option-title { font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.color-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.color-choice {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--raised);
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .18s var(--ease), color .18s, border-color .18s;
}
.color-choice:hover { color: var(--text); border-color: var(--line-strong); }
.color-choice.is-active { background: var(--selected); color: var(--text); border-color: var(--line-strong); box-shadow: inset 0 0 0 1px var(--line-strong); }
.color-choice:disabled { opacity: .42; cursor: not-allowed; }
.swatch {
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
}
.stock-lamp { order: 1; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--dim); }
.stock-lamp.is-green { background: var(--success); }
.stock-lamp.is-yellow { background: var(--accent); }
.stock-lamp.is-red { background: var(--danger); }
.stock-lamp.is-out { background: var(--dim); }

.product-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.product-actions .btn { flex: 1 1 180px; }
.qty-stepper {
  display: inline-grid;
  grid-template-columns: 42px 46px 42px;
  height: var(--control-h);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--raised);
  overflow: hidden;
}
.qty-stepper button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.qty-stepper button:hover { background: var(--selected); color: var(--text); }
.qty-stepper output {
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  border-inline: 1px solid var(--line);
}

/* корзина и итог */
.cart-items { display: grid; }
.cart-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.cart-line:first-child { padding-top: 0; }
.cart-name { font-size: 15px; font-weight: 500; }
.cart-detail { color: var(--muted); font-size: 13px; }
.cart-sum { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.empty-cart { padding: 0 0 14px; color: var(--muted); font-size: 14px; border-bottom: 1px solid var(--line); }

.summary-row, .sum-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  color: var(--muted);
  font-size: 14px;
}
.summary-row span:last-child, .sum-row span:last-child { text-align: right; }
.summary-row:last-child, .sum-row:last-child {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line-strong);
  color: var(--text);
}
.summary-row strong, .sum-row strong { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.page-shop .summary { margin-top: 8px; }
#subtotal, #deliveryTotal { font-variant-numeric: tabular-nums; }

.fineprint { margin: 14px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }

.page-shop .notice, .page-checkout .notice {
  display: none;
  position: relative;
  margin-top: 14px;
  padding: 11px 14px 11px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--raised);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
}
.page-shop .notice::before, .page-checkout .notice::before { background: var(--success); }
.page-shop .notice.is-visible, .page-checkout .notice.is-visible { display: block; animation: itog-rise .22s var(--ease); }
.page-shop .notice.is-error::before, .page-checkout .notice.is-error::before { background: var(--danger); }

/* ============================== 11. Оформление заказа (/checkout-remshop.html) ============================== */
.title-row { padding: 52px var(--pad) 40px; border-bottom: 1px solid var(--line-strong); }
.title-row h1 { font-size: clamp(32px, 4.2vw, 48px); line-height: 1.08; letter-spacing: -.022em; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.form-grid .is-wide { grid-column: 1 / -1; }
.page-checkout .field, .page-feedback .field { display: grid; gap: 8px; min-width: 0; margin: 0; }
.page-checkout .panel-body > .field + .field, .page-checkout .panel-body > .delivery-card + .field { margin-top: 20px; }
.page-checkout .field > span, .page-feedback .field > label, .page-feedback .field-label {
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}
.page-checkout .field small, .field-hint, .page-feedback .field small { color: var(--muted); font-size: 13px; line-height: 1.5; }

.search-picker, .point-picker { position: relative; }
.city-menu, .point-menu {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  max-height: 300px;
  overflow-y: auto;
  padding: 4px;
  background: var(--popup);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-popup);
}
.city-menu.is-visible, .point-menu.is-visible { display: block; animation: itog-rise .18s var(--ease); }
.city-option, .point-option {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background-color .12s;
}
.city-option:hover, .point-option:hover, .city-option:focus-visible, .point-option:focus-visible { background: var(--selected); outline: none; }
.city-option b, .point-option b { font-size: 14.5px; font-weight: 500; }
.city-option small, .point-option small { color: var(--muted); font-size: 12.5px; }
.city-empty, .point-empty { padding: 12px; color: var(--muted); font-size: 13.5px; }

.delivery-card {
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: visible;
}
.delivery-title {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  background: var(--chrome);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.cdek-slot { display: grid; gap: 10px; padding: 16px; }
.cdek-slot > b { font-size: 15px; font-weight: 600; }
.cdek-slot > span { color: var(--muted); font-size: 14px; }

.page-checkout .summary .panel-body > .btn, #submitButton { width: 100%; }
.page-checkout .checks { margin: 18px 0 0; }

/* ============================== 12. Отзывы (/remshop/feedback) ============================== */
.hero-card { position: relative; overflow: hidden; border-left: 1px solid var(--line-strong); min-height: 320px; }
.hero-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-card-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 20px 16px;
  background: rgba(9, 10, 12, .9);
  border-top: 1px solid var(--line-strong);
}
.hero-card-copy strong { display: block; font-size: 15px; font-weight: 600; }
.hero-card-copy span { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.45; }

.trust-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--line-strong);
}
.trust-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 14px;
  padding: 22px 28px 24px;
  border-left: 1px solid var(--line);
}
.trust-item:first-child { border-left: 0; padding-left: var(--pad); }
.trust-icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}
.trust-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.trust-item strong { display: block; margin-bottom: 4px; font-size: 15px; font-weight: 600; }
.trust-item span { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.5; }

.review-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.review-tools label { display: block; }
.reviews-column .panel-head { flex-wrap: wrap; }
.review-sort { --control-h: 36px; min-height: 36px; width: auto; font-size: 13.5px; }
.panel-head .step-label { margin: 0; font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--muted); }

.rating-summary {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 32px;
  padding-bottom: 24px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line-strong);
}
.rating-score { display: grid; justify-items: start; align-content: start; gap: 8px; }
.rating-score strong { font-family: var(--font-mono); font-size: 56px; font-weight: 500; line-height: 1; letter-spacing: -.03em; }
.stars { color: var(--accent); font-size: 18px; letter-spacing: 3px; line-height: 1; }
.rating-score span { color: var(--muted); font-size: 13px; }
.rating-bars { display: grid; gap: 4px; align-content: center; }
.rating-bar {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) 32px;
  gap: 14px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--muted);
}
/* дорожка — ползунок-линейка программы: линия 1 px, заливка 2 px акцентом, риски через 10 % */
.bar-track {
  position: relative;
  height: 18px;
  background:
    linear-gradient(var(--line-strong), var(--line-strong)) 0 8px / 100% 1px no-repeat,
    linear-gradient(var(--dim), var(--dim)) 100% 100% / 1px 4px no-repeat,
    repeating-linear-gradient(90deg, var(--dim) 0 1px, transparent 1px 10%) 0 100% / 100% 4px no-repeat;
}
.bar-track span {
  display: block;
  width: 0;
  height: 2px;
  margin-top: 7.5px;
  background: var(--accent);
  transition: width .3s var(--ease);
}
.bar-count { text-align: right; }

.reviews-list { display: grid; }
.review-card { padding: 20px 0; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--titlebar-h) + 12px); }
.review-card:last-child { border-bottom: 0; }
.review-card h3 { display: flex; align-items: center; flex-wrap: wrap; min-width: 0; max-width: 100%; gap: 10px; margin: 0 0 6px; font-size: 16px; }
.review-card h3 > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.review-stars { display: inline-flex; gap: 1px; font-size: 14px; line-height: 1; letter-spacing: 1px; }
.review-stars-filled { color: var(--accent); }
.review-stars-empty { color: var(--dim); }
.review-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.review-date { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.review-card p { color: var(--text); line-height: 1.65; overflow-wrap: anywhere; }
.review-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.review-photo {
  width: 88px;
  height: 66px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--raised);
  overflow: hidden;
  cursor: zoom-in;
  transition: border-color .15s, transform .15s var(--ease);
}
.review-photo:hover { border-color: var(--line-strong); }
.review-photo:active { transform: scale(.97); }
.review-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.empty-state {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 20px 0 4px;
  padding: 48px 24px;
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
}
.empty-state h3 { font-size: 20px; }
.empty-state p { max-width: 46ch; color: var(--muted); }

.step-label { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 14.5px; font-weight: 600; }
.step-number {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field-grid .field-wide { grid-column: 1 / -1; }
.page-feedback fieldset { min-width: 0; margin: 0; padding: 0; border: 0; transition: opacity .2s; }
.page-feedback fieldset:disabled { opacity: .42; }
.page-feedback fieldset .field { margin-bottom: 16px; }
.page-feedback .field-grid .field { margin-bottom: 0; }
.page-feedback .field-grid + .verify-note, .page-feedback fieldset .field-grid { margin-bottom: 16px; }
.verify-note { margin: 14px 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.status-note { display: none; }
.status-note.is-visible { display: block; animation: itog-rise .22s var(--ease); }
.form-divider { height: 1px; margin: 24px -24px; background: var(--line); }
#verifyButton, .page-feedback fieldset > .btn { width: 100%; }

.star-picker { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.star-picker input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.star-picker label {
  padding: 0 2px;
  font-size: 28px;
  line-height: 1;
  color: var(--dim);
  cursor: pointer;
  transition: color .15s, transform .15s var(--ease);
}
.star-picker label:hover, .star-picker label:hover ~ label, .star-picker input:checked ~ label { color: var(--accent); }
.star-picker label:hover { transform: translateY(-1px); }
.star-picker input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }

.field-hint-row { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12.5px; }
#reviewCounter { font-family: var(--font-mono); white-space: nowrap; }
.upload-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 64px;
  padding: 12px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.upload-box::before {
  content: "";
  width: 16px;
  height: 16px;
  background: var(--muted);
  -webkit-mask: var(--i-photo) center / contain no-repeat;
  mask: var(--i-photo) center / contain no-repeat;
}
.upload-box:hover { background: var(--raised); border-color: var(--muted); }
.upload-box strong { font-size: 14px; font-weight: 500; }
#photoStatus.is-error { color: var(--danger); }
.check-row { margin: 18px 0; font-size: 13.5px; }

.moderation-list { margin: 0; padding: 0; list-style: none; }
.moderation-list li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.moderation-list li:first-child { padding-top: 0; }
.moderation-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.moderation-list b {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}
.moderation-list strong { display: block; font-size: 14.5px; font-weight: 600; }
.moderation-list span { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.5; }

.photo-viewer {
  width: min(1040px, calc(100% - 28px));
  max-height: calc(100vh - 28px);
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--chrome);
  color: var(--text);
  overflow: hidden;
}
.photo-viewer::backdrop { background: rgba(0, 0, 0, .82); }
.photo-viewer[open] { animation: itog-pop .22s var(--ease); }
.photo-viewer img { display: block; width: 100%; max-height: calc(100vh - 80px); object-fit: contain; }
.photo-viewer-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(9, 10, 12, .9);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.photo-viewer-close:hover { background: var(--close-hover); border-color: var(--close-hover); color: #fff; }

/* ============================== 13. Движение ============================== */
@keyframes itog-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes itog-crumb { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes itog-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes itog-pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  body > main { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================== 14. Адаптив ============================== */
@media (max-width: 1240px) {
  .frame { border-inline-color: transparent; }
}

@media (max-width: 1100px) {
  :root { --pad: 28px; }
  .topnav a { padding: 0 12px; }
  .crumb { display: none; }
  .cells--4, .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cells--4 .cell:nth-child(3), .facts .fact:nth-child(3) { border-left: 0; padding-left: var(--pad); }
  .cells--4 .cell:nth-child(n+3), .facts .fact:nth-child(n+3) { border-top: 1px solid var(--line); }
  .cells--4 .cell:nth-child(1) { padding-left: var(--pad); }
  .cells--3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cells--3 .cell:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); padding-left: var(--pad); }
  .cells--3 .cell:nth-child(1) { padding-left: var(--pad); }
  .product-card { grid-template-columns: minmax(0, 1fr); }
  .product-media { border-right: 0; border-bottom: 1px solid var(--line); padding-right: var(--pad); }
  .product-body { padding-left: var(--pad); }
  :root { --aside-w: 340px; }
  .page-feedback { --aside-w: 380px; }
}

@media (max-width: 900px) {
  .hero, .page-shop main > .hero, .page-feedback main > .hero { grid-template-columns: minmax(0, 1fr); }
  .hero__side, .hero-side, .hero-card { border-left: 0; border-top: 1px solid var(--line-strong); }
  .hero__text { padding-bottom: 40px; }
  .hero__side { padding-top: 32px; }
  .hero-side { padding-top: 24px; }
  .hero-card { min-height: 260px; max-height: 360px; }
  .dw { height: auto; }
  .dw-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 440px minmax(0, 480px); }
  .dw-nav { border-right: 0; border-bottom: 1px solid var(--line-strong); }
  .dw-nav-scroll { display: flex; overflow-x: auto; overflow-y: hidden; padding: 0; scrollbar-width: none; }
  .dw-nav-scroll::-webkit-scrollbar { display: none; }
  .dw-group, .dw-navfoot { display: none; }
  .dw .dw-item { flex: none; width: auto; height: 44px; padding: 0 14px; }
  .dw-pv { grid-row: 2; border-left: 0; border-bottom: 1px solid var(--line-strong); }
  .dw-content { grid-row: 3; }
  .dw-pvhead { height: 44px; }

  .shop-layout, .checkout-layout, .content-grid { grid-template-columns: minmax(0, 1fr); background: none; }
  .checkout, .page-checkout .summary, .form-column { position: static; border-top: 1px solid var(--line-strong); }

  .doc-layout { grid-template-columns: minmax(0, 1fr); }
  .doc-nav {
    position: sticky;
    top: var(--titlebar-h);
    z-index: 20;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line-strong);
    scrollbar-width: none;
  }
  .doc-nav::-webkit-scrollbar { display: none; }
  .doc-nav .nav-group { display: none; }
  .doc-nav__inner { position: static; display: flex; max-height: none; overflow: visible; padding: 0; }
  .nav-item { flex: none; min-height: 48px; padding: 0 16px; white-space: nowrap; }
  .nav-item .cnt { margin-left: 2px; }

  .versions .card { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .trust-row { grid-template-columns: minmax(0, 1fr); }
  .trust-item, .trust-item:first-child { border-left: 0; border-top: 1px solid var(--line); padding-left: var(--pad); }
  .trust-item:first-child { border-top: 0; }
  .statusbar__main { grid-template-columns: minmax(0, 1fr); }
  .statusbar__col + .statusbar__col { border-left: 0; border-top: 1px solid var(--line); }
}

@media (max-width: 760px) {
  :root { --pad: 16px; --control-h: 48px; }
  body { font-size: 15.5px; }

  .titlebar { position: static; }
  .titlebar__in { flex-wrap: wrap; gap: 0 10px; padding-left: var(--pad); }
  .titlebar__in > .brand { flex: 1; min-height: 56px; }
  .titlebar__cta { order: 2; margin: 0 var(--pad) 0 0; }
  .ver { display: none; }
  .btn--lg { padding: 0 16px; font-size: 15px; gap: 8px; }
  .topnav {
    order: 3;
    flex: 1 0 100%;
    margin: 0 0 0 calc(var(--pad) * -1);
    min-height: 44px;
    overflow-x: auto;
    border-top: 1px solid var(--line);
    scrollbar-width: none;
  }
  .topnav::-webkit-scrollbar { display: none; }
  .topnav a { padding: 0 var(--pad); }
  .doc-nav { top: 0; }
  html { scroll-padding-top: 64px; }

  .hero__text { padding-top: 44px; }
  .hero__text .lead, .hero-copy { font-size: 17px; }
  .hero__side { padding-bottom: 32px; }
  .page-head, .title-row { padding-top: 40px; padding-bottom: 32px; }
  .page-shop main > .hero > div, .page-feedback main > .hero > div:first-child { padding-top: 44px; padding-bottom: 36px; }

  .demo-stage { padding: 20px 0 28px; }
  .demo-lead { padding-inline: var(--pad); }
  .dw { border-radius: 0; border-inline: 0; }
  .dw-brand, .dw-ver, .dw-wbtns { display: none; }
  .dw-crumb i:first-child { display: none; }
  .dw-body { grid-template-rows: auto 460px minmax(0, 460px); }
  .dw-scene { --k: .74; }
  .dw-row { padding-inline: 16px; gap: 10px; }
  .dw-head, .dw-card-title { padding-inline: 16px; }
  .dw-row.is-note { padding-inline: 16px; }
  .dw select { min-width: 0; max-width: 160px; }
  .dw input[type="text"] { width: 130px; }
  .dw-rng input[type="range"] { width: 96px; }
  .dw-rng output { min-width: 44px; }
  .dw-hint { display: none; }
  .dw-status { gap: 12px; }
  .dw .dw-btn { min-width: 0; }
  .dw-tip { left: 16px; width: calc(100% - 32px); }

  .cells--2, .cells--3, .cells--4, .facts { grid-template-columns: minmax(0, 1fr); }
  .cell, .fact, .cells--3 .cell, .cells--4 .cell, .fact:first-child { padding-inline: var(--pad); border-left: 0; }
  .cell + .cell, .fact + .fact { border-top: 1px solid var(--line); }
  .cells--3 .cell:nth-child(3) { grid-column: auto; }
  .feature h3 { margin-top: 20px; }

  .buy { padding: 24px var(--pad) 56px; }
  .dialog__body, .success-view { padding: 24px 20px 28px; }
  .page-buy .notice { padding: 16px 20px 18px; }

  .form-grid, .field-grid { grid-template-columns: minmax(0, 1fr); }
  .panel-head, .panel-body, .form-stack .panel-head, .form-stack .panel-body, .reviews-column .panel-head, .reviews-column .panel-body { padding-inline: var(--pad); }
  .form-divider { margin-inline: calc(var(--pad) * -1); }
  .rating-summary { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .product-media { grid-template-columns: minmax(0, 1fr); padding: 16px var(--pad); }
  .thumb-rail { order: 2; grid-auto-flow: column; grid-auto-columns: 64px; grid-auto-rows: 64px; max-height: none; overflow-x: auto; }
  .product-body { padding: 20px var(--pad) 28px; }
  .product-title-row h3 { font-size: 24px; }

  .faq-list summary { font-size: 16px; padding-block: 16px; }
  .system-table thead { display: none; }
  .system-table, .system-table tbody, .system-table tr, .system-table td { display: block; }
  .system-table tr { padding: 8px 0; border-bottom: 1px solid var(--line); }
  .system-table tr:last-child { border-bottom: 0; }
  .system-table td { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 12px; padding: 4px 14px; border: 0; white-space: normal; }
  .system-table td::before { content: attr(data-label); font-family: var(--font-ui); font-size: 12.5px; color: var(--muted); }

  .seller > div { grid-template-columns: 120px minmax(0, 1fr); gap: 12px; }
  .contact { align-items: flex-start; }
  .page-news .actions .btn { width: 100%; }
  .download-group { justify-items: stretch; width: 100%; }
}

@media (max-width: 400px) {
  .titlebar__cta .mono { display: none; }
}


/* Shared support-copy toast: same styles as standalone support-copy.css. */
/* Всплывашка «Скопировано!» (support-copy.js) в стиле «Итог»: плашка подсказки программы,
   оранжевая черта слева. Файл самодостаточный — страница может подключать его и без itog.css. */
.support-copy-toast {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 10000;
  min-width: 150px;
  padding: 10px 18px 10px 20px;
  overflow: hidden;
  border: 1px solid #353A42;
  border-radius: 6px;
  background: #16181C;
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .8);
  color: #E3E6EA;
  font: 500 14px/1.35 "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity .18s cubic-bezier(.22, 1, .36, 1), transform .22s cubic-bezier(.22, 1, .36, 1);
}

.support-copy-toast::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #FF6A00;
}

.support-copy-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
  .support-copy-toast { transition: none; }
}