/* Uzum Design System v2 — HTML-компоненты для iOS-прототипа.
   Все цвета — токены из tokens.css (--c-*, --g-*), размеры — из спецификаций в specs/*.md.
   Блюр: Figma background blur R ≈ CSS blur(R/2), поэтому Blur m [56] = var(--blur-m) = blur(28px). */

.uz { font-family: var(--font-ui); color: var(--c-text-primary); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
:where(.uz) *, :where(.uz) *::before, :where(.uz) *::after { box-sizing: border-box; }
:where(.uz) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
:where(.uz) input { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; outline: none; min-width: 0; }
.uz :focus-visible { outline: 2px solid var(--c-graphic-accent); outline-offset: 2px; }
.uz input:focus-visible, .uz textarea:focus-visible { outline: none; }

/* Текстовые утилиты по стилям Core */
.uz .ts-title-2 { font: 600 28px/30px var(--font-ui); letter-spacing: -0.02em; }
.uz .ts-title-3 { font: 600 20px/24px var(--font-ui); letter-spacing: -0.01em; }
.uz .ts-body-l { font: 500 20px/24px var(--font-ui); letter-spacing: -0.01em; }
.uz .ts-body-m { font: 500 16px/20px var(--font-ui); letter-spacing: -0.01em; }
.uz .ts-body-m-bold { font: 600 16px/20px var(--font-ui); letter-spacing: -0.01em; }
.uz .ts-body-s { font: 500 14px/18px var(--font-ui); letter-spacing: 0; }
.uz .ts-caption { font: 500 12px/15px var(--font-ui); }
.uz .ts-caption-bold { font: 600 12px/15px var(--font-ui); }
.uz .ts-button { font: 600 16px/20px var(--font-ui); letter-spacing: -0.01em; }

/* Затухание текста вместо многоточия (List-Item, кнопки, навбар) */
.u-fade { display: block; white-space: nowrap; overflow: hidden; min-width: 0; }
.u-fade.is-over { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--fade, 24px)), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - var(--fade, 24px)), transparent); }

/* Иконка: inline SVG c currentColor или маска с градиентной заливкой */
.u-ic { display: inline-flex; flex: none; width: 24px; height: 24px; align-items: center; justify-content: center; }
.u-ic > svg { width: 100%; height: 100%; display: block; }
.u-ic--paint { background: var(--paint); -webkit-mask: var(--mask) center / contain no-repeat; mask: var(--mask) center / contain no-repeat; }
.u-img { display: block; flex: none; }

/* ---------- Экран и системные элементы ---------- */
/* filter: opacity(1) — экран становится «корнем подложки» (Backdrop Root): размытие виджетов, навбара и таббара берёт только то, что внутри экрана.
   Без этого у нижнего края браузер подмешивает в размытие то, что за телефоном (белая страница), и снизу появляется светлый градиент. */
/* --uz-screen-h — высота экрана в нативном режиме (products/_app/app.js → fit): экран «резиновый» по видимой высоте телефона; в просмотрщике — 812 */
.u-screen { position: relative; width: 375px; height: var(--uz-screen-h, 812px); overflow: hidden; background: var(--c-surface-main); isolation: isolate; filter: opacity(1); }
.u-screen__scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; overscroll-behavior: contain; }
.u-screen__scroll::-webkit-scrollbar { display: none; }

.u-statusbar { height: 44px; width: 375px; flex: none; color: var(--c-graphic-primary); }
.u-statusbar > i { display: block; height: 100%; background: currentColor; -webkit-mask: var(--sb) 0 0 / 375px 44px no-repeat; mask: var(--sb) 0 0 / 375px 44px no-repeat; }
.u-statusbar--light { color: var(--c-graphic-inverse-static-primary); }

.u-home { height: 34px; flex: none; display: flex; justify-content: center; padding-top: 21px; }
.u-home > i { width: 134px; height: 5px; border-radius: 100px; background: var(--c-graphic-primary); }
.u-home--light > i { background: var(--c-graphic-inverse-static-primary); }

/* ---------- Кнопки ---------- */
.u-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; padding: 0 20px; border-radius: 20px; overflow: hidden;
  font: 600 16px/20px var(--font-ui); letter-spacing: -0.01em; -webkit-backdrop-filter: var(--blur-m); backdrop-filter: var(--blur-m);
  transition: background-color .15s ease, transform .1s ease; user-select: none; }
.u-btn__label { padding: 2px 6px; min-width: 0; --fade: 16px; }
.u-btn--primary { background: var(--c-actions-primary); color: var(--c-text-inverse-static-primary); }
.u-btn:not(:disabled):active, .u-btn.is-pressed { transform: scale(.97); }
.u-btn--primary:disabled { background: var(--c-actions-primary-disabled); color: var(--c-actions-on-primary-disabled); cursor: default; }
.u-btn--secondary { background: var(--c-actions-tertiary-white); color: var(--c-text-primary); }
.u-btn--secondary.is-grey { background: var(--c-actions-tertiary-grey); }
.u-btn--secondary:disabled { color: var(--c-text-disabled); cursor: default; }
.u-btn--transparent { background: var(--c-actions-transparent); color: var(--c-text-inverse-static-primary); }
.u-btn--transparent:disabled { color: var(--c-text-inverse-disabled); cursor: default; }
.u-btn.is-loading { pointer-events: none; }

/* Лоадер из трёх точек (new-loader) */
.u-loader { display: inline-flex; flex: none; }
.u-loader svg { width: 100%; height: 100%; display: block; overflow: visible; }
.u-loader path { animation: u-dots 900ms ease-in-out infinite; }
.u-loader path:nth-of-type(2) { animation-delay: 150ms; }
.u-loader path:nth-of-type(3) { animation-delay: 300ms; }
/* Экран статуса: ожидание в 2 раза медленнее, чем в кнопках */
.u-loader.is-slow path { animation-duration: 1800ms; }
.u-loader.is-slow path:nth-of-type(2) { animation-delay: 300ms; }
.u-loader.is-slow path:nth-of-type(3) { animation-delay: 600ms; }
@keyframes u-dots { 0%, 100% { opacity: .24; } 40% { opacity: 1; } }

.u-btn-small { display: inline-flex; align-items: center; height: 36px; padding: 8px 10px; border-radius: 20px; font: 500 14px/18px var(--font-ui);
  transition: background-color .15s ease, transform .1s ease; white-space: nowrap; user-select: none; }
.u-btn-small > span:not(.u-ic) { padding: 0 4px; } /* иконка — тоже span: пад текста на неё не распространяется (Figma: иконка 20×20 вплотную) */
.u-btn-small .u-ic { width: 20px; height: 20px; }
.u-btn-small--secondary .u-ic { color: var(--c-graphic-secondary); }
.u-btn-small--transparent .u-ic { color: var(--c-graphic-inverse-static-secondary); }
.u-btn-small.is-sk, .u-chip.is-sk { cursor: default; }
.u-btn-small:not(:disabled):active, .u-btn-small.is-pressed { transform: scale(.89); }
.u-btn-small--primary { background: var(--c-actions-secondary); color: var(--c-actions-on-secondary); }
.u-btn-small--primary:disabled { color: var(--c-actions-on-secondary-disabled); }
.u-btn-small--secondary { background: var(--c-actions-tertiary-white); color: var(--c-text-primary); -webkit-backdrop-filter: var(--blur-m); backdrop-filter: var(--blur-m); }
.u-btn-small--secondary.is-grey { background: var(--c-actions-tertiary-grey); }
.u-btn-small--secondary:disabled { color: var(--c-text-disabled); }
.u-btn-small--transparent { background: var(--c-actions-transparent); color: var(--c-text-inverse-static-primary); -webkit-backdrop-filter: var(--blur-m); backdrop-filter: var(--blur-m); }
.u-btn-small--transparent:disabled { color: var(--c-text-inverse-disabled); }
.u-btn-small.is-loading { width: 111px; justify-content: center; pointer-events: none; }
.u-btn-small:disabled { cursor: default; }

.u-btn-text { font: 600 16px/20px var(--font-ui); letter-spacing: -0.01em; color: var(--c-text-link); }
.u-btn-text:active { opacity: .7; }

.u-circle { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; width: 110px; max-width: 110px; }
.u-circle__btn { width: 56px; height: 56px; display: grid; place-items: center; }
.u-circle__btn > i { width: 56px; height: 56px; border-radius: 100px; display: grid; place-items: center; transition: transform .1s ease;
  -webkit-backdrop-filter: var(--blur-m); backdrop-filter: var(--blur-m); background: var(--g-button); }
.u-circle--white .u-circle__btn > i { background: var(--c-actions-tertiary-white); }
.u-circle--shadow .u-circle__btn > i { background: var(--c-actions-tertiary-white); box-shadow: 0 6px 32px rgb(0 0 0 / .08); }
.u-circle:active .u-circle__btn > i, .u-circle.is-pressed .u-circle__btn > i { transform: scale(.893); }
.u-circle__label { font: 600 12px/15px var(--font-ui); color: var(--c-text-primary); text-align: center; width: 100%;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.u-circle.is-disabled .u-circle__label { color: var(--c-text-disabled); }
.u-circle.is-bare { width: 56px; }
.u-circle--m { width: 44px; }
.u-circle--m .u-circle__btn, .u-circle--m .u-circle__btn > i { width: 44px; height: 44px; }
.u-circle--m .u-ic { width: 20px; height: 20px; }
.u-circle--m:active .u-circle__btn > i { transform: scale(.864); }
.u-circle-stack { display: flex; justify-content: center; gap: 8px; padding: 0 8px 40px; }
.u-circle-stack > .u-circle { flex: 1; }

/* Стек кнопок внизу экрана */
.u-stack { position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; flex-direction: column; padding-top: 24px;
  background: linear-gradient(180deg, var(--stack-bg-0, var(--c-surface-main-alpha-fade)) 0, var(--stack-bg, var(--c-surface-main)) 56px); }
.u-stack--modal { --stack-bg: var(--c-surface-bottom-sheet); --stack-bg-0: rgb(from var(--c-surface-bottom-sheet) r g b / 0); }
.u-stack--none { background: none; padding-top: 0; }
/* Static (в шторке, внизу формы): как Large button stack в Figma — стек начинается сразу с кнопки, градиент «fade» — слой нулевой высоты, уходящий вверх поверх контента */
.u-stack--static { position: relative; padding-top: 0; background: var(--stack-bg, var(--c-surface-main)); }
.u-stack--static::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 24px; pointer-events: none;
  background: linear-gradient(180deg, var(--stack-bg-0, var(--c-surface-main-alpha-fade)), var(--stack-bg, var(--c-surface-main))); }
.u-stack--static.u-stack--none { background: none; }
.u-stack--static.u-stack--none::before { display: none; }
.u-stack__item { padding: 0 16px 16px; }
.u-stack__help { padding: 0 28px 8px; text-align: center; font: 500 12px/15px var(--font-ui); color: var(--c-text-secondary); }

/* ---------- Навигация ---------- */
.u-nav { position: absolute; left: 0; right: 0; top: 0; z-index: 30; display: flex; flex-direction: column; color: var(--c-text-primary); pointer-events: none; }
.u-nav > * { pointer-events: auto; }
.u-nav__bg { position: absolute; inset: 0; background: var(--c-surface-navigation-transp); -webkit-backdrop-filter: var(--blur-m); backdrop-filter: var(--blur-m);
  border-bottom: .5px solid var(--c-border-border-subtle); opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.u-nav.is-scrolled .u-nav__bg { opacity: 1; }
/* Как в Navigation stack: Leading 28 (20…48) → Title content 48…327 (внутренний отступ 4+4) → 4 → Right element 331…363 (пад справа 8) → 12 */
.u-nav__bar { position: relative; height: 48px; display: flex; align-items: center; gap: 0; padding: 0 12px; }
/* Маленький заголовок всегда по центру навбара: боковые слоты растут поровну (основа 0) и оба не уже большего из них
   (--nav-side ставит NavBar) — заголовок не сдвигается, длинный гаснет у краёв */
.u-nav__side { flex: 1 1 0; min-width: var(--nav-side, max-content); height: 48px; display: flex; align-items: center; padding: 0 8px; }
.u-nav__side.is-right { justify-content: flex-end; }
.u-nav__side .u-nav__right { padding-right: 0; }
.u-nav__lead { width: 28px; height: 48px; display: flex; align-items: center; padding-right: 4px; flex: none; }
.u-nav__lead .u-ic { color: var(--c-graphic-primary); }
.u-nav__title { flex: 0 1 auto; min-width: 0; display: flex; justify-content: center; padding: 0 8px; font: 600 16px/20px var(--font-ui); letter-spacing: -0.01em;
  opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; --fade: 36px; }
/* Маленький заголовок (или табы) в навбаре виден только в свёрнутом состоянии; фон с блюром — отдельно, при прокрутке */
.u-nav.is-small .u-nav__title { opacity: 1; transform: none; }
.u-nav:not(.is-small) .u-nav__title { pointer-events: none; }
.u-nav__right { display: flex; align-items: center; gap: 16px; padding-right: 8px; height: 32px; flex: none; min-width: 32px; justify-content: flex-end; }
.u-nav__right .u-ic { color: var(--c-graphic-primary); position: relative; }
.u-nav__gap { position: relative; height: 12px; }
.u-nav--light { color: var(--c-text-inverse-static-primary); }
.u-nav--light .u-nav__lead .u-ic, .u-nav--light .u-nav__right .u-ic { color: var(--c-graphic-inverse-static-primary); }
.u-nav--light .u-nav__bg { background: var(--c-surface-navigation-transp-inverse); border-color: var(--c-border-border-subtle-inverse); }
.u-notice { position: absolute; top: 0; right: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--c-graphic-error); }

