/* Smart Finance — reference stylesheet for previews (v2).
   Production: the same recipes as Tailwind v4 classes in shadcn/ui components on Base UI (see «Реализация»).
   Manrope comes from Google Fonts only in these previews; the product self-hosts it (@fontsource-variable/manrope). */
:root { --font-sans: "Manrope Variable", Manrope, ui-sans-serif, system-ui, sans-serif; color-scheme: light; }
/* Шкала типографики как значения font — синхронно со стилями type в tokens.json. Компоненты и экраны берут шрифт только отсюда */
:root { --type-hero: 620 2.75rem/2.75rem var(--font-sans); --type-display-l: 620 2.25rem/2.5rem var(--font-sans); --type-display-m: 620 1.75rem/2rem var(--font-sans); --type-title-l: 550 1.5rem/1.75rem var(--font-sans); --type-numeric-l: 620 1.5rem/1.75rem var(--font-sans); --type-numeric-m: 550 1.375rem/1.75rem var(--font-sans); --type-title-m: 550 1.25rem/1.75rem var(--font-sans); --type-input-touch: 450 1rem/1.5rem var(--font-sans); --type-card-header: 550 0.9375rem/1rem var(--font-sans); --type-body: 450 0.9375rem/1.25rem var(--font-sans); --type-body-medium: 550 0.9375rem/1.25rem var(--font-sans); --type-body-strong: 620 0.9375rem/1.25rem var(--font-sans); --type-caption: 450 0.8125rem/1.25rem var(--font-sans); --type-caption-strong: 550 0.8125rem/1.25rem var(--font-sans); --type-overline: 620 0.8125rem/1.25rem var(--font-sans); --type-tab-label: 550 0.75rem/0.875rem var(--font-sans); --type-micro: 620 0.6875rem/1rem var(--font-sans); }
[data-theme="dark"], [data-mode="dark"] { color-scheme: dark; }
[data-theme="contrast"], [data-mode="contrast"] { --border-hairline: 1px; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--background); color: var(--text-primary); font: var(--type-body); -webkit-font-smoothing: antialiased; }
:focus-visible { outline: var(--focus-width, 2px) solid var(--ring); outline-offset: 2px; }
.sf-num, .sf-money { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; white-space: nowrap; }
.sf-muted { color: var(--text-secondary); }
.sf-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.sf-icon { width: var(--size-icon-m); height: var(--size-icon-m); flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.sf-icon[data-size="s"] { width: var(--size-icon-s); height: var(--size-icon-s); }
.sf-icon[data-size="l"] { width: var(--size-icon-l); height: var(--size-icon-l); }
/* Скрыто визуально, доступно скринридеру. .sf-sr-focusable — то же, но становится видимым при фокусе с клавиатуры */
.sf-sr, .sf-sr-focusable:not(:focus-visible) { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Category families: data-family="green" → --f-xs / --f-strong / --f-base / --f-soft */
[data-family] { --f-xs: var(--gray-extra-strong); --f-strong: var(--gray-strong); --f-base: var(--gray-base); --f-soft: var(--gray-soft); }
[data-family="gray"] { --f-xs: var(--gray-extra-strong); --f-strong: var(--gray-strong); --f-base: var(--gray-base); --f-soft: var(--gray-soft); }
[data-family="red-warm"] { --f-xs: var(--red-warm-extra-strong); --f-strong: var(--red-warm-strong); --f-base: var(--red-warm-base); --f-soft: var(--red-warm-soft); }
[data-family="red"] { --f-xs: var(--red-extra-strong); --f-strong: var(--red-strong); --f-base: var(--red-base); --f-soft: var(--red-soft); }
[data-family="orange-warm"] { --f-xs: var(--orange-warm-extra-strong); --f-strong: var(--orange-warm-strong); --f-base: var(--orange-warm-base); --f-soft: var(--orange-warm-soft); }
[data-family="orange"] { --f-xs: var(--orange-extra-strong); --f-strong: var(--orange-strong); --f-base: var(--orange-base); --f-soft: var(--orange-soft); }
[data-family="brown"] { --f-xs: var(--brown-extra-strong); --f-strong: var(--brown-strong); --f-base: var(--brown-base); --f-soft: var(--brown-soft); }
[data-family="beige"] { --f-xs: var(--beige-extra-strong); --f-strong: var(--beige-strong); --f-base: var(--beige-base); --f-soft: var(--beige-soft); }
[data-family="yellow"] { --f-xs: var(--yellow-extra-strong); --f-strong: var(--yellow-strong); --f-base: var(--yellow-base); --f-soft: var(--yellow-soft); }
[data-family="olive"] { --f-xs: var(--olive-extra-strong); --f-strong: var(--olive-strong); --f-base: var(--olive-base); --f-soft: var(--olive-soft); }
[data-family="green"] { --f-xs: var(--green-extra-strong); --f-strong: var(--green-strong); --f-base: var(--green-base); --f-soft: var(--green-soft); }
[data-family="teal"] { --f-xs: var(--teal-extra-strong); --f-strong: var(--teal-strong); --f-base: var(--teal-base); --f-soft: var(--teal-soft); }
[data-family="blue"] { --f-xs: var(--blue-extra-strong); --f-strong: var(--blue-strong); --f-base: var(--blue-base); --f-soft: var(--blue-soft); }
[data-family="indigo"] { --f-xs: var(--indigo-extra-strong); --f-strong: var(--indigo-strong); --f-base: var(--indigo-base); --f-soft: var(--indigo-soft); }
[data-family="purple"] { --f-xs: var(--purple-extra-strong); --f-strong: var(--purple-strong); --f-base: var(--purple-base); --f-soft: var(--purple-soft); }
[data-family="magenta"] { --f-xs: var(--magenta-extra-strong); --f-strong: var(--magenta-strong); --f-base: var(--magenta-base); --f-soft: var(--magenta-soft); }
[data-family="pink"] { --f-xs: var(--pink-extra-strong); --f-strong: var(--pink-strong); --f-base: var(--pink-base); --f-soft: var(--pink-soft); }

/* Button — pill (radius-full), 15px/550, hover = overlay on top of the fill */
.sf-btn { --h: var(--height-m); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1_5); min-height: var(--h); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-full); font: var(--type-body-medium); cursor: pointer; white-space: nowrap; text-decoration: none; background-color: var(--button-primary); color: var(--text-primary-inverse); box-shadow: var(--shadow-button-combined); transition: background-color var(--duration-fast) var(--ease-in-out), background-image var(--duration-fast) var(--ease-in-out), box-shadow var(--duration-fast) var(--ease-in-out); user-select: none; }
.sf-btn[data-size="l"] { --h: var(--height-l); padding: 0 var(--space-4); }
.sf-btn[data-size="s"] { --h: var(--height-s); padding: 0 var(--space-2); font-size: 0.8125rem; }
.sf-btn[data-size="xs"] { --h: var(--height-xs); padding: 0 var(--space-2); border-radius: var(--radius-full); font-size: 0.8125rem; }
.sf-btn:hover { background-image: linear-gradient(var(--background-button-hover), var(--background-button-hover)); }
.sf-btn[data-variant="secondary"] { background-color: var(--button-secondary); color: var(--text-primary); box-shadow: inset 0 0 0 var(--border-hairline) var(--border-base), var(--shadow-button-combined); }
.sf-btn[data-variant="secondary"]:hover { background-image: none; background-color: var(--surface-hover); }
.sf-btn[data-variant="neutral"] { background-color: var(--button-neutral); color: var(--text-primary-inverse); }
.sf-btn[data-variant="ghost"] { background-color: transparent; color: var(--text-primary); box-shadow: none; }
.sf-btn[data-variant="ghost"]:hover { background-image: none; background-color: var(--surface-hover); }
.sf-btn[data-variant="link"] { background-color: transparent; color: var(--text-primary); box-shadow: none; text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 1px; text-underline-offset: 3px; padding: 0 var(--space-1); }
.sf-btn[data-variant="link"]:hover { background-image: none; text-decoration-thickness: 2px; }
.sf-btn[data-variant="destructive"] { background-color: var(--bg-negative-soft); color: var(--text-negative); box-shadow: none; }
.sf-btn[data-variant="destructive"]:hover { background-image: linear-gradient(var(--bg-negative-extra-soft), var(--bg-negative-extra-soft)); }
.sf-btn[data-variant="danger"] { background-color: var(--button-danger); color: var(--text-primary-inverse); font-weight: var(--weight-semibold); }
.sf-btn[data-icon-only] { width: var(--h); height: var(--h); padding: 0; }
.sf-btn:disabled, .sf-btn[aria-disabled="true"] { background-color: var(--surface-strong); background-image: none; color: var(--text-disabled); box-shadow: none; pointer-events: none; }
.sf-btn[data-loading] { color: transparent !important; position: relative; pointer-events: none; }
.sf-btn[data-loading]::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--text-primary-inverse); border-right-color: transparent; animation: sf-spin .8s linear infinite; }
@keyframes sf-spin { to { transform: rotate(360deg); } }

