/* =========================================================
   ГЕНЕРАТОР FAVICON — стили пошагового мастера.
   Использует глобальные переменные дизайн-системы сайта
   (--color-accent, --radius-*, --shadow-*, --transition-fast и т.д.
   из style.css) — здесь только то, чего в общей палитре ещё нет:
   служебные оттенки ошибки/предупреждения, локализованные под
   префикс fg-, чтобы не претендовать на общесайтовые токены.
   ========================================================= */

:root {
  --fg-border: rgba(43, 47, 51, 0.09);
  --fg-danger: #c94747;
  --fg-danger-bg: rgba(201, 71, 71, 0.07);
  --fg-warning: #b8791a;
  --fg-warning-bg: rgba(184, 121, 26, 0.08);
}

  h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }

  /* Строчная высота глифа иконки по умолчанию наследуется от текста
     страницы и часто оказывается выше самого символа — из-за этого
     иконка внутри flex-центрированного контейнера может визуально
     "плыть" на пару пикселей от геометрического центра. Явный
     line-height:1 на самом классе иконки убирает эту неопределённость
     сразу везде, а не точечно на каждом отдельном месте использования. */
  [class^="ri-"]:not(:is(.sidebar, .mobile-header, .mobile-nav-panel, .notice-slider, .breadcrumbs, .tool-faq, .site-footer) *),
  [class*=" ri-"]:not(:is(.sidebar, .mobile-header, .mobile-nav-panel, .notice-slider, .breadcrumbs, .tool-faq, .site-footer) *) { line-height: 1; }

  .fw-progress-wrap { margin-bottom: 28px; }
  .fw-progress-label {
    display: flex; align-items: baseline; justify-content: space-between;
    font-size: 13px; color: var(--color-muted); margin-bottom: 8px; font-weight: 600;
  }
  .fw-progress-label strong { color: var(--color-text-strong); font-weight: 700; }
  .fw-progress-track { height: 4px; background: var(--fg-border); border-radius: 999px; overflow: hidden; }
  .fw-progress-fill { height: 100%; background: var(--color-accent); border-radius: 999px; width: 0%; transition: width 260ms ease; }

  .fw-step { display: none; }
  .fw-step.is-active { display: block; animation: fwFadeIn 220ms ease; }
  @keyframes fwFadeIn { from { opacity:0; transform: translateY(6px);} to {opacity:1; transform:none;} }

  .fw-step-title { font-size: 24px; margin-bottom: 6px; }
  .fw-step-optional { font-size: 15px; font-weight: 500; color: var(--color-muted); }
  .fw-step-why {
    display: flex; gap: 8px; align-items: flex-start;
    font-size: 14px; color: var(--color-muted); line-height: 1.6; margin-bottom: 24px; max-width: 620px;
  }
  .fw-step-why i { color: var(--color-accent-dark); font-size: 15px; margin-top: 2px; flex-shrink: 0; }

  .fw-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; align-items: stretch; }
  @media (max-width: 760px) { .fw-grid { grid-template-columns: 1fr; } }

  .fw-panel {
    background: var(--color-surface); border: 1px solid var(--fg-border);
    border-radius: var(--radius-lg); padding: 24px;
    display: flex; flex-direction: column;
  }
  @media (max-width: 480px) { .fw-panel { padding: 18px; } }
  .fw-panel-label {
    font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--color-muted); margin-bottom: 14px; display: flex; align-items: center; gap: 6px;
  }
  .fw-panel-label.is-live { color: var(--color-accent-dark); }
  .fw-panel-label.is-live i { animation: fwPulse 1.8s ease-in-out infinite; }
  @keyframes fwPulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }

  /* ---------- upload ----------
     Первый экран инструмента — от него формируется всё первое
     впечатление, поэтому это не рядовая форма, а полноценный
     разворот: заголовок с ценностным посылом, крупная зона
     перетаскивания с явной кнопкой-действием и вторая колонка,
     которая сразу отвечает на вопрос "а что я вообще получу" —
     не заставляя гадать до конца мастера. */

  .fw-upload-hero { text-align: center; max-width: 620px; margin: 8px auto 40px; }
  .fw-upload-eyebrow {
    display: inline-flex; align-items: center; gap: 7px; line-height: 1;
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--color-accent-dark); background: rgba(29,217,122,0.1);
    padding: 7px 14px; border-radius: 999px; margin-bottom: 16px;
  }
  .fw-upload-eyebrow i { line-height: 1; }
  .fw-upload-hero h1 { font-size: 30px; margin-bottom: 12px; }
  .fw-upload-hero p { font-size: 16px; color: var(--color-muted); line-height: 1.6; margin: 0; }

  .fw-upload-layout {
    display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr);
    gap: 20px; align-items: stretch;
  }
  @media (max-width: 800px) { .fw-upload-layout { grid-template-columns: 1fr; } }

  /* Зона загрузки — сплошная карточка с тонкой рамкой (та же, что и
     у остальных панелей мастера), а не классический пунктирный
     прямоугольник: это самый шаблонный визуальный приём для дропзон,
     который есть у каждого второго инструмента в сети. Состояние
     "сюда можно перетащить" сообщается текстом и явной кнопкой, а не
     имитацией вырезанного контура. */
  .fw-dropzone {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    text-align: center;
    padding: 64px 32px; background: var(--color-surface);
    border: 1px solid var(--fg-border); border-radius: var(--radius-lg);
    cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  }
  .fw-dropzone:hover { border-color: rgba(29,217,122,0.4); box-shadow: var(--shadow-card); }
  .fw-dropzone.is-drag { border-color: var(--color-accent); background: rgba(29,217,122,0.05); box-shadow: var(--shadow-soft); transform: scale(1.005); }

  /* Иконка — тот же плотный акцентный язык, что у карточек по всему
     сайту (сплошной цвет + инсет-хайлайт), без лишних декоративных
     колец вокруг — они выглядели как шум, а не как деталь */
  .fw-dropzone-icon {
    width: 64px; height: 64px; border-radius: 50%; line-height: 1;
    background: var(--color-accent); color: #06231a;
    display: flex; align-items: center; justify-content: center; font-size: 27px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 10px 22px -8px rgba(29,217,122,0.5);
    margin-bottom: 6px;
  }
  .fw-dropzone-icon i { line-height: 1; }
  .fw-dropzone-title { font-size: 20px; }
  .fw-dropzone > p { font-size: 14px; color: var(--color-muted); margin: 0; }
  .fw-dropzone-btn {
    display: inline-flex; align-items: center; gap: 8px; line-height: 1;
    margin-top: 6px; padding: 11px 22px;
    background: var(--color-text-strong); color: #fff;
    border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 700;
    transition: background var(--transition-fast);
  }
  .fw-dropzone-btn i { line-height: 1; }
  .fw-dropzone:hover .fw-dropzone-btn { background: #000; }
  .fw-format-chips { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; justify-content: center; }
  .fw-format-chips span { font-size: 11.5px; font-weight: 700; color: var(--color-muted); background: var(--color-bg); padding: 5px 13px; border-radius: 999px; line-height: 1.4; }

  .fw-upload-benefits {
    background: var(--color-surface); border: 1px solid var(--fg-border);
    border-radius: var(--radius-lg); padding: 28px 26px;
  }
  .fw-upload-benefits h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); margin-bottom: 16px; }
  .fw-upload-benefits ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
  .fw-upload-benefits li { display: flex; align-items: flex-start; gap: 10px; }
  .fw-upload-benefits li i {
    flex-shrink: 0; width: 18px; height: 18px; line-height: 18px; text-align: center;
    color: var(--color-accent-dark); font-size: 12px; font-weight: 700;
    margin-top: 1px;
  }
  .fw-upload-benefits li span { font-size: 13.5px; color: var(--color-text); line-height: 1.55; }
  .fw-upload-benefits li strong { color: var(--color-text-strong); font-weight: 700; }

  .fw-upload-error {
    margin: 20px auto 0; display: flex; align-items: center; gap: 8px;
    font-size: 13.5px; color: var(--color-text-strong); background: var(--fg-danger-bg);
    border: 1px solid rgba(201,71,71,0.22); border-radius: var(--radius-sm); padding: 12px 16px; max-width: 600px;
  }
  .fw-upload-error i { color: var(--fg-danger); flex-shrink: 0; line-height: 1; }
  .fw-upload-error[hidden] { display: none; }
  .fw-upload-warning {
    margin: 16px auto 0; display: flex; align-items: flex-start; gap: 8px; text-align: left;
    font-size: 13px; color: var(--color-text-strong); background: var(--fg-warning-bg);
    border: 1px solid rgba(184,121,26,0.22); border-radius: var(--radius-sm); padding: 12px 16px; max-width: 600px;
  }
  .fw-upload-warning i { color: var(--fg-warning); flex-shrink: 0; margin-top: 1px; line-height: 1; }
  .fw-upload-warning[hidden] { display: none; }

  /* ---------- crop ---------- */
  .fw-crop-viewport {
    position: relative; width: 100%; aspect-ratio: 1/1; max-width: 340px; margin: 0 auto;
    overflow: hidden; border-radius: var(--radius-md); cursor: grab;
    /* Плашка под изображение — сплошная нейтральная заливка, без
       паттерна. Шахматный узор-индикатор прозрачности здесь не нужен
       технически (это просто рабочая область кадрирования, а не финальный
       превью с прозрачностью), а на скруглённом контейнере с overflow:hidden
       любой геометрический паттерн с жёсткими гранями визуально "рвётся"
       ровно на кривой угла — прямые линии клетки не следуют за скруглением. */
    background: var(--color-bg);
    border: 1px solid var(--fg-border); touch-action: none;
  }
  .fw-crop-viewport:active, .fw-crop-viewport.is-dragging { cursor: grabbing; }
  .fw-crop-viewport img { position: absolute; left:0; top:0; max-width:none; transform-origin: top left; user-select:none; -webkit-user-drag:none; pointer-events:none; }

  /* Сетка правила третей — подсказка для композиции, как в нормальных
     инструментах кадрирования (Photos, Instagram и т.п.). Проступает
     только во время самого перетаскивания: в статике она не нужна
     и только добавляла бы визуальный шум поверх логотипа */
  .fw-crop-grid {
    position: absolute; inset: 0; pointer-events: none;
    opacity: 0; transition: opacity var(--transition-fast);
  }
  .fw-crop-viewport.is-dragging .fw-crop-grid { opacity: 1; }
  .fw-crop-grid span { position: absolute; background: rgba(255,255,255,0.55); box-shadow: 0 0 0 1px rgba(0,0,0,0.12); }
  .fw-crop-grid span:nth-child(1) { left: 33.333%; top: 0; bottom: 0; width: 1px; }
  .fw-crop-grid span:nth-child(2) { left: 66.666%; top: 0; bottom: 0; width: 1px; }
  .fw-crop-grid span:nth-child(3) { top: 33.333%; left: 0; right: 0; height: 1px; }
  .fw-crop-grid span:nth-child(4) { top: 66.666%; left: 0; right: 0; height: 1px; }

  /* Плавающий бейдж масштаба — тот же приём, что у Figma/Photoshop,
     вместо сухого процента текстом рядом со слайдером */
  .fw-crop-zoom-badge {
    position: absolute; top: 10px; right: 10px; pointer-events: none;
    padding: 4px 10px; border-radius: 999px; line-height: 1.4;
    font-size: 11.5px; font-weight: 700; color: #fff;
    background: rgba(22,24,26,0.65); backdrop-filter: blur(2px);
  }

  .fw-field { margin-top: 18px; }
  .fw-field-label { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--color-text-strong); margin-bottom: 8px; }
  .fw-field-label span.val { color: var(--color-accent-dark); font-weight: 700; }
  .fw-reset-link {
    display: inline-flex; align-items: center; gap: 5px; line-height: 1;
    font-size: 12px; font-weight: 700; color: var(--color-muted);
    background: none; border: none; cursor: pointer; padding: 2px;
    transition: color var(--transition-fast);
  }
  .fw-reset-link i { line-height: 1; font-size: 12px; }
  .fw-reset-link:hover { color: var(--color-accent-dark); }
  /* Ползунок — один акцентный цвет на весь компонент (трек залит
     фирменным зелёным), а не два разных оттенка зелёного в соседних
     частях одного элемента, как было раньше (заливка трека — светлый
     акцент, обводка бегунка — тёмный акцент). Бегунок — чистый белый
     диск на мягкой тени без цветной обводки: цвет уже полностью
     "сказан" треком, бегунку не нужно повторять его ещё раз. */
  .fw-range { -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px; background: var(--fg-border); cursor:pointer; outline:none; }
  .fw-range::-webkit-slider-runnable-track { height:6px; border-radius:999px; background: linear-gradient(to right, var(--color-accent) var(--fill,0%), var(--fg-border) var(--fill,0%)); }
  .fw-range::-webkit-slider-thumb {
    -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%;
    background:#fff; box-shadow: 0 0 0 1px rgba(43,47,51,0.08), 0 2px 8px rgba(0,0,0,0.16);
    margin-top:-7px; cursor:pointer; transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  }
  .fw-range:hover::-webkit-slider-thumb { transform: scale(1.08); }
  .fw-range:active::-webkit-slider-thumb { transform: scale(0.94); box-shadow: 0 0 0 1px rgba(43,47,51,0.1), 0 1px 5px rgba(0,0,0,0.22); }
  .fw-range::-moz-range-track { height:6px; border-radius:999px; background: var(--fg-border); }
  .fw-range::-moz-range-progress { height:6px; border-radius:999px; background: var(--color-accent); }
  .fw-range::-moz-range-thumb {
    width:20px; height:20px; border-radius:50%; border:none;
    background:#fff; box-shadow: 0 0 0 1px rgba(43,47,51,0.08), 0 2px 8px rgba(0,0,0,0.16);
    cursor:pointer; transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  }
  .fw-range:hover::-moz-range-thumb { transform: scale(1.08); }
  .fw-range:active::-moz-range-thumb { transform: scale(0.94); }
  .fw-hint { font-size: 12.5px; color: var(--color-muted); line-height: 1.6; margin: 8px 0 0; }

  /* Форма значка — карточки с живым превью реального лого в каждой
     форме (не абстрактный тёмный квадрат): видно именно свой значок,
     а не общую иллюстрацию. Отмеченная карточка — тонкий акцентный
     контур и маленькая галочка в углу, без заливки цветом на всю
     площадь — сдержаннее и аккуратнее. */
  .fw-shape-row { display: flex; gap: 10px; margin-top: 10px; }
  .fw-shape-btn {
    position: relative;
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 14px 6px 12px; background: var(--color-surface);
    border: 1.5px solid var(--fg-border); border-radius: var(--radius-md);
    cursor: pointer; transition: border-color var(--transition-fast);
  }
  .fw-shape-btn:hover { border-color: rgba(29,217,122,0.4); }
  /* Раньше здесь border-color менялся ВМЕСТЕ с box-shadow того же
     цвета поверх — на скруглённом углу это два отдельно рендерящихся
     контура (граница элемента и тень), которые не совпадают до
     суб-пикселя при дробной ширине кнопки (flex:1 на троих редко даёт
     целое число px) — отсюда белесые огрехи ровно на кривой угла.
     Один контур постоянной толщины, меняется только цвет — без
     наложения второго слоя, артефакту неоткуда взяться. */
  .fw-shape-btn.is-selected { border-color: var(--color-accent); }

  .fw-shape-preview {
    width: 40px; height: 40px; overflow: hidden;
    background: var(--color-bg);
  }
  .fw-shape-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .fw-shape-preview--rounded { border-radius: 22%; }
  .fw-shape-preview--circle { border-radius: 50%; }

  .fw-shape-label { font-size: 11px; font-weight: 700; color: var(--color-text); }
  .fw-shape-btn.is-selected .fw-shape-label { color: var(--color-accent-dark); }

  .fw-shape-check {
    position: absolute; top: 6px; right: 6px;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--color-accent); color: #06231a;
    display: flex; align-items: center; justify-content: center; font-size: 10px;
    opacity: 0; transform: scale(0.6); transition: opacity var(--transition-fast), transform var(--transition-fast);
  }
  .fw-shape-btn.is-selected .fw-shape-check { opacity: 1; transform: scale(1); }

  /* big single preview area shared across steps — flex:1, чтобы
     заполнить панель по высоте до уровня соседней колонки настроек
     и центрировать содержимое вертикально, а не прилипать к верху */
  .fw-stage {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    flex: 1; min-height: 260px; gap: 18px;
  }
  .fw-mock-browser {
    width: 100%; max-width: 320px; border-radius: 10px; overflow: hidden; border: 1px solid var(--fg-border); background: #fff;
  }
  .fw-mock-browser-bar { display:flex; align-items:center; gap:8px; padding: 10px 12px; background:#eef0f1; }
  .fw-mock-browser-bar.is-dark { background:#2b2d31; }
  .fw-mock-dots { display:flex; gap:5px; }
  .fw-mock-dots span { width:7px; height:7px; border-radius:50%; background:#c9cccf; }
  .fw-mock-browser-bar.is-dark .fw-mock-dots span { background:#4a4d52; }
  .fw-mock-tab { display:flex; align-items:center; gap:7px; background:#fff; border-radius:6px 6px 0 0; padding:6px 12px; font-size:11px; color:#3c4043; margin-left:8px; }
  .fw-mock-browser-bar.is-dark .fw-mock-tab { background:#35363a; color:#e8eaed; }
  .fw-mock-tab img { width:14px; height:14px; flex-shrink:0; }
  .fw-mock-body { height: 60px; background: repeating-linear-gradient(135deg,#f7f8f9,#f7f8f9 10px,#eef0f1 10px,#eef0f1 20px); }
  .fw-mock-browser-bar.is-dark ~ .fw-mock-body { background: #1c1d20; }

  .fw-size-check { display:flex; align-items:center; gap:14px; padding: 14px 16px; background: var(--color-bg); border-radius: var(--radius-sm); }
  .fw-size-check img { width:16px; height:16px; flex-shrink:0; background:#fff; box-shadow: 0 0 0 1px var(--fg-border); }
  .fw-size-check span { font-size: 12.5px; color: var(--color-muted); line-height:1.5; }

  /* iOS mock */
  .fw-mock-ios { width: 100%; max-width: 300px; padding: 26px; border-radius: 34px; background: linear-gradient(165deg,#2c2f7a,#181a3d); display:flex; flex-direction:column; align-items:center; gap:14px; }
  .fw-mock-ios-icon { width: 74px; height: 74px; border-radius: 22px; box-shadow: 0 8px 18px rgba(0,0,0,0.35); overflow:hidden; }
  .fw-mock-ios-icon img { width:100%; height:100%; object-fit:cover; display:block; }
  .fw-mock-ios span { font-size: 11px; color: rgba(255,255,255,0.75); }
  .fw-transparency-toggle {
    display:flex; align-items:center; gap:8px; font-size: 12.5px; color: var(--color-muted); cursor:pointer; user-select:none;
  }
  .fw-transparency-toggle input { accent-color: var(--color-accent); }

  /* color picker */
  .fw-color-row { display: flex; align-items: flex-start; gap: 14px; margin-top: 10px; }
  .fw-swatch-btn { width: 52px; height: 52px; flex-shrink: 0; border-radius: var(--radius-sm); border: 1px solid var(--fg-border); box-shadow: var(--shadow-card); cursor: pointer; padding: 0; transition: transform var(--transition-fast); }
  .fw-swatch-btn:hover { transform: translateY(-2px); }
  .fw-color-native { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
  .fw-color-body { flex: 1; min-width: 0; }
  .fw-hex-input { width: 100%; max-width: 160px; padding: 9px 11px; border: 1px solid var(--fg-border); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--color-text-strong); background: var(--color-bg); }
  .fw-presets { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
  .fw-preset { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--fg-border); cursor: pointer; padding:0; transition: transform var(--transition-fast), box-shadow var(--transition-fast); }
  .fw-preset:hover { transform: scale(1.14); }
  .fw-preset.is-selected { box-shadow: 0 0 0 2px var(--color-accent-dark); }
  .fw-preset-magic { display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; background: linear-gradient(135deg,#6b7280,#374151); }
  .fw-preset-magic[hidden] { display:none; }
  .fw-color-warning {
    margin-top: 12px; display:flex; gap:8px; align-items:flex-start; font-size:12.5px; color: var(--color-text-strong);
    background: var(--fg-warning-bg); border:1px solid rgba(184,121,26,0.22); border-radius: var(--radius-sm); padding: 10px 14px;
  }
  .fw-color-warning i { color: var(--fg-warning); flex-shrink:0; margin-top:1px; }
  .fw-color-warning[hidden] { display:none; }

  /* safe zone */
  .fw-mask-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; width: 100%; }
  .fw-mask-cell { display:flex; flex-direction:column; align-items:center; gap:8px; }
  .fw-mask-shape { width: 100%; max-width: 108px; aspect-ratio:1/1; overflow:hidden; background:#fff; border:1px solid var(--fg-border); }
  .fw-mask-shape img { width:100%; height:100%; object-fit:cover; display:block; }
  .fw-mask-shape--circle { border-radius: 50%; }
  .fw-mask-shape--squircle { border-radius: 30%; }
  .fw-mask-shape--square { border-radius: 20%; }
  .fw-mask-cell span { font-size: 11.5px; font-weight: 700; color: var(--color-text-strong); }

  /* android address bar — форма таблетки, как в реальном Chrome Mobile,
     а не грубая чёрная рамка "телефона" */
  /* android address bar+status bar — показываем всю "верхнюю область"
     браузера целиком, которую реально красит theme-color: строку
     состояния (время/значки) и панель адреса с таблеткой URL, а не
     только саму таблетку изолированно */
  .fw-mock-android { width: 100%; max-width: 300px; display:flex; flex-direction:column; align-items:center; gap:12px; }
  .fw-mock-android-frame { width:100%; border-radius: 18px; overflow:hidden; border: 1px solid var(--fg-border); background:#fff; box-shadow: var(--shadow-card); }
  .fw-mock-android-statusbar {
    display:flex; align-items:center; justify-content:space-between;
    padding: 8px 16px 2px; background:#334155; color:#fff;
    font-size:10.5px; font-weight:700; transition: background var(--transition-fast), color var(--transition-fast);
  }
  .fw-mock-android-status-icons { display:flex; gap:5px; font-size:9px; }
  .fw-mock-android-toolbar {
    display:flex; align-items:center; gap:10px;
    padding: 10px 12px 14px; background:#334155; color:#fff;
    transition: background var(--transition-fast), color var(--transition-fast);
  }
  .fw-mock-android-toolbar > i { font-size:15px; opacity:0.85; flex-shrink:0; }
  .fw-mock-android-pill {
    flex:1; min-width:0; display:flex; align-items:center; gap:7px;
    padding: 8px 14px; border-radius:999px; background: rgba(255,255,255,0.16);
    font-size:12px; font-weight:600; transition: background var(--transition-fast);
  }
  .fw-mock-android-pill i { font-size:11px; opacity:0.8; flex-shrink:0; }
  .fw-mock-android-pill span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .fw-mock-android-body { height: 88px; background: repeating-linear-gradient(135deg,#f7f8f9,#f7f8f9 10px,#eef0f1 10px,#eef0f1 20px); }
  .fw-mock-android-caption { font-size:12px; color:var(--color-muted); text-align:center; }
  .fw-mock-android-caption--neutral { display:none; }
  .fw-mock-android.is-neutral .fw-mock-android-caption:not(.fw-mock-android-caption--neutral) { display:none; }
  .fw-mock-android.is-neutral .fw-mock-android-caption--neutral { display:block; }

  .fw-theme-controls { transition: opacity var(--transition-fast); }
  .fw-theme-controls.is-disabled { opacity: 0.4; pointer-events: none; }

  /* focus-состояния — единые для всех интерактивных элементов;
     без них клавиатурная навигация по мастеру попросту невозможна */
  .fw-dropzone:focus-visible,
  .fw-btn:focus-visible,
  .fw-shape-btn:focus-visible,
  .fw-swatch-btn:focus-visible,
  .fw-preset:focus-visible,
  .fw-hex-input:focus-visible,
  .fw-range:focus-visible,
  .fw-text-field input:focus-visible,
  .fw-copy-btn:focus-visible,
  .fw-transparency-toggle input:focus-visible ~ *,
  .fw-switch input:focus-visible ~ .fw-switch-track {
    outline: 2px solid var(--color-accent-dark); outline-offset: 2px;
  }
  .fw-hex-input:focus-visible, .fw-text-field input:focus-visible { outline-offset: 0; }

  /* buttons / nav */
  .fw-nav { display:flex; align-items:center; justify-content:space-between; gap: 12px; margin-top: 28px; }
  .fw-nav .fw-btn { white-space: nowrap; }
  /* На узких экранах кнопки Назад/Далее вместе не помещаются в строку
     (особенно на шаге кадрирования — "Заменить изображение" заметно
     длиннее, чем "Назад" на остальных шагах): переключаемся на
     колонку в полную ширину, а не позволяем тексту обрезаться или
     кнопкам вылезать за край контейнера */
  @media (max-width: 480px) {
    .fw-nav { flex-direction: column-reverse; align-items: stretch; }
    .fw-nav .fw-btn { justify-content: center; width: 100%; }
  }
  .fw-btn { display:inline-flex; align-items:center; gap:8px; padding: 12px 22px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 700; cursor:pointer; border:none; transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); }
  .fw-btn-primary { background: var(--color-text-strong); color: #fff; }
  .fw-btn-primary:hover { background:#000; box-shadow: var(--shadow-soft); transform: translateY(-1px); }
  .fw-btn-ghost { background: transparent; color: var(--color-muted); border: 1px solid var(--fg-border); }
  .fw-btn-ghost:hover { border-color: rgba(43,47,51,0.2); color: var(--color-text-strong); }
  .fw-btn:disabled { opacity: 0.4; cursor: not-allowed; transform:none; box-shadow:none; }

  /* review */
  .fw-review-gallery { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 14px; margin-bottom: 24px; }
  .fw-review-card { background: var(--color-surface); border:1px solid var(--fg-border); border-radius: var(--radius-md); padding: 16px; }
  .fw-review-card h4 { font-size: 11px; text-transform: uppercase; letter-spacing:0.04em; color: var(--color-muted); margin:0 0 12px; font-weight:700; }
  .fw-advanced { background: var(--color-surface); border:1px solid var(--fg-border); border-radius: var(--radius-lg); padding: 20px 24px; margin-bottom: 20px; }
  .fw-advanced summary { cursor:pointer; font-size:14px; font-weight:700; color: var(--color-text-strong); list-style:none; display:flex; align-items:center; gap:8px; }
  .fw-advanced summary::-webkit-details-marker { display:none; }
  .fw-advanced summary i { color: var(--color-muted); transition: transform var(--transition-fast); }
  .fw-advanced[open] summary i { transform: rotate(180deg); }
  .fw-advanced-body { padding-top:18px; display:flex; flex-direction:column; gap:16px; }
  .fw-text-field label { display:block; font-size:13px; font-weight:700; color:var(--color-text-strong); margin-bottom:6px; }
  .fw-text-field input[type=text] { width:100%; padding:10px 12px; border:1px solid var(--fg-border); border-radius:var(--radius-sm); font-size:14px; background:var(--color-bg); color:var(--color-text-strong); }
  .fw-toggle-row { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:14px 16px; background:var(--color-bg); border-radius:var(--radius-sm); }
  .fw-toggle-row strong { display:block; font-size:13.5px; color:var(--color-text-strong); }
  .fw-toggle-row span.d { display:block; font-size:12.5px; color:var(--color-muted); margin-top:3px; line-height:1.5; }
  .fw-switch { position:relative; width:42px; height:24px; flex-shrink:0; }
  .fw-switch input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
  .fw-switch-track { position:absolute; inset:0; background:rgba(43,47,51,0.18); border-radius:999px; transition:background var(--transition-fast); pointer-events:none; }
  .fw-switch-track::before { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform var(--transition-fast); box-shadow:0 1px 3px rgba(0,0,0,0.2); }
  .fw-switch input:checked ~ .fw-switch-track { background: var(--color-accent); }
  .fw-switch input:checked ~ .fw-switch-track::before { transform: translateX(18px); }

  .fw-code-wrap { margin-bottom:20px; }
  .fw-code-body { position:relative; }

  /* --- name preview: подпись значка ровно такая, какую увидит --- */
  .fw-name-preview { background: var(--color-bg); border-radius: var(--radius-sm); padding: 14px 16px; margin-top: 4px; }
  .fw-name-preview-label { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color: var(--color-accent-dark); margin-bottom:10px; }
  .fw-name-preview-row { display:flex; align-items:center; gap:10px; }
  .fw-name-preview-icon { width:32px; height:32px; border-radius:9px; overflow:hidden; border:1px solid var(--fg-border); background:#fff; flex-shrink:0; }
  .fw-name-preview-icon img { width:100%; height:100%; object-fit:cover; display:block; }
  .fw-name-preview-row span { font-size:12.5px; font-weight:600; color: var(--color-text-strong); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* --- standalone: маленькое сравнение "как будет выглядеть" --- */
  /* --- standalone: детализированное сравнение "браузер / приложение" ---
     Не абстрактные плашки, а два мини-макета телефона с реальной
     иконкой сайта внутри — обычный с полным хромом браузера
     (статус-бар + панель адреса) и standalone без него, только
     статус-бар и заголовок приложения вместо адресной строки */
  .fw-standalone-compare { display:flex; gap:16px; margin-top:16px; flex-wrap:wrap; }
  .fw-standalone-option { flex:1; min-width:180px; display:flex; flex-direction:column; align-items:center; gap:10px; padding:14px; border-radius: var(--radius-md); border: 1.5px solid transparent; transition: border-color var(--transition-fast), background var(--transition-fast); }
  .fw-standalone-option.is-active { border-color: var(--color-accent); background: rgba(29,217,122,0.06); }

  .fw-standalone-phone { width:100%; border-radius:16px; overflow:hidden; border:1px solid var(--fg-border); background:#fff; box-shadow: var(--shadow-card); }
  .fw-standalone-statusbar { display:flex; align-items:center; justify-content:space-between; padding:7px 12px 2px; background:#f4f5f6; font-size:9.5px; font-weight:700; color: var(--color-text-strong); }
  .fw-standalone-status-icons { display:flex; gap:4px; font-size:8.5px; }
  .fw-standalone-toolbar { display:flex; align-items:center; gap:8px; padding:8px 10px 12px; background:#f4f5f6; border-bottom:1px solid var(--fg-border); }
  .fw-standalone-toolbar > i { font-size:12px; color: var(--color-muted); flex-shrink:0; }
  .fw-standalone-pill { flex:1; min-width:0; display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:#fff; border:1px solid var(--fg-border); }
  .fw-standalone-pill img { width:12px; height:12px; flex-shrink:0; }
  .fw-standalone-pill span { font-size:10.5px; color: var(--color-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .fw-standalone-apptitle { display:flex; align-items:center; gap:8px; padding:10px 12px 12px; background:#fff; border-bottom:1px solid var(--fg-border); }
  .fw-standalone-apptitle img { width:18px; height:18px; flex-shrink:0; border-radius:5px; box-shadow: var(--shadow-card); }
  .fw-standalone-apptitle span { font-size:12px; font-weight:700; color: var(--color-text-strong); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .fw-standalone-content { height:56px; background: repeating-linear-gradient(135deg,#f7f8f9,#f7f8f9 8px,#eef0f1 8px,#eef0f1 16px); }

  .fw-standalone-label { display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; }
  .fw-standalone-label strong { font-size:12px; font-weight:700; color: var(--color-text-strong); }
  .fw-standalone-label { font-size:11px; color: var(--color-muted); line-height:1.4; }

  /* --- вкладки блоков кода --- */
  .fw-code-tabs { display:flex; gap:4px; margin-bottom:8px; flex-wrap: wrap; }
  .fw-code-tab { padding:7px 14px; font-size:12.5px; font-weight:700; color: var(--color-muted); background: var(--color-bg); border:none; border-radius: var(--radius-sm); cursor:pointer; transition: background var(--transition-fast), color var(--transition-fast); }
  .fw-code-tab.is-active { background: var(--color-text-strong); color:#fff; }
  .fw-code-block { margin:0; padding:52px 20px 18px; background: var(--color-text-strong); color:#e8eef0; border-radius: var(--radius-md); font-family:var(--font-mono); font-size:12.5px; line-height:1.7; overflow-x:auto; white-space:pre; }
  .fw-copy-btn { position:absolute; top:12px; right:12px; display:flex; align-items:center; gap:6px; padding:8px 14px; background:rgba(255,255,255,0.1); color:#fff; border:1px solid rgba(255,255,255,0.16); border-radius:var(--radius-sm); font-size:12px; font-weight:700; cursor:pointer; }
  .fw-copy-btn:hover { background:rgba(255,255,255,0.18); }

  .fw-download-row { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
  .fw-download-status { font-size:13px; color: var(--color-muted); }
  .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
/* =========================================================
   СОСТАВ ПАКА И ПУТИ — блок на шаге «Готово»
   Настройки, которые раньше были зашиты в код: какие файлы
   класть в архив, куда их разложить и с каким путём собрать
   готовые теги.
   ========================================================= */

.fw-pack-setup {
  margin-top: 28px;
  padding: 26px;
  background: var(--color-surface);
  border: 1px solid var(--fg-border, rgba(43, 47, 51, 0.08));
  border-radius: var(--radius-lg);
}

@media (max-width: 640px) { .fw-pack-setup { padding: 20px; } }

.fw-pack-head h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  margin: 0 0 6px;
}
.fw-pack-head h3 i { color: var(--color-accent-dark); font-size: 18px; }
.fw-pack-head p { margin: 0 0 22px; font-size: 13.5px; line-height: 1.6; color: var(--color-muted); }

.fw-pack-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
}
@media (max-width: 860px) { .fw-pack-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; } }

.fw-pack-col { display: flex; flex-direction: column; gap: 14px; }

.fw-pack-col-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-muted);
}

/* Строка-чекбокс: квадрат ровно по высоте первой строки подписи,
   поэтому он не «плавает» относительно жирного заголовка пункта */
.fw-check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  cursor: pointer;
}

.fw-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 2px 0 0;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.fw-check span { display: block; min-width: 0; }
.fw-check strong {
  display: block;
  font-size: 14px;
  line-height: 22px;
  color: var(--color-text-strong);
}
.fw-check em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--color-muted);
}
.fw-check input:disabled + span strong,
.fw-check input:disabled + span em { opacity: 0.55; }
.fw-check input:disabled { cursor: not-allowed; }

.fw-version-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--color-bg);
  border-radius: var(--radius-md);
}
.fw-version-row[hidden] { display: none !important; }
.fw-version-row label { font-size: 13px; font-weight: 600; color: var(--color-text-strong); }
.fw-version-row input {
  width: 96px;
  height: 38px;
  padding: 0 12px;
  background: var(--color-surface);
  border: 1px solid rgba(43, 47, 51, 0.1);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--color-text-strong);
  outline: none;
}

/* ---------------------------------------------------------
   Тёмная тема
   --------------------------------------------------------- */

.fw-pack-dark {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid rgba(43, 47, 51, 0.08);
}
.fw-pack-dark[hidden] { display: none !important; }
.fw-dark-controls[hidden] { display: none !important; }

.fw-dark-controls {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px;
  background: var(--color-bg);
  border-radius: var(--radius-md);
}

.fw-dark-preview { display: flex; gap: 16px; flex-wrap: wrap; }

.fw-dark-preview-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--color-muted);
}

/* Чипы имитируют панель вкладок в светлом и тёмном оформлении:
   только так видно, ради чего нужна перекраска */
.fw-dark-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 56px;
  border-radius: var(--radius-sm);
}
.fw-dark-chip.is-light { background: #FFFFFF; border: 1px solid rgba(43, 47, 51, 0.12); }
.fw-dark-chip.is-dark { background: #202124; border: 1px solid rgba(255, 255, 255, 0.1); }
.fw-dark-chip img { width: 28px; height: 28px; }

/* =========================================================
   ПРОВЕРКА ЧИТАЕМОСТИ НА 16×16
   ========================================================= */

.fw-legibility {
  margin-top: 28px;
  padding: 20px 22px;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
}
.fw-legibility[hidden] { display: none !important; }
.fw-legibility.is-ok { background: rgba(29, 217, 122, 0.07); border-color: rgba(29, 217, 122, 0.22); }
.fw-legibility.is-warn { background: #FDF3E6; border-color: #F0DCC0; }
.fw-legibility.is-bad { background: #FCEBEC; border-color: #F3CFD2; }

.fw-legibility-head { display: flex; align-items: flex-start; gap: 12px; }
.fw-legibility-head > i { font-size: 18px; line-height: 23px; flex-shrink: 0; }
.fw-legibility.is-ok .fw-legibility-head > i { color: var(--color-accent-dark); }
.fw-legibility.is-warn .fw-legibility-head > i { color: #B35900; }
.fw-legibility.is-bad .fw-legibility-head > i { color: #C1121F; }

.fw-legibility-head strong { display: block; font-size: 15px; line-height: 23px; color: var(--color-text-strong); }
.fw-legibility-head span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.6; color: var(--color-muted); }

.fw-legibility-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }

.fw-legibility-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  line-height: 21px;
  color: var(--color-text);
}
.fw-legibility-list li i { font-size: 14px; line-height: 21px; flex-shrink: 0; }
.fw-legibility-list li.is-issue i { color: #C1121F; }
.fw-legibility-list li.is-ok i { color: var(--color-accent-dark); }
.fw-legibility-list li.is-ok { color: var(--color-muted); }

/* Подпись в зоне загрузки — интерфейсный текст, а не заголовок
   раздела: в разметке это <p>, поэтому вид задаём здесь */
.fw-dropzone-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text-strong);
}

/* =========================================================
   РИТМ ФИНАЛЬНОГО ШАГА
   Блоки на шаге «Готово» раньше сами задавали себе отступы:
   галерея и «ещё настройки» — через margin-bottom (24 и 20),
   проверка читаемости и состав пака — через margin-top (28),
   а блок кода не имел ни того ни другого и прилипал к соседу
   вплотную. Ритм задаётся один раз здесь, на родителе, —
   тогда добавление нового блока не ломает соседей.
   ========================================================= */

#fwStepReview > * + * { margin-top: 28px; }
#fwStepReview > .fw-step-why { margin-top: 6px; }

#fwStepReview > .fw-review-gallery,
#fwStepReview > .fw-advanced,
#fwStepReview > .fw-code-wrap { margin-bottom: 0; }
#fwStepReview > .fw-legibility,
#fwStepReview > .fw-pack-setup { margin-top: 28px; }

/* На финальном шаге в навигации одна кнопка. space-between
   растягивал её по всей ширине и оставлял справа пустую полосу —
   она и читалась как «огромный непонятный отступ» */
#fwStepReview .fw-nav { justify-content: flex-start; }

/* =========================================================
   SEO-БЛОКИ СТРАНИЦЫ
   Белый корпус у таблицы и плашек обязателен: секции лежат
   прямо на фоне страницы, и var(--color-bg) там совпадает
   с фоном — блок превратился бы в «дыру» без границ.
   ========================================================= */

.fg-note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 22px;
  padding: 18px 22px;
  background: var(--color-surface);
  border: 1px solid rgba(43, 47, 51, 0.07);
  border-radius: var(--radius-md);
}
/* Высота строки вынесена в переменную — ровно её же получает
   иконка, поэтому её строчный бокс совпадает с первой строкой
   текста и глиф встаёт точно по центру строки */
.fg-note { --fg-note-line: 24px; }
.fg-note i { font-size: 16px; line-height: var(--fg-note-line); color: var(--color-accent-dark); flex-shrink: 0; }
.fg-note p { margin: 0; font-size: 14px; line-height: var(--fg-note-line); color: var(--color-text); }
.fg-note strong { color: var(--color-text-strong); }

/* ---- Таблица размеров ---- */
.fg-table {
  margin-top: 24px;
  background: var(--color-surface);
  border: 1px solid rgba(43, 47, 51, 0.08);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.fg-table-head,
.fg-table-row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
}

.fg-table-head {
  background: var(--color-text-strong);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
}

.fg-table-row {
  border-top: 1px solid rgba(43, 47, 51, 0.06);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-muted);
}
.fg-table-row > span:first-child { font-weight: 600; color: var(--color-text-strong); }
.fg-table-row > span:nth-child(2) { font-weight: 700; color: var(--color-accent-dark); }

@media (max-width: 820px) {
  .fg-table-head { display: none; }
  .fg-table-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 16px 18px; }
  /* Подпись колонки над значением: без шапки «180 px» и имя файла
     невозможно соотнести с местом показа */
  .fg-table-row > span[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--color-text-strong);
    margin-bottom: 2px;
  }
}

/* ---- Список «заголовок + пояснение» ---- */
.fg-deflist { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; }

.fg-deflist-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 0;
  border-top: 1px solid rgba(43, 47, 51, 0.1);
}
.fg-deflist > .fg-deflist-item:first-child { padding-top: 0; border-top: none; }
.fg-deflist > .fg-deflist-item:last-child { padding-bottom: 0; }

.fg-deflist-item > i {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--color-surface);
  border: 1px solid rgba(43, 47, 51, 0.1);
  color: var(--color-text-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
}

/* Контейнер — flex-строка, поэтому растягиваем через flex-grow,
   а не width:100%: иначе 100% считается от всей строки вместе
   с иконкой и даёт горизонтальное переполнение */
.fg-deflist-item > div { flex: 1 1 auto; min-width: 0; }
.fg-deflist-item > div > strong {
  display: block;
  font-size: 15.5px;
  line-height: 26px;
  color: var(--color-text-strong);
  margin-bottom: 6px;
}
.fg-deflist-item p { margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--color-text); }

/* ---- Шаги установки ---- */
.fg-steps {
  --fg-step-num-size: 28px;
  list-style: none; margin: 24px 0 0; padding: 0;
  display: flex; flex-direction: column;
}

.fg-step {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 24px 0;
  border-top: 1px solid rgba(43, 47, 51, 0.1);
}
.fg-steps > .fg-step:first-child { padding-top: 0; border-top: none; }
.fg-steps > .fg-step:last-child { padding-bottom: 0; }

.fg-step-num {
  flex-shrink: 0;
  width: var(--fg-step-num-size);
  height: var(--fg-step-num-size);
  border-radius: 9px;
  background: var(--color-text-strong);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
}

.fg-step-body { flex: 1 1 auto; min-width: 0; }
.fg-step-body h3 { font-size: 16.5px; margin: 0 0 6px; }
.fg-step-body p { margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--color-text); }

@media (max-width: 520px) {
  .fg-steps { --fg-step-num-size: 26px; }
  .fg-step { gap: 14px; }
}

/* Инлайн-код в SEO-блоках: иначе Bootstrap красит его в розовый */

/* =========================================================
   ЗАМЕНА INLINE-СТИЛЕЙ
   Раньше цвета образцов, размеры карточек предпросмотра и
   служебные отступы были прописаны прямо в разметке. Цвет
   образца — это данные, они уже лежат в data-атрибуте,
   поэтому заливка берётся селектором по атрибуту; остальное
   вынесено в обычные классы.
   ========================================================= */

.fw-preset[data-color="#FFFFFF"], .fw-preset[data-dark="#FFFFFF"] { background: #FFFFFF; }
.fw-preset[data-color="#16181A"] { background: #16181A; }
.fw-preset[data-color="#E9EBED"], .fw-preset[data-dark="#E9EBED"] { background: #E9EBED; }
.fw-preset[data-color="#334155"] { background: #334155; }
.fw-preset[data-dark="#1DD97A"] { background: #1DD97A; }

/* Начальный цвет крупных свотчей. Дальше их перекрашивает скрипт —
   это настоящая динамика, она остаётся в JS */
#fwBgSwatch, #fwDarkSwatch { background: #FFFFFF; }
#fwThemeSwatch { background: #334155; }

/* Служебные отступы внутри шагов мастера */
.fw-mt-0 { margin-top: 0; }
.fw-mt-14 { margin-top: 14px; }
.fw-mt-16 { margin-top: 16px; }
.fw-mt-18 { margin-top: 18px; }
.fw-mt-24 { margin-top: 24px; }

/* Карточки галереи предпросмотра на финальном шаге */
.fw-mock-body--short { height: 36px; }

.fw-rev-center { display: flex; justify-content: center; }

.fw-rev-chip {
  width: 56px;
  height: 56px;
  overflow: hidden;
  flex-shrink: 0;
}
.fw-rev-chip img { width: 100%; height: 100%; object-fit: cover; }
.fw-rev-chip--ios { border-radius: 16px; box-shadow: var(--shadow-card); }
.fw-rev-chip--android { border-radius: 50%; border: 1px solid var(--fg-border); }

.fw-rev-taskbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #1f1f24;
  border-radius: 6px;
}
.fw-rev-taskbar img { width: 20px; height: 20px; }
.fw-rev-taskbar span { font-size: 11px; color: #cfd2d6; }

.fw-rev-serp { display: flex; align-items: center; gap: 8px; }
.fw-rev-serp img { width: 16px; height: 16px; }
.fw-rev-serp span { font-size: 11px; color: var(--color-muted); }

.fw-summary-note { font-weight: 500; font-size: 12.5px; color: var(--color-muted); }

/* Макет вкладки в галерее предпросмотра: подпись «Сайт» упиралась
   в правый край плашки и съедала её внутренний отступ. Разрешаем
   вкладке сжиматься и обрезать подпись многоточием — точки слева
   при этом сохраняют размер */
.fw-mock-browser-bar { min-width: 0; }
.fw-mock-dots { flex-shrink: 0; }
.fw-mock-tab { min-width: 0; flex-shrink: 1; }
.fw-mock-tab span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}