/* Большой заголовок (часть прокручиваемого контента под навбаром) */
.u-large-title { display: flex; flex-direction: column; gap: 12px; padding: 0 24px 24px; }
.u-large-title h1 { margin: 0; font: 600 28px/30px var(--font-ui); letter-spacing: -0.02em; color: var(--c-text-primary); }
.u-large-title p { margin: 0; font: 500 16px/20px var(--font-ui); letter-spacing: -0.01em; color: var(--c-text-secondary); }
.u-large-title--light h1 { color: var(--c-text-inverse-static-primary); }
.u-large-title--light p { color: var(--c-text-inverse-static-secondary); }

/* Таббар */
.u-tabbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 30; height: 90px; display: flex; flex-direction: column;
  background: var(--c-surface-navigation-transp); -webkit-backdrop-filter: var(--blur-m); backdrop-filter: var(--blur-m); box-shadow: inset 0 .5px 0 var(--c-border-border-subtle); }
.u-tabbar__tabs { position: relative; height: 56px; display: flex; }
.u-tab { flex: 1; min-width: 64px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; color: var(--c-text-secondary);
  font: 600 9px/12px var(--font-ui); text-align: center; }
.u-tab.is-on { color: var(--c-text-primary); }
.u-tab__ic { position: relative; width: 24px; height: 24px; display: grid; place-items: center; }
.u-tab__ic img { width: 24px; height: 24px; transition: transform .1s ease; }
.u-tab:active .u-tab__ic img { transform: scale(.833); }
.u-tab__gap { width: 75px; flex: none; }
.u-tab__center { position: absolute; left: calc(50% - 31px); top: -10px; width: 62px; height: 62px; display: grid; place-items: center; }
.u-tab__center > i { width: 62px; height: 62px; border-radius: 100px; display: grid; place-items: center; transition: transform .1s ease;
  background: radial-gradient(120% 120% at 25% 15%, var(--c-actions-gradient-button-accent-start), var(--c-actions-gradient-button-accent-end)); }
.u-tab__center:active > i { transform: scale(.903); }
.uz .u-dark-only { display: none; }
.uz[data-uz-theme="dark"] .u-dark-only, [data-proto-theme="dark"] .uz:not([data-uz-theme]) .u-dark-only { display: block; }
.uz[data-uz-theme="dark"] .u-light-only, [data-proto-theme="dark"] .uz:not([data-uz-theme]) .u-light-only { display: none; }

/* ---------- Заголовки и текст ---------- */
.u-h1 { display: flex; align-items: flex-start; gap: 0; padding: 32px 24px 24px; }
.u-h1.is-compact { padding-bottom: 16px; }
.u-h1.no-top { padding-top: 0; }
.u-h1.is-center { text-align: center; }
.u-h1__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.u-h1 h2 { margin: 0; font: 600 28px/30px var(--font-ui); letter-spacing: -0.02em; }
.u-h1 p, .u-h2 p { margin: 0; font: 500 16px/20px var(--font-ui); letter-spacing: -0.01em; color: var(--c-text-secondary); }
.u-h2 { display: flex; align-items: flex-start; gap: 0; padding: 32px 24px 12px; }
.u-h2--widget { padding: 24px 16px 12px; }
.u-h2.is-default { padding-bottom: 24px; }
.u-h2.no-top { padding-top: 0; }
.u-h2__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.u-h2 h3 { margin: 0; font: 600 20px/24px var(--font-ui); letter-spacing: -0.01em; }
.u-h2__right { padding-left: 0; color: var(--c-graphic-primary); }
.u-h2__right.is-text { font: 500 14px/18px var(--font-ui); color: var(--c-text-secondary); padding-top: 4px; }

.u-par { padding: 0 24px 16px; font: 500 16px/20px var(--font-ui); letter-spacing: -0.01em; color: var(--c-text-primary); }
.u-par.is-compact { padding-left: 16px; padding-right: 16px; }
.u-par__clamp { position: relative; }
.u-par__clamp.is-clamped > span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Градиент под «Ещё» = фон места: --par-base (непрозрачная поверхность: экран / шторка) + --par-tint (заливка контейнера поверх неё: виджет,
   в тёмной теме полупрозрачная). Переменные наследуются от контейнера — Screen, BottomSheet, Widget задают их сами. */
.u-par__more { position: absolute; right: 0; bottom: 0; padding-left: 44px;
  background: linear-gradient(90deg, rgb(from var(--par-tint, transparent) r g b / 0), var(--par-tint, transparent) 40px), linear-gradient(90deg, rgb(from var(--par-base, var(--c-surface-main)) r g b / 0), var(--par-base, var(--c-surface-main)) 40px); }
.u-screen { --par-base: var(--c-surface-main); --par-tint: transparent; }
.u-sheet { --par-base: var(--c-surface-bottom-sheet); --par-tint: transparent; }
.u-widget { --par-tint: var(--c-container-white); }

.u-divider { height: 1px; margin: 8px 0; background: repeating-linear-gradient(90deg, #919396 0 1px, transparent 1px 5.1px); }
.u-divider--short { margin-inline: 16px; }

.u-counter { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; flex: none; }
.u-counter > span { height: 21px; min-width: 21px; padding: 0 6px; border-radius: 40px; background: var(--c-graphic-error); color: var(--c-text-inverse-static-primary);
  font: 500 12px/15px var(--font-ui); display: flex; align-items: center; justify-content: center; }

.u-hint { position: relative; width: 24px; height: 24px; display: inline-grid; place-items: center; flex: none; }
.u-hint::before { content: ""; position: absolute; left: 1.5px; top: 1.5px; width: 21px; height: 21px; border-radius: 50%; background: var(--c-actions-tertiary-white-pressed); }
.u-hint--white::before { background: var(--c-actions-tertiary-white); }
.u-hint > .u-ic { position: relative; }

/* ---------- Виджет и ячейки ---------- */
/* Виджет: отступ 4 сверху/снизу появляется только там, где край виджета граничит с ячейкой.
   Заголовок, кнопки, ошибки, пустые состояния — без этого отступа. */
.u-widget { margin: 0 16px; border-radius: 20px; overflow: hidden; background: var(--c-container-white); -webkit-backdrop-filter: var(--blur-m); backdrop-filter: var(--blur-m); padding: 0; }
.u-widget:not(.no-pt) > .u-li:first-child { margin-top: 4px; }
.u-widget:not(.no-pb) > .u-li:last-child { margin-bottom: 4px; }
.u-widget + .u-widget { margin-top: 8px; }
/* Padding Top / Bottom = true явно: отступ 4 при любом первом / последнем элементе */
.u-widget.pt-on { padding-top: 4px; }
.u-widget.pt-on > .u-li:first-child { margin-top: 0; }
.u-widget.pb-on { padding-bottom: 4px; }
.u-widget.pb-on > .u-li:last-child { margin-bottom: 0; }

/* Высота ячейки — от содержимого, как в Figma (List-Item hug): заголовок 24, подзаголовок 24, левый слот 48 (иконка в контейнере, карта, продукт, флаг) или 28 (иконка без контейнера), паддинги 10.
   Итого: только заголовок — 44; иконка без контейнера + заголовок — 48; иконка в контейнере или заголовок с подзаголовком — 68. */
.u-li { position: relative; display: flex; align-items: flex-start; gap: 16px; padding: 10px 24px; width: 100%; text-align: left; color: var(--c-text-primary); }
.u-li.is-compact { padding-inline: 16px; }
.u-li.is-tappable { cursor: pointer; user-select: none; }
/* Тап по ячейке — как по кнопке: уменьшается содержимое. transform не меняет раскладку, поэтому высота ячейки и соседи остаются на месте. */
.u-li.is-tappable { transition: transform .12s ease; }
.u-li.is-tappable:active, .u-li.is-pressed { transform: scale(.97); }
.u-li__lead { flex: none; padding: 2px 0; }
/* Картинка в левом слоте — блочная и без строчного «хвоста»: иначе в Safari арт карты (img с display:inline-flex)
   садится на базовую линию, слот становится выше 48px и арт уезжает вверх */
.u-li__lead { line-height: 0; }
.u-li__lead img, .u-li__lead .u-ic { display: block; }
.u-li__lead.is-card { padding: 4px 0; }
.u-li__lead.is-bare { padding: 2px 0; }
.u-li__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; align-self: stretch; }
.u-li__core { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.u-li__title { padding: 2px 0; font: 500 16px/20px var(--font-ui); letter-spacing: -0.01em; color: var(--c-text-primary); }
.u-li__sub { padding: 3px 0; font: 500 14px/18px var(--font-ui); color: var(--c-text-secondary); }
.u-li__title.is-multi, .u-li__sub.is-multi { white-space: normal; }
/* Multiline у значений: колонка значений ужимается до 45% ширины, текст переносится и выравнивается вправо */
.u-li.has-multi-values .u-li__values { flex: 0 1 auto; max-width: 45%; min-width: 0; }
.u-li__value.is-multi, .u-li__subvalue.is-multi { white-space: normal; text-align: right; justify-content: flex-end; align-items: flex-start; }
.u-li__value.is-multi .u-ic { margin-top: 2px; flex: none; }
.u-li__subvalue.is-multi .u-ic { margin-top: 1px; flex: none; }
.u-li__values { flex: none; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; }
.u-li__value { display: flex; align-items: center; gap: 6px; padding: 2px 0; font: 500 16px/20px var(--font-ui); letter-spacing: -0.01em; color: var(--c-text-primary); white-space: nowrap; }
.u-li__subvalue { display: flex; align-items: center; gap: 6px; padding: 3px 0; font: 500 14px/18px var(--font-ui); color: var(--c-text-secondary); white-space: nowrap; }
.u-li__value .u-ic, .u-li__subvalue .u-ic { width: 16px; height: 16px; color: var(--c-graphic-primary); }
.u-li__value.is-positive { color: var(--c-text-success); }
.u-li__trail { flex: none; display: flex; align-items: center; min-height: 24px; color: var(--c-graphic-secondary); }
.u-psel__card .u-li__trail { height: 48px; }
.u-li.is-reversed .u-li__core, .u-li.is-reversed .u-li__values { flex-direction: column-reverse; }
.u-li.is-disabled { cursor: default; }
.u-li.is-disabled::after { display: none; }
.u-li.is-disabled .u-li__lead { opacity: .5; }
.u-li.is-disabled .u-li__title, .u-li.is-disabled .u-li__sub, .u-li.is-disabled .u-li__value, .u-li.is-disabled .u-li__subvalue { color: var(--c-text-disabled); }
.u-li.is-disabled .u-li__trail { color: var(--c-graphic-disabled); }
.u-li.is-error .u-li__title, .u-li.is-error .u-li__sub, .u-li.is-error .u-li__value, .u-li.is-error .u-li__subvalue { color: var(--c-text-error); }
.u-li.is-shimmer { align-items: center; }

.u-tile { position: relative; width: 44px; height: 44px; border-radius: 12px; background: var(--c-container-grey); display: grid; place-items: center; transition: background-color .12s ease; }
.u-tile--flag, .u-tile--image { overflow: hidden; background: var(--c-container-accent); }
.u-tile--flag::after, .u-tile--image::after { content: ""; position: absolute; inset: 0; border-radius: 12px; background: var(--c-container-container-fade); }
.u-tile img { width: 100%; height: 100%; object-fit: cover; }
.u-tile__badge { position: absolute; left: 30px; top: 26px; }
.u-card-art { width: 56px; height: 40px; border-radius: 5px; display: block; }
.u-card-add { width: 56px; height: 40px; border-radius: 5px; background: var(--c-container-grey); display: grid; place-items: center; color: var(--c-graphic-primary); }
/* на серой карточке (контекст боттомшита) плитка «добавить» белая, иначе она сливается с фоном */
.u-psel.is-grey .u-card-add { background: var(--c-container-white); }

/* Прогресс-кольцо вокруг плитки */
.u-ring { position: absolute; left: -5px; top: -5px; width: 54px; height: 54px; pointer-events: none; }
.u-ring path { fill: none; stroke-width: 2; }

/* Контролы */
.u-switch { position: relative; width: 44px; height: 28px; flex: none; display: inline-block; }
.u-switch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; z-index: 1; }
.u-switch__track { position: absolute; left: 0; top: 2px; width: 44px; height: 24px; border-radius: 100px; background: var(--c-actions-controll-off); transition: background-color .2s ease; }
.u-switch__thumb { position: absolute; left: 2px; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--c-actions-on-controll-off);
  box-shadow: 0 .94px 16px -3.78px rgb(0 0 0 / .25); transition: transform .2s ease, background-color .2s ease; }
.u-switch.is-on .u-switch__track { background: var(--c-actions-primary); }
.u-switch.is-on .u-switch__thumb { transform: translateX(20px); background: var(--c-actions-on-primary); }
.u-switch.is-disabled .u-switch__track { background: var(--c-actions-controll-off-disabled); }
.u-switch.is-disabled .u-switch__thumb { background: var(--c-actions-on-controll-off-disabled); }
.u-switch.is-disabled.is-on .u-switch__track { background: var(--c-actions-primary-disabled); }
.u-switch.is-disabled.is-on .u-switch__thumb { background: var(--c-actions-on-primary-disabled); box-shadow: none; }
.u-switch.is-disabled input { cursor: default; }
.u-switch.is-shimmer .u-switch__thumb { display: none; }