/* Badge — micro 11/16/620, 4px radius, tint background, dot carries the status colour */
.sf-badge { display: inline-flex; align-items: center; gap: var(--space-1_5); min-height: var(--height-2xs); padding: 0 var(--space-1_5); border-radius: var(--radius-sm); font: var(--type-micro); background: var(--bg-neutral-soft); color: var(--text-primary); white-space: nowrap; }
.sf-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-secondary); }
.sf-badge[data-tone="positive"] { background: var(--bg-positive-soft); } .sf-badge[data-tone="positive"]::before { background: var(--positive); }
.sf-badge[data-tone="callout"] { background: var(--bg-callout-soft); } .sf-badge[data-tone="callout"]::before { background: var(--text-callout); }
.sf-badge[data-tone="warning"] { background: var(--bg-warning-soft); } .sf-badge[data-tone="warning"]::before { background: var(--warning); }
.sf-badge[data-tone="negative"] { background: var(--bg-negative-soft); } .sf-badge[data-tone="negative"]::before { background: var(--negative); }
.sf-badge[data-tone="info"] { background: var(--background-active); } .sf-badge[data-tone="info"]::before { background: var(--blue-primary); animation: sf-pulse 1.4s var(--ease-in-out) infinite; }
.sf-badge[data-tone="count"] { background: var(--blue-primary); color: var(--text-primary-inverse); border-radius: var(--radius-full); min-width: 20px; justify-content: center; } .sf-badge[data-tone="count"]::before { display: none; }
.sf-badge[data-plain]::before { display: none; }
/* Пин — точка-индикатор без подписи (смысл — в aria-label/title и в подсвеченном поле рядом) */
.sf-pin { display: inline-block; width: 8px; height: 8px; margin-left: var(--space-1_5); border-radius: 50%; background: var(--text-secondary); vertical-align: middle; position: relative; top: -1px; flex: none; }
.sf-pin[data-tone="callout"] { background: var(--warning); }
:is([data-theme="contrast"], [data-mode="contrast"]) .sf-pin[data-tone="callout"] { background: var(--text-callout); }
.sf-pin[data-tone="negative"] { background: var(--negative); }
.sf-pin[data-tone="info"] { background: var(--blue-primary); }
.sf-pin[hidden] { display: none; }
@keyframes sf-pulse { 50% { opacity: .35; } }

/* Chip — category pill: family soft bg, extra-strong text, base dot */
.sf-chip { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--height-s); max-width: 100%; padding: 0 var(--space-2_5) 0 var(--space-1_5); border: 0; border-radius: var(--radius-full); background: var(--f-soft, var(--surface-strong)); color: var(--f-xs, var(--text-primary)); font: var(--type-caption-strong); cursor: pointer; transition: box-shadow var(--duration-fast) var(--ease-in-out), filter var(--duration-fast) var(--ease-in-out); }
.sf-chip:hover { box-shadow: inset 0 0 0 1px var(--f-base, var(--border-base)); }
.sf-chip[aria-expanded="true"], .sf-chip[aria-pressed="true"] { box-shadow: inset 0 0 0 var(--border-width-2) var(--f-strong, var(--text-primary)); }
.sf-chip .sf-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--f-base, var(--text-secondary)); flex: none; }
.sf-chip .sf-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-chip .sf-icon { opacity: .7; margin-right: -2px; }
.sf-chip[data-family="orange"] { color: var(--text-primary); }
.sf-chip[data-size="xs"] { min-height: var(--height-2xs); padding: 0 var(--space-2) 0 var(--space-1_5); font-size: 0.6875rem; line-height: 1rem; cursor: default; }

/* Category emoji — the category marker (colour stays in lines: stack bar, bar tracks, chip tint) */
.sf-emoji { display: inline-grid; place-items: center; flex: none; width: 1.25em; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 1rem; line-height: 1; font-weight: 400; font-style: normal; }
.sf-chip .sf-emoji { font-size: 0.875rem; }
.sf-chip[data-size="xs"] .sf-emoji { font-size: 0.75rem; }

/* Emoji fallback: when the platform cannot draw the emoji, JS sets data-fallback and a family-coloured dot is shown instead */
.sf-emoji[data-fallback] { font-size: 0; }
.sf-emoji[data-fallback]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--f-base, var(--text-secondary)); }

/* Legend row with a share line (summary, dock) */
.sf-legend { display: grid; gap: var(--space-2_5); margin: 0; padding: 0; list-style: none; }
.sf-legend li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-2); row-gap: var(--space-1); font: var(--type-body); }
.sf-legend li b { font-weight: var(--weight-semibold); }
.sf-legend .sf-line { grid-column: 1 / -1; height: 3px; border-radius: var(--radius-full); background: var(--surface-strong); overflow: hidden; }
.sf-legend .sf-line i { display: block; height: 100%; border-radius: inherit; background: var(--f-base); }

