/* Экраны дизайна 25 (design/v4, DS v47): анкета v3 по одному вопросу, «Мой уход v4», карточка v2, главный экран, «Проверить»,
   «Профиль», нижнее меню. Правила — из таблицы стилей макетов design/v4 (одна на все четыре макета), только классы, которых нет в
   компоненты.css; токены тем — темы.css. Своих значений здесь нет. */
/* ---------- DS v46 (задание 25): анкета v3, «Мой уход v4», карточка v2, главный экран. Только токены, без теней и градиентов. ---------- */
.sf-todo{ color: inherit; }
.sf-ic{ width: 24px; height: 24px; flex: none; }
/* QuestionCard, layout: "screen" — один вопрос на экран */
.sf-qs{ display: flex; flex-direction: column; gap: 8px; }
.sf-qs__prog{ display: flex; flex-direction: column; gap: 8px; padding: 4px 4px 8px; }
.sf-qs__count{ font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sf-qs__bar{ position: relative; height: 6px; border-radius: var(--radius-pill); background: var(--line); overflow: hidden; }
.sf-qs__fill{ position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--radius-pill); background: var(--ink); }
.sf-qs__eyebrow{ display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin: 4px 4px 0; padding: 4px 10px 4px 8px; border-radius: var(--radius-pill); background: var(--neutral-badge); color: var(--neutral-badge-ink); font-size: 13px; line-height: 18px; }
.sf-qs__eyeicon{ width: 16px; height: 16px; }
.sf-qs__title{ margin: 4px 4px 0; font-size: 24px; line-height: 30px; font-weight: 600; color: var(--ink); }
.sf-qs__title--long{ font-size: 20px; line-height: 26px; }
.sf-qs__why{ margin: 0 4px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.sf-qs__multi{ margin: 0 4px; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sf-qs__opts{ display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.sf-qopt{ display: flex; align-items: center; gap: 10px; width: 100%; min-height: 64px; padding: 10px 12px 10px 10px; border: 2px solid transparent; border-radius: var(--radius-20); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sf-qopt--plain{ min-height: 56px; }
.sf-qopt--on{ border-color: var(--accent); background: var(--accent-soft); }
.sf-qopt__icon{ flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--neutral-badge); color: var(--ink); }
.sf-qopt--on .sf-qopt__icon{ background: var(--surface); }
.sf-qopt__svg{ width: 22px; height: 22px; }
.sf-qopt__text{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sf-qopt__title{ font-size: 16px; line-height: 22px; font-weight: 500; color: var(--ink); }
.sf-qopt__hint{ font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sf-qopt__mark{ flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 2px solid var(--line-strong); border-radius: 50%; color: var(--on-accent); }
.sf-qopt__mark--box{ border-radius: 7px; }
.sf-qopt--on .sf-qopt__mark{ border-color: var(--accent); background: var(--accent); }
.sf-qopt__check{ width: 16px; height: 16px; }
/* Экран-переход «Собираем ваш уход» */
.sf-load{ display: flex; flex-direction: column; gap: 24px; padding: 72px 8px 0; }
.sf-load__t{ margin: 0; font-size: 24px; line-height: 30px; font-weight: 600; color: var(--ink); }
.sf-load__list{ list-style: none; margin: 0; padding: 8px 16px; display: flex; flex-direction: column; border-radius: var(--radius-20); background: var(--surface); }
.sf-load__row{ display: flex; align-items: center; gap: 12px; min-height: 56px; }
.sf-load__row + .sf-load__row{ border-top: 1px solid var(--line); }
.sf-load__mark{ flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line-strong); color: var(--v-support); }
.sf-load__row[data-state="done"] .sf-load__mark{ border-color: var(--v-support-soft); background: var(--v-support-soft); }
.sf-load__row[data-state="now"] .sf-load__mark{ border-color: var(--line); }
.sf-load__spin{ width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--ink); border-right-color: transparent; }
.sf-load__svg{ width: 18px; height: 18px; }
.sf-load__icon{ flex: none; color: var(--ink-muted); display: inline-flex; }
.sf-load__ic{ width: 20px; height: 20px; }
.sf-load__text{ flex: 1; font-size: 16px; line-height: 22px; color: var(--ink); }
.sf-load__row[data-state="wait"] .sf-load__text{ color: var(--ink-muted); }
/* Заголовки разделов экрана (500, не жирные: жирный на экране один) */
.sf-sec{ display: flex; align-items: center; gap: 8px; margin: 8px 4px 0; font-size: 16px; line-height: 22px; font-weight: 500; color: var(--ink); }
.sf-sec__icon{ width: 20px; height: 20px; color: var(--ink-muted); }
.sf-sec__n{ margin-left: auto; font-size: 13px; line-height: 18px; font-weight: 400; color: var(--ink-muted); }
/* Главные активы для вас: карточки в ряд, третья выглядывает */
.sf-actives{ display: flex; flex-direction: column; gap: 8px; }
.sf-actives__row{ display: flex; gap: 8px; margin: 0 -16px; padding: 0 16px 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.sf-active{ flex: none; width: 272px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px 16px; border: 0; border-radius: var(--radius-20); background: var(--surface); color: var(--ink); font: inherit; text-align: left; scroll-snap-align: start; cursor: pointer; }
.sf-active__head{ display: flex; align-items: center; gap: 10px; }
.sf-active__icon{ flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--neutral-badge); color: var(--ink); }
.sf-active__svg{ width: 20px; height: 20px; }
.sf-active__name{ font-size: 16px; line-height: 22px; font-weight: 500; }
.sf-active__line{ font-size: 13px; line-height: 18px; color: var(--ink-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Иконка роли: пастель роли, знак цветом текста */
.sf-roleic{ flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: var(--ink); }
.sf-roleic--hydrate{ background: var(--role-hydrate); }
.sf-roleic__svg{ width: 18px; height: 18px; }
/* StepRow: шаг ухода одной строкой */
.sf-steps{ display: flex; flex-direction: column; gap: 8px; }
.sf-steps__list{ list-style: none; margin: 0; padding: 0 4px; border-radius: var(--radius-20); background: var(--surface); }
.sf-steps[data-time="pm"] .sf-steps__list{ background: var(--surface-evening); }
.sf-steprow + .sf-steprow, .sf-rm + .sf-rm{ border-top: 1px solid var(--line); }
.sf-steprow__btn, .sf-rm__btn{ display: flex; align-items: center; gap: 10px; width: 100%; min-height: 68px; padding: 10px 8px 10px 10px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.sf-steprow__ghost{ flex: none; width: 44px; height: 44px; border-radius: 12px; border: 1px dashed var(--line-strong); }
.sf-steprow__text{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sf-steprow__name{ font-size: 15px; line-height: 20px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-steprow__brand{ color: var(--ink-muted); }
.sf-steprow__meta{ display: inline-flex; align-items: center; gap: 4px; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sf-steprow__clock{ width: 14px; height: 14px; }
.sf-steprow__dot{ margin: 0 2px; }
.sf-steprow__chev{ flex: none; width: 18px; height: 18px; color: var(--ink-muted); }
.sf-steprow__lock{ flex: none; width: 18px; height: 18px; color: var(--ink-muted); }
.sf-steprow--locked .sf-steprow__name{ color: var(--ink-muted); }
.sf-rm__why{ display: inline-flex; align-items: center; gap: 4px; font-size: 13px; line-height: 18px; color: var(--v-caution); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-rm__icon{ width: 14px; height: 14px; flex: none; }
/* Лист снизу */
.sf-sheet{ position: absolute; left: 0; right: 0; bottom: 0; z-index: 21; display: flex; flex-direction: column; gap: 12px; padding: 8px 16px 24px; border-radius: 24px 24px 0 0; background: var(--surface); overflow-y: auto; }
.sf-sheet__grip{ align-self: center; width: 36px; height: 4px; margin-bottom: 4px; border-radius: 2px; background: var(--line-strong); }
.sf-sheet__close{ position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; border: 0; background: none; font: inherit; font-size: 15px; line-height: 20px; font-weight: 500; color: var(--accent); cursor: pointer; }
.sf-sheet__head{ display: flex; align-items: center; gap: 12px; padding: 16px 64px 4px 0; }
.sf-sheet__head .sf-photo{ width: 64px; height: 64px; }
.sf-sheet__ht{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sf-sheet__brand{ font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sf-sheet__name{ margin: 0; font-size: 20px; line-height: 26px; font-weight: 600; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf-sheet__t{ margin: 0; padding: 16px 64px 0 0; font-size: 24px; line-height: 30px; font-weight: 600; color: var(--ink); }
.sf-sheet__sub{ margin: -4px 0 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.sf-sheet__p{ margin: 0; font-size: 15px; line-height: 22px; color: var(--ink); }
.sf-sheet__link{ align-self: flex-start; }
.sf-srow{ display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: var(--radius-12); background: var(--bg); }
.sf-srow__icon{ flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--ink-muted); }
.sf-srow__body{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sf-srow__k{ margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sf-srow__v{ margin: 0; font-size: 15px; line-height: 20px; color: var(--ink); }
.sf-more{ display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; padding: 0 4px; border: 0; background: none; font: inherit; font-size: 15px; line-height: 20px; font-weight: 500; color: var(--accent); cursor: pointer; }
.sf-more__chev{ width: 18px; height: 18px; }
.sf-more[aria-expanded="true"] .sf-more__chev{ transform: rotate(180deg); }
.sf-evline{ display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 30px; padding: 4px 12px 4px 10px; border-radius: var(--radius-pill); background: var(--neutral-badge); color: var(--neutral-badge-ink); font-size: 13px; line-height: 18px; }
/* TabSwitch: две вкладки, как «Утро / Вечер» */
.sf-tabs{ display: flex; gap: 4px; padding: 4px; border-radius: var(--radius-pill); background: var(--neutral-badge); }
.sf-tabs__btn{ flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 0; border-radius: var(--radius-pill); background: transparent; font: inherit; font-size: 16px; line-height: 22px; font-weight: 500; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sf-tabs__btn--on{ background: var(--accent); color: var(--on-accent); }
.sf-tabs__icon{ width: 20px; height: 20px; }
/* Шапка карточки средства */
.sf-phead{ display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--radius-20); background: var(--surface); }
.sf-phead .sf-photo{ width: 96px; height: 96px; }
.sf-phead__text{ flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.sf-phead__brand{ font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.sf-phead__name{ margin: 0; font-size: 20px; line-height: 26px; font-weight: 500; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf-phead__cat{ display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px 0 4px; border-radius: var(--radius-pill); background: var(--neutral-badge); color: var(--neutral-badge-ink); font-size: 13px; line-height: 18px; }
.sf-phead__cat .sf-roleic{ width: 22px; height: 22px; }
.sf-phead__cat .sf-roleic__svg{ width: 14px; height: 14px; }
/* IngredientRow */
.sf-ingl{ display: flex; flex-direction: column; gap: 8px; }
.sf-ingl__cap{ margin: 4px 4px 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sf-ingl__list{ list-style: none; margin: 0; padding: 0 4px; border-radius: var(--radius-20); background: var(--surface); }
.sf-ing-li + .sf-ing-li{ border-top: 1px solid var(--line); }
.sf-ing{ display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 8px 8px 10px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.sf-ing__icon{ flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--neutral-badge); color: var(--ink); }
.sf-ing__icon--attention{ background: var(--v-caution-soft); color: var(--v-caution); }
.sf-ing__icon--more{ color: var(--ink-muted); }
.sf-ing__svg{ width: 18px; height: 18px; }
.sf-ing__text{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sf-ing__name{ font-size: 15px; line-height: 20px; color: var(--ink); }
.sf-ing__note{ font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sf-ing[data-kind="attention"] .sf-ing__note{ color: var(--v-caution); }
.sf-ing__chev{ flex: none; width: 18px; height: 18px; color: var(--ink-muted); }
.sf-ing--more .sf-ing__name{ color: var(--ink-muted); }
/* SourceList: источники ссылками (решение 103) */
.sf-src{ display: flex; flex-direction: column; gap: 4px; }
.sf-src__t{ margin: 4px 0 0; font-size: 13px; line-height: 18px; font-weight: 400; color: var(--ink-muted); }
.sf-src__list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sf-src__list li + li{ border-top: 1px solid var(--line); }
.sf-src__a{ display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 0; color: var(--ink); text-decoration: none; }
.sf-src__text{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sf-src__title{ font-size: 15px; line-height: 20px; color: var(--accent); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf-src__meta{ font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.sf-src__ext{ flex: none; width: 18px; height: 18px; color: var(--accent); }
.sf-src__more{ margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
/* FitVerdict: вердикт словом (Подходит / С оговорками / Не подходит) */
.sf-fitv{ display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 16px 20px; border-radius: var(--radius-20); }
.sf-fitv__icon{ width: 26px; height: 26px; flex: none; }
.sf-fitv__word{ font-size: 24px; line-height: 30px; font-weight: 600; }
.sf-fitv--fit{ background: var(--v-support-soft); color: var(--v-support); }
.sf-fitv--caveat{ background: var(--v-caution-soft); color: var(--v-caution); }
.sf-fitv--no{ background: var(--v-no-soft); color: var(--v-no); }
.sf-fitv--sm{ display: inline-flex; align-self: flex-start; gap: 6px; min-height: 28px; padding: 4px 10px 4px 8px; border-radius: var(--radius-12); }
.sf-fitv--sm .sf-fitv__icon{ width: 16px; height: 16px; }
.sf-fitv--sm .sf-fitv__word{ font-size: 13px; line-height: 18px; font-weight: 500; }
/* FitCard: плюс или минус для клиентки, (i) открывает лист */
.sf-fits{ display: flex; flex-direction: column; gap: 8px; }
.sf-fit{ display: flex; align-items: center; gap: 12px; padding: 12px 4px 12px 14px; border-radius: var(--radius-20); background: var(--surface); }
.sf-fit__icon{ flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; }
.sf-fit--plus .sf-fit__icon{ background: var(--v-support-soft); color: var(--v-support); }
.sf-fit--minus .sf-fit__icon{ background: var(--v-caution-soft); color: var(--v-caution); }
.sf-fit--stop .sf-fit__icon{ background: var(--v-no-soft); color: var(--v-no); }
.sf-fit--neutral .sf-fit__icon{ background: var(--v-none-soft); color: var(--v-none); }
.sf-fit__svg{ width: 20px; height: 20px; }
.sf-fit__body{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sf-fit__t{ margin: 0; font-size: 16px; line-height: 22px; font-weight: 500; color: var(--ink); }
.sf-fit__p{ margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf-fit__i{ flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--accent); cursor: pointer; }
.sf-fit__isvg{ width: 22px; height: 22px; }
/* Лучшее в категории, похожие */
.sf-best{ display: flex; align-items: center; gap: 12px; padding: 12px 8px 12px 12px; border-radius: var(--radius-20); background: var(--surface); color: var(--ink); text-decoration: none; }
.sf-best .sf-photo{ width: 56px; height: 56px; }
.sf-best__text{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sf-minis{ display: flex; gap: 8px; margin: 0 -16px; padding: 0 16px 4px; overflow-x: auto; scrollbar-width: none; }
.sf-mini{ flex: none; width: 148px; display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: var(--radius-20); background: var(--surface); color: var(--ink); text-decoration: none; }
.sf-mini .sf-photo{ width: 72px; height: 72px; margin-bottom: 4px; }
.sf-mini__brand{ font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sf-mini__name{ font-size: 14px; line-height: 20px; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 40px; }
.sf-mini .sf-fitv--sm{ margin-top: 4px; }
.sf-wtb__more{ display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 4px; border: 0; background: none; font: inherit; font-size: 15px; line-height: 20px; font-weight: 500; color: var(--accent); }
/* Строка доверия (решение 107) и реакции */
.sf-trust{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 12px 14px 4px; border-top: 1px solid var(--line); }
.sf-trust__icon{ width: 20px; height: 20px; color: var(--ink-muted); }
.sf-trust__p{ flex: 1; margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sf-trust__link{ flex-basis: 100%; padding-left: 28px; }
.sf-react{ display: flex; align-items: center; gap: 4px; padding: 0 4px; }
.sf-react__q{ flex: 1; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sf-react__btn{ display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--ink-muted); cursor: pointer; }
.sf-react__svg{ width: 20px; height: 20px; }
.sf-cmplink{ display: inline-flex; align-items: center; gap: 6px; }
.sf-cmplink .sf-ic{ width: 18px; height: 18px; }
/* Главный экран */
.sf-logo{ display: inline-flex; align-items: center; height: 44px; padding: 0 4px; }
.sf-logo svg{ height: 24px; width: auto; }
.sf-logo__plate{ fill: var(--accent); }
.sf-logo__ai{ fill: var(--on-accent); }
.sf-logo__word{ fill: var(--ink); }
.sf-home{ display: flex; flex-direction: column; gap: 16px; padding: 20px 16px 16px; border-radius: var(--radius-20); background: var(--surface); color: var(--ink); text-decoration: none; }
.sf-home__head{ display: flex; align-items: center; justify-content: space-between; }
.sf-home__t{ margin: 0; font-size: 24px; line-height: 30px; font-weight: 600; color: var(--ink); }
.sf-home__chev{ width: 22px; height: 22px; color: var(--ink-muted); }
.sf-home__rows{ display: flex; flex-direction: column; gap: 8px; }
.sf-home__row{ display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 12px; border-radius: var(--radius-12); background: var(--bg); }
.sf-home__row[data-time="pm"]{ background: var(--surface-evening); }
.sf-home__ticon{ width: 20px; height: 20px; color: var(--ink-muted); }
.sf-home__when{ flex: 1; font-size: 15px; line-height: 20px; color: var(--ink); }
.sf-home__roles{ display: inline-flex; gap: 4px; }
.sf-home__roles .sf-roleic{ width: 28px; height: 28px; }
.sf-home__roles .sf-roleic__svg{ width: 16px; height: 16px; }
.sf-home--empty{ align-items: flex-start; gap: 8px; padding: 24px 16px 16px; }
.sf-home__art{ display: inline-flex; gap: 6px; margin-bottom: 8px; }
.sf-home__art .sf-roleic{ width: 40px; height: 40px; }
.sf-home__art .sf-roleic__svg{ width: 20px; height: 20px; }
.sf-home__p{ margin: 0 0 8px; font-size: 15px; line-height: 20px; color: var(--ink-muted); }
.sf-home[data-state="loading"] .sf-home__head{ align-self: stretch; gap: 12px; }
.sf-home__cta{ text-decoration: none; }
.sf-check{ display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px 12px 12px 16px; border-radius: var(--radius-20); background: var(--surface); color: var(--ink); text-decoration: none; }
.sf-check__icon{ flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.sf-check__svg{ width: 22px; height: 22px; }
.sf-check__text{ flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sf-check__t{ font-size: 16px; line-height: 22px; font-weight: 500; color: var(--accent); }
.sf-check__s{ font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sf-menu__a .sf-ic{ width: 20px; height: 20px; color: var(--ink-muted); }
.sf-rules{ list-style: none; margin: 0; padding: 0 4px; border-radius: var(--radius-20); background: var(--surface); }
.sf-rules li + li{ border-top: 1px solid var(--line); }
.sf-rules__btn{ display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 8px 8px 10px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.sf-rules__k{ flex: 1; font-size: 15px; line-height: 20px; }
.sf-rules__open{ padding: 0 10px 12px 52px; margin: -4px 0 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.sf-rules .sf-ing__icon{ width: 30px; height: 30px; }
/* Поле города в анкете v3: тап открывает CityPicker */
.sf-cityfield{ display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; margin-top: 8px; padding: 10px 14px 10px 12px; border: 2px solid var(--accent); border-radius: var(--radius-20); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.sf-cityfield--empty{ border: 1px solid var(--line-strong); }
.sf-cityfield .sf-qopt__icon{ background: var(--neutral-badge); }
.sf-cityfield__text{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sf-cityfield__v{ font-size: 16px; line-height: 22px; font-weight: 500; color: var(--ink); }
.sf-cityfield__s{ font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sf-cityfield__act{ font-size: 15px; line-height: 20px; font-weight: 500; color: var(--accent); }
/* Где купить внутри карточки v2: заголовок как у разделов (жирный на экране один) */
.sf-wtb--v4 .sf-wtb__title{ font-size: 16px; line-height: 22px; font-weight: 500; }
.sf-sheet .sf-roleic{ width: 24px; height: 24px; }
.sf-sheet .sf-roleic__svg{ width: 14px; height: 14px; }
/* ---------- v47 (А+): иконки Phosphor duotone, предметные плитки, сетка активов, эмблема вердикта, нижнее меню ---------- */
.sf-ptile{ flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }
.sf-ptile--cleanse{ background: var(--role-cleanse); }
.sf-ptile--active{ background: var(--role-active); }
.sf-ptile--hydrate{ background: var(--role-hydrate); }
.sf-ptile--protect{ background: var(--role-protect); }
.sf-ptile--off{ background: var(--v-caution-soft); color: var(--v-caution); }
.sf-steprow__btn, .sf-rm__btn{ gap: 12px; min-height: 76px; padding: 10px 8px; }
.sf-steprow__ghost{ flex: none; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 14px; border: 1px dashed var(--line-strong); color: var(--ink-muted); }
.sf-steprow__gsvg{ width: 24px; height: 24px; }
.sf-actives__row{ display: grid; gap: 8px; margin: 0; padding: 0; overflow: visible; }
.sf-active{ width: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 12px; }
.sf-active__head{ display: flex; }
.sf-active__icon{ width: 44px; height: 44px; border-radius: 14px; background: var(--wash-lilac); color: var(--accent); }
.sf-active__svg{ width: 26px; height: 26px; }
.sf-active__name{ font-size: 14px; line-height: 18px; font-weight: 500; }
.sf-active__line{ font-size: 12px; line-height: 16px; -webkit-line-clamp: 2; }
.sf-fitv:not(.sf-fitv--sm){ flex-direction: column; justify-content: center; gap: 6px; padding: 20px 12px; text-align: center; }
.sf-fitv__emb{ display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--surface); }
.sf-fitv:not(.sf-fitv--sm) .sf-fitv__icon{ width: 40px; height: 40px; }
.sf-fitv__line{ font-size: 13px; line-height: 18px; color: var(--ink); }
.sf-fit__icon{ width: 44px; height: 44px; border-radius: 14px; }
.sf-fit__svg{ width: 24px; height: 24px; }
.sf-ing__icon{ border-radius: 12px; width: 36px; height: 36px; }
.sf-qopt__icon{ border-radius: 12px; width: 40px; height: 40px; background: var(--wash-lilac); color: var(--accent); }
.sf-qopt__icon .sf-qopt__svg, .sf-qopt__icon svg{ width: 24px; height: 24px; }
.sf-home__art{ gap: 8px; }
.sf-tabbar{ position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; padding: 6px 8px 18px; background: var(--surface); border-top: 1px solid var(--line); }
.sf .sf-tabbar .sf-tabbar__a{ flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; color: var(--ink-muted); font-size: 12px; line-height: 16px; text-decoration: none; }
.sf .sf-tabbar .sf-tabbar__a--on{ color: var(--accent); font-weight: 500; }
.sf-tabbar__svg{ width: 26px; height: 26px; }
.sf-prof{ display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--radius-20); background: var(--surface); }
.sf-prof__t{ margin: 0; font-size: 20px; line-height: 26px; font-weight: 500; color: var(--ink); }
.sf-prof__s{ margin: 2px 0 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.sf-plist{ list-style: none; margin: 0; padding: 0 4px; border-radius: var(--radius-20); background: var(--surface); }
.sf-plist li + li{ border-top: 1px solid var(--line); }
.sf .sf-plist__a{ display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 10px; color: var(--ink); text-decoration: none; font-size: 16px; line-height: 22px; }
.sf-plist__ic{ flex: none; display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 12px; background: var(--neutral-badge); color: var(--ink); }
.sf-plist__t{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sf-plist__s{ font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sf-bigpick{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sf-bigpick__btn{ display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-height: 152px; padding: 16px; border: 0; border-radius: var(--radius-20); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.sf-bigpick__ic{ display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; border-radius: 14px; background: var(--wash-lilac); color: var(--accent); }
.sf-bigpick__t{ font-size: 16px; line-height: 22px; font-weight: 500; color: var(--accent); }
.sf-bigpick__s{ font-size: 13px; line-height: 18px; color: var(--ink-muted); }
/* v47: «Где купить» без цен (решение 118) */
.sf-store--link .sf-store__text{ display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sf-store__sub{ font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sf-store__ext{ flex: none; width: 20px; height: 20px; color: var(--accent); }
.main{ display: flex; flex-direction: column; gap: 16px; padding: 16px 16px 24px; }
/* Раскладка экранов v4 (задание 25) */
.main--v4{ gap: 12px; }
.h1v4{ margin: 0; padding: 4px 4px 0; font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: 0; }
.homebar{ display: flex; align-items: center; justify-content: space-between; margin: -8px 0 -4px; }
.vgap8{ display: flex; flex-direction: column; gap: 8px; }
.sec-note{ margin: 0 4px; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.onshelf{ display: inline-flex; align-items: center; gap: 4px; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.onshelf .sf-ic{ width: 14px; height: 14px; }
/* В приложении лист и нижнее меню над прокруткой страницы (в макете — внутри рамки экрана 390 × 844), как .sf-confirm в компоненты.css */
.sf-sheet { position: fixed; max-height: calc(100% - 56px); }
.sf-tabbar { position: fixed; }
/* Корень приложения уже даёт поля 16 px (стили.css): у экранов v4 свои боковые поля макета не удваиваются; скрытое — скрыто
   и у блоков с display из DS (второй уровень листа «Подробнее») */
.sf-v4 > .main { padding-left: 0; padding-right: 0; }
.sf-v4 [hidden], .sf-sheet [hidden] { display: none !important; }