.u-radio { position: relative; width: 24px; height: 24px; flex: none; display: inline-grid; place-items: center; color: var(--c-actions-on-primary); }
.u-radio::before { content: ""; position: absolute; inset: 1px; border-radius: 50%; border: 2px solid var(--c-graphic-secondary); transition: background-color .15s ease, border-color .15s ease; }
.u-radio .u-ic { position: relative; width: 20px; height: 20px; opacity: 0; transform: scale(.6); transition: opacity .15s ease, transform .15s ease; }
.u-radio.is-on::before { background: var(--c-actions-primary); border-color: transparent; }
.u-radio.is-on .u-ic { opacity: 1; transform: none; }
.u-radio.is-error::before { border-color: var(--c-graphic-error); }
.u-radio.is-disabled:not(.is-on)::before { opacity: .5; }
.u-radio.is-disabled.is-on::before { background: var(--c-actions-primary-disabled); }
.u-radio.is-disabled.is-on { color: var(--c-actions-on-primary-disabled); }
.u-radio.is-shimmer::before { border: 0; }
.u-check { width: 24px; height: 24px; flex: none; color: var(--c-graphic-accent); display: inline-grid; place-items: center; }
.u-check.is-disabled { color: var(--c-graphic-accent-disabled); }

/* ---------- Поля ввода ---------- */
.u-field { padding: 0 16px 16px; }
.u-field.no-pad { padding: 0; }
.u-field__row { display: flex; gap: 8px; }
.u-field__row > * { flex: 1; min-width: 0; }
.u-field__row > .u-field { padding: 0; }
.u-field__validation { padding-top: 8px; }
.u-input { position: relative; display: flex; align-items: center; height: 64px; padding: 0 16px; border-radius: 20px; background: var(--c-container-white);
  -webkit-backdrop-filter: var(--blur-m); backdrop-filter: var(--blur-m); cursor: text; transition: transform .12s ease; }
/* Тап по полю — как по кнопке: лёгкое уменьшение. Пока поле в фокусе, не прыгает. */
.u-input:not(.is-disabled):not(.is-focused):active:not(:has(.u-input__acc:active, .u-input__extra:active)) { transform: scale(.98); }
.u-input.is-grey { background: var(--c-container-grey); }
.u-input.is-multiline { height: auto; min-height: 64px; }
.u-input__state { flex: 1; min-width: 0; display: flex; align-items: center; padding: 8px 0; align-self: stretch; }
.u-input.is-multiline .u-input__state { padding: 12px 0; align-items: flex-start; }
.u-input__card { padding-right: 12px; display: flex; align-items: center; align-self: center; }
.u-input__card img { width: 32px; height: 24px; display: block; }
.u-input__content { position: relative; flex: 1; min-width: 0; min-height: 40px; display: flex; flex-direction: column; justify-content: center; }
.u-input__label { position: absolute; left: 0; right: 0; top: 10px; font: 500 16px/20px var(--font-ui); letter-spacing: -0.01em; color: var(--c-text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: clip; transform-origin: 0 50%; pointer-events: none;
  transition: transform 180ms cubic-bezier(.2, .8, .2, 1), color 150ms ease, opacity 120ms ease; will-change: transform; }
.u-input.is-floated .u-input__label { transform: translateY(-10px) scale(.875); }
.u-input.is-label-hidden.is-filled .u-input__label { opacity: 0; }
.u-input.is-label-hidden.has-v2 .u-input__label { opacity: 0; }
/* Hidden: плейсхолдер заменяет лейбл на том же месте */
.u-input.is-label-hidden.has-ph .u-input__label { opacity: 0; transition-duration: 0s; }
.u-input__value { position: relative; display: flex; align-items: center; gap: 2px; min-width: 0; margin-top: 20px; min-height: 20px;
  font: 500 16px/20px var(--font-ui); letter-spacing: -0.01em; opacity: 0; transition: opacity 120ms ease; }
.u-input.is-floated .u-input__value, .u-input.is-label-hidden.is-active .u-input__value { opacity: 1; }
.u-input.is-label-hidden .u-input__value { margin-top: 0; }
.u-input__value input, .u-input__value textarea { color: var(--c-text-primary); caret-color: var(--c-text-accent); font: inherit; letter-spacing: inherit; padding: 0; height: 20px; }
.u-input__value textarea { resize: none; border: 0; background: none; outline: none; width: 100%; display: block; overflow: hidden; line-height: 20px; max-height: 120px; overflow-wrap: break-word; scrollbar-width: none; }
.u-input__value textarea::-webkit-scrollbar { display: none; }
.u-input.is-multiline .u-input__value { align-items: flex-start; }
.u-input__sizer { position: absolute; visibility: hidden; white-space: pre; font: inherit; letter-spacing: inherit; }
.u-input__suffix { color: var(--c-text-secondary); white-space: pre; flex: 1; min-width: 0; overflow: hidden; }
.u-input__ph { position: absolute; left: 0; right: 0; top: 0; color: var(--c-text-secondary); white-space: nowrap; overflow: hidden; pointer-events: none; }
.u-input__value.has-ph input { position: relative; z-index: 1; }
.u-input__acc { padding-left: 12px; display: flex; align-items: center; color: var(--c-graphic-secondary); align-self: center; }
.u-input__acc button { display: grid; place-items: center; }
.u-input__loading { color: var(--c-graphic-primary); pointer-events: none; }
/* Иконка справа — Graphic/Primary, по тапу уменьшается на 20% и не ставит фокус */
.u-input__icon { color: var(--c-graphic-primary); }
.u-input__icon .u-ic { transition: transform .12s ease; }
.u-input__icon:not(:disabled):active .u-ic { transform: scale(.9); }
.u-input.is-disabled .u-input__icon { color: var(--c-graphic-disabled); }
.u-input__extra { display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 0; color: var(--c-text-primary); font: 500 16px/20px var(--font-ui); letter-spacing: -0.01em; flex: none; }
.u-input__extra.is-right { padding: 8px 0 8px 12px; order: 3; }
.u-input__extra .u-picker { display: flex; align-items: center; gap: 4px; font: inherit; color: inherit; }
button.u-picker { transition: transform .12s ease; cursor: pointer; }
button.u-picker:not(:disabled):active { transform: scale(.94); }
.u-input__extra .u-ic:not(img) { color: var(--c-graphic-secondary); }
.u-input__flag { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; flex: none; display: block; }
.u-input.is-error .u-input__label, .u-input.is-error .u-input__value input, .u-input.is-error .u-input__value textarea, .u-input.is-error .u-input__ph { color: var(--c-text-error); }
.u-input.is-disabled { cursor: default; }
.u-input.is-disabled .u-input__label, .u-input.is-disabled .u-input__value input, .u-input.is-disabled .u-input__value textarea, .u-input.is-disabled .u-input__suffix, .u-input.is-disabled .u-input__extra { color: var(--c-text-disabled); }
.u-input.is-disabled .u-input__acc, .u-input.is-disabled .u-input__extra .u-ic:not(img) { color: var(--c-graphic-disabled); }
/* Safari (iOS) красит текст disabled-поля своим цветом и прозрачностью — фиксируем Text/Disabled */
.u-input.is-disabled .u-input__value input, .u-input.is-disabled .u-input__value textarea { -webkit-text-fill-color: var(--c-text-disabled); opacity: 1; }
.u-input--dropdown { -webkit-backdrop-filter: none; backdrop-filter: none; cursor: pointer; width: 100%; text-align: left; }
.u-input--dropdown .u-input__value { opacity: 1; }
.u-input--dropdown.is-floated .u-input__value { margin-top: 20px; }
.u-input--dropdown:not(.is-floated) .u-input__value { margin-top: 0; }
.u-input--dropdown .u-input__value > .u-fade { color: var(--c-text-primary); }
.u-input--dropdown.is-disabled .u-input__value > .u-fade { color: var(--c-text-disabled); }
.u-dd-lead { display: flex; align-items: center; padding-right: 16px; align-self: center; }
.u-dd-lead .u-tile { width: 44px; height: 44px; }
.u-dd-lead .u-flag44 { width: 44px; height: 44px; border-radius: 0; background: none; }
.u-dd-lead .u-flag44::after { display: none; }

.u-help { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; }
.u-help__row { display: flex; align-items: center; gap: 4px; min-height: 16px; padding: 0 16px; font: 500 12px/15px var(--font-ui); color: var(--c-text-secondary); }
.u-help__row .u-ic { width: 16px; height: 16px; }
.u-help__row--error { color: var(--c-text-error); }
.u-help__row--primary { color: var(--c-text-primary); }
.u-help__row--positive { color: var(--c-text-success); }
/* иконка в конце текста подписи (trail): 16, цвет Graphic той же роли, что текст; нажатие — уменьшение, область нажатия 32×32 */
.u-help__trail { flex: none; position: relative; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; margin: 0; border: 0; background: none; color: var(--c-graphic-secondary); }
.u-help__row--primary .u-help__trail { color: var(--c-graphic-primary); }
.u-help__row--error .u-help__trail { color: var(--c-graphic-error); }
.u-help__row--positive .u-help__trail { color: var(--c-graphic-success); }
.u-help__trail.is-btn { cursor: pointer; transition: transform .1s ease; -webkit-tap-highlight-color: transparent; }
.u-help__trail.is-btn::after { content: ""; position: absolute; inset: -8px; }
.u-help__trail.is-btn:active { transform: scale(.85); }
.u-validation { display: flex; gap: 4px; padding: 4px 16px; }
.u-validation > i { flex: 1; height: 2px; border-radius: 4px; background: rgb(from var(--c-text-primary) r g b / .1); }
.u-validation > i.is-on { background: var(--bar); }

/* OTP */
.u-otp { position: relative; padding: 0 16px 16px; }
.u-otp__cells { display: flex; gap: 8px; justify-content: center; }
.u-otp__cell { flex: 1; max-width: 64px; height: 64px; border-radius: 16px; background: var(--c-container-white); display: grid; place-items: center;
  font: 500 20px/24px var(--font-ui); letter-spacing: -0.01em; color: var(--c-text-primary); }
.u-otp__cell > span { display: flex; align-items: center; gap: 1px; height: 24px; }
.u-caret { display: inline-block; width: 2px; height: 20px; border-radius: 4px; background: var(--c-text-accent); animation: u-blink 1s steps(1) infinite; }
.u-otp .u-caret { height: 24px; }
@keyframes u-blink { 50% { opacity: 0; } }
.u-otp input { position: absolute; inset: 0 16px 16px; opacity: 0; font-size: 16px; cursor: pointer; }
.u-otp.is-error .u-otp__cell { color: var(--c-text-error); }
.u-otp.is-success .u-otp__cell { color: var(--c-text-success); }
.u-otp.is-loading .u-otp__cell > span { animation: u-otp-pulse 1230ms ease-in-out infinite alternate; }
@keyframes u-otp-pulse { from { color: var(--c-text-shimmer-start); } to { color: var(--c-text-shimmer-end); } }
.u-otp.is-shake .u-otp__cells { animation: u-shake 400ms ease; }
@keyframes u-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }

/* Поиск */
.u-search { display: flex; gap: 8px; align-items: center; }
.u-search__field { flex: 1; min-width: 0; height: 56px; border-radius: 29px; padding: 0 16px; display: flex; align-items: center; gap: 8px;
  background: var(--c-container-white); -webkit-backdrop-filter: var(--blur-m); backdrop-filter: var(--blur-m); color: var(--c-graphic-secondary); cursor: text; }
.u-search__field.is-grey { background: var(--c-container-grey); }
.u-search__field input { flex: 1; font: 500 16px/20px var(--font-ui); letter-spacing: -0.01em; color: var(--c-text-primary); caret-color: var(--c-text-accent); height: 40px; }
.u-search__field input::placeholder { color: var(--c-text-secondary); opacity: 1; }
.u-search--inline { padding: 0 16px 16px; }
.u-search--fullscreen { padding: 12px 16px 24px; }

/* Чипсы */
.u-chips { display: flex; gap: 8px; padding: 0 16px 16px; overflow-x: auto; scrollbar-width: none; }
.u-chips::-webkit-scrollbar { display: none; }
.u-chips.is-wrap { flex-wrap: wrap; overflow: visible; }
.u-chip { display: inline-flex; align-items: center; height: 36px; padding: 8px 12px; border-radius: 20px; flex: none; font: 500 14px/18px var(--font-ui);
  background: var(--c-actions-tertiary-grey); color: var(--c-text-primary); transition: background-color .3s ease, color .3s ease, transform .1s ease; user-select: none; }
.u-chip > span:not(.u-ic) { padding: 0 4px; max-width: 172px; --fade: 16px; } /* иконка — тоже span: пад текста на неё не распространяется */
/* Иконка в Figma — 20×20 (down 12×8, clear-frame 13×13) */
.u-chip .u-ic { width: 20px; height: 20px; color: var(--c-graphic-secondary); }
.u-chip--accent .u-ic, .u-chip.is-on .u-ic { color: var(--c-graphic-inverse-static-secondary); }
.u-chip:not(:disabled):active, .u-chip.is-pressed { transform: scale(.96); }
.u-chip--white { background: var(--c-actions-tertiary-white); }
.u-chip--accent, .u-chip.is-on { background: var(--c-actions-primary); color: var(--c-text-inverse-static-primary); }
.u-chip:disabled { color: var(--c-text-disabled); transform: none; cursor: default; }
.u-chip--accent:disabled, .u-chip.is-on:disabled { background: var(--c-actions-primary-disabled); color: var(--c-actions-on-primary); }

