/* Базовые компоненты нового UI. Все значения — только из tokens.css. Префикс классов: ui- */

.ui-root {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
.ui-root *, .ui-root *::before, .ui-root *::after { box-sizing: border-box; }
.ui-root button { font: inherit; color: inherit; }

.ui-icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8;
           stroke-linecap: round; stroke-linejoin: round; }

/* Money: Unbounded, -3%, моноширинные цифры */
.ui-money { font-family: var(--font-num); font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
            white-space: nowrap; }
.ui-money--sm { font-size: 15px; }
.ui-money--md { font-size: 20px; }
.ui-money--lg { font-size: 28px; }
.ui-money--xl { font-size: 38px; line-height: 1.1; }
.ui-money--positive { color: var(--positive); }
.ui-money--negative { color: var(--negative); }

/* Card: r24, 1px рамка, без теней */
.ui-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--r-lg);
           padding: var(--sp-5); box-shadow: none; }
.ui-card + .ui-card { margin-top: var(--sp-3); }
.ui-card__title { font-size: 13px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase;
                  letter-spacing: .04em; margin: 0 0 var(--sp-3); }

/* Pill: статус на мягком фоне */
.ui-pill { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-3);
           border-radius: var(--r-full); font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.ui-pill .ui-icon { width: 14px; height: 14px; }
.ui-pill--accent { background: var(--accent-soft); color: var(--accent); }
.ui-pill--positive { background: var(--positive-soft); color: var(--positive); }
.ui-pill--negative { background: var(--negative-soft); color: var(--negative); }
.ui-pill--warning { background: var(--warning-soft); color: var(--warning); }

/* IconButton: круг 40 */
.ui-iconbtn { width: 40px; height: 40px; flex: none; border: 0; border-radius: var(--r-full); display: grid;
              place-items: center; background: var(--bg-surface-2); color: var(--text-primary); cursor: pointer; padding: 0; }
.ui-iconbtn:active { opacity: .7; }
.ui-iconbtn:disabled { opacity: .4; cursor: default; }
.ui-iconbtn--accent { background: var(--accent-soft); color: var(--accent); }
.ui-iconbtn--solid { background: var(--accent); color: var(--accent-on); }

/* Segmented */
.ui-seg { display: flex; gap: var(--sp-1); padding: var(--sp-1); background: var(--bg-surface-2);
          border-radius: var(--r-full); }
