/* Экраны дизайна 26 (design/v5, DS v48): правила — из design/v5/ds-v48/v48.css без изменений; ниже — дополнения приложения. */
/* ---------- v48 (15.10, задание 26): Арбуз, Аксо, УФ, фото на плашке, главная v5 ---------- */
/* Кнопки-заливки берут --accent, текст и знаки акцента на поверхности берут --accent-ink. */
.sf-main { border-radius: var(--radius-pill); }
.sf-tabbar__a--on { color: var(--accent-ink); }

/* Маскот */
.sf-mascot { display: inline-flex; flex: none; }
.sf-mascot svg { display: block; }
.sf-mavatar { display: inline-flex; flex: none; border-radius: 50%; }
.sf-mavatar svg { display: block; }
.sf-mavatar__bg { fill: var(--mascot-bg); }
.sf-hello { display: flex; align-items: center; gap: 12px; }
.sf-hello__t { margin: 0; font-size: 24px; line-height: 30px; font-weight: 600; color: var(--ink); }
.sf-mstate { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 20px 16px; border-radius: var(--radius-20); background: var(--surface); }
.sf-mstate__t { margin: 4px 0 0; font-size: 20px; line-height: 26px; font-weight: 500; color: var(--ink); text-wrap: balance; }
.sf-mstate__p { margin: 0; font-size: 15px; line-height: 21px; color: var(--ink-muted); max-width: 300px; }
.sf-mstate__cta { margin-top: 8px; }
.sf-mstate--bare { background: transparent; padding-top: 32px; }
.sf-mnote { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-20); background: var(--accent-soft); }
.sf-mnote__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sf-mnote__t { font-size: 15px; line-height: 20px; font-weight: 500; color: var(--ink); }
.sf-mnote__s { font-size: 13px; line-height: 18px; color: var(--ink-muted); }