/* High-contrast theme: controls are set apart by borders, not by fill alone */
:is([data-theme="contrast"], [data-mode="contrast"]) .sf-amount-input[data-missing] { box-shadow: inset 0 0 0 var(--border-width-2) var(--callout); }
:is([data-theme="contrast"], [data-mode="contrast"]) .sf-input[data-callout] { outline: var(--border-width-2) solid var(--callout); outline-offset: -2px; }
:is([data-theme="contrast"], [data-mode="contrast"]) .sf-input[data-invalid] { outline: var(--border-width-2) solid var(--negative); outline-offset: -2px; }
:is([data-theme="contrast"], [data-mode="contrast"]) .sf-chip { color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--border-base); }
:is([data-theme="contrast"], [data-mode="contrast"]) .sf-segmented { box-shadow: inset 0 0 0 1px var(--border-base); }
:is([data-theme="contrast"], [data-mode="contrast"]) .sf-btn[data-variant="ghost"], :is([data-theme="contrast"], [data-mode="contrast"]) .sf-btn[data-variant="link"] { text-decoration-color: currentColor; }

/* Field / Input — surface-strong fill, no border at rest */
.sf-field { display: grid; gap: var(--space-1_5); }
.sf-label { font: var(--type-caption-strong); color: var(--text-primary); }
.sf-hint { font: var(--type-caption); color: var(--text-secondary); }
.sf-hint[data-tone="negative"] { color: var(--text-negative); }
.sf-hint[data-tone="callout"] { color: var(--text-callout); }
.sf-input { --h: var(--height-m); display: flex; align-items: center; gap: var(--space-2); min-height: var(--h); padding: 0 var(--space-3); border-radius: var(--radius-xl); background: var(--field); color: var(--text-primary); font: var(--type-body); outline: 1px solid var(--field-border); outline-offset: -1px; box-shadow: var(--shadow-field); transition: outline-color var(--duration-fast) var(--ease-in-out), box-shadow var(--duration-fast) var(--ease-in-out), background-color var(--duration-fast) var(--ease-in-out); }
.sf-input[data-size="l"] { --h: var(--height-l); }
.sf-input[data-size="s"] { --h: var(--height-s); padding: 0 var(--space-2); font-size: 0.8125rem; }
.sf-input:hover { outline-color: var(--field-border-hover); }
.sf-input:focus-within { outline: var(--focus-width) solid var(--ring); outline-offset: -2px; box-shadow: 0 0 0 3px var(--ring-soft); }
.sf-input[data-invalid] { outline: 1px solid var(--negative); }
.sf-input[data-callout] { background: var(--bg-callout-soft); outline: 1px solid var(--text-callout); }
.sf-input[data-invalid]:focus-within, .sf-input[data-callout]:focus-within { outline: var(--focus-width) solid var(--ring); outline-offset: -2px; box-shadow: 0 0 0 3px var(--ring-soft); }
.sf-input input, .sf-input textarea { all: unset; flex: 1; min-width: 0; font: inherit; color: var(--text-primary); }
.sf-input input { align-self: stretch; } /* поле во всю высоту обёртки: цель нажатия 36/44px, а не 20px (WCAG 2.5.8) */
.sf-input input::placeholder, .sf-input textarea::placeholder { color: var(--text-tertiary); }
.sf-input .sf-suffix { color: var(--text-secondary); }
.sf-input .sf-icon { color: var(--text-tertiary); }

/* Composer — free text input */
.sf-composer { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-3xl); background: var(--surface); box-shadow: inset 0 0 0 var(--border-hairline) var(--border-base), var(--shadow-soft); }
.sf-composer:focus-within { box-shadow: inset 0 0 0 var(--border-width-2) var(--ring), var(--shadow-soft); }
.sf-composer textarea { all: unset; display: block; min-height: 48px; font: var(--type-input-touch); color: var(--text-primary); white-space: pre-wrap; }
.sf-composer textarea::placeholder { color: var(--text-tertiary); }
.sf-composer-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }

/* Popover / Listbox — Base UI Popup */
.sf-popover { min-width: 240px; max-height: 340px; overflow: auto; padding: var(--space-1); border-radius: var(--radius-2xl); background: var(--background-modal); color: var(--text-primary); box-shadow: inset 0 0 0 var(--border-hairline) var(--border-base), var(--shadow-strong); }
.sf-popover-search { margin: var(--space-1) var(--space-1) var(--space-1_5); }
.sf-group-label { padding: var(--space-2) var(--space-2) var(--space-1); font: var(--type-overline); letter-spacing: .24px; color: var(--text-secondary); }
.sf-option { display: flex; align-items: center; gap: var(--space-2_5); min-height: var(--height-m); padding: 0 var(--space-2); border-radius: var(--radius-lg); font: var(--type-body); cursor: pointer; }
.sf-option:hover { background: var(--option-highlight); }
.sf-option[data-highlighted], .sf-option:focus-visible { outline: none; background: var(--option-highlight); box-shadow: inset 0 0 0 var(--border-width-1_5) var(--text-tertiary); }
.sf-option[aria-selected="true"] { font-weight: var(--weight-medium); }
.sf-option .sf-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--f-base, var(--text-secondary)); flex: none; }
.sf-option .sf-option-meta { margin-left: auto; font: var(--type-caption); color: var(--text-secondary); }
.sf-option .sf-check { margin-left: var(--space-2); color: var(--text-primary); display: flex; }
.sf-option mark { background: none; color: inherit; font-weight: var(--weight-semibold); }
/* Двухстрочная опция категории: эмодзи в пастельном кружке, название, раздел второй строкой; справа только галочка */
.sf-option-avatar { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--f-soft, var(--surface-strong)); font-size: 1.0625rem; line-height: 1; }
.sf-option-text { display: grid; flex: 1; min-width: 0; }
.sf-option-title, .sf-option-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-option-sub { font: var(--type-caption); color: var(--text-secondary); }
.sf-option:has(.sf-option-sub) { min-height: var(--height-xl); padding-top: var(--space-1_5); padding-bottom: var(--space-1_5); }
.sf-option[aria-selected="true"] .sf-option-sub { font-weight: var(--weight-regular); }
/* Превью будущего чипа в «Создать» */
.sf-option-new { display: inline-flex; align-items: center; gap: var(--space-1_5); height: 24px; padding: 0 var(--space-2) 0 var(--space-1_5); border-radius: var(--radius-full); background: var(--gray-soft); color: var(--gray-extra-strong); font: var(--type-caption-strong); }
/* Подсказка клавиш — только на устройствах с мышью */
.sf-option-hint { display: flex; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-1); margin-top: var(--space-1); font: var(--type-caption); color: var(--text-tertiary); box-shadow: inset 0 var(--border-hairline) 0 var(--border-soft); }
.sf-option-hint kbd { font: var(--type-micro); padding: 2px var(--space-1); border-radius: var(--radius-sm); background: var(--surface-strong); color: var(--text-secondary); }
@media (pointer: coarse) { .sf-option-hint { display: none; } }
.sf-option[data-create] { font-weight: var(--weight-medium); }
.sf-option[data-create] .sf-icon { color: var(--text-primary); }
.sf-sep { height: 1px; box-shadow: inset 0 var(--border-hairline) 0 var(--border-base); background: none; margin: var(--space-1) var(--space-2); }

/* Select trigger — space switcher (secondary button look) */
.sf-select[data-size="s"] { min-height: var(--height-s); font: var(--type-caption-strong); }
.sf-select { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--height-m); padding: 0 var(--space-2_5) 0 var(--space-1_5); border: 0; border-radius: var(--radius-full); background: var(--button-secondary); color: var(--text-primary); font: var(--type-body-medium); cursor: pointer; box-shadow: inset 0 0 0 var(--border-hairline) var(--border-base), var(--shadow-button-combined); }
.sf-select:hover { background: var(--surface-hover); }
.sf-select .sf-icon { color: var(--text-secondary); }