/* ---------- Оверлеи ---------- */
.u-overlay { position: absolute; inset: 0; z-index: 50; background: rgb(0 0 0 / .4); animation: u-fade-in .25s ease; }
.u-overlay.is-closing { animation: u-fade-out .22s ease forwards; }
@keyframes u-fade-in { from { opacity: 0; } }
@keyframes u-fade-out { to { opacity: 0; } }
.u-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 51; max-height: 768px; display: flex; flex-direction: column; border-radius: 32px 32px 0 0; overflow: hidden;
  background: var(--c-surface-bottom-sheet); box-shadow: 0 6px 32px rgb(0 0 0 / .12); animation: u-sheet-in .32s cubic-bezier(.2, .8, .2, 1); touch-action: none; }
.u-sheet.is-full { height: 768px; }
.u-sheet.is-closing { animation: u-sheet-out .24s ease forwards; }
@keyframes u-sheet-in { from { transform: translateY(100%); } }
/* закрытие продолжается с того места, куда шит дотянули пальцем */
@keyframes u-sheet-out { from { transform: translateY(var(--drag, 0px)); } to { transform: translateY(100%); } }
.u-sheet__handle { height: 13px; padding-top: 8px; display: flex; justify-content: center; flex: none; cursor: grab; }
.u-sheet__handle > i { width: 48px; height: 5px; border-radius: 7px; background: var(--c-border-border-subtle); }
.u-sheet__body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; position: relative; padding-bottom: var(--sheet-stack-h, 0px); } /* резерв под прибитый стек (BottomSheet) */
.u-sheet__body::-webkit-scrollbar { display: none; }
.u-sheet .u-stack { --stack-bg: var(--c-surface-bottom-sheet); }

.u-toast { position: absolute; left: 0; right: 0; top: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; padding: 44px 8px 8px; pointer-events: none; }
.u-toast__pill { display: flex; align-items: center; gap: 8px; max-width: 359px; border-radius: 32px; background: var(--c-container-white); pointer-events: auto; touch-action: none; cursor: grab;
  box-shadow: 0 8px 20px rgb(0 0 0 / .04); -webkit-backdrop-filter: var(--blur-m); backdrop-filter: var(--blur-m); font: 500 14px/18px var(--font-ui); color: var(--c-text-primary);
  animation: u-toast-in .28s cubic-bezier(.2, .8, .2, 1); transition: transform .22s ease, opacity .22s ease; }
.u-toast.is-closing .u-toast__pill { transform: translateY(calc(-100% - 60px)); opacity: 0; }
.u-toast.is-dragging .u-toast__pill { transition: none; }
@keyframes u-toast-in { from { transform: translateY(calc(-100% - 60px)); opacity: 0; } }
.u-toast--error .u-toast__pill { padding: 12px 20px 12px 12px; text-align: left; }
.u-toast--error .u-ic { color: var(--c-graphic-error); }
.u-toast--feedback .u-toast__pill { padding: 16px 20px; text-align: center; }

/* ---------- Состояния загрузки, пустые состояния, ошибки ---------- */
.u-sk { background: var(--c-container-shimmer-end); border-radius: 12px; animation: u-shimmer 1230ms ease-in-out infinite alternate; flex: none; }
/* Шиммер в форме компонента: тот же размер, содержимое скрыто */
.is-sk { background: var(--c-container-shimmer-end) !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; animation: u-shimmer 1230ms ease-in-out infinite alternate; pointer-events: none; user-select: none; }
.is-sk > * { visibility: hidden; }
.u-sk-host { position: relative; }
.u-sk-inline { display: inline-block; max-width: 100%; vertical-align: top; }
.u-skl__t { color: transparent; -webkit-text-fill-color: transparent; }
.u-skl > i { position: absolute; display: block; }
.u-par.is-sk-text .u-par__clamp > span { color: transparent; }
@keyframes u-shimmer { from { background-color: var(--c-container-shimmer-end); } to { background-color: var(--c-container-shimmer-start); } }
.u-appear { animation: u-appear 600ms ease-in-out; }
@keyframes u-appear { from { opacity: 0; } }

.u-context { display: flex; flex-direction: column; align-items: flex-start; padding: 24px; }
.u-context.is-compact { padding-inline: 16px; }
.u-context__icon { display: flex; color: var(--c-graphic-secondary); padding-bottom: 16px; } /* Icon Container: иконка 32 + VSpacing m 16 = 48, без строчного «хвоста» */
.u-context__icon .u-ic { width: 32px; height: 32px; }
.u-context__text { font: 600 20px/24px var(--font-ui); letter-spacing: -0.01em; color: var(--c-text-secondary); }
.u-context__btn { padding-top: 16px; }

/* Экраны статуса */
.u-status { display: flex; flex-direction: column; }
.u-status__icon { display: flex; padding: 0 24px 32px; } /* Status-Icons: иконка 100 + 32 = 132, без строчного «хвоста» */
.u-status__icon .u-ic { width: 100px; height: 100px; }
.u-status__timer { padding: 0 24px 24px; font: 500 80px/100px var(--font-display); letter-spacing: 0; color: var(--c-text-accent); font-variant-numeric: tabular-nums; }
.u-status__textwrap { position: relative; }
.u-status__text { display: flex; flex-direction: column; gap: 16px; padding: 0 24px 24px; }
.u-status__text.is-leaving { position: absolute; left: 0; right: 0; top: 0; animation: u-st-out 220ms cubic-bezier(.4, 0, 1, 1) both; pointer-events: none; }
.u-status__text.is-entering { animation: u-st-in 320ms cubic-bezier(0, 0, .2, 1) 80ms both; }
@keyframes u-st-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes u-st-in { from { opacity: 0; transform: translateY(12px); } }
.u-status__text h2 { margin: 0; font: 600 28px/30px var(--font-ui); letter-spacing: -0.02em; color: var(--c-text-primary); }
.u-status__text p { margin: 0; font: 500 16px/20px var(--font-ui); letter-spacing: -0.01em; color: var(--c-text-secondary); }
.u-status--success { }
.u-status--success .u-status__text { padding-bottom: 16px; }
.u-status--success .u-status__text h2 { color: var(--c-text-inverse-static-primary); }
.u-status--success .u-status__text p { color: var(--c-text-inverse-static-secondary); }
.u-status__cashback { display: flex; align-items: center; gap: 4px; padding: 0 24px; font: 500 16px/20px var(--font-ui); color: var(--c-text-cashback); }
.u-status__cashback .u-ic { width: 16px; height: 16px; }
/* ActionsStack (gap 12) → Actions (HSpacing m 16 по бокам) → Action (pad 4/0, r20, Actions/Transparent, Blur m) → List-Item. Под стеком — VSpacing xl 32. */
.u-actions { display: flex; flex-direction: column; gap: 12px; padding: 0 16px 32px; }
.u-action { padding: 4px 0; border-radius: 20px; background: var(--c-actions-transparent); -webkit-backdrop-filter: var(--blur-m); backdrop-filter: var(--blur-m);
  transition: transform .12s ease; }
/* Нажатие — как у ячейки: уменьшается всё действие вместе с плашкой, цвет не меняется */
.u-action .u-li.is-tappable:active { transform: none; }
.u-action:has(.u-li.is-tappable:active), .u-action.is-pressed { transform: scale(.97); }

/* Ячейка на цветном фоне (экран успеха): Text/Inverse Static, Graphic/Inverse Static */
.u-li.is-light .u-li__title, .u-li.is-light .u-li__value { color: var(--c-text-inverse-static-primary); }
.u-li.is-light .u-li__sub, .u-li.is-light .u-li__subvalue { color: var(--c-text-inverse-static-secondary); }
.u-li.is-light .u-li__trail { color: var(--c-graphic-inverse-static-secondary); }

/* Выбор продукта (карта) */
.u-psel { padding: 0 16px 24px; position: relative; }
.u-psel.is-compact { padding-bottom: 16px; }
/* promo: Extra promo прилегает к нижней карточке (карточка над «ушами» плашки), отступ 24 — под плашкой */
.u-psel.has-promo > .u-psel__card { position: relative; z-index: 1; }
.u-psel__card { display: flex; align-items: center; gap: 16px; width: 100%; height: 76px; padding: 14px 16px; border-radius: 20px; background: var(--c-container-white);
  text-align: left; transition: transform .12s ease; }