/* Шкала УФ */
.sf-uv { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px 14px; border-radius: var(--radius-20); background: var(--surface); }
.sf-uv__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -6px 0 -8px; }
.sf-uv__label { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.sf-uv__city { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 0 0 8px; border: 0; background: transparent; font: inherit; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--accent-ink); cursor: pointer; }
.sf-uv__pin { color: var(--accent-ink); }
.sf-uv__row { display: flex; align-items: center; gap: 10px; }
.sf-uv__n { font-size: 24px; line-height: 30px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.sf-uv__cat { font-size: 17px; line-height: 22px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.sf-uv__bar { position: relative; flex: 1; min-width: 80px; height: 8px; margin-left: 4px; border-radius: 999px;
  background: linear-gradient(90deg, var(--uv-1) 0%, var(--uv-1) 16%, var(--uv-2) 30%, var(--uv-2) 42%, var(--uv-3) 54%, var(--uv-3) 60%, var(--uv-4) 72%, var(--uv-4) 84%, var(--uv-5) 96%); }
.sf-uv__bar i { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); border: 3px solid var(--surface); transform: translate(-50%, -50%); }
.sf-uv__tip { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* Фото средства: прозрачный PNG на пастельной плашке роли (решение 135) */
.sf-pplate { display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.sf-pplate--cleanse { background: var(--role-cleanse); }
.sf-pplate--active { background: var(--role-active); }
.sf-pplate--hydrate { background: var(--role-hydrate); }
.sf-pplate--protect { background: var(--role-protect); }
.sf-pplate__img { width: 82%; height: 82%; object-fit: contain; display: block; }
.sf-pplate svg { width: 78%; height: 78%; display: block; }
.sf-pplate--dot { border: 2px solid var(--surface); }
.sf-pplate--dot .sf-pplate__img { width: 74%; height: 74%; }

/* Главная v5 */
.sf-rcard { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; border-radius: var(--radius-20); background: var(--role-active); color: var(--ink); }
.sf-rcard__head { display: flex; align-items: center; justify-content: space-between; }
.sf-rcard__t { font-size: 20px; line-height: 26px; font-weight: 500; }
.sf-rcard__chev { color: var(--ink-muted); }
.sf-rcard__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sf-rcard__col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sf-rcard__when { display: flex; align-items: center; gap: 6px; font-size: 14px; line-height: 20px; color: var(--ink); }
.sf-rcard__ic { color: var(--ink-muted); }
.sf-rcard__n { color: var(--ink-muted); }
.sf-rcard__dots { display: flex; }
.sf-rcard__dots .sf-pplate + .sf-pplate { margin-left: -10px; }
.sf-rcard[data-state="calc"] .sf-rcard__cols { opacity: .5; }
.sf-rcard__calc { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: var(--radius-pill); background: var(--surface); font-size: 14px; line-height: 20px; color: var(--ink); }
.sf-htiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sf-htile { display: flex; flex-direction: column; gap: 2px; padding: 0 14px 14px; border-radius: var(--radius-20); overflow: hidden; color: var(--ink); min-width: 0; }
.sf-htile[data-tile="check"] { background: var(--wash-butter); }
.sf-htile[data-tile="find"] { background: var(--role-hydrate); }
.sf-htile[data-tile="pick"] { background: var(--role-active); }
.sf-htile[data-tile="popular"] { background: var(--wash-peach); }
.sf-htile__art { display: block; margin: 0 -14px 2px; }
.sf-htile__art svg { display: block; width: 100%; height: auto; }
.sf-htile__t { font-size: 16px; line-height: 21px; font-weight: 500; }
.sf-htile__s { font-size: 13px; line-height: 18px; color: var(--ink-muted); }

/* Мой уход v5: шаг с фото и альтернативами */
.sf-steps5 { display: flex; flex-direction: column; gap: 8px; }
.sf-steps5__h { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; font-size: 18px; line-height: 24px; font-weight: 500; color: var(--ink); }
.sf-steps5__ic { color: var(--ink-muted); }
.sf-steps5__n { margin-left: auto; font-size: 14px; font-weight: 400; color: var(--ink-muted); }
.sf-steps5__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sf-step5 { display: flex; flex-direction: column; border-radius: var(--radius-20); background: var(--surface); overflow: hidden; }
.sf-step5__card { display: flex; align-items: center; gap: 14px; padding: 12px 14px; color: var(--ink); }
.sf-step5__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sf-step5__role { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sf-step5__brand { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sf-step5__name { font-size: 15px; line-height: 20px; font-weight: 500; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf-step5__more { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; border: 0; border-top: 1px solid var(--line); background: transparent; font: inherit; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--accent-ink); cursor: pointer; }
.sf-step5__more[aria-expanded="true"] .sf-step5__caret { transform: rotate(180deg); }
.sf-alts { list-style: none; margin: 0; padding: 0 14px 6px; display: flex; flex-direction: column; }
.sf-alt { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.sf-alt:first-child { border-top: 0; }
.sf-alt__a { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--ink); }
.sf-alt__text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.sf-alt__brand { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.sf-alt__name { font-size: 14px; line-height: 19px; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf-alt__swap { flex: none; min-height: 44px; padding: 0 12px; border: 1px solid var(--accent-soft); border-radius: var(--radius-pill); background: transparent; font: inherit; font-size: 14px; font-weight: 500; color: var(--accent-ink); cursor: pointer; }
.sf-alts__none { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 4px 14px 14px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.sf-alts__ic { flex: none; margin-top: 1px; }
.sf-regen5 { margin-top: 8px; }
.sf-regen5__ic { flex: none; }
.sf-msheet { align-items: center; text-align: center; }
.sf-msheet .sf-confirm__acts { align-self: stretch; display: flex; flex-direction: column; gap: 8px; }
.sf-msheet .sf-confirm__ok { background: var(--accent); color: var(--on-accent); }

/* Ваша кожа */
.sf-skhead { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 0 4px; }
.sf-skhead__photo { display: inline-flex; width: 104px; height: 104px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px var(--accent-soft); }
.sf-skhead__photo .sf-lp, .sf-skhead__photo img { width: 104px !important; height: 104px !important; display: block; }
.sf-skhead__edit { flex: none; padding: 0 16px; width: auto; }
.sf-skhead__note { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sf-skrows { list-style: none; margin: 0; padding: 0 0 0 16px; border-radius: var(--radius-20); background: var(--surface); }
.sf-skrows li + li .sf-skrow { border-top: 1px solid var(--line); }
.sf-skrow { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 8px 12px 8px 0; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.sf-skrow__k { flex: none; width: 128px; font-size: 15px; line-height: 20px; color: var(--ink); }
.sf-skrow__v { flex: 1; min-width: 0; font-size: 15px; line-height: 20px; color: var(--accent-ink); text-align: right; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf-skrow[data-changed="true"] .sf-skrow__v { font-weight: 500; }
.sf-skrow__empty { color: var(--ink-muted); }
.sf-skrow__chev { flex: none; color: var(--ink-muted); }
.sf-qedit { display: flex; flex-direction: column; gap: 8px; }
.sf-qedit__t { margin: 0; font-size: 22px; line-height: 28px; font-weight: 600; color: var(--ink); text-wrap: balance; }
.sf-qedit__why { margin: 0 0 8px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.sf-qedit__opts { display: flex; flex-direction: column; gap: 8px; }

/* Популярное в вашей стране */
.sf-popl { display: flex; flex-direction: column; gap: 6px; }
.sf-popl__t { margin: 0; font-size: 24px; line-height: 30px; font-weight: 600; color: var(--ink); text-wrap: balance; }
.sf-popl__s { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.sf-popl__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sf-pop { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 10px; border-radius: var(--radius-20); background: var(--surface); }
.sf-pop__a { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.sf-pop__rank { flex: none; width: 20px; font-size: 15px; line-height: 20px; font-weight: 500; color: var(--ink-muted); text-align: center; font-variant-numeric: tabular-nums; }
.sf-pop__text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.sf-pop__brand { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sf-pop__name { font-size: 15px; line-height: 20px; font-weight: 500; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf-buy { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding-left: 32px; }
.sf-buy__l { font-size: 13px; line-height: 18px; color: var(--ink-muted); margin-right: 2px; }
.sf-buy__a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--radius-pill); background: var(--store); color: var(--store-ink) !important; font-size: 14px; line-height: 20px; font-weight: 500; }

.sf-loadwrap { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 16px; }
.sf-loadwrap .sf-load { align-self: stretch; }

.sf-skhead__photo .sf-mavatar, .sf-skhead__photo .sf-mavatar svg { width: 104px; height: 104px; }

/* v48.1 (15.10): шаг полкой магазина, «Популярное» с хитами магазинов страны */
.sf-step6 { display: flex; flex-direction: column; border-radius: var(--radius-20); background: var(--surface); }
.sf-step6__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 8px; }
.sf-step6__role { font-size: 14px; line-height: 20px; color: var(--ink); font-weight: 500; }
.sf-step6__more { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sf-step6__chev { color: var(--ink-muted); }
.sf-shoprow { list-style: none; margin: 0; padding: 0 14px 14px; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 14px; scrollbar-width: none; }
.sf-shoprow::-webkit-scrollbar { display: none; }
.sf-shop { flex: none; width: 132px; scroll-snap-align: start; }
.sf-shop__a { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; color: var(--ink); }
.sf-shop__ph { position: relative; display: block; margin-bottom: 4px; }
.sf-shop--cur .sf-pplate { box-shadow: inset 0 0 0 2px var(--accent); }
.sf-shop__tag { position: absolute; left: 6px; top: 6px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px 2px 6px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 12px; line-height: 16px; font-weight: 500; }
.sf-shop__brand { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.sf-shop__name { font-size: 14px; line-height: 19px; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf-step6__none { display: flex; align-items: flex-start; gap: 8px; margin: -4px 0 0; padding: 0 14px 14px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.sf-popl__h { margin: 10px 0 2px; font-size: 18px; line-height: 24px; font-weight: 500; color: var(--ink); }
.sf-buy--flat { padding-left: 0; }
.sf-buy__none { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }

/* Дополнения приложения (классы из холста design/v5/ekrany, которых нет в v48.css) */
.sf-skrow__more { color: var(--ink-muted); }
.sf-pplate--dot { border-radius: 50%; }
.sf-htile, .sf-rcard, .sf-shop__a, .sf-pop__a { text-decoration: none; -webkit-tap-highlight-color: transparent; }
.sf-shop__a .sf-fitv { margin-top: 2px; }
.sf-v5-stack { display: flex; flex-direction: column; gap: 12px; }
/* Пауза после процедуры (решение 155): плашка sf-doc, «Подробнее» sf-more, подписи источника sf-src без обрезки (строки базы целиком),
   средства на паузе строками sf-rm */
.sf-pause { display: flex; flex-direction: column; gap: 8px; }
.sf-pause .sf-doc__body { flex: 1; min-width: 0; }
.sf-pause__more { display: flex; flex-direction: column; gap: 8px; }
.sf-pause__more[hidden] { display: none; }
.sf-pause .sf-more { padding: 0; }
.sf-src--full .sf-src__title { display: block; -webkit-line-clamp: unset; overflow: visible; overflow-wrap: anywhere; }
.sf-src--full .sf-src__a { min-height: 44px; }
.sf-pause__list .sf-rm__why { white-space: normal; }