/* Avatar — category-family tints */
.sf-avatar { display: inline-grid; place-items: center; width: var(--size-avatar-m); height: var(--size-avatar-m); border-radius: var(--radius-full); background: var(--f-soft, var(--surface-strong)); color: var(--f-xs, var(--text-primary)); font: var(--type-micro); line-height: 1; flex: none; }
.sf-avatar[data-size="s"] { width: var(--size-avatar-s); height: var(--size-avatar-s); font-size: 0.625rem; }
.sf-avatar[data-size="l"] { width: var(--size-avatar-l); height: var(--size-avatar-l); font-size: 0.8125rem; }
.sf-avatar-stack { display: inline-flex; }
.sf-avatar-stack .sf-avatar { box-shadow: 0 0 0 2px var(--background); }
.sf-avatar-stack .sf-avatar + .sf-avatar { margin-left: -6px; }

/* Segmented — Base UI ToggleGroup */
.sf-segmented { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--radius-full); background: var(--surface-strong); }
.sf-segmented button { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--height-s); padding: 0 var(--space-2_5); border: 0; border-radius: var(--radius-full); background: transparent; color: var(--text-secondary); font: var(--type-caption-strong); cursor: pointer; }
.sf-segmented button:hover { color: var(--text-primary); }
.sf-segmented button[aria-pressed="true"], .sf-segmented button[aria-selected="true"] { background: var(--surface-extra-soft); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--text-tertiary), var(--shadow-button-combined); }

/* Switch */
.sf-switch { position: relative; display: inline-block; width: var(--size-switch); height: var(--height-xs); flex: none; border: 0; border-radius: var(--radius-full); background: var(--text-tertiary); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-in-out); }
.sf-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: calc(var(--height-xs) - 4px); height: calc(var(--height-xs) - 4px); border-radius: 50%; background: var(--surface-extra-soft); box-shadow: var(--shadow-button-combined); transition: transform var(--duration-fast) var(--ease-out); }
.sf-switch[aria-checked="true"] { background: var(--button-primary); }
.sf-switch[aria-checked="true"]::after { transform: translateX(calc(var(--size-switch) - var(--height-xs))); }

/* Card — surface, 0.5px border, 24px radius, soft shadow, 24px padding */
.sf-card { border-radius: var(--radius-3xl); background: var(--surface); color: var(--text-primary); padding: var(--space-6); box-shadow: inset 0 0 0 var(--border-hairline) var(--border-base), var(--shadow-soft); }
.sf-card[data-pad="s"] { padding: var(--space-4) var(--space-5); }
.sf-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.sf-card-title { margin: 0; font: var(--type-card-header); letter-spacing: .13px; }

/* Purchase card */
.sf-purchase { border-radius: var(--radius-3xl); background: var(--surface); padding: var(--space-4) var(--space-5) var(--space-3); box-shadow: inset 0 0 0 var(--border-hairline) var(--border-base), var(--shadow-soft); transition: box-shadow var(--duration-fast) var(--ease-in-out), opacity var(--duration-fast) var(--ease-in-out); }
.sf-purchase[data-state="excluded"] { background: transparent; box-shadow: inset 0 0 0 1px var(--border-base); }
.sf-purchase[data-state="excluded"] .sf-purchase-title { color: var(--text-secondary); text-decoration: line-through; }
.sf-purchase-head { display: flex; align-items: flex-start; gap: var(--space-3); }
.sf-purchase-title { margin: 0; font: var(--type-body-strong); }
.sf-purchase-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin-top: 2px; font: var(--type-caption); color: var(--text-secondary); }
.sf-purchase-total { margin-left: auto; text-align: right; font: var(--type-body-strong); }
.sf-purchase-total small { display: block; font: var(--type-caption); color: var(--text-secondary); }
.sf-purchase-items { margin-top: var(--space-3); box-shadow: inset 0 var(--border-hairline) 0 var(--border-base); }
.sf-item { display: grid; grid-template-columns: minmax(0, 1fr) var(--size-amount-input); align-items: center; gap: var(--space-1_5) var(--space-3); padding: var(--space-2_5) 0; box-shadow: inset 0 calc(-1 * var(--border-hairline)) 0 var(--border-soft); }
.sf-item:last-child { border-bottom: 0; }
.sf-item-name { font: var(--type-body); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.sf-item > .sf-chip { grid-column: 1; grid-row: 2; justify-self: start; }
.sf-item > .sf-amount-input, .sf-item > .sf-item-amount, .sf-item > .sf-amt-btn { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
/* Container queries: карточка перестраивается по своей ширине, а не по ширине окна. ≤ container-xs (320px): сумма уходит под название и чип */
.sf-purchase, .sf-card { container-type: inline-size; }
@container (max-width: 320px) {
  .sf-item { grid-template-columns: minmax(0, 1fr); }
  .sf-item > .sf-amount-input, .sf-item > .sf-item-amount, .sf-item > .sf-amt-btn { grid-column: 1; grid-row: auto; justify-self: start; }
}
/* Amount field: always looks like a field (fill + 1px border), so editability is visible without hover */
.sf-amount-input { width: var(--size-amount-input); height: var(--height-m); padding: 0 var(--space-2_5); border: 0; border-radius: var(--radius-xl); background: var(--field); box-shadow: inset 0 0 0 1px var(--field-border), var(--shadow-field); color: var(--text-primary); font: var(--type-body-strong); text-align: right; font-variant-numeric: tabular-nums; cursor: text; outline: none; transition: box-shadow var(--duration-fast) var(--ease-in-out), background-color var(--duration-fast) var(--ease-in-out); }
.sf-amount-input:hover { box-shadow: inset 0 0 0 1px var(--field-border-hover), var(--shadow-field); }
.sf-amount-input:focus { box-shadow: inset 0 0 0 var(--border-width-2) var(--ring), 0 0 0 3px var(--ring-soft); }
.sf-amount-input[data-missing] { background: var(--bg-callout-soft); box-shadow: inset 0 0 0 1px var(--callout); font-weight: var(--weight-regular); }
.sf-amount-input[data-missing]:focus { background: var(--field); box-shadow: inset 0 0 0 var(--border-width-2) var(--ring), 0 0 0 3px var(--ring-soft); }
.sf-amount-input::placeholder { color: var(--text-secondary); }
.sf-purchase-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-top: var(--space-2); }

/* Category breakdown */
.sf-bars { display: grid; gap: var(--space-3); }
.sf-bar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1_5) var(--space-3); align-items: baseline; }
.sf-bar-row .sf-bar-name { display: flex; align-items: center; gap: var(--space-2); font: var(--type-body); min-width: 0; }
.sf-bar-row .sf-bar-name .sf-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--f-base); flex: none; }
.sf-bar-row .sf-bar-val { font: var(--type-body-strong); }
.sf-bar-row .sf-bar-val small { font-weight: var(--weight-regular); font-size: 0.8125rem; color: var(--text-secondary); margin-left: var(--space-1_5); }
.sf-bar-track { grid-column: 1 / -1; height: 6px; border-radius: var(--radius-full); background: var(--surface-strong); overflow: hidden; }
.sf-bar-fill { height: 100%; border-radius: inherit; background: var(--f-base); }
.sf-stackbar { display: flex; gap: 2px; height: 10px; border-radius: var(--radius-full); overflow: hidden; }
.sf-stackbar span { background: var(--f-base); }