.u-psel.is-grey .u-psel__card { background: var(--c-container-grey); }
.u-psel__card:active { transition-duration: .1s; }
.u-psel__core { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.u-psel__card .u-li__trail { color: var(--c-graphic-secondary); }
.u-psel__card.is-error .u-li__title, .u-psel__card.is-error .u-li__sub { color: var(--c-text-error); }
.u-psel__card.is-disabled { cursor: default; transform: none; }
.u-psel__card.is-disabled .u-li__lead { opacity: .5; }
.u-psel__card.is-disabled .u-li__title, .u-psel__card.is-disabled .u-li__sub { color: var(--c-text-disabled); }
.u-psel__bridge { display: block; margin: 0 auto; width: 40px; height: 8px; color: var(--c-container-white); }
.u-psel.is-grey .u-psel__bridge { color: var(--c-container-grey); }
.u-psel__dir { position: absolute; left: calc(50% - 8px); top: 72px; width: 16px; height: 16px; color: var(--c-graphic-secondary); display: grid; place-items: center; }
.u-psel__dir.is-swap { color: var(--c-graphic-primary); }
.u-psel__dir .u-ic { width: 16px; height: 16px; }
/* Стрелка всегда над карточками: нажатая нижняя карточка не перекрывает её */
.u-psel__dir { z-index: 3; }

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

/* =========================================================
   Дополнения: варианты из Figma и новые компоненты
   ========================================================= */

/* Навбар: большой заголовок и табы внутри навбара (Style=Large/Main, Config=Tabbar) */
.u-nav--static { position: relative; }
.u-nav__large { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 0 24px 24px; }
.u-nav__large.no-space { padding-bottom: 0; }
.u-nav--main .u-nav__large { padding-right: 12px; }
.u-nav__large h1 { margin: 0; font: 600 28px/30px var(--font-ui); letter-spacing: -0.02em; color: var(--c-text-primary); }
.u-nav__large p { margin: 0; font: 500 16px/20px var(--font-ui); letter-spacing: -0.01em; color: var(--c-text-secondary); }
.u-nav--light .u-nav__large h1 { color: var(--c-text-inverse-static-primary); }
.u-nav--light .u-nav__large p { color: var(--c-text-inverse-static-secondary); }
/* Style=Main: «Title and icon» (заголовок + шеврон без зазора, шеврон с отступом 6 сверху) → gap 8 → Right element 32×30 с падом 8 справа */
.u-nav__mainrow { display: flex; align-items: center; gap: 0; min-width: 0; }
.u-nav__mainrow h1 { min-width: 0; }
.u-nav__mainrow .u-nav__chev { padding-top: 6px; color: var(--c-graphic-primary); display: flex; }
.u-nav--light .u-nav__chev { color: var(--c-graphic-inverse-static-primary); }
.u-nav__mainrow .u-nav__right { margin-left: auto; padding-left: 8px; padding-right: 8px; height: 30px; }
.u-nav.no-divider .u-nav__bg { border-bottom: 0; }
.u-tabs { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; }
.u-tabs::-webkit-scrollbar { display: none; }
.u-tabs button { flex: none; color: var(--c-text-secondary); transition: color .15s ease; }
.u-tabs button.is-on { color: var(--c-text-primary); }
.u-tabs--large button { font: 600 28px/30px var(--font-ui); letter-spacing: -0.02em; }
.u-nav__large > .u-tabs--large, .u-large-title > .u-tabs--large { margin: 0 -24px; padding: 0 24px; scroll-padding: 0 24px; }
.u-nav--main .u-nav__large > .u-tabs--large { margin-right: -12px; padding-right: 12px; }
.u-tabs--small > :first-child { margin-left: auto; }
.u-tabs--small > :last-child { margin-right: auto; }
.u-tabs--small button { font: 600 16px/20px var(--font-ui); letter-spacing: -0.01em; }
.u-nav__title .u-tabs--small { opacity: 1; }

/* Header 1/2: правый и левый элементы */
.u-h-right { flex: none; padding-left: 12px; display: flex; align-items: center; }
.u-h-right .u-tile, .u-h-img { width: 44px; height: 44px; border-radius: 12px; }
.u-h-img { background: var(--c-container-accent); position: relative; overflow: hidden; }
.u-h-img::after { content: ""; position: absolute; inset: 0; border-radius: 12px; background: var(--c-container-container-fade); }
.u-h-avatar { width: 32px; height: 32px; border-radius: 40px; background: var(--c-container-accent); flex: none; margin-right: 0; display: grid; place-items: center;
  font: 600 14px/18px var(--font-ui); color: var(--c-text-accent); }
.u-h2 .u-h-avatar + .u-h2__text { padding-left: 0; }
.u-h1__text.is-shimmer, .u-h2__text.is-shimmer { pointer-events: none; user-select: none; }
.u-h1.is-center .u-h1__text { align-items: center; }

/* Ячейка: продукт, флаг, бейдж */
.u-li__lead.is-product { padding: 2px 0; }
.u-li__lead.is-product.is-large { padding: 2px 6px; }
.u-flag44 { width: 44px; height: 44px; border-radius: 12px; overflow: hidden; position: relative; display: block; background: #fff; }
.u-flag44 > img { width: 100%; height: 100%; display: block; transform: scale(1.0); }
.u-flag44::after { content: ""; position: absolute; inset: 0; border-radius: 12px; background: rgb(1 1 1 / .04); }
.u-badge { position: absolute; left: 30px; top: 26px; width: 18px; height: 18px; border-radius: 40px; overflow: hidden; display: grid; place-items: center;
  background: var(--c-surface-widget); box-shadow: 0 0 0 2px var(--c-surface-widget); }
.u-badge > * { width: 18px !important; height: 18px !important; }

/* Круглые кнопки: пустая, шиммер, раскладки стека */
.u-circle--empty { visibility: hidden; }
.u-circle.is-shimmer { pointer-events: none; }
/* Layout=Multi-line: сетка 4 колонки, пад 8 по бокам, между колонками 8, между рядами 16; сверху и снизу VSpacing m 16 */
.u-circle-stack--multi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 8px; padding: 16px 8px; }
.u-circle-stack--multi > .u-circle { width: auto; max-width: none; }
.u-circle-stack--vertical { display: inline-flex; flex-direction: column; gap: 16px; padding: 0; }

/* Расширенный стек и клавиатура */
.u-xstack { position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; flex-direction: column; border-radius: 32px 32px 0 0; overflow: hidden;
  background: var(--c-surface-widget); -webkit-backdrop-filter: var(--blur-xl); backdrop-filter: var(--blur-xl); box-shadow: 0 -.5px 0 rgb(from var(--c-border-border-subtle) r g b / .1); padding-top: 8px; }
.u-xstack__slot { padding-bottom: 8px; }
/* Клавиатура: слот меняет высоту (хоум-индикатор 34 или 0 → высота клавиатуры), всё над ним в стеке едет вместе с ней.
   Сама клавиатура прижата к верху слота и сдвинута вниз на исходную высоту слота: её верхний край поднимается ровно от нижнего края экрана. */
:root { --kb-ms: 250ms; --kb-ease: cubic-bezier(.38, .7, .125, 1); }
.u-keyboard { position: relative; display: block; width: 375px; flex: none; overflow: hidden; transition: height var(--kb-ms) var(--kb-ease); }
.u-keyboard__home { position: absolute; left: 0; right: 0; bottom: 0; }
.u-keyboard__kb { position: absolute; left: 0; top: 0; width: 375px; z-index: 1; transform: translateY(var(--kb-from, 0px)); transition: transform var(--kb-ms) var(--kb-ease); }
.u-keyboard.is-open .u-keyboard__kb { transform: none; }
.u-keyboard.is-still, .u-keyboard.is-still .u-keyboard__kb { transition: none; }
.u-keyboard img { display: block; width: 375px; height: auto; }
.u-stack__extra { height: 8px; }

/* Боттомшит: варианты высоты и шапка с блюром */
.u-sheet.is-hug { max-height: 768px; }
.u-sheet__main { flex: 1 1 auto; min-height: 0; position: relative; display: flex; flex-direction: column; }
/* Шапка лежит поверх прокрутки (не sticky внутри неё): так блюр берёт правильный фон и не даёт артефактов */
.u-sheet__head { position: absolute; top: 0; left: 0; right: 0; z-index: 2; background: var(--c-surface-bottom-sheet); transition: background-color .2s ease; }
.u-sheet .u-sheet__head.is-spacer { position: static; visibility: hidden; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Шапка шита всегда плотная, без полупрозрачности и линии: контент просто уходит под неё, без «прямоугольника» по краю */
.u-sheet .u-sheet__head:not(.is-spacer) { background: var(--c-surface-bottom-sheet); box-shadow: none; transition: none; }
/* Закрытие стягиванием: шит уезжает вниз с того места, где его отпустили (через transition, без keyframes с переменной — в Safari она давала скачок наверх) */
.u-sheet.is-closing.is-drag-close { animation: none; }
.u-sheet.has-float-handle .u-sheet__handle { position: absolute; left: 0; right: 0; top: 0; z-index: 3; }
.u-sheet__overlay-off { background: transparent; }

/* Выбор карты: перешеек и направление */
.u-psel__bridge { display: block; margin: 0 auto; width: 40px; height: 8px; color: var(--c-container-white); }
.u-psel__dir svg { width: 16px; height: 16px; display: block; }
.u-psel__card.is-top { transform-origin: 50% 100%; }
.u-psel__card.is-bottom { transform-origin: 50% 0; }
.u-psel__card.is-pressed, .u-psel__card:not(:disabled):active { transform: scale(.971, .974); }
.u-psel__bridge { transition: height .1s ease; }
.u-psel__card .u-li__trail.is-right { transform: none; }

/* Promo Element */
.u-promo { padding: 0 16px 16px; }
.u-promo__box { width: 100%; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 12px 16px 12px 12px; border-radius: 12px; text-align: left;
  background: var(--c-container-positive); color: var(--c-text-primary); transition: transform .15s ease; }
.u-promo__box.is-right { padding: 12px; }
.u-promo__box:active { transform: scale(.97); }
.u-promo__box.is-white { background: var(--c-container-white); }
.u-promo__box.is-grey { background: var(--c-container-grey); }
.u-promo__box.is-accent { background: var(--c-container-accent); }
.u-promo__box.is-negative { background: var(--c-container-negative); color: var(--c-text-error); }
.u-promo__text { flex: 1; min-width: 0; padding-left: 4px; font: 500 14px/18px var(--font-ui); }
.u-promo__text.is-12 { font: 500 12px/15px var(--font-ui); }
.u-promo__btn { flex: none; font: 600 12px/15px var(--font-ui); white-space: nowrap; }
.u-promo__card { width: 32px; height: 24px; display: block; flex: none; }

/* Extra promo: полоса с «ушками» под соседней карточкой */
.u-xpromo { position: relative; z-index: 0; padding: 0 16px; --xp-r: 20px; }
.u-xpromo.is-r-sheet { --xp-r: 32px; } /* radius="sheet" — над шторкой: радиус и «уши» как у шторки (32) */
.u-xpromo.no-hspacing { padding: 0; }
.u-xpromo__band { position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 36px; padding: 10px 24px;
  color: var(--c-text-inverse-static-primary); font: 500 12px/15px var(--font-ui); text-align: center; width: 100%; }
.u-xpromo__band::before { content: ""; position: absolute; left: 0; right: 0; z-index: -1; background: var(--g-graphic-accent); }
.u-xpromo--bottom .u-xpromo__band::before { top: 0; bottom: 0; border-radius: 0 0 var(--xp-r) var(--xp-r); }
.u-xpromo--top .u-xpromo__band::before { top: 0; bottom: 0; border-radius: var(--xp-r) var(--xp-r) 0 0; }
.u-xpromo__ear { position: absolute; width: var(--xp-r); height: var(--xp-r); z-index: -1; background: var(--c-graphic-gradient-accent-start); pointer-events: none; }
.u-xpromo--bottom .u-xpromo__ear { top: calc(-1 * var(--xp-r)); }
/* Над карточкой (top): карточка ниже по документу и рисуется поверх — подложка полосы просто заходит под неё на радиус (×1.2 — с запасом
   под непрерывное скругление карточки), и в вырезах её углов виден тот же градиент, что у полосы. Отдельные «уши» не нужны. */
.u-xpromo--top .u-xpromo__band::before { bottom: calc(-1.2 * var(--xp-r)); }
.u-xpromo--top .u-xpromo__ear { display: none; }
.u-xpromo__ear.is-l { left: 0; }
.u-xpromo__ear.is-r { right: 0; }
.u-xpromo--bottom .u-xpromo__ear.is-l { -webkit-mask: radial-gradient(circle var(--xp-r) at 100% 0, transparent calc(var(--xp-r) - .5px), #000 var(--xp-r)); mask: radial-gradient(circle var(--xp-r) at 100% 0, transparent calc(var(--xp-r) - .5px), #000 var(--xp-r)); }
.u-xpromo--bottom .u-xpromo__ear.is-r { -webkit-mask: radial-gradient(circle var(--xp-r) at 0 0, transparent calc(var(--xp-r) - .5px), #000 var(--xp-r)); mask: radial-gradient(circle var(--xp-r) at 0 0, transparent calc(var(--xp-r) - .5px), #000 var(--xp-r)); }
.u-xpromo--top .u-xpromo__ear.is-l { -webkit-mask: radial-gradient(circle var(--xp-r) at 100% 100%, transparent calc(var(--xp-r) - .5px), #000 var(--xp-r)); mask: radial-gradient(circle var(--xp-r) at 100% 100%, transparent calc(var(--xp-r) - .5px), #000 var(--xp-r)); }
.u-xpromo--top .u-xpromo__ear.is-r { -webkit-mask: radial-gradient(circle var(--xp-r) at 0 100%, transparent calc(var(--xp-r) - .5px), #000 var(--xp-r)); mask: radial-gradient(circle var(--xp-r) at 0 100%, transparent calc(var(--xp-r) - .5px), #000 var(--xp-r)); }
.u-xpromo__band .u-ic.is-chev { color: var(--c-graphic-inverse-static-secondary); width: 16px; height: 16px; }
/* Слот не увеличивает высоту полосы: графика 16px, как в примерах ДС */
.u-xpromo__slot { width: 16px; height: 16px; flex: none; color: #fff; }
.u-xpromo-host { position: relative; z-index: 1; }
/* Слот с картой-логотипом (uzum 21×16) и иконкой 16 */
.u-xpromo__card { flex: none; margin-right: 5px; } /* Icon / Type=Card: слот 26×16, карта 21×16 + пад справа 5 */
.u-xpromo__ic { flex: none; width: 16px; height: 16px; color: var(--c-graphic-inverse-static-primary); }

/* Spotlight */
.u-spot { position: absolute; inset: 0; z-index: 70; }
.u-spot__dim { position: absolute; inset: 0; background: rgb(0 0 0 / .66); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px);
  animation: u-fade-in 400ms 100ms ease-in-out both; transition: background-color .6s ease, backdrop-filter .6s ease; }
.u-spot__dim.is-scroll { background: rgb(0 0 0 / .4); -webkit-backdrop-filter: none; backdrop-filter: none; }
.u-spot.is-closing { animation: u-fade-out 300ms ease-in-out forwards; pointer-events: none; }
.u-spot__layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.u-spot__hl { position: absolute; left: 0; right: 0; z-index: 1; pointer-events: auto; }
.u-spot__content { position: absolute; left: 0; right: 0; z-index: 2; display: flex; flex-direction: column; gap: 16px; padding: 32px 24px 24px; color: var(--c-text-inverse-static-primary); }
/* Появление пояснения: 300 мс со сдвигом 30px — над элементом снизу вверх, под элементом сверху вниз */
.u-spot__layer.is-first .u-spot__content { animation: u-spot-in 300ms 500ms ease-in-out both; }
.u-spot__layer.is-in .u-spot__content { animation: u-spot-in 300ms 300ms ease-in-out both; }
.u-spot__layer .u-spot__content.is-below { animation-name: u-spot-in-top; }
.u-spot__layer.is-in .u-spot__hl { animation: u-fade-in 300ms ease-in-out both; }
.u-spot__layer.is-out { z-index: 0; }
.u-spot__layer.is-out .u-spot__hl { animation: u-fade-out 300ms ease-in-out forwards; }
.u-spot__layer.is-out .u-spot__content { animation: u-spot-out 300ms ease-in-out forwards; }
.u-spot__layer.is-out .u-spot__content.is-below { animation-name: u-spot-out-top; }
@keyframes u-spot-in { from { opacity: 0; transform: translateY(30px); } }
@keyframes u-spot-in-top { from { opacity: 0; transform: translateY(-30px); } }
@keyframes u-spot-out { to { opacity: 0; transform: translateY(30px); } }
@keyframes u-spot-out-top { to { opacity: 0; transform: translateY(-30px); } }
.u-spot__content h2 { margin: 0; font: 600 28px/30px var(--font-ui); letter-spacing: -0.02em; }
.u-spot__content p { margin: 0; font: 500 16px/20px var(--font-ui); letter-spacing: -0.01em; color: var(--c-text-inverse-static-secondary); }
.u-spot__icon { width: 44px; height: 44px; border-radius: 12px; background: rgb(255 255 255 / .12); display: grid; place-items: center; color: var(--c-graphic-inverse-static-primary); }
.u-spot .u-stack { z-index: 3; }

/* Системный диалог iOS */
.u-dialog-dim { position: absolute; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 0 24px; background: rgb(0 0 0 / .2); animation: u-fade-in 200ms ease; }
.u-dialog-dim.is-closing { animation: u-fade-out 180ms ease forwards; }
.u-dialog-dim.is-closing .u-dialog { animation: u-dialog-out 180ms ease-in forwards; }
@keyframes u-dialog-out { to { opacity: 0; transform: scale(.94); } }
.u-dialog.is-bare { padding-top: 16px; }
.u-dialog__btns button.is-primary { background: #0179f1; color: #fff; } /* системная синяя кнопка iOS (RAW из макета, в ДС нет токена) */
.u-dialog__btns button.is-primary:active { background: #0167cc; }
.u-dialog { width: 327px; padding: 24px 16px 16px; border-radius: 34px; background: rgb(245 245 245 / .72); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8);
  box-shadow: 0 5px 40px rgb(0 0 0 / .08), inset 0 0 0 1px rgb(255 255 255 / .5); color: #000; animation: u-dialog-in 250ms ease-out;
  font-family: -apple-system, "SF Pro Text", "SF Pro", system-ui, sans-serif; }
@keyframes u-dialog-in { from { opacity: 0; transform: scale(1.1); } }
.u-dialog__text { padding: 0 8px 24px; display: flex; flex-direction: column; gap: 8px; font: 600 17px/22px -apple-system, "SF Pro Text", system-ui, sans-serif; letter-spacing: -0.43px; }
.u-dialog__text p { margin: 0; font-weight: 400; }
.u-dialog__btns { display: flex; flex-direction: column; gap: 12px; }
.u-dialog__btns button { height: 48px; border-radius: 100px; background: rgb(120 120 128 / .16); display: flex; align-items: center; justify-content: center;
  font: 500 17px/22px -apple-system, "SF Pro Text", system-ui, sans-serif; letter-spacing: -0.43px; color: #000; text-align: center; }
.u-dialog__btns button:active { background: rgb(120 120 128 / .3); }
[data-proto-theme="dark"] .uz:not([data-uz-theme]) .u-dialog, .uz[data-uz-theme="dark"] .u-dialog { background: rgb(40 40 40 / .72); color: #fff; box-shadow: 0 5px 40px rgb(0 0 0 / .3), inset 0 0 0 1px rgb(255 255 255 / .12); }
[data-proto-theme="dark"] .uz:not([data-uz-theme]) .u-dialog__btns button, .uz[data-uz-theme="dark"] .u-dialog__btns button { color: #fff; background: rgb(120 120 128 / .32); }

/* Экраны статуса: картинки */
.u-status__square { width: 100px; height: 100px; border-radius: 0; background: rgb(0 0 0 / .04); }
.u-status__wide { margin: 0 0 32px; height: 140px; background: var(--c-container-positive); }
.u-status.is-modal { padding-top: 32px; }

/* Landing */
.u-landing__media { position: sticky; top: 0; height: 384px; z-index: 0; overflow: hidden; }
.u-landing__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.u-landing__sheet { position: relative; z-index: 1; margin-top: -40px; border-radius: 32px 32px 0 0; background: var(--c-surface-bottom-sheet); min-height: 468px; }

/* In-App Promo */
.u-iap { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.u-iap.is-bottom { justify-content: flex-end; }
.u-iap--white { background: #fff; }
.u-iap--blue { background: radial-gradient(120% 70% at 50% 20%, #EEF9FF 33%, #76A3FF 92%); }
.u-iap--dark { background: radial-gradient(140% 90% at 70% 10%, #24262F 0%, #000 100%); }
.u-iap__img { display: block; width: 375px; height: auto; flex: none; }
.u-iap__head { display: flex; flex-direction: column; gap: 16px; padding: 16px 24px 24px; }
.u-iap__title { margin: 0; font: 700 32px/38px var(--font-display); text-transform: uppercase; letter-spacing: 0;
  background: radial-gradient(circle at 30% 20%, #995EFF 0%, #4B08BF 81%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.u-iap--blue .u-iap__title { background-image: radial-gradient(circle at 30% 20%, #4D5064 0%, #000 90%); }
.u-iap--dark .u-iap__title { background-image: linear-gradient(90deg, #FFF, #5B5D73); }
.u-iap__sub { margin: 0; font: 500 16px/20px var(--font-ui); letter-spacing: -0.01em; color: rgb(1 1 1 / .5); }
.u-iap--dark .u-iap__sub { color: rgb(255 255 255 / .6); }
.u-iap--dark .u-btn--primary { background: #fff; color: #000; }
.u-sheet.u-iap-sheet { padding-top: 0; }
.u-iap-full { position: absolute; inset: 0; z-index: 40; background: inherit; }
.u-iap-full.is-closing { animation: u-sheet-out .3s cubic-bezier(.4, 0, 1, 1) forwards; }
.u-sheet.u-iap-sheet.u-iap--white { background: #fff; }
.u-sheet.u-iap-sheet.u-iap--dark { background: radial-gradient(140% 90% at 70% 10%, #24262F 0%, #000 100%); }
.u-iap--dark .u-sheet__handle > i { background: rgb(255 255 255 / .2); }
.u-sheet.u-iap-sheet.u-iap--blue { background: radial-gradient(130% 100% at 50% 0%, #EEF9FF 10%, #76A3FF 100%); }

.u-search-full { position: relative; }
.u-search-full::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: -24px; z-index: -1;
  background: linear-gradient(180deg, var(--c-surface-main) calc(100% - 40px), var(--c-surface-main-alpha-fade)); }
.u-search-full { isolation: isolate; }
.u-li__lead.is-sel-wrap { width: 56px; display: flex; justify-content: center; }
.u-status__bonus { display: flex; flex-direction: column; gap: 8px; padding: 0 0 8px; }
.u-status__bonus .u-status__cashback { color: var(--c-text-cashback); }
.u-status__bonus .u-status__uzumki { color: var(--c-text-inverse-static-primary); }
.u-circle.is-disabled .u-ic--paint { --paint: var(--c-graphic-disabled) !important; }
.u-sheet.is-dragging { transition: none; }

/* Лоадер на экране статуса */
.u-status__icon .u-loader { width: 100px; height: 100px; }

/* ---------- Шиммер значения ---------- */
.u-sk-text { --sk-base: var(--c-text-primary); }
.u-sk-text.is-secondary { --sk-base: var(--c-text-secondary); }
.u-sk-text.is-on { color: transparent; -webkit-text-fill-color: transparent; background-image: linear-gradient(90deg, var(--sk-base) 0 38%, color-mix(in srgb, var(--sk-base) 28%, var(--c-container-white)) 50%, var(--sk-base) 62% 100%);
  background-size: 300% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; animation: u-sk-text 1.5s cubic-bezier(.4, 0, .6, 1) infinite; }
@keyframes u-sk-text { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---------- Фон экрана background-gradient (библиотека: background-gradient / Type) ---------- */
.u-screen--gradient { --bg-g0: var(--c-surface-background-gradient-default-start); --bg-g1: var(--c-surface-background-gradient-default-end);
  background:
  radial-gradient(374px 320px at 50% 320px, var(--c-surface-main) 8.5%, var(--c-surface-main-alpha-fade) 100%) top / 100% 320px no-repeat,
  linear-gradient(180deg, var(--bg-g0), var(--bg-g1)) top / 100% 320px no-repeat,
  var(--c-surface-main); }
.u-screen--g-cashback { --bg-g0: var(--c-surface-background-gradient-alpha-start); --bg-g1: var(--c-surface-background-gradient-alpha-end); }
.u-screen--g-loan { --bg-g0: var(--c-surface-background-gradient-beta-start); --bg-g1: var(--c-surface-background-gradient-beta-end); }
.u-screen--g-deposit, .u-screen--g-neutral { --bg-g0: var(--c-surface-background-gradient-gamma-start); --bg-g1: var(--c-surface-background-gradient-gamma-end); }
.u-screen--g-negative { --bg-g0: var(--c-surface-background-gradient-negative-start); --bg-g1: var(--c-surface-background-gradient-negative-end); }
.u-screen--g-positive { --bg-g0: var(--c-surface-background-gradient-positive-start); --bg-g1: var(--c-surface-background-gradient-positive-end); }
/* gradient="success" — сплеш (28059:17398): radial($Surface/Sussess Gradient Start → End) на весь экран, из центра верхнего края;
   эллипс 1000×700 подобран по выгрузке макета (#7000ff наверху → #010101 к y≈700) */
.u-screen.u-screen--g-success { background: radial-gradient(1000px 700px at 50% 0, var(--c-surface-sussess-gradient-start), var(--c-surface-sussess-gradient-end)) var(--c-surface-sussess-gradient-end); --par-base: var(--c-surface-sussess-gradient-end); }

/* ---------- Экран статуса ---------- */
.u-status-screen { padding-top: 24px; }
.u-status-screen.no-nav { padding-top: 128px; } /* в макете Status-Screen Preset навбар есть всегда — контент с 128px */
.u-status__media { margin-bottom: 0; }
.u-status__media img { display: block; width: 100%; height: auto; }

/* ---------- Переходы между экранами ---------- */
.u-nav-stack { position: relative; width: 100%; height: 100%; overflow: hidden; overflow: clip; } /* clip — фокус в поле не может прокрутить стек */
.u-nav-layer { position: absolute; inset: 0; }
.u-nav-layer::after { content: ""; position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 200; }
.u-nav-stack .is-in, .u-nav-stack .is-out { pointer-events: none; will-change: transform, opacity; }
/* подготовка: анимации на паузе в первом кадре, пока новый экран не отрисован */
.u-nav-stack.is-prep > .u-nav-layer, .u-nav-stack.is-prep > .u-nav-layer::after { animation-play-state: paused !important; }
/* push: новый экран заезжает справа, старый уходит на --tr-push-shift влево и чуть темнеет (iOS); на Android — тот же жест оси X */
.is-push > .is-in { z-index: 2; animation: u-tr-from-right var(--tr-push-ms, 360ms) var(--tr-push-ease) both; box-shadow: -10px 0 30px rgb(0 0 0 / .12); }
.is-push > .is-out { z-index: 1; animation: u-tr-to-left var(--tr-push-ms, 360ms) var(--tr-push-ease) both; }
.is-push > .is-out::after { animation: u-tr-dim var(--tr-push-ms, 360ms) ease both; }
.is-pop > .is-out { z-index: 2; animation: u-tr-to-right var(--tr-pop-ms, 320ms) var(--tr-pop-ease) both; box-shadow: -10px 0 30px rgb(0 0 0 / .12); }
.is-pop > .is-in { z-index: 1; animation: u-tr-from-left var(--tr-pop-ms, 320ms) var(--tr-pop-ease) both; }
.is-pop > .is-in::after { animation: u-tr-undim var(--tr-pop-ms, 320ms) ease both; }
/* modal: экран поднимается снизу, под ним всё остаётся на месте и затемняется */
.is-modal > .is-in { z-index: 2; animation: u-tr-from-bottom var(--tr-modal-ms, 420ms) var(--tr-modal-ease) both; }
.is-modal > .is-out::after { animation: u-tr-dim-modal var(--tr-modal-ms, 420ms) ease both; }
.is-dismiss > .is-out { z-index: 2; animation: u-tr-to-bottom var(--tr-dismiss-ms, 320ms) var(--tr-dismiss-ease) both; }
.is-dismiss > .is-in::after { animation: u-tr-undim-modal var(--tr-dismiss-ms, 320ms) ease both; }
.is-fade > .is-in { z-index: 2; animation: u-tr-fade var(--tr-fade-ms, 240ms) var(--tr-fade-ease) both; }
@keyframes u-tr-from-right { from { transform: translateX(100%); } }
@keyframes u-tr-to-left { to { transform: translateX(calc(-1 * var(--tr-push-shift, 30%))); } }
@keyframes u-tr-to-right { to { transform: translateX(100%); } }
@keyframes u-tr-from-left { from { transform: translateX(calc(-1 * var(--tr-push-shift, 30%))); } }
@keyframes u-tr-from-bottom { from { transform: translateY(100%); } }
@keyframes u-tr-to-bottom { to { transform: translateY(100%); } }
@keyframes u-tr-fade { from { opacity: 0; } }
@keyframes u-tr-dim { to { opacity: var(--tr-push-dim, .12); } }
@keyframes u-tr-undim { from { opacity: var(--tr-push-dim, .12); } to { opacity: 0; } }
@keyframes u-tr-dim-modal { to { opacity: var(--tr-modal-dim, .12); } }
@keyframes u-tr-undim-modal { from { opacity: var(--tr-modal-dim, .12); } to { opacity: 0; } }

/* ---------- Картинка с плейсхолдером ---------- */
.u-img { position: relative; display: block; width: 100%; overflow: hidden; }
.u-img::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--c-container-shimmer-start, rgb(120 120 128 / .12)); animation: u-sk-pulse 1.2s ease-in-out infinite alternate; transition: opacity .3s ease; }
.u-img > img { position: relative; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .3s cubic-bezier(0, 0, .2, 1); }
.u-img.is-loaded > img, .u-img.is-instant > img { opacity: 1; }
.u-img.is-instant > img { transition: none; }
.u-img.is-loaded::before, .u-img.is-instant::before { opacity: 0; animation: none; }
.u-img.is-instant::before { transition: none; }
@keyframes u-sk-pulse { from { opacity: .55; } to { opacity: 1; } }
.u-status__media .u-img::before { left: 24px; right: 24px; top: 0; bottom: 18%; border-radius: 16px; }

/* ---------- Появление экрана успеха ---------- */
.u-success-in { animation: u-sx-bg calc(var(--sx-bg-ms, 520ms) * var(--sx-slow, 1)) var(--sx-bg-ease) both; }
.u-success-in .u-nav, .u-success-in .u-status__icon, .u-success-in .u-status__media, .u-success-in .u-status__text h2, .u-success-in .u-status__text p,
.u-success-in .u-status__bonus, .u-success-in .u-status-screen ~ *, .u-success-in .u-stack > * {
  animation: u-sx-el calc(var(--sx-el-ms, 420ms) * var(--sx-slow, 1)) var(--sx-el-ease) both; animation-delay: calc((var(--sx-delay, 220ms) + var(--sx-stagger, 70ms) * var(--sx-i, 0)) * var(--sx-slow, 1)); }
.u-success-in .u-status__icon, .u-success-in .u-status__media { --sx-i: 0; animation-name: u-sx-icon; transform-origin: 50px 100%; } /* галочка выезжает снизу и подрастает от своего низа */
.u-success-in .u-status__text h2 { --sx-i: 1; }
.u-success-in .u-status__text p { --sx-i: 2; }
.u-success-in .u-status__bonus { --sx-i: 3; }
.u-success-in .u-stack > :nth-child(1) { --sx-i: 4; } .u-success-in .u-stack > :nth-child(2) { --sx-i: 5; } .u-success-in .u-stack > :nth-child(3) { --sx-i: 6; }
.u-success-in .u-nav { --sx-i: 3; animation-name: u-sx-fade; }
.u-success-in .u-status__text.is-entering { animation: none; }
@keyframes u-sx-bg { from { clip-path: circle(var(--sx-r0, 0px) at var(--sx-x, 50%) var(--sx-y, 88%)); } to { clip-path: circle(150% at var(--sx-x, 50%) var(--sx-y, 88%)); } }
@keyframes u-sx-el { from { opacity: 0; transform: translateY(var(--sx-shift, 16px)); } }
@keyframes u-sx-icon { from { opacity: 0; transform: translateY(calc(var(--sx-shift, 16px) * 2)) scale(var(--sx-icon-scale, .6)); } }
@keyframes u-sx-fade { from { opacity: 0; } }
.is-reveal > .is-in { z-index: 2; }
.u-sheet__stack { flex: none; }

/* ---------- Системный пуш iOS (Push Notification, System=iOS) ---------- */
.u-push { position: absolute; left: 10px; right: 10px; top: 10px; z-index: 90; pointer-events: none; }
.u-push__pill { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px 12px 14px; border-radius: 24px; pointer-events: auto; touch-action: none; cursor: pointer; user-select: none;
  position: relative; isolation: auto; background: rgb(166 166 166 / .7); -webkit-backdrop-filter: blur(40px) saturate(1.8); backdrop-filter: blur(40px) saturate(1.8);
  font-family: -apple-system, "SF Pro Text", system-ui, sans-serif; color: #000; animation: u-push-in .45s cubic-bezier(.32, .72, 0, 1); transition: transform .3s cubic-bezier(.32, .72, 0, 1); }
.u-push__pill::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #333; mix-blend-mode: color-dodge; pointer-events: none; }
.u-push__pill > * { position: relative; }
.u-push.is-closing .u-push__pill { animation: u-push-out .3s cubic-bezier(.4, 0, 1, 1) forwards; }
@keyframes u-push-in { from { transform: translateY(calc(-100% - 20px)); } }
@keyframes u-push-out { to { transform: translateY(calc(-100% - 20px)); opacity: .6; } }
.u-push__icon { flex: none; padding: 2px 0; display: flex; }
.u-push__app { width: 38px; height: 38px; display: block; border-radius: 9px; }
.u-push__app.is-messages { display: grid; place-items: center; background: linear-gradient(180deg, #5bf675, #0cbd2a); color: #fff; }
.u-push__app.is-messages svg { width: 26px; height: 26px; }
.u-push__text { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 3px 0; }
.u-push__head { display: flex; align-items: baseline; gap: 8px; }
/* Title в библиотеке (25367:3627, System=iOS): Auto height без обрезки — длинный заголовок переносится на вторую строку, время остаётся справа у первой */
.u-push__head b { flex: 1; min-width: 0; font: 600 15px/18px -apple-system, "SF Pro Text", system-ui, sans-serif; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.u-push__head { align-items: flex-start; }
.u-push__head time { padding-top: 2px; }
.u-push__head time { flex: none; font: 400 13px/15px -apple-system, "SF Pro Text", system-ui, sans-serif; color: rgb(60 60 67 / .6); }
.u-push__desc { font: 400 15px/18px -apple-system, "SF Pro Text", system-ui, sans-serif; letter-spacing: -0.02em; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
[data-proto-theme="dark"] .uz:not([data-uz-theme]) .u-push__pill, .uz[data-uz-theme="dark"] .u-push__pill { background: rgb(37 37 37 / .7); color: #fff; }
[data-proto-theme="dark"] .uz:not([data-uz-theme]) .u-push__pill::before, .uz[data-uz-theme="dark"] .u-push__pill::before { background: #1a1a1a; mix-blend-mode: normal; opacity: .4; }
[data-proto-theme="dark"] .uz:not([data-uz-theme]) .u-push__head time, .uz[data-uz-theme="dark"] .u-push__head time { color: rgb(235 235 245 / .6); }

/* Подсказка клавиатуры iOS (Keyboard {Auto Suggestion=true}): 375×39, фон клавиатуры, разделители 25px на x 32 и 343 */
.u-kb-sug { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 375px; height: 39px; padding-top: 4px;
  background: #d6dadf; color: #000; font-family: -apple-system, "SF Pro Text", system-ui, sans-serif; text-align: center; cursor: pointer; }
.u-kb-sug::before, .u-kb-sug::after { content: ""; position: absolute; top: 9px; width: .5px; height: 25px; background: rgb(0 0 0 / .2); }
.u-kb-sug::before { left: 32px; } .u-kb-sug::after { left: 343px; }
.u-kb-sug span { font: 400 13px/16px -apple-system, "SF Pro Text", system-ui, sans-serif; }
.u-kb-sug b { font: 400 15px/18px -apple-system, "SF Pro Text", system-ui, sans-serif; }
.u-kb-sug b { display: block; transition: transform .1s ease; } .u-kb-sug:active b { transform: scale(.95); }
[data-proto-theme="dark"] .uz:not([data-uz-theme]) .u-kb-sug, .uz[data-uz-theme="dark"] .u-kb-sug { background: #323232; color: #fff; }
[data-proto-theme="dark"] .uz:not([data-uz-theme]) .u-kb-sug::before, [data-proto-theme="dark"] .uz:not([data-uz-theme]) .u-kb-sug::after,
.uz[data-uz-theme="dark"] .u-kb-sug::before, .uz[data-uz-theme="dark"] .u-kb-sug::after { background: rgb(255 255 255 / .2); }
/* Интерактивные клавиши цифровой клавиатуры: кусок картинки клавиатуры, нажатие — уменьшение (под клавишей — фон клавиатуры) */
.u-kb-keys { position: absolute; left: 0; width: 375px; height: 288px; z-index: 2; --kb-bg: #d6dadf; --kb-img: var(--kb-l); }
[data-proto-theme="dark"] .uz:not([data-uz-theme]) .u-kb-keys, .uz[data-uz-theme="dark"] .u-kb-keys { --kb-bg: #323232; --kb-img: var(--kb-d); }
.u-kb-key { position: absolute; width: 117px; height: 47px; background: var(--kb-bg); } /* 46 + тень клавиши 1 */
.u-kb-key > button { display: block; width: 100%; height: 100%; border-radius: 5px; background-image: var(--kb-img); background-size: 375px 288px; background-repeat: no-repeat;
  transition: transform .08s ease; cursor: pointer; }
.u-kb-key > button:active { transform: scale(.92); }

/* ---------- Notification Message ---------- */
.u-nmsg { padding: 0 16px 12px; }
.u-nmsg__card { display: block; width: 100%; padding: 16px; border-radius: 20px; background: var(--c-container-white); text-align: left; color: var(--c-text-primary); transition: transform .12s ease; }
.u-nmsg__card.is-tappable:active, .u-nmsg__card.is-pressed { transform: scale(.976); }
.u-nmsg__head { display: flex; align-items: flex-start; gap: 8px; }
.u-nmsg__head.is-skel { gap: 16px; }
.u-nmsg__title { flex: 1; min-width: 0; padding: 2px 0; font: 600 16px/20px var(--font-ui); letter-spacing: -0.01em; }
.u-nmsg__time { flex: none; padding-top: 4px; font: 500 12px/15px var(--font-ui); color: var(--c-text-secondary); }
.u-nmsg__sub { padding: 3px 0; font: 500 14px/18px var(--font-ui); color: var(--c-text-secondary); }
.u-nmsg__btn { padding-top: 12px; display: flex; }

/* ---------- Чат ---------- */
.u-chat { display: flex; }
.u-chat.is-user { justify-content: flex-end; padding-left: 40px; padding-right: 16px; }
.u-chat.is-support { align-items: flex-end; gap: 8px; padding-left: 16px; padding-right: 40px; }
.u-chat__av { flex: none; width: 32px; height: 32px; }
.u-chat__av > i { width: 32px; height: 32px; border-radius: 24px; background: var(--c-graphic-accent); display: grid; place-items: center; color: var(--c-graphic-inverse-static-primary); }
.u-chat__bubble { min-width: 0; max-width: 100%; display: flex; flex-direction: column; gap: 4px; padding: 16px 16px 8px; }
.u-chat__bubble.has-name { padding-top: 12px; }
/* Пузырь пользователя (Message User, эталон 18575:18936 и кадры Message): градиент #5300e1 → #a84fff растянут так, что в пузыре виден только его конец
   (0,89–1): #a84efe → ≈#a048fc, одинаково в светлой и тёмной теме. Ближайший токен, не зависящий от темы, — Actions/Gradient Button Accent Start #8a54ff (ΔE 9,3 / 8,9).
   Кадры «user-color» (18575:19571) и «grouping» (18575:19552) показывают другой цвет — градиент на весь экран, внизу #5300e1: вопрос дизайнеру. */
.u-chat__bubble.is-user { background: var(--c-actions-gradient-button-accent-start); color: var(--c-text-inverse-static-primary); }
.u-chat__bubble.is-support { background: var(--c-container-white); color: var(--c-text-primary); }
.u-chat__name { font: 500 12px/15px var(--font-ui); color: var(--c-text-secondary); }
.u-chat__text { font: 500 16px/20px var(--font-ui); letter-spacing: -0.01em; white-space: pre-wrap; overflow-wrap: anywhere; }
.u-chat__meta { display: flex; align-items: center; justify-content: flex-end; gap: 4px; height: 16px; font: 500 12px/15px var(--font-ui); color: var(--c-text-secondary); }
.u-chat__bubble.is-user .u-chat__meta { color: var(--c-text-inverse-static-secondary); }
.u-chat__meta .u-ic { width: 16px; height: 16px; color: var(--c-graphic-inverse-static-secondary); }
.u-chat-date { display: flex; justify-content: center; padding: 4px 0 12px; }
.u-chat-date > span { padding: 4px 12px; border-radius: 20px; background: var(--c-actions-tertiary-white); -webkit-backdrop-filter: var(--blur-m); backdrop-filter: var(--blur-m);
  box-shadow: 0 6px 32px rgb(0 0 0 / .12); font: 500 12px/15px var(--font-ui); color: var(--c-text-secondary); }
.u-chat-input { position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; flex-direction: column; padding-top: 16px;
  background: linear-gradient(180deg, var(--c-surface-main-alpha-fade) 0, var(--c-surface-main) 16px); }
.u-chat-input__row { display: flex; align-items: flex-end; gap: 8px; padding: 0 16px; }
.u-chat-input__field { flex: 1; min-width: 0; min-height: 56px; display: flex; align-items: flex-end; gap: 8px; padding: 16px; border-radius: 29px; background: var(--c-container-white);
  -webkit-backdrop-filter: var(--blur-m); backdrop-filter: var(--blur-m); cursor: text; }
.u-chat-input__field textarea { flex: 1; min-width: 0; height: 24px; max-height: 120px; resize: none; border: 0; outline: none; background: none; padding: 2px 0;
  font: 500 16px/20px var(--font-ui); letter-spacing: -0.01em; color: var(--c-text-primary); caret-color: var(--c-text-accent); scrollbar-width: none; }
.u-chat-input__field textarea::placeholder { color: var(--c-text-secondary); opacity: 1; }
.u-chat-input__send { flex: none; display: grid; padding-left: 4px; transition: transform .1s ease; }
.u-chat-input__send:active { transform: scale(.9); }
.u-chat-input__gap { height: 16px; }
/* Большой заголовок Style=Main внутри экрана */
.u-main-title { padding-right: 12px; }
.u-main-title__btn { display: flex; align-items: center; min-width: 0; transition: transform .12s ease; transform-origin: 0 50%; }
.u-main-title__btn:active { transform: scale(.97); }
.u-main-title__btn h1 { margin: 0; min-width: 0; font: 600 28px/30px var(--font-ui); letter-spacing: -0.02em; color: var(--c-text-primary); }
.u-main-title.is-light h1 { color: var(--c-text-inverse-static-primary); }
.u-main-title .u-nav__right .u-ic { color: var(--c-graphic-primary); }
.u-nmsg__head.is-skel { padding: 2px 0; }
.u-nmsg__sk-sub { padding: 4px 0; }

/* New code: кнопка по центру, высота 36 */
.u-newcode { display: flex; justify-content: center; }

/* Notification Message: ограничение строк */
.u-nmsg__title, .u-nmsg__sub { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
/* Header 1 / AddRight Type=Image: картинка партнёра */
.u-h-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* AddRight как кнопка (onTrail) */
.u-li__trail.is-btn { cursor: pointer; transition: transform .1s ease; }
.u-li__trail.is-btn:active { transform: scale(.85); }
/* Чат: файл, фото, ошибка, звёзды, время в строке */
.u-chat__bubble.is-file { gap: 8px; }
.u-chat__bubble.is-support.is-file { gap: 4px; }
.u-chat__file { display: flex; align-items: center; gap: 8px; min-width: 0; text-align: left; padding-top: 0; }
.u-chat__bubble.is-support .u-chat__file { padding-top: 4px; }
.u-chat__file-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--c-actions-tertiary-grey); color: var(--c-graphic-primary); }
.u-chat__bubble.is-user .u-chat__file-ic { background: var(--c-actions-transparent-pressed); color: var(--c-graphic-inverse-static-primary); }
.u-chat__file-t { min-width: 0; display: flex; flex-direction: column; }
.u-chat__file-n { font: 500 16px/20px var(--font-ui); letter-spacing: -0.01em; }
.u-chat__file-s { font: 500 12px/15px var(--font-ui); color: var(--c-text-secondary); }
.u-chat__bubble.is-user .u-chat__file-s { color: var(--c-text-inverse-static-secondary); }
.u-chat__photo { position: relative; width: 196px; height: 172px; overflow: hidden; }
.u-chat__photo .u-img { height: 100%; }
.u-chat__photo-meta { position: absolute; right: 10px; bottom: 10px; display: flex; align-items: center; padding: 4px 8px; border-radius: 20px; background: var(--c-graphic-static-secondary); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.u-chat__photo-meta .u-chat__meta { color: var(--c-text-inverse-static-secondary); }
.u-chat__err { flex: none; align-self: flex-end; margin-left: 8px; padding-bottom: 0; display: flex; }
.u-chat.is-user { align-items: flex-end; }
/* Время в строке с текстом: резерв в конце текста, сама подпись — в правом нижнем углу пузыря на уровне последней строки */
.u-chat__bubble.is-inline { position: relative; }
.u-chat__bubble.is-inline .u-chat__meta { position: absolute; right: 16px; bottom: 10px; }
.u-chat__meta-sp { display: inline-block; width: 44px; }
.u-chat__bubble.is-user .u-chat__meta-sp { width: 68px; } /* время + статус 16 */
.u-chat__bubble.is-inline .u-chat__text { padding-bottom: 2px; }
.u-stars { display: flex; gap: 8px; padding: 4px 0; }
.u-stars__s { display: grid; transition: transform .1s ease; }
.u-stars__s:active { transform: scale(.9); }
.u-chat-input__field textarea { max-height: 204px; scrollbar-width: thin; scrollbar-color: var(--c-graphic-secondary) transparent; }
.u-chat-input__field textarea::-webkit-scrollbar { display: block; width: 2px; }
.u-chat-input__field textarea::-webkit-scrollbar-thumb { background: var(--c-graphic-secondary); border-radius: 4px; }

/* Календарь */
.u-cal__line { display: flex; padding: 0 16px; }
.u-cal__gap { height: 8px; }
.u-cday { position: relative; flex: none; width: 49px; height: 48px; display: grid; place-items: center; }
.u-cday.is-button { width: 162px; }
.u-cday.in-period { background: var(--c-container-accent); }
.u-cday.in-period.edge-left { border-radius: 12px 0 0 12px; }
.u-cday.in-period.edge-right { border-radius: 0 12px 12px 0; }
.u-cday.in-period.edge-both { border-radius: 12px; }
.u-cday__b { position: relative; width: 100%; height: 48px; border-radius: 12px; display: grid; place-items: center; font: 500 16px/20px var(--font-ui); letter-spacing: -0.01em; color: var(--c-text-primary);
  transition: transform .1s ease; }
.u-cday.in-period .u-cday__b { color: var(--c-text-accent); }
.u-cday__b:not(:disabled):active { transform: scale(.92); }
.u-cday__b.is-on { background: var(--c-actions-secondary-highlited); color: var(--c-actions-on-secondary); }
.u-cday__b.is-disabled { color: var(--c-text-disabled); cursor: default; }
.u-cday__b.is-on.is-disabled { color: var(--c-actions-on-secondary-disabled); }
.u-cday__today { position: absolute; left: calc(50% - 2px); bottom: 6px; width: 4px; height: 4px; border-radius: 50%; background: var(--c-graphic-primary); }
.u-cday.in-period .u-cday__today, .u-cday__b.is-on .u-cday__today { background: currentColor; }
.u-cal-week { display: flex; justify-content: space-between; gap: 12px; padding: 8px 16px 16px; font: 500 12px/15px var(--font-ui); color: var(--c-text-secondary); text-transform: uppercase; }
.u-cal-week > span { flex: 1; text-align: center; }

/* Фото в чате: шиммер загрузки, имя над фото */
.u-chat__photo-sk { display: block; width: 196px; height: 172px; border-radius: 0; }
.u-chat__bubble.is-pic { padding: 12px 0 0; gap: 8px; overflow: hidden; }
.u-chat__bubble.is-pic .u-chat__name { padding: 0 16px; }
.u-file-loader { display: inline-flex; animation: u-spin 1s linear infinite; }
@keyframes u-spin { to { transform: rotate(360deg); } }

/* Day Picker: кнопка «Последний день» прижата к правому краю строки (Calendar Type=Day Picker, 64021:53463) */
.u-cday.is-button { margin-left: auto; }

/* ---------- Волна 7 ---------- */
/* Клавиатура хозяина (экран без стека кнопок): у нижнего края экрана, поверх контента */
.u-screen__kb { position: absolute; left: 0; right: 0; bottom: 0; z-index: 45; pointer-events: none; }
.u-screen__kb .u-keyboard { pointer-events: auto; }
/* В шторке нет полоски хоум-индикатора: безопасная зона 34px остаётся, сама полоска скрыта */
.u-sheet .u-home > i { visibility: hidden; }

/* Закрытие экрана успеха (крестик, кнопка): обратная заливка — экран успеха сжимается кругом в точку появления поверх экрана назначения */
.is-unreveal > .is-out { z-index: 2; animation: u-sx-unbg 420ms cubic-bezier(.3, .6, .35, 1) both; }
/* Не reverse от появления: у появления хвост медленный и радиус 150% больше экрана — в обратную сторону первые ~200 мс ничего не происходило.
   Круг начинается ровно у дальнего угла (--sx-rmax считает стек) и сжимается сразу. */
@keyframes u-sx-unbg { from { clip-path: circle(var(--sx-rmax, 150%) at var(--sx-x, 50%) var(--sx-y, 88%)); } to { clip-path: circle(var(--sx-r0, 0px) at var(--sx-x, 50%) var(--sx-y, 88%)); } }
/* Экран назначения экрана успеха, смонтированный заранее: не виден и не перехватывает ввод */
.u-nav-layer.is-pre { visibility: hidden; pointer-events: none; z-index: 0; }
/* Возврат к экрану успеха из действия (документы, детали): pop без повторного появления. no-reveal — у слоя стека и у экрана под свайпом «назад» */
.no-reveal .u-success-in, .no-reveal .u-success-in .u-nav, .no-reveal .u-success-in .u-status__icon,
.no-reveal .u-success-in .u-status__media, .no-reveal .u-success-in .u-status__text h2, .no-reveal .u-success-in .u-status__text p,
.no-reveal .u-success-in .u-status__bonus, .no-reveal .u-success-in .u-status-screen ~ *, .no-reveal .u-success-in .u-stack > * { animation: none; }

/* Поиск: системный крестик type=search не показываем — у поля свой «Очистить» (clear-frame) */
.u-search__field input { -webkit-appearance: none; appearance: none; }
.u-search__field input::-webkit-search-cancel-button, .u-search__field input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
/* ---------- Push Notification / Android (System=Android, Opened=False) ---------- */
.uz .u-push.is-android { left: 16px; right: 16px; top: 8px; }
.uz .u-push.is-android .u-push__pill { align-items: center; padding: 8px 16px; border-radius: 24px; background: var(--c-surface-bottom-sheet); color: var(--c-text-primary); -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px); box-shadow: none; }
.uz .u-push.is-android .u-push__pill::before { display: none; }
.uz .u-push.is-android .u-push__icon { padding: 0; }
.uz .u-push.is-android .u-push__app { width: 24px; height: 24px; border-radius: 4.5px; }
.uz .u-push.is-android .u-push__app.is-messages svg { width: 16px; height: 16px; }
.uz .u-push.is-android .u-push__text { padding: 0; }
.uz .u-push.is-android .u-push__head { align-items: baseline; gap: 4px; padding: 10px 0 4px; }
.uz .u-push.is-android .u-push__head b { flex: 0 1 auto; font: 400 14px/18px Roboto, "Roboto Flex", var(--font-ui); letter-spacing: -0.03em; color: var(--c-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* System=Android: Title Max lines 1, Truncate */
.uz .u-push.is-android .u-push__head time { padding-top: 0; }
.uz .u-push.is-android .u-push__head i, .uz .u-push.is-android .u-push__head time { flex: none; font: 400 12px/16px Roboto, "Roboto Flex", var(--font-ui); font-style: normal; color: var(--c-text-secondary); }
.uz .u-push.is-android .u-push__desc { padding-bottom: 0; margin-bottom: 8px; /* отступ снизу — margin: padding внутри обрезки показывал кусок следующей строки */ font: 400 14px/16px Roboto, "Roboto Flex", var(--font-ui); letter-spacing: -0.03em; color: var(--c-text-secondary); -webkit-line-clamp: 3; }
.u-push__badge { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 12px; background: var(--c-container-grey); color: var(--c-graphic-primary); }
.u-push__badge .u-ic { width: 16px; height: 16px; }
/* ProductSelector disabled: стрелка направления / перестановки — Graphic/Disabled (у DirectionIcon в библиотеке нет состояния Disabled — по просьбе пользователя) */
.u-psel.is-disabled .u-psel__dir, .u-psel.is-disabled .u-psel__dir.is-swap { color: var(--c-graphic-disabled); }
.u-psel__dir button:disabled { cursor: default; }

/* ---------- Нативный режим (html[data-native="1"], просмотр с телефона) ---------- */
:where(html[data-native="1"]) { /* значения по умолчанию; оболочка (app.css) переопределяет */ --sb-h: env(safe-area-inset-top, 0px); --home-h: env(safe-area-inset-bottom, 0px); }
.u-statusbar { height: var(--sb-h, 44px); }
html[data-native="1"] .u-statusbar > i { display: none; }
html[data-native="1"] .u-home { height: var(--home-h); padding-top: 0; }
html[data-native="1"] .u-home > i { display: none; }
html[data-native="1"] .u-screen { width: 100%; height: 100%; }
html[data-native="1"] .u-keyboard.is-native { width: 100%; transition: height var(--kb-ms, 250ms) var(--kb-ease, cubic-bezier(.38, .7, .125, 1)); }
html[data-native="1"] .u-sheet, html[data-native="1"] .u-sheet.is-hug { max-height: calc(100% - var(--sb-h) - 10px); }
html[data-native="1"] .u-sheet.is-full { height: calc(100% - var(--sb-h) - 10px); }
html[data-native="1"] .u-toast { padding-top: calc(var(--sb-h) + 8px); }
html[data-native="1"] .u-push { top: calc(var(--sb-h) + 8px); }
html[data-native="1"] .u-dialog-dim { padding-top: var(--sb-h); padding-bottom: var(--home-h); }
/* Decimal Pad: клавиша «,» внизу слева — как у системной iOS decimalPad: без подложки, как «стереть» */
.u-kb-key.is-comma > button { background: transparent; box-shadow: none; font: 400 28px/47px -apple-system, "SF Pro Text", system-ui, sans-serif; color: #000; text-align: center; padding-bottom: 6px; box-sizing: border-box; }
[data-proto-theme="dark"] .uz:not([data-uz-theme]) .u-kb-key.is-comma > button, .uz[data-uz-theme="dark"] .u-kb-key.is-comma > button { color: #fff; }
/* ---------- System Dialog / Android ---------- */
.u-dialog-dim.is-android { align-items: flex-end; padding: 0 16px 24px; background: var(--c-graphic-static-disabled); }
.u-adialog { width: 343px; max-width: 100%; box-sizing: border-box; padding: 24px 24px 24px; border-radius: 24px; background: var(--c-surface-bottom-sheet); display: flex; flex-direction: column; align-items: center; animation: u-adialog-in .3s cubic-bezier(.2, .8, .2, 1); }
.u-dialog-dim.is-closing .u-adialog { animation: u-adialog-out .18s ease-in forwards; }
@keyframes u-adialog-in { from { transform: translateY(40px); opacity: 0; } }
@keyframes u-adialog-out { to { transform: translateY(40px); opacity: 0; } }
.u-adialog__ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--c-container-grey); color: var(--c-graphic-primary); margin-bottom: 16px; }
.u-adialog__t { width: 100%; text-align: center; font: 500 18px/24px Roboto, var(--font-ui); color: var(--c-text-primary); }
.u-adialog__p { margin: 8px 0 0; width: 100%; text-align: center; font: 400 14px/20px Roboto, var(--font-ui); color: var(--c-text-secondary); }
.u-adialog__btns { width: 100%; display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.u-adialog__btns button { display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 16px; height: 48px; border-radius: 16px; background: var(--c-actions-tertiary-grey); color: var(--c-text-primary); font: 400 16px/20px Roboto, var(--font-ui); transition: transform .1s ease; }
.u-adialog__btns button:active { transform: scale(.97); }
.u-adialog__btns button.is-primary { background: #4980f8; color: var(--c-actions-on-primary); } /* системная синяя Android (RAW в библиотеке) */
/* PromoElement: отдельная кнопка «Закрыть» */
.u-promo__close { flex: none; align-self: center; padding: 4px 0 4px 8px; font: 500 12px/15px var(--font-ui); color: var(--c-text-secondary); cursor: pointer; transition: transform .1s ease; }
.u-promo__close:active { transform: scale(.92); }