/* Базовые компоненты нового 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__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__btn[aria-checked="true"] { background: var(--bg-surface); color: var(--text-primary); }
.ui-seg__btn--icon { display: grid; place-items: center; }
.ui-seg__btn--icon[aria-checked="true"] { color: var(--accent); }

/* Toggle */
.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: var(--bg-surface-2); border: 1px solid var(--border-subtle);
                   position: relative; cursor: pointer; transition: background .2s; }
.ui-toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
                          border-radius: var(--r-full); background: var(--text-secondary); transition: transform .2s, background .2s; }
.ui-toggle input:checked { background: var(--accent); border-color: var(--accent); }
.ui-toggle input:checked::after { transform: translateX(20px); background: var(--accent-on); }
.ui-toggle input:disabled { opacity: .45; cursor: default; }

/* 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: 85vh; 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-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; }

/* 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-tab { 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; }