/* Alert */
/* Alert: тонированная подложка + мягкий контур 1px цветом статуса на 22% (--alert-tone задаёт статус). Контур декоративный: сообщение передаёт текст */
.sf-alert { --alert-tone: var(--ring); --alert-tone-text: var(--blue-primary); display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-2_5); align-items: start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-2xl); background: var(--bg-info-soft); box-shadow: inset 0 0 0 var(--border-width-1) color-mix(in srgb, var(--alert-tone) 22%, transparent); color: var(--text-primary); font: var(--type-caption); }
.sf-alert > .sf-icon { color: var(--alert-tone-text); }
.sf-alert b { font-weight: var(--weight-semibold); }
.sf-alert[data-tone="callout"] { --alert-tone: var(--callout); --alert-tone-text: var(--text-callout); background: var(--bg-callout-extra-soft); }
.sf-alert[data-tone="negative"] { --alert-tone: var(--negative); --alert-tone-text: var(--text-negative); background: var(--bg-negative-extra-soft); }
.sf-alert[data-tone="positive"] { --alert-tone: var(--positive); --alert-tone-text: var(--text-positive); background: var(--bg-positive-extra-soft); }
:is([data-theme="contrast"], [data-mode="contrast"]) .sf-alert { box-shadow: inset 0 0 0 var(--border-width-1) var(--alert-tone-text); }

/* Toast — Sonner */
.sf-toast { display: flex; align-items: center; gap: var(--space-3); width: min(400px, calc(100vw - 32px)); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); border-radius: var(--radius-2xl); background: var(--background-modal); color: var(--text-primary); box-shadow: inset 0 0 0 var(--border-hairline) var(--border-base), var(--shadow-strong); font: var(--type-caption); }
.sf-toast > .sf-icon { color: var(--text-positive); }
.sf-toast-body { flex: 1; min-width: 0; color: var(--text-secondary); }
.sf-toast-body b { display: block; font: var(--type-body-strong); color: var(--text-primary); }

/* Dialog — Base UI AlertDialog, blurred overlay */
.sf-overlay { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--space-4); background: var(--overlay); backdrop-filter: blur(var(--blur-md)); -webkit-backdrop-filter: blur(var(--blur-md)); animation: sf-fade var(--duration-fast) var(--ease-out); }
.sf-dialog { width: min(420px, 100%); padding: var(--space-6); border-radius: var(--radius-3xl); background: var(--background-modal); color: var(--text-primary); box-shadow: inset 0 0 0 var(--border-hairline) var(--border-base), var(--shadow-deep); }
.sf-dialog h2 { margin: 0 0 var(--space-2); font: var(--type-title-m); }
.sf-dialog p { margin: 0; color: var(--text-secondary); font: var(--type-body); }
.sf-dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-6); }

/* Sheet — mobile bottom sheet */
.sf-sheet-overlay { position: fixed; inset: 0; z-index: var(--z-overlay); display: flex; align-items: flex-end; background: var(--overlay); backdrop-filter: blur(var(--blur-lg)); -webkit-backdrop-filter: blur(var(--blur-lg)); animation: sf-fade var(--duration-fast) var(--ease-out); }
.sf-sheet { display: flex; flex-direction: column; width: 100%; max-height: 82%; max-height: round(down, 82%, 1px); padding: var(--space-2) var(--space-4) var(--space-6); border-radius: var(--radius-4xl) var(--radius-4xl) 0 0; background: var(--background-modal); color: var(--text-primary); box-shadow: var(--shadow-deep); animation: sf-sheet-in var(--duration-slow) var(--ease-out); }
.sf-sheet-grabber { flex: none; width: 36px; height: 4px; margin: 0 auto var(--space-3); border-radius: var(--radius-full); background: var(--text-quaternary); }
.sf-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.sf-sheet-head h2 { margin: 0; font: var(--type-title-m); }
.sf-sheet-head p { margin: 0; color: var(--text-secondary); font: var(--type-caption); }
.sf-sheet-body { min-height: 0; overflow: auto; margin: 0 calc(-1 * var(--space-2)); padding: var(--space-1) var(--space-2); }
@keyframes sf-sheet-in { from { transform: translateY(100%); } }
@keyframes sf-fade { from { opacity: 0; } }

/* Skeleton / Empty */
.sf-skeleton { border-radius: var(--radius-lg); background: var(--surface-strong); animation: sf-pulse 1.4s var(--ease-in-out) infinite; }
.sf-empty { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-12) var(--space-6); text-align: center; }
.sf-empty-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-full); background: var(--surface-strong); color: var(--text-secondary); margin-bottom: var(--space-2); }
.sf-empty h3 { margin: 0; font: var(--type-title-m); }
.sf-empty p { margin: 0; max-width: 340px; color: var(--text-secondary); font: var(--type-body); }

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