/* .ui-seg .ui-seg__btn — вес выше, чем у «.ui-root button { color: inherit }»: невыбранные — приглушённые */
.ui-seg .ui-seg__btn { flex: 1; min-width: 0; border: 0; background: none; padding: var(--sp-2) var(--sp-1);
               border-radius: var(--r-full); font-weight: 600; font-size: 14px; color: var(--text-secondary);
               cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Выбранный — заливка акцентом и контрастный текст, остальные — приглушённый текст (единый стиль всех сегментов) */
.ui-seg .ui-seg__btn[aria-checked="true"] { background: var(--accent); color: var(--accent-on); }
.ui-seg__btn--icon { display: grid; place-items: center; }
/* «Таблетка» выбранного — отдельный слой (ui.js), переезжает transform'ом (Web Animations, 250 мс; «уменьшить движение» —
   без переезда); пока не размещена — заливка у самой кнопки */
.ui-seg { position: relative; }
.ui-seg .ui-seg__btn { position: relative; z-index: 1; }
.ui-seg__thumb { position: absolute; top: var(--sp-1); bottom: var(--sp-1); left: 0; width: 0; border-radius: var(--r-full);
                 background: var(--accent); opacity: 0; pointer-events: none; transform-origin: left center; }
.ui-seg.has-thumb .ui-seg__thumb { opacity: 1; }
.ui-seg.has-thumb .ui-seg__btn[aria-checked="true"] { background: none; }

/* Toggle — как iOS: дорожка 50×30, кружок 26 — почти во всю высоту (зазор 2 px с рамкой), кружок — цвет плашки (--card), на которой
   лежит переключатель
   (в светлой — лёгкая тень, в тёмной — без); дорожка: выкл. — нейтральная серая (из --text-secondary), вкл. — акцент. Кружок едет только
   transform'ом (220 мс, мягкая кривая без отскока), цвет дорожки — плавно; «уменьшить движение» — без анимации */
.ui-toggle { display: inline-flex; align-items: center; gap: var(--sp-3); cursor: pointer; }
.ui-toggle input { appearance: none; -webkit-appearance: none; margin: 0; width: 50px; height: 30px; flex: none;
                   border-radius: var(--r-full); background: color-mix(in srgb, var(--text-secondary) 35%, transparent);
                   border: 1px solid transparent;
                   position: relative; cursor: pointer; transition: background-color .22s ease, border-color .22s ease; }
.ui-toggle input::after { content: ""; position: absolute; top: 1px; left: 1px; width: 26px; height: 26px;
                          border-radius: var(--r-full); background: var(--card, var(--bg-surface));   /* цвет плашки */
                          transition: transform .22s cubic-bezier(.3, .7, .4, 1); }
.ui-toggle input:checked { background: var(--accent); border-color: var(--accent); }
.ui-toggle input:checked::after { transform: translateX(20px); }
[data-theme="light"] .ui-toggle input::after { box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }   /* в тёмной — без тени */
.ui-toggle input:disabled { opacity: .45; cursor: default; }
@media (prefers-reduced-motion: reduce) { .ui-toggle input, .ui-toggle input::after { transition: none; } }

/* ListRow */
.ui-row { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: var(--sp-3) 0; border: 0;
          background: none; text-align: left; border-bottom: 1px solid var(--border-subtle); }
.ui-row:last-child { border-bottom: 0; }
button.ui-row { cursor: pointer; }
button.ui-row:active { opacity: .7; }
.ui-row__icon { width: 40px; height: 40px; flex: none; border-radius: var(--r-full); display: grid; place-items: center;
                background: var(--accent-soft); color: var(--accent); }
.ui-row__icon--positive { background: var(--positive-soft); color: var(--positive); }
.ui-row__icon--negative { background: var(--negative-soft); color: var(--negative); }
.ui-row__icon--warning { background: var(--warning-soft); color: var(--warning); }
.ui-row__icon--venue { background: var(--venue-soft); color: var(--venue-accent); }
.ui-row__body { flex: 1; min-width: 0; }
.ui-row__title { font-weight: 600; overflow-wrap: anywhere; }
.ui-row__sub { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.ui-row__value { flex: none; text-align: right; }
.ui-row__chevron { color: var(--text-secondary); }

/* BottomSheet */
.ui-sheet-shade { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .5); opacity: 0;
                  transition: opacity .2s; }
.ui-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; max-height: calc(var(--app-height, 100dvh) * .85); overflow-y: auto;
            background: var(--bg-surface); color: var(--text-primary); border-top: 1px solid var(--border-subtle);
            border-radius: var(--r-lg) var(--r-lg) 0 0; padding: var(--sp-3) var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom));
            transform: translateY(100%); transition: transform .25s ease; font-family: var(--font-ui); }
.ui-sheet.is-open { transform: none; }
.ui-sheet.is-dragging { transition: none; }                       /* тянут пальцем — без задержки; отпустили — снова .25s */
.ui-sheet { overscroll-behavior: contain; }
.ui-sheet__grip, .ui-sheet__head { touch-action: none; }          /* жест за ручку и заголовок — только шторке */
@media (prefers-reduced-motion: reduce) { .ui-sheet, .ui-sheet-shade { transition: none; } }
.ui-sheet-shade.is-open { opacity: 1; }
.ui-sheet__grip { width: 40px; height: 4px; border-radius: var(--r-full); background: var(--border-subtle);
                  margin: 0 auto var(--sp-3); }
.ui-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
                  margin-bottom: var(--sp-3); }
.ui-sheet__title { font-size: 18px; font-weight: 700; margin: 0; }
/* Подтверждение поверх шторки (UI.ConfirmLayer): выше шторки (51), ниже карточки итога (72) */
.ui-confirm-shade { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .2s; }
.ui-confirm-shade.is-open { opacity: 1; }
.ui-confirm { position: fixed; left: 50%; top: 50%; z-index: 61; box-sizing: border-box; width: min(320px, calc(100% - 32px));
              background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-subtle);
              border-radius: var(--r-lg); padding: var(--sp-5); font-family: var(--font-ui);
              transform: translate(-50%, -50%) scale(.96); opacity: 0; transition: transform .2s ease, opacity .2s ease; }
.ui-confirm.is-open { transform: translate(-50%, -50%); opacity: 1; }
.ui-confirm__text { margin: 0 0 var(--sp-4); font-size: 16px; line-height: 1.4; }
.ui-confirm__btns { display: flex; gap: var(--sp-3); }
.ui-confirm__btn { flex: 1; min-height: 44px; border: 1px solid var(--border-subtle); border-radius: var(--r-full);
                   background: transparent; color: var(--text-primary); font: 600 15px/1 var(--font-ui); cursor: pointer; }
