/* ============================================================
   CHARACTER FORGE — стили конструктора (mobile-first)
   Базис — мобильный экран 360–430px, десктоп = центрированная колонка.
   Цветовое кодирование: заливка карточки + форма края
   (зубцы = тёмная черта, волна = светлая, ровный край = нейтральная).
   ============================================================ */

/* заголовки архетипов — Roslindale Cyrillic Text Bold (файл лежит в assets/fonts;
   в проде стоит перегнать в woff2: .otf весит 231 КБ) */
@font-face {
  font-family: 'Roslindale Text';
  src: url('assets/fonts/RoslindaleCyrillicText-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}

.forge {
  display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--bg);
  /* палитра forge (earthy, референс — Okerre) */
  --fg-good: #b9d4cd;      /* мята — светлая черта */
  --fg-bad:  #cf8560;      /* терракота — тёмная черта */
  --fg-neut: #f0e6d5;      /* крем — нейтральная */
  --fg-acc:  #f2c65a;      /* охра — смысл/убеждение */
  --fg-ink:  #2b211c;      /* тёмно-коричневый — текст и выбранное состояние */
  /* края карточек: зубцы (тёмная черта) и волна (светлая) — по всем четырём сторонам.
     Каждая маска — один зуб/волна 24×10, дальше repeat вдоль своей стороны. */
  --sp-t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10'%3E%3Cpath d='M0 10 L6 0 L12 10 L18 0 L24 10 Z' fill='%23000'/%3E%3C/svg%3E");
  --sp-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10'%3E%3Cpath d='M0 0 L6 10 L12 0 L18 10 L24 0 Z' fill='%23000'/%3E%3C/svg%3E");
  --sp-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 24'%3E%3Cpath d='M10 0 L0 6 L10 12 L0 18 L10 24 Z' fill='%23000'/%3E%3C/svg%3E");
  --sp-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 24'%3E%3Cpath d='M0 0 L10 6 L0 12 L10 18 L0 24 Z' fill='%23000'/%3E%3C/svg%3E");
  --wv-t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10'%3E%3Cpath d='M0 10 C 3 -2, 9 -2, 12 10 C 15 -2, 21 -2, 24 10 Z' fill='%23000'/%3E%3C/svg%3E");
  --wv-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10'%3E%3Cpath d='M0 0 C 3 12, 9 12, 12 0 C 15 12, 21 12, 24 0 Z' fill='%23000'/%3E%3C/svg%3E");
  --wv-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 24'%3E%3Cpath d='M10 0 C -2 3, -2 9, 10 12 C -2 15, -2 21, 10 24 Z' fill='%23000'/%3E%3C/svg%3E");
  --wv-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 24'%3E%3Cpath d='M0 0 C 12 3, 12 9, 0 12 C 12 15, 12 21, 0 24 Z' fill='%23000'/%3E%3C/svg%3E");
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.6 8.6 L6.3 12.3 L13.4 3.9' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --e: 9px;    /* глубина зубца */
  --ew: 24px;  /* шаг паттерна вдоль края */
  /* цвета подчёркиваний — насыщеннее заливок, чтобы читались на белой карточке */
  --u-bad:  #d2683a;
  --u-good: #6fae9d;
  --u-neut: #efb52e;
  /* подчёркивание заголовка в колоде: зигзаг / волна / штрих-пунктир (маски) */
  --u-zig:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12'%3E%3Cpath d='M1.5 9.5 L7.25 2.5 L13 9.5 L18.75 2.5 L24.5 9.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --u-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12'%3E%3Cpath d='M1.5 6 C 4.5 1, 9.5 1, 13 6 C 16.5 11, 21.5 11, 24.5 6' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  --u-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12'%3E%3Cpath d='M1 6 H11 M15 6 H25' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='butt'/%3E%3C/svg%3E");
}

/* рваный край по всем сторонам: 4 полосы-маски + центральный прямоугольник */
.fg-edged {
  -webkit-mask:
    var(--m-t) top left / var(--ew) var(--e) repeat-x,
    var(--m-b) bottom left / var(--ew) var(--e) repeat-x,
    var(--m-l) top left / var(--e) var(--ew) repeat-y,
    var(--m-r) top right / var(--e) var(--ew) repeat-y,
    linear-gradient(#000 0 0) center / calc(100% - 2 * var(--e) + 1px) calc(100% - 2 * var(--e) + 1px) no-repeat;
  mask:
    var(--m-t) top left / var(--ew) var(--e) repeat-x,
    var(--m-b) bottom left / var(--ew) var(--e) repeat-x,
    var(--m-l) top left / var(--e) var(--ew) repeat-y,
    var(--m-r) top right / var(--e) var(--ew) repeat-y,
    linear-gradient(#000 0 0) center / calc(100% - 2 * var(--e) + 1px) calc(100% - 2 * var(--e) + 1px) no-repeat;
}
.fg-edged.spike { --m-t: var(--sp-t); --m-b: var(--sp-b); --m-l: var(--sp-l); --m-r: var(--sp-r); }
.fg-edged.wave  { --m-t: var(--wv-t); --m-b: var(--wv-b); --m-l: var(--wv-l); --m-r: var(--wv-r); }
.portrait.sm { width: 52px; height: 52px; }
.portrait.sm .p-init { font-size: 20px; }

/* ---------- шапка ---------- */
.fg-top { flex-shrink: 0; padding: 10px 12px 8px; background: var(--bg); border-bottom: 1px solid var(--line-soft); }
.fg-top-row { display: flex; align-items: center; gap: 8px; }
.fg-back {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
  border: 1px solid var(--line); font-size: 20px; line-height: 1; color: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.fg-back:disabled { opacity: .3; }
.fg-crumb { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; font-size: 15px; font-weight: 500; }
.fg-crumb .t { font-style: normal; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-crumb span { flex-shrink: 0; font-size: 10px; letter-spacing: .08em; color: var(--ink-faint); font-weight: 400; }
.fg-modes { display: flex; gap: 2px; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px; }
.fg-mode { padding: 5px 9px; border-radius: var(--r-pill); font-size: 11px; color: var(--ink-dim); white-space: nowrap; }
.fg-mode.on { background: var(--ink); color: #fff; }
.fg-dots { display: flex; gap: 3px; margin-top: 9px; }
.fg-dots i { flex: 1; height: 3px; border-radius: 2px; background: var(--panel-3); cursor: pointer; transition: background var(--m-fast); }
.fg-dots i.done { background: var(--ink-faint); }
.fg-dots i.cur { background: var(--ink); }

/* ---------- прокручиваемое тело ---------- */
.fg-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 12px 24px; }
.fg-scroll > * { max-width: 720px; margin-left: auto; margin-right: auto; }
.fg-q { font-size: 24px; line-height: 1.2; font-weight: 500; letter-spacing: -.02em; margin: 6px 2px 6px; }
.fg-sub { font-size: 12.5px; color: var(--ink-dim); margin: 0 2px 14px; }
.fg-lab { font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
.fg-card { background: var(--bg-deep); border: none; border-radius: var(--r-xl); padding: 14px; margin-bottom: 12px; }

/* ---------- балансометр (сверху, во всю ширину) ---------- */
.fg-meter { display: block; text-align: center; padding: 12px 14px 14px; }
.fg-gauge { width: 190px; height: 118px; display: block; margin: 0 auto; }
.fg-gauge line, .fg-gauge circle { transition: all var(--m-smooth) var(--ease); }
.fg-tone { font-size: 14px; font-weight: 500; margin-top: -10px; }
.fg-meter-stats { display: flex; gap: 14px; align-items: center; margin-top: 12px; }
.fg-meter-stats .fg-bar-wrap { flex: 1; min-width: 0; text-align: left; }
.fg-mrow { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; color: var(--ink-dim); margin-bottom: 3px; }
.fg-mrow b { font-size: 13px; color: var(--ink); }
.fg-bar { height: 5px; border-radius: 3px; background: var(--panel-3); overflow: hidden; }
.fg-bar i { display: block; height: 100%; background: var(--ink); transition: width var(--m-smooth) var(--ease); }
.fg-cnt { flex-shrink: 0; font-size: 11px; color: var(--ink-dim); }
.fg-cnt b { display: block; font-size: 18px; color: var(--ink); line-height: 1.1; }

/* ---------- карточки архетипов под балансометром ----------
   компактные строки, каждая в оттенке своего архетипа */
.fg-arch { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 12px; text-align: left; }
.fg-acard {
  display: flex; gap: 11px; align-items: center; width: 100%; text-align: left;
  background: var(--ac, #cdb79a); color: var(--ac-ink, #2b211c);
  border: none; border-radius: 12px; padding: 10px 12px;
  transition: transform var(--m-instant);
}
.fg-acard:active { transform: scale(.99); }
/* подложки нет: иконка с альфа-каналом лежит прямо на заливке архетипа */
.fg-ai {
  position: relative; width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
/* пока файла иллюстрации нет — видна монограмма; картинка проявляется по onload */
.fg-ai img { position: absolute; width: 100%; height: 100%; object-fit: contain; opacity: 0; filter: var(--ac-art, none); }
.fg-ai.hasimg img { opacity: 1; }
.fg-ai i { font-style: normal; font-size: 18px; font-weight: 500; opacity: .55; }
.fg-ai.hasimg i { display: none; }
.fg-ac-body { flex: 1; min-width: 0; }
/* в строках под балансометром — прежний текстовый стиль, только жирный;
   Roslindale остаётся только на заголовке внутри карточки-модалки */
.fg-ac-name { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.2; }
.fg-ac-short { display: block; font-size: 11.5px; line-height: 1.3; margin-top: 2px; color: var(--ac-dim, rgba(43,33,28,.66)); }
.fg-ac-score { flex-shrink: 0; font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.fg-ac-score em { font-style: normal; font-size: 11px; color: var(--ac-dim); margin-left: 1px; }

/* ---------- модалка архетипа: вся коробка в цвете архетипа ---------- */
/* .modal общий для всего приложения — красим только модификатор .arch */
.modal.arch {
  background: var(--ac, #cdb79a); color: var(--ac-ink, #2b211c);
  padding: 16px 20px 26px; width: min(560px, 92vw);
}
.modal.arch .close { color: var(--ac-ink, #2b211c); opacity: .5; }
.modal.arch .close:hover { color: var(--ac-ink, #2b211c); opacity: 1; }

.fam-head { text-align: center; clear: both; padding-top: 4px; }
.fam-name {
  font-family: 'Roslindale Text', var(--serif, Georgia), serif;
  font-size: clamp(27px, 9vw, 44px); line-height: 1.02; font-weight: 700;
  letter-spacing: -.01em; text-transform: uppercase;
  /* break-word, а не anywhere: длинное слово переносится целиком, а не рвётся на «Т» */
  overflow-wrap: break-word; hyphens: auto;
}
/* иллюстрация в полный размер: во всю ширину карточки, квадратное поле.
   Подложки нет — у картинок свой альфа-канал, они лежат прямо на цвете архетипа */
.fam-art {
  position: relative; width: 100%; max-width: 320px; aspect-ratio: 1 / 1;
  margin: 16px auto 0; display: flex; align-items: center; justify-content: center;
}
.fam-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; filter: var(--ac-art, none); }
.fam-art.hasimg img { opacity: 1; }
.fam-art i { font-style: normal; font-size: 82px; font-weight: 500; opacity: .3; }
.fam-art.hasimg i { display: none; }
/* логлайн архетипа — вторая по силе строка после имени: крупнее и плотнее описания */
.fam-short {
  font-size: 19px; line-height: 1.25; font-weight: 500; letter-spacing: -.015em;
  color: var(--ac-ink); margin-top: 14px; text-wrap: balance;
}
.fam-desc { font-size: 14px; line-height: 1.55; color: var(--ac-dim); margin-top: 20px; }
.fam-facts { margin-top: 18px; }
.fam-row { display: flex; gap: 12px; font-size: 13px; line-height: 1.45; padding: 10px 0; border-top: 1px solid var(--ac-line, rgba(43,33,28,.16)); }
.fam-row span { width: 84px; flex-shrink: 0; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ac-dim); padding-top: 3px; }
.fam-score {
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ac-line, rgba(43,33,28,.16));
}
.fam-score b { font-size: 38px; font-weight: 500; letter-spacing: -.02em; }
.fam-score em { font-style: normal; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ac-dim); }

/* ---------- ползунки ---------- */
.fg-slider { position: relative; background: var(--bg-deep); border: none; border-radius: var(--r-lg); padding: 10px 12px 4px; margin-bottom: 8px; }
/* подсказка по «?»: только сам вопрос, крупно; поверх ползунка */
.fg-hint {
  position: absolute; z-index: 6; left: 10px; right: 10px; top: 32px;
  background: var(--fg-ink); color: #f6efe2; border-radius: 12px;
  padding: 12px 14px; font-size: 15px; line-height: 1.35; box-shadow: var(--e4);
}
.fg-hint::before {
  content: ''; position: absolute; top: -5px; left: 50%; margin-left: -6px;
  width: 12px; height: 12px; background: var(--fg-ink); border-radius: 2px; transform: rotate(45deg);
}
.fg-hint[hidden] { display: none; }
.fg-sl-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 500; }
.fg-sl-head span { flex: 1; min-width: 0; }
.fg-sl-head span:last-child { text-align: right; }
.fg-help {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; border: none;
  background: var(--panel-2); font-size: 11px; line-height: 1; color: var(--ink-dim);
  display: flex; align-items: center; justify-content: center;
}
.fg-help:hover { background: var(--fg-acc); color: var(--fg-ink); }
.fg-to-deck {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 2px 12px;
  background: var(--fg-acc); color: var(--fg-ink); border: none; border-radius: var(--r-pill);
  padding: 9px 15px; font-size: 12.5px; font-weight: 500;
}
.fg-to-deck:active { transform: scale(.97); }
/* --p (0..1) и --th ставит JS: --p — позиция ползунка, --th — цвет по положению.
   Дорожка красится только на участке «центр → кружок». */
.fg-slider input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 30px;
  background: transparent; border: none; padding: 0;
  --tw: 24px;
  --pos: calc(var(--p, .5) * (100% - var(--tw)) + var(--tw) / 2);
  --fill: linear-gradient(90deg,
    var(--panel-3) 0 min(50%, var(--pos)),
    var(--th, var(--fg-neut)) min(50%, var(--pos)) max(50%, var(--pos)),
    var(--panel-3) max(50%, var(--pos)) 100%);
}
.fg-slider input[type=range]::-webkit-slider-runnable-track { height: 3px; background: var(--fill); border-radius: 2px; }
.fg-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: var(--tw); height: var(--tw); margin-top: -11px;
  border-radius: 50%; background: var(--th, var(--fg-neut));
  border: 2px solid var(--fg-ink); box-shadow: var(--e3);
}
.fg-slider input[type=range]::-moz-range-track { height: 3px; background: var(--fill); border-radius: 2px; }
.fg-slider input[type=range]::-moz-range-thumb { width: var(--tw); height: var(--tw); box-sizing: border-box; border-radius: 50%; background: var(--th, var(--fg-neut)); border: 2px solid var(--fg-ink); }

/* ---------- крохотный балансометр над колодой (не двигается пользователем) ---------- */
.fg-mini {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 2px 2px 8px;
}
.fg-mgauge { width: 76px; height: 39px; display: block; }
.fg-mini b { font-size: 13px; font-weight: 500; color: var(--ink); }

/* ---------- плитки черт: заливка + форма края ---------- */
.fg-tiles { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 4px 0 14px; }
.fg-tile {
  position: relative; display: block; width: 100%; text-align: left;
  background: var(--c, var(--fg-neut)); color: var(--fg-ink);
  border: none; border-radius: 3px; padding: 20px 22px;
  transition: transform var(--m-instant) var(--ease), filter var(--m-fast);
}
.fg-tile.good { --c: var(--fg-good); }
.fg-tile.bad  { --c: var(--fg-bad); }
.fg-tile.neutral { --c: var(--fg-neut); border-radius: 10px; padding: 14px 16px; }
.fg-tile.accent  { --c: var(--fg-acc);  border-radius: 10px; padding: 14px 16px; }
.fg-tile.on { --c: var(--fg-ink); color: #fff; }
.fg-tile:active { transform: scale(.985); }
/* индикатор выбранного: галочка в правом верхнем углу, на уровне заголовка */
.fg-tile.on::after {
  content: ''; position: absolute; top: 22px; right: 22px; width: 16px; height: 16px;
  background: currentColor;
  -webkit-mask: var(--check) center / contain no-repeat;
  mask: var(--check) center / contain no-repeat;
}
.fg-tile.neutral.on::after, .fg-tile.accent.on::after { top: 16px; right: 16px; }
.fg-tile.on .fg-tl { padding-right: 26px; }
/* совет вместо нижней панели: метка там же, где галочка, выключка вправо */
.fg-rtag {
  position: absolute; top: 22px; right: 22px; text-align: right;
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; opacity: .62;
}
.fg-tile.neutral .fg-rtag, .fg-tile.accent .fg-rtag { top: 16px; right: 16px; }
.fg-tile.rec .fg-tl { padding-right: 92px; }
.fg-tile.clash { box-shadow: inset 0 0 0 2px rgba(43,33,28,.35); }
.fg-tl { display: block; font-size: 15px; font-weight: 500; line-height: 1.25; }
.fg-th { display: block; font-size: 12px; margin-top: 4px; line-height: 1.4; opacity: .78; }
.fg-tw { display: block; font-size: 11px; margin-top: 5px; opacity: .62; }
.fg-tc { display: block; font-size: 11.5px; margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(43,33,28,.22); line-height: 1.4; }
.fg-tile.on .fg-tc { border-top-color: rgba(255,255,255,.25); }
.fg-x { font-style: normal; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; opacity: .75; margin-left: 6px; }

/* ---------- референсы ---------- */
.fg-refs { margin-top: 16px; }
.fg-ref-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.fg-ref { flex-shrink: 0; width: 92px; text-align: center; }
.fg-ref .portrait { margin: 0 auto 5px; }
.fg-ref span { display: block; font-size: 11px; font-weight: 500; line-height: 1.2; }
.fg-ref em { display: block; font-style: normal; font-size: 9.5px; color: var(--ink-faint); margin-top: 2px; }

/* ---------- сводка ---------- */
.fg-sum-row { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; }
.fg-sum-row:last-child { border-bottom: none; }
.fg-sum-row span { width: 92px; flex-shrink: 0; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); padding-top: 2px; }
.fg-sum-row b { font-weight: 400; }
.fg-final-actions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.fg-final-actions .btn { width: 100%; justify-content: center; padding: 13px; font-size: 14px; }

/* ---------- свайп-колода ---------- */
.fg-deck-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.fg-deck-head .fg-lab { margin: 0; }
.fg-deck-count { font-size: 12px; font-weight: 500; }
.fg-deck-count em { font-style: normal; color: var(--ink-faint); font-weight: 400; }
/* колода: карточки за верхней видны стопкой (без теней) */
/* сверху запас под сдвинутые карточки стопки, иначе они лезут на шапку колоды */
.fg-deck { position: relative; height: 330px; margin: 42px auto 12px; max-width: 340px; }
.fg-swipe {
  position: absolute; inset: 0; touch-action: none; user-select: none;
  background: #fff; color: var(--fg-ink);
  border: none; border-radius: 20px;
  padding: 26px 24px 22px; display: flex; flex-direction: column;
  /* стопка: карточки под текущей сильно сдвинуты вверх и заметно темнее белой верхней */
  transform: translateY(calc(var(--d) * -18px)) scale(calc(1 - var(--d) * .075));
  filter: brightness(calc(1 - var(--d) * .1));
  transition: transform var(--m-fast) var(--ease), opacity var(--m-fast);
}
/* карточка-заставка раздела: охра, ровный край, крупное имя раздела */
.fg-swipe.section { background: var(--fg-acc); justify-content: center; text-align: center; padding: 30px 26px; }
.fg-swipe.section .fg-sw-cat { opacity: .55; }
.fg-sec-name {
  font-size: 34px; line-height: 1.05; font-weight: 500; letter-spacing: -.03em;
  text-transform: uppercase; margin: 14px 0 12px; overflow-wrap: anywhere;
}
.fg-swipe.section .fg-sw-h { flex: none; font-size: 15px; }
.fg-sec-meta { margin-top: 16px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .6; line-height: 1.5; }
/* карточка белая — цвет тона живёт только в подчёркивании заголовка */
.fg-swipe.good { --u-c: var(--u-good); }
.fg-swipe.bad  { --u-c: var(--u-bad); }
.fg-swipe.neutral { --u-c: var(--u-neut); }
.fg-swipe[data-i="0"] { cursor: grab; z-index: 3; transition: none; filter: none; }
.fg-sw-cat { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
/* тон карточки в колоде читается по подчёркиванию заголовка */
.fg-sw-l {
  position: relative; font-size: 27px; line-height: 1.12; font-weight: 500;
  letter-spacing: -.02em; margin: 12px 0 22px; padding-bottom: 14px;
}
.fg-sw-l::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: min(100%, 210px); height: 12px;
  background: var(--u-c, var(--fg-ink));
  -webkit-mask: var(--u) left bottom / 26px 12px repeat-x;
  mask: var(--u) left bottom / 26px 12px repeat-x;
}
.fg-swipe.bad     .fg-sw-l::after { --u: var(--u-zig); }
.fg-swipe.good    .fg-sw-l::after { --u: var(--u-wave); }
.fg-swipe.neutral .fg-sw-l::after { --u: var(--u-dash); }
.fg-sw-h { font-size: 14px; line-height: 1.45; flex: 1; font-weight: 500; opacity: .9; }
.fg-sw-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.fg-sw-tags span {
  font-size: 12px; font-weight: 500; padding: 5px 11px; border-radius: var(--r-pill);
  background: rgba(43,33,28,.12); color: var(--fg-ink);
}
.fg-sw-stamp {
  position: absolute; top: 22px; font-size: 15px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--r-sm); border: 2px solid; opacity: 0; transition: opacity var(--m-fast);
}
.fg-sw-stamp.yes { right: 18px; color: var(--fg-ink); border-color: var(--fg-ink); transform: rotate(12deg); }
.fg-sw-stamp.no  { left: 18px; color: var(--danger); border-color: var(--danger); transform: rotate(-12deg); }
.fg-swipe.sw-yes .fg-sw-stamp.yes { opacity: 1; }
.fg-swipe.sw-no  .fg-sw-stamp.no  { opacity: 1; }
.fg-swipe.fly-r { transition: transform var(--m-fast) var(--ease), opacity var(--m-fast); transform: translateX(420px) rotate(22deg); opacity: 0; }
.fg-swipe.fly-l { transition: transform var(--m-fast) var(--ease), opacity var(--m-fast); transform: translateX(-420px) rotate(-22deg); opacity: 0; }
.fg-deck-btns { display: flex; justify-content: center; gap: 18px; margin-bottom: 8px; }
.fg-round {
  width: 58px; height: 58px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--bg-deep); font-size: 22px; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--e3); transition: transform var(--m-instant);
}
.fg-round:active { transform: scale(.92); }
.fg-round.mid { width: 46px; height: 46px; align-self: center; font-size: 17px; color: var(--ink-dim); }
.fg-round.yes { color: var(--success); }
.fg-round.no  { color: var(--danger); }
.fg-deck-hint { text-align: center; font-size: 11px; color: var(--ink-faint); }
.fg-deck-empty { text-align: center; padding: 34px 16px; }
.fg-deck-empty h3 { font-size: 20px; font-weight: 500; margin-bottom: 6px; }
.fg-deck-empty p { font-size: 12.5px; color: var(--ink-dim); margin-bottom: 16px; }
.fg-deck-empty .btn.primary { width: 100%; max-width: 320px; justify-content: center; padding: 14px; font-size: 15px; margin-bottom: 8px; }
.fg-deck-empty .btn.ghost { font-size: 12px; }

/* ---------- библиотека ---------- */
.fg-libbar { position: sticky; top: -12px; z-index: 5; background: var(--bg); padding: 4px 0 10px; margin-bottom: 4px; }
.fg-libbar input { background: var(--bg-deep); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 10px 14px; margin-bottom: 8px; }
.fg-cats { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 2px; }
.fg-cat { flex-shrink: 0; font-size: 11px; padding: 6px 11px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--ink-dim); }
.fg-cat.on { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- модалка: строки-факты ---------- */
.fg-mk { display: flex; gap: 10px; font-size: 12.5px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.fg-mk span { width: 88px; flex-shrink: 0; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); padding-top: 2px; }

/* ---------- нижняя панель совета ---------- */
.fg-rec {
  flex-shrink: 0; background: var(--bg-deep); border-top: 1px solid var(--line);
  padding: 11px 12px calc(11px + env(safe-area-inset-bottom, 0px));
  display: flex; gap: 10px; align-items: center;
}
.fg-rec-txt { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.4; color: var(--ink-dim); }
.fg-rec-txt b { display: block; font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 3px; }
.fg-rec.next { background: var(--ink); }
.fg-rec.next .fg-rec-txt { color: rgba(255,255,255,.8); }
.fg-rec.next .fg-rec-txt b { color: rgba(255,255,255,.5); }
.fg-rec.next .btn { border-color: rgba(255,255,255,.35); color: #fff; }
.fg-rec.next .btn.primary { background: #fff; color: var(--ink); border-color: #fff; }
/* две кнопки на 375 px не должны сплющивать текст в колонку — тогда переносим их вниз */
.fg-rec { flex-wrap: wrap; }
.fg-rec-txt { flex: 1 1 190px; }
.fg-rec-btns { display: flex; gap: 6px; flex-shrink: 0; margin-left: auto; }
.fg-rec-btns .btn { white-space: nowrap; padding: 9px 13px; }
.fg-rec.mini { justify-content: center; }

/* ---------- мобильная шапка приложения (глобальный топбар) ---------- */
@media (max-width: 699px) {
  .topbar { height: auto; padding: 8px 10px; gap: 8px; flex-wrap: wrap; }
  .topbar .brand small, .topbar .save-dot { display: none; }
  .topbar .spacer { display: none; }
  .topbar #tabs { order: 3; width: 100%; overflow-x: auto; gap: 4px; }
  .topbar #tabs .tab-top { white-space: nowrap; flex-shrink: 0; }
}

/* ---------- планшет / десктоп ---------- */
@media (min-width: 700px) {
  .fg-top { padding: 12px 20px 10px; }
  .fg-top-row, .fg-dots { max-width: 720px; margin-left: auto; margin-right: auto; }
  .fg-crumb { font-size: 17px; }
  .fg-scroll { padding: 18px 20px 32px; }
  .fg-q { font-size: 30px; }
  .fg-tiles { grid-template-columns: 1fr 1fr; max-width: 720px; }
  .fg-arch { grid-template-columns: 1fr 1fr 1fr; }
  /* десктоп: горизонтальная карточка — иллюстрация слева, текст справа */
  .modal.arch { padding: 22px 30px 30px; }
  .fam-head {
    display: grid; grid-template-columns: 172px 1fr; column-gap: 26px;
    grid-template-areas: "art name" "art short"; text-align: left; align-content: center;
  }
  .fam-head { grid-template-columns: 200px minmax(0, 1fr); }
  .fam-name { grid-area: name; align-self: end; font-size: 32px; }
  .fam-art { grid-area: art; width: 200px; max-width: none; margin: 0; align-self: center; }
  .fam-short { grid-area: short; align-self: start; margin-top: 10px; font-size: 21px; }
  .fam-score { justify-content: flex-start; }
  .fg-final-actions { flex-direction: row; }
  .fg-rec { padding: 14px 20px; justify-content: center; }
  .fg-rec .fg-rec-txt { max-width: 560px; }
  .fg-deck { height: 380px; }
}