/* AmountButton — сумма «250 ₽ ✎» (таблетка) и пропуск «+ Сумма» (без фона, янтарный контур) */
.sf-amt-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1_5); min-height: var(--height-m); padding: 0 var(--space-2_5) 0 var(--space-3); border: 0; border-radius: var(--radius-full); background: var(--surface-extra-soft); color: var(--text-primary); font: var(--type-body-strong); font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; box-shadow: inset 0 0 0 var(--border-hairline) var(--border-base), var(--shadow-button-combined); transition: background-color var(--duration-fast) var(--ease-in-out), box-shadow var(--duration-fast) var(--ease-in-out); -webkit-tap-highlight-color: transparent; }
.sf-amt-btn .sf-icon { width: var(--size-icon-xs); height: var(--size-icon-xs); color: var(--text-tertiary); opacity: 1; }
.sf-amt-btn:hover { background: var(--surface-hover); }
.sf-amt-btn[aria-expanded="true"] { outline: none; box-shadow: inset 0 0 0 var(--border-width-2) var(--text-primary); }
.sf-amt-btn[data-missing] { padding: 0 12px 0 10px; background: transparent; box-shadow: inset 0 0 0 var(--border-width-1_5) color-mix(in srgb, var(--warning) 80%, transparent); color: var(--text-callout); font-weight: var(--weight-medium); }
.sf-amt-btn[data-missing]:hover { background: color-mix(in srgb, var(--warning) 8%, transparent); }
.sf-amt-btn[data-missing] .sf-icon { width: var(--size-icon-s); height: var(--size-icon-s); color: currentColor; }
.sf-amt-btn[data-missing][aria-expanded="true"] { box-shadow: inset 0 0 0 var(--border-width-2) var(--text-callout); }
:is([data-theme="contrast"], [data-mode="contrast"]) .sf-amt-btn:not([data-missing]) { box-shadow: inset 0 0 0 1px var(--text-secondary); }
:is([data-theme="contrast"], [data-mode="contrast"]) .sf-amt-btn[data-missing] { box-shadow: inset 0 0 0 var(--border-width-2) var(--text-callout); color: var(--text-callout); }
/* AmountSheet — шторка с цифрами (мобильный) */
.sf-amt-display { display: flex; flex-direction: column; align-items: center; margin: 0 0 var(--space-3); color: var(--text-primary); }
.sf-amt-display .expr { min-height: 20px; font: var(--type-body); font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.sf-amt-display .num { display: flex; align-items: baseline; gap: 6px; font: var(--type-hero); font-variant-numeric: tabular-nums; }
.sf-amt-display[data-empty] .v { color: var(--text-tertiary); }
.sf-amt-display .cur { font-size: 1.75rem; color: var(--text-secondary); }
.sf-amt-sugg { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin: 0 0 var(--space-4); }
.sf-amt-sugg > span { margin-right: 2px; font: var(--type-caption); color: var(--text-secondary); }
.sf-amt-sugg button { min-height: var(--height-s); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-full); background: var(--surface-extra-soft); color: var(--text-primary); font: var(--type-body-medium); font-variant-numeric: tabular-nums; cursor: pointer; box-shadow: inset 0 0 0 var(--border-hairline) var(--border-base), var(--shadow-button-combined); -webkit-tap-highlight-color: transparent; }
.sf-amt-sugg button:hover { background: var(--surface-hover); }
.sf-amt-sugg button[aria-pressed="true"] { background: var(--background-active); box-shadow: inset 0 0 0 1px var(--text-primary); }
.sf-keypad { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin-bottom: var(--space-4); }
.sf-keypad button[data-key="+"] { grid-column: 4; grid-row: 2 / span 3; height: auto; font-size: 1.75rem; color: var(--text-primary); }
.sf-keypad button { display: grid; place-items: center; height: var(--height-xl); border: 0; border-radius: var(--radius-xl); background: var(--surface-extra-soft); color: var(--text-primary); font: var(--type-numeric-m); cursor: pointer; box-shadow: inset 0 0 0 var(--border-hairline) var(--border-base), var(--shadow-button-combined); -webkit-tap-highlight-color: transparent; }
.sf-keypad button:active { background: var(--surface-hover); }
.sf-keypad button[data-key="del"] { background: transparent; box-shadow: none; }
.sf-keypad button[data-key="del"] .sf-icon { width: var(--size-icon-l); height: var(--size-icon-l); color: var(--text-primary); opacity: 1; }
.sf-sheet [data-amt-done] { width: 100%; }
/* AmountPopover — ввод суммы на десктопе */
.sf-amt-pop { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding: var(--space-2); }
.sf-amt-pop label { font: var(--type-caption-strong); color: var(--text-secondary); }
.sf-amt-pop .row { display: flex; gap: var(--space-2); min-width: 0; }
.sf-amt-pop .row .sf-input { flex: 1; min-width: 0; width: auto; }
.sf-amt-pop .sf-input input { width: 100%; text-align: right; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.sf-amt-pop .row .sf-btn { flex: none; }
.sf-amt-pop .sf-amt-sugg { justify-content: flex-start; margin: 0; }
.sf-amt-pop .sf-amt-sugg button { min-height: var(--height-s); padding: 0 var(--space-2_5); font: var(--type-caption-strong); }
.sf-amt-pop .sf-suffix { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ===== v3 — вход, пространства, настройки ===== */

/* PhoneInput — Input с неизменяемым «+7» и маской 900 000-00-00 */
.sf-input .sf-prefix { flex: none; color: var(--text-primary); font-weight: var(--weight-medium); }
.sf-input[data-kind="phone"] input { font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* CodeInput — одно настоящее поле поверх шести ячеек */
.sf-otp { position: relative; }
.sf-otp input { position: absolute; inset: 0; z-index: var(--z-raised); width: 100%; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: transparent; caret-color: transparent; font-size: 1rem; }
.sf-otp input:focus-visible { outline: 0; }
.sf-otp-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 12px repeat(3, minmax(0, 1fr)); gap: var(--space-2); align-items: center; }
.sf-otp-cell { display: grid; place-items: center; height: var(--height-xl); border-radius: var(--radius-xl); background: var(--field); outline: 1px solid var(--field-border); outline-offset: -1px; box-shadow: var(--shadow-field); color: var(--text-primary); font: var(--type-numeric-l); font-variant-numeric: tabular-nums; transition: outline-color var(--duration-fast) var(--ease-in-out), box-shadow var(--duration-fast) var(--ease-in-out); }
.sf-otp-dash { height: 2px; border-radius: var(--radius-full); background: var(--border-base); }
.sf-otp:focus-within .sf-otp-cell[data-active] { outline: var(--focus-width) solid var(--ring); outline-offset: -2px; box-shadow: 0 0 0 3px var(--ring-soft); }
.sf-otp:focus-within .sf-otp-cell[data-active]:empty::after { content: ""; width: 2px; height: 24px; background: var(--text-primary); animation: sf-caret 1s steps(1) infinite; }
@keyframes sf-caret { 50% { opacity: 0; } }
.sf-otp[data-state="error"] .sf-otp-cell { outline: 1px solid var(--negative); }
.sf-otp[data-state="ok"] .sf-otp-cell { outline: 1px solid var(--positive); }
.sf-otp[data-state="checking"] .sf-otp-cell, .sf-otp[data-state="locked"] .sf-otp-cell { color: var(--text-tertiary); }
.sf-otp[data-state="locked"] .sf-otp-cell { background: var(--surface-strong); outline-color: transparent; box-shadow: none; }
:is([data-theme="contrast"], [data-mode="contrast"]) .sf-otp[data-state="error"] .sf-otp-cell { outline-width: var(--border-width-2); outline-offset: -2px; }
.sf-otp-status { display: flex; align-items: center; gap: var(--space-1_5); min-height: 20px; margin-top: var(--space-2); font: var(--type-caption); color: var(--text-secondary); }
.sf-otp-status[data-tone="negative"] { color: var(--text-negative); }
.sf-otp-status[data-tone="positive"] { color: var(--text-positive); }
.sf-spinner { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: sf-spin .8s linear infinite; }
.sf-resend { margin-top: var(--space-3); font: var(--type-caption); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.sf-tg-inline { display: inline-block; width: 16px; height: 16px; margin: 0 var(--space-1) 0 2px; vertical-align: -3px; border-radius: 50%; }

/* ListRow — строка в списке-карточке: ведущий элемент, текст, действие */
.sf-list { margin: 0; padding: var(--space-1) 0; list-style: none; border-radius: var(--radius-3xl); background: var(--surface); box-shadow: inset 0 0 0 var(--border-hairline) var(--border-base), var(--shadow-soft); }
.sf-list > li + li { box-shadow: inset 0 var(--border-hairline) 0 var(--border-soft); }
.sf-list-row { box-sizing: border-box; display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--size-row); padding: var(--space-2) var(--space-4); border: 0; background: transparent; color: var(--text-primary); font: var(--type-body); text-align: left; text-decoration: none; }
button.sf-list-row, a.sf-list-row { cursor: pointer; }
button.sf-list-row:hover, a.sf-list-row:hover { background: var(--surface-hover); }
button.sf-list-row:focus-visible, a.sf-list-row:focus-visible { outline: none; background: var(--surface-active); }
.sf-list-text { display: grid; flex: 1; min-width: 0; }
.sf-list-title { font: var(--type-body-medium); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.sf-list-title em { margin-left: var(--space-1); font-style: normal; font-weight: var(--weight-regular); color: var(--text-secondary); }
.sf-list-meta { font: var(--type-caption); color: var(--text-secondary); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.sf-list-row > .sf-icon { color: var(--text-tertiary); }
.sf-list-row > .sf-btn { margin-right: calc(-1 * var(--space-2)); }
.sf-list-row > .sf-btn[data-icon-only] { color: var(--text-secondary); }
.sf-tile { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--surface-strong); color: var(--text-secondary); }
.sf-tile img { width: 36px; height: 36px; border-radius: 50%; }
.sf-list-head { margin: var(--space-6) var(--space-1) var(--space-2); font: var(--type-overline); letter-spacing: .24px; color: var(--text-secondary); }
.sf-list-head:first-child { margin-top: 0; }

/* InviteLink — одна ссылка-приглашение пространства */
.sf-invite { display: grid; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-3xl); background: var(--surface); box-shadow: inset 0 0 0 var(--border-hairline) var(--border-base), var(--shadow-soft); }
.sf-invite-row { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.sf-invite-url { display: flex; align-items: center; flex: 1; min-width: 0; height: var(--height-m); padding: 0 var(--space-3); border-radius: var(--radius-xl); background: var(--surface); box-shadow: inset 0 0 0 var(--border-hairline) var(--border-base); color: var(--text-primary); font: 550 0.8125rem/1.25rem var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-invite-url span { overflow: hidden; text-overflow: ellipsis; }
.sf-invite-meta { font: var(--type-caption); color: var(--text-secondary); }
.sf-invite-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sf-invite[data-empty] { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.sf-invite[data-empty] .sf-invite-meta { font-size: 0.9375rem; }

/* Alert с действиями — например, после исключения участника */
.sf-alert-actions { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }

/* BrandMark — временный знак и название (своего логотипа пока нет) */
.sf-brand { display: inline-flex; align-items: center; gap: var(--space-2_5); color: var(--text-primary); font: var(--type-body-strong); text-decoration: none; }
.sf-brand-mark { position: relative; flex: none; width: 24px; height: 24px; overflow: hidden; border-radius: calc(var(--radius-md) * .75); background: var(--blue-primary); }
.sf-brand-mark::after { content: ""; position: absolute; right: -5px; bottom: -5px; width: 14px; height: 14px; border-radius: 50%; background: var(--decor-secondary); }
.sf-brand[data-size="l"] { gap: var(--space-3); font: var(--type-title-m); }
.sf-brand[data-size="l"] .sf-brand-mark { width: 32px; height: 32px; border-radius: var(--radius-md); }
.sf-brand[data-size="l"] .sf-brand-mark::after { right: -6px; bottom: -6px; width: 18px; height: 18px; }

/* Sidebar — навигация desktop (от breakpoint-lg) */
.sf-sidebar { box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; width: var(--size-sidebar); height: 100%; padding: var(--space-5) var(--space-3); background: var(--background); box-shadow: inset calc(-1 * var(--border-hairline)) 0 0 var(--border-base); }
.sf-sidebar .sf-brand { padding: 0 var(--space-2) var(--space-6); }
.sf-sidebar nav { display: grid; gap: 2px; }
.sf-sidebar nav a { display: flex; align-items: center; gap: var(--space-2_5); height: var(--height-m); padding: 0 var(--space-2_5); border-radius: var(--radius-full); color: var(--nav-primary); font: var(--type-body); text-decoration: none; }
.sf-sidebar nav a .sf-icon { color: var(--nav-secondary); }
.sf-sidebar nav a:hover { background: var(--surface-hover); }
.sf-sidebar nav a[aria-current="page"] { background: var(--nav-active); color: var(--nav-active-text); font-weight: var(--weight-medium); }
.sf-sidebar nav a[aria-current="page"] .sf-icon { color: var(--nav-active-text); }
.sf-sidebar-foot { display: flex; align-items: center; gap: var(--space-2_5); margin-top: auto; padding: var(--space-2); font: var(--type-caption-strong); }

/* TabBar — нижнее меню на мобильном (до breakpoint-sm): парящая капсула над контентом, 4 вкладки, заливные иконки; «Ещё» открывает Sheet; только экраны верхнего уровня */
.sf-tabbar { position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); z-index: var(--z-nav); transform: translateX(-50%); box-sizing: border-box; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: calc(100% - 40px); max-width: 350px; height: var(--size-tabbar); padding: var(--space-1); border-radius: var(--radius-full); background: linear-gradient(180deg, var(--glass-highlight), transparent 55%), var(--glass-fill); -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(1.9); backdrop-filter: blur(var(--blur-glass)) saturate(1.9); box-shadow: inset 0 1px 0.5px var(--glass-rim), inset 0 0 0 0.5px var(--glass-highlight), 0 0 0 0.5px var(--glass-edge), 0 12px 30px -10px var(--glass-shadow), 0 2px 6px var(--shadow-color-soft); }

.sf-tabbar a { display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 0; height: var(--size-tab); border-radius: var(--radius-full); color: var(--nav-secondary); font: var(--type-tab-label); text-decoration: none; white-space: nowrap; transition: background-color var(--duration-fast) var(--ease-in-out), transform var(--duration-spring) var(--ease-spring); -webkit-tap-highlight-color: transparent; }

.sf-tabbar a .sf-icon { width: var(--size-icon-l); height: var(--size-icon-l); fill: currentColor; stroke: none; }

.sf-tabbar a[aria-current="page"] { background: var(--glass-lens); box-shadow: inset 0 1px 0.5px var(--glass-rim), inset 0 0 0 0.5px var(--glass-highlight); color: var(--nav-active-text); font-weight: var(--weight-semibold); }

.sf-tabbar a[aria-current="page"]:active { transform: scale(1.06, 1.1); }

.sf-tabbar a:focus-visible { outline: var(--focus-width) solid var(--ring); outline-offset: -2px; background: var(--glass-focus); }

.sf-tabbar a[aria-current="page"]:focus-visible { background: var(--glass-lens); }

@media (prefers-reduced-transparency: reduce) { .sf-tabbar { background: var(--background-modal); -webkit-backdrop-filter: none; backdrop-filter: none; } }

@media (prefers-reduced-motion: reduce) { .sf-tabbar a { transition: none; } .sf-tabbar a[aria-current="page"]:active { transform: none; } }

/* Отступ под парящим меню: последний элемент докручивается выше капсулы */
.sf-tabbar-pad { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }

:is([data-theme="contrast"], [data-mode="contrast"]) .sf-tabbar { background: var(--background-modal); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px var(--border-base), 0 10px 28px -8px var(--shadow-color-strong); }

/* StatusScreen — состояние на весь экран: иконка, заголовок, одна строка, одно действие */
.sf-state { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-12) var(--space-6); text-align: center; }
.sf-state-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--space-2); border-radius: var(--radius-full); background: var(--surface-strong); color: var(--text-secondary); }
.sf-state-icon .sf-icon { width: var(--size-icon-l); height: var(--size-icon-l); }
.sf-state-icon[data-tone="positive"] { background: var(--bg-positive-soft); color: var(--text-positive); }
.sf-state-icon[data-tone="callout"] { background: var(--bg-callout-soft); color: var(--text-callout); }
.sf-state-icon[data-tone="negative"] { background: var(--bg-negative-soft); color: var(--text-negative); }
.sf-state h2 { margin: 0; font: var(--type-title-m); }
.sf-state p { margin: 0; max-width: 320px; color: var(--text-secondary); font: var(--type-body); }
.sf-state .sf-btn { margin-top: var(--space-4); }

/* TelegramNotice — иллюстрация уведомления с кодом на компьютере */
.sf-tg-notice { box-sizing: border-box; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-2_5); width: 320px; padding: var(--space-3); border-radius: var(--radius-2xl); background: var(--background-modal); box-shadow: inset 0 0 0 var(--border-hairline) var(--border-base), var(--shadow-strong); color: var(--text-secondary); font: var(--type-caption); }
.sf-tg-notice img { width: 36px; height: 36px; border-radius: 50%; }
.sf-tg-notice-top { display: flex; justify-content: space-between; gap: var(--space-2); }
.sf-tg-notice-top b { overflow: hidden; color: var(--text-primary); font-weight: var(--weight-semibold); text-overflow: ellipsis; white-space: nowrap; }
.sf-tg-notice-top span { color: var(--text-secondary); white-space: nowrap; }
.sf-tg-notice .sf-money { color: var(--text-primary); font-weight: var(--weight-semibold); letter-spacing: .04em; }