.ui-confirm__btn.is-ok { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
@media (prefers-reduced-motion: reduce) { .ui-confirm, .ui-confirm-shade { transition: none; } }

/* TabBar: плавающая капсула — отступ 16 по бокам, высота 64, r32, фон surface-2 88% + blur 24, safe-area снизу */
.ui-tabbar { position: fixed; left: var(--sp-4); right: var(--sp-4); z-index: 40; height: 64px;
             bottom: calc(var(--sp-3) + var(--tabbar-safe-bottom, env(safe-area-inset-bottom, 0px)));
             display: flex; align-items: center; justify-content: space-around; padding: 0 var(--sp-1);
             border-radius: 32px; border: 1px solid var(--border-subtle);
             background: color-mix(in srgb, var(--bg-surface-2) 88%, transparent);
             -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); font-family: var(--font-ui); }
/* Подсветка выбранной вкладки — отдельный слой (ui.js), переезжает transform'ом (250 мс; «уменьшить движение» — без
   переезда); пока не размещена — заливка у самого значка. Вид — как был: accent-soft, капсула 44×30 */
.ui-tabbar__thumb { position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: var(--r-full);
                    background: var(--accent-soft); opacity: 0; pointer-events: none; }
.ui-tabbar.has-thumb .ui-tabbar__thumb { opacity: 1; }
.ui-tabbar.has-thumb .ui-tab.is-active .ui-tab__icon { background: none; }
.ui-tab { position: relative; z-index: 1; flex: 1; min-width: 0; height: 56px; border: 0; background: none; padding: 0; cursor: pointer;
          display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
          color: var(--text-secondary); }
.ui-tab__icon { width: 44px; height: 30px; border-radius: var(--r-full); display: grid; place-items: center;
                transition: background .15s; }
.ui-tab__label { font-size: 11px; font-weight: 600; line-height: 1.1; white-space: nowrap; }
.ui-tab.is-active .ui-tab__icon { background: var(--accent-soft); color: var(--accent); }
.ui-tab.is-active .ui-tab__label { color: var(--text-primary); }
.ui-tab:active .ui-tab__icon { opacity: .7; }

/* Notice — карточка-уведомление над нижним меню (UI.Notice): фон --card2 (полупрозрачный), рамка, тень; круг ✓ / ! слева, две
   строки справа — каждая одной строкой с «…» (без переносов и на 320 px). Выезд — transform с пружиной 280 мс, уход вниз
   220 мс; галочка «рисуется» — уезжающая шторка (transform 300 мс). Только transform/opacity */
.ui-notice { position: fixed; left: 50%; z-index: 72; box-sizing: border-box; width: max-content; min-width: 200px; max-width: calc(100% - 32px);
             bottom: calc(max(env(safe-area-inset-bottom, 0px), var(--bottom-inset, 0px)) + 88px);
             display: flex; align-items: center; gap: var(--sp-3); padding: 10px 16px 10px 10px; border-radius: var(--r-md);
             background: color-mix(in srgb, var(--bg-surface-2) 94%, transparent); border: 1px solid var(--border-subtle);
             box-shadow: 0 10px 28px rgba(0, 0, 0, .32); color: var(--text-primary); touch-action: none; user-select: none;
             -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
             transform: translate(-50%, calc(100% + 120px)); opacity: 0;
             transition: transform .28s cubic-bezier(.34, 1.56, .64, 1), opacity .18s ease; }
.ui-notice.is-in { transform: translate(-50%, 0); opacity: 1; }
.ui-notice.is-out { transform: translate(-50%, calc(100% + 120px)); opacity: 0; transition: transform .22s ease-in, opacity .22s ease-in; }
.ui-notice.is-drag { transition: none; }
.ui-notice__icon { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
                   display: grid; place-items: center; background: var(--positive); color: var(--bg-base); }
.ui-notice--err .ui-notice__icon { background: var(--negative); }
.ui-notice__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ui-notice__wipe { position: absolute; inset: 0; background: var(--positive); transform: translateX(0);
                   transition: transform .3s cubic-bezier(.4, 0, .2, 1) .12s; }
.ui-notice.is-in .ui-notice__wipe { transform: translateX(105%); }
.ui-notice__text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ui-notice__title, .ui-notice__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-notice__title { font-size: 15px; font-weight: 700; line-height: 1.25; }
.ui-notice__sub { font-size: 13px; font-weight: 500; line-height: 1.25; color: var(--text-secondary); }
@media (prefers-reduced-motion: reduce) { .ui-notice, .ui-notice.is-out, .ui-notice__wipe { transition: none; } }

/* Нажатие — «вдавливание» кнопок и карточек-кнопок (ui.js, PRESS_SEL): scale .98 за 120 мс и обратно. Только transform */
.ui-press-anim { transition: transform .12s ease-out; }
.ui-press { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) { .ui-press-anim { transition: none; } .ui-press { transform: none; } }