/* Касание: на телефоне (pointer: coarse) и в макетах телефона ([data-touch]) одиночные действия — height-l (44),
   компактные контролы в группах — height-s-touch (32). XS-чип только для чтения и не растёт */
@media (pointer: coarse) {
  .sf-amt-btn { min-height: var(--height-l); }
  .sf-segmented button, .sf-amt-sugg button, .sf-chip:not([data-size="xs"]), .sf-select[data-size="s"] { min-height: var(--height-s-touch); }
}
[data-touch] .sf-amt-btn { min-height: var(--height-l); }
[data-touch] .sf-segmented button, [data-touch] .sf-amt-sugg button, [data-touch] .sf-chip:not([data-size="xs"]), [data-touch] .sf-select[data-size="s"] { min-height: var(--height-s-touch); }

/* Фокус с клавиатуры (:focus-visible; мышь и палец его не вызывают).
   Кольцо ring 2px (4.6:1 / 7.6:1 к фону): сегменты, Select, ссылки и прочие элементы без своего вида фокуса — с отступом 2px;
   вкладки меню — внутри; поля ввода — ring внутри + ореол ring-soft; опции списка — подсветка option-highlight + контур text-tertiary.
   Кнопки, чипы, сумма, быстрые суммы, клавиши, строки списков и Switch (Web) — без кольца, «усиленное наведение»: тот же приём, что при hover,
   вдвое заметнее (background-button-focus вместо background-button-hover, surface-active вместо surface-hover, у чипа — контур {семейство}-strong).
   В forced-colors у всех — системное кольцо Highlight (см. ниже). */
.sf-segmented button:focus-visible, .sf-select:focus-visible { outline: var(--focus-width) solid var(--ring); outline-offset: 2px; }
.sf-btn:focus-visible { outline: none; background-image: linear-gradient(var(--background-button-focus), var(--background-button-focus)); }
.sf-btn[data-variant="secondary"]:focus-visible, .sf-btn[data-variant="ghost"]:focus-visible { background-image: none; background-color: var(--surface-active); }
.sf-btn[data-variant="destructive"]:focus-visible { background-image: linear-gradient(var(--bg-negative-soft), var(--bg-negative-soft)); }
.sf-btn[data-variant="link"]:focus-visible { background-image: none; text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.sf-chip:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--f-strong, var(--text-secondary)); }
.sf-amt-btn:focus-visible { outline: none; background: var(--surface-active); }
.sf-amt-btn[data-missing]:focus-visible { background: color-mix(in srgb, var(--warning) 16%, transparent); }
.sf-amt-sugg button:focus-visible { outline: none; background: var(--surface-active); }
.sf-keypad button:focus-visible { outline: none; background-image: linear-gradient(var(--surface-active), var(--surface-active)); }
/* Switch — только для Web (в нативных iOS/Android — системный переключатель): наведение и фокус меняют тон трека, бегунок не меняется */
.sf-switch:focus-visible { outline: none; box-shadow: inset 0 0 0 12px var(--surface-active); }
.sf-switch[aria-checked="true"]:focus-visible { box-shadow: inset 0 0 0 12px var(--background-button-focus); }
@media (hover: hover) {
  .sf-switch:hover { box-shadow: inset 0 0 0 12px var(--surface-hover); }
  .sf-switch[aria-checked="true"]:hover { box-shadow: inset 0 0 0 12px var(--background-button-hover); }
}

/* Windows High Contrast / forced-colors: фон и тени сбрасываются, поэтому фокус, границы и состояния рисуем системными цветами */
@media (forced-colors: active) {
  :focus-visible { outline: var(--border-width-2) solid Highlight !important; }
  .sf-btn, .sf-amt-btn, .sf-chip, .sf-select, .sf-segmented button, .sf-keypad button, .sf-amt-sugg button { border: 1px solid ButtonText; }
  .sf-btn[data-variant="ghost"] { border-color: transparent; }
  .sf-btn[data-variant="link"] { border: 0; }
  .sf-chip[aria-pressed="true"], .sf-chip[aria-expanded="true"], .sf-segmented button[aria-pressed="true"], .sf-segmented button[aria-selected="true"], .sf-amt-sugg button[aria-pressed="true"], .sf-amt-btn[aria-expanded="true"] { border: var(--border-width-2) solid Highlight; }
  .sf-option[data-highlighted] { outline: var(--border-width-2) solid Highlight; outline-offset: -2px; }
  .sf-option[aria-selected="true"] .sf-check { color: Highlight; }
  .sf-tabbar a[aria-current="page"], .sf-sidebar nav a[aria-current="page"] { outline: 1px solid CanvasText; outline-offset: -1px; }
  .sf-switch, .sf-switch::after { forced-color-adjust: none; }
  .sf-switch { background: Canvas; border: 1px solid ButtonText; }
  .sf-switch::after { top: 1px; left: 1px; background: ButtonText; box-shadow: none; }
  .sf-switch[aria-checked="true"] { background: Highlight; border-color: Highlight; }
  .sf-switch[aria-checked="true"]::after { background: HighlightText; }
  .sf-pin, .sf-dot, .sf-emoji[data-fallback]::before { forced-color-adjust: none; border: 1px solid CanvasText; }
  .sf-tabbar { background: Canvas; border: 1px solid CanvasText; }
  .sf-alert { border: 1px solid CanvasText; }
  .sf-btn[data-loading] { forced-color-adjust: none; color: transparent !important; background: ButtonFace; box-shadow: none; }
  .sf-btn[data-loading]::after { border-color: ButtonText; border-right-color: transparent; }
}