/* ══════════════════════════════════════════════════════════════════════
   Планер — оформление в духе iOS 26 (Liquid Glass).
   Системные шрифты, системная палитра, стеклянные слои.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* системная палитра iOS — светлая тема */
  --blue:   #007AFF;  --green:  #34C759;  --red:    #FF3B30;
  --orange: #FF9500;  --yellow: #FFCC00;  --teal:   #30B0C7;
  --indigo: #5856D6;  --purple: #AF52DE;  --pink:   #FF2D55;
  --brown:  #A2845E;  --gray:   #8E8E93;

  --bg:            #F2F2F7;
  --bg-elevated:   #FFFFFF;
  --bg-ask:        #FFFFFF;   /* панель подтверждения */
  --fill:          rgba(120,120,128,.12);
  --fill-strong:   rgba(120,120,128,.20);
  --label:         #000000;
  --label-2:       rgba(60,60,67,.60);
  --label-3:       rgba(60,60,67,.30);
  --separator:     rgba(60,60,67,.18);
  --segment:       #FFFFFF;
  --tint:          var(--blue);

  /* стеклянные слои */
  --glass-bg:      rgba(255,255,255,.72);
  --glass-brd:     rgba(255,255,255,.65);
  --glass-hi:      rgba(255,255,255,.55);   /* блик в верхней части стеклянной кнопки */
  --glass-rim:     rgba(255,255,255,.9);    /* светлый верхний край */
  --glass-shadow:  0 1px 1px rgba(0,0,0,.04), 0 8px 28px rgba(0,0,0,.07);
  --blur:          saturate(180%) blur(30px);

  /* метрики */
  --r-card:  1.625rem;
  --r-row:   1rem;
  --r-ctl:   .875rem;
  --gutter:  1rem;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* iOS-подобные кривые */
  --ease:   cubic-bezier(.32,.72,0,1);
  --spring: cubic-bezier(.34,1.4,.64,1);

  /* Значения тёмной темы. Лежат здесь в единственном экземпляре,
     а включаются двумя правилами ниже — системным и ручным. */
  --d-blue: #0A84FF;
  --d-green: #30D158;
  --d-red: #FF453A;
  --d-orange: #FF9F0A;
  --d-yellow: #FFD60A;
  --d-teal: #40C8E0;
  --d-indigo: #5E5CE6;
  --d-purple: #BF5AF2;
  --d-pink: #FF375F;
  --d-brown: #AC8E68;
  --d-gray: #98989D;
  --d-bg: #000000;
  --d-bg-elevated: #1C1C1E;
  --d-bg-ask:      #2C2C2E;   /* на тон светлее шторки, как в iOS */
  --d-fill: rgba(120,120,128,.24);
  --d-fill-strong: rgba(120,120,128,.36);
  --d-label: #FFFFFF;
  --d-label-2: rgba(235,235,245,.60);
  --d-label-3: rgba(235,235,245,.30);
  --d-separator: rgba(84,84,88,.65);
  --d-segment: #636366;
  --d-glass-bg: rgba(30,30,32,.72);
  --d-glass-brd: rgba(255,255,255,.10);
  --d-glass-hi: rgba(255,255,255,.10);
  --d-glass-rim: rgba(255,255,255,.28);
  --d-glass-shadow: 0 1px 1px rgba(0,0,0,.30), 0 10px 32px rgba(0,0,0,.45);
}

/* Системная тёмная тема — если пользователь не выбрал светлую вручную. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --blue: var(--d-blue);
    --green: var(--d-green);
    --red: var(--d-red);
    --orange: var(--d-orange);
    --yellow: var(--d-yellow);
    --teal: var(--d-teal);
    --indigo: var(--d-indigo);
    --purple: var(--d-purple);
    --pink: var(--d-pink);
    --brown: var(--d-brown);
    --gray: var(--d-gray);
    --bg: var(--d-bg);
    --bg-elevated: var(--d-bg-elevated);
    --bg-ask: var(--d-bg-ask);
    --fill: var(--d-fill);
    --fill-strong: var(--d-fill-strong);
    --label: var(--d-label);
    --label-2: var(--d-label-2);
    --label-3: var(--d-label-3);
    --separator: var(--d-separator);
    --segment: var(--d-segment);
    --glass-bg: var(--d-glass-bg);
    --glass-brd: var(--d-glass-brd);
    --glass-hi: var(--d-glass-hi);
    --glass-rim: var(--d-glass-rim);
    --glass-shadow: var(--d-glass-shadow);
  }
}

/* Тёмная тема, выбранная в настройках, независимо от системной. */
:root[data-theme="dark"] {
    --blue: var(--d-blue);
    --green: var(--d-green);
    --red: var(--d-red);
    --orange: var(--d-orange);
    --yellow: var(--d-yellow);
    --teal: var(--d-teal);
    --indigo: var(--d-indigo);
    --purple: var(--d-purple);
    --pink: var(--d-pink);
    --brown: var(--d-brown);
    --gray: var(--d-gray);
    --bg: var(--d-bg);
    --bg-elevated: var(--d-bg-elevated);
    --bg-ask: var(--d-bg-ask);
    --fill: var(--d-fill);
    --fill-strong: var(--d-fill-strong);
    --label: var(--d-label);
    --label-2: var(--d-label-2);
    --label-3: var(--d-label-3);
    --separator: var(--d-separator);
    --segment: var(--d-segment);
    --glass-bg: var(--d-glass-bg);
    --glass-brd: var(--d-glass-brd);
    --glass-hi: var(--d-glass-hi);
    --glass-rim: var(--d-glass-rim);
    --glass-shadow: var(--d-glass-shadow);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* атрибут hidden должен побеждать любой авторский display */
[hidden] { display: none !important; }

/* Масштаб всего интерфейса. Все размеры ниже — в rem, то есть в долях
   этого числа. База — экран 390pt (обычный iPhone): 16px. На Pro Max
   крупнее до 17.28px, на SE мельче, но не ниже 14.4px — читаемость важнее. */
html { font-size: clamp(.9rem, 4.1026vw, 1.08rem); }

html, body {
  margin: 0;
  /* clip, а не hidden: hidden делает body отдельной прокручиваемой областью,
     и вместе с overscroll-behavior колесо и тачпад переставали листать страницу */
  overflow-x: clip;
  background: var(--bg);
  color: var(--label);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro",
               system-ui, "Helvetica Neue", sans-serif;
  line-height: 1.29;
  letter-spacing: -.022em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}

/* текст наследует масштаб корня; сам корень задаётся правилом выше */
body { font-size: 1.0625rem; }

/* Приложение только под телефон: страницу можно листать лишь вверх-вниз.
   pan-y запрещает браузеру двигать её вбок и масштабировать двойным
   касанием; свайп по трате при этом работает — он на своих событиях. */
body { touch-action: pan-y; }

body {
  min-height: 100dvh;
  /* мягкие цветовые пятна — под стеклом это видно */
  background-image:
    radial-gradient(60% 40% at 8% 0%,   color-mix(in oklab, var(--blue) 14%, transparent), transparent 70%),
    radial-gradient(55% 38% at 100% 8%, color-mix(in oklab, var(--indigo) 12%, transparent), transparent 72%);
  background-attachment: fixed;
}

button, input, select, textarea {
  font: inherit; letter-spacing: inherit; color: inherit;
  border: none; background: none; margin: 0;
}
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }

svg { width: 100%; height: 100%; display: block; }

/* Спрайт с иконками — не элемент интерфейса: правило выше растягивало его
   на весь экран, и он прозрачным слоем перехватывал нажатия. */
.sprite {
  position: absolute; width: 0 !important; height: 0 !important;
  overflow: hidden; pointer-events: none;
}
svg use, symbol {
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ── экран входа ─────────────────────────────────────────────────────── */
.lock {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: var(--gutter);
  background: var(--bg);
}
.lock-card {
  width: 100%; max-width: 340px; text-align: center;
  padding: 2.125rem 1.625rem 1.625rem;
  border-radius: var(--r-card);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: .5px solid var(--glass-brd);
  box-shadow: var(--glass-shadow);
  animation: pop .45s var(--spring) both;
}
.lock-icon {
  width: 4.125rem; height: 4.125rem; margin: 0 auto 1.125rem; padding: 1rem;
  border-radius: 1.25rem; color: #fff;
  background: linear-gradient(160deg, var(--blue), var(--indigo));
  box-shadow: 0 8px 22px color-mix(in oklab, var(--blue) 40%, transparent);
}
.lock h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -.4px; }
.lock p  { color: var(--label-2); font-size: .9375rem; margin: .375rem 0 1.375rem; }
.lock-fields {
  margin-bottom: .75rem; text-align: left;
  border-radius: var(--r-ctl); background: var(--fill); overflow: hidden;
}
.lock-fields:focus-within { outline: 2.5px solid color-mix(in oklab, var(--tint) 55%, transparent); }
.lock input {
  display: block; width: 100%; padding: .875rem 1rem;
  background: transparent; font-size: 1.0625rem;
}
.lock input:focus { outline: none; }
.lock input + input { border-top: .5px solid var(--separator); }
.stack-fields, .lock-fields { overflow: hidden; }
/* несколько полей в одной скруглённой группе с разделителем (смена пароля) */
.stack-fields {
  border-radius: var(--r-ctl); background: var(--fill);
}
.stack-fields:focus-within { outline: 2.5px solid color-mix(in oklab, var(--tint) 50%, transparent); }
.stack-fields input {
  display: block; width: 100%; padding: .875rem 1rem;
  background: transparent; font-size: 1.0625rem;
}
.stack-fields input:focus { outline: none; }
.stack-fields input + input { border-top: .5px solid var(--separator); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lock-error { color: var(--red); font-size: .875rem; margin-bottom: .75rem; }

@keyframes pop { from { opacity: 0; transform: scale(.94) translateY(10px); } }

/* ── кнопки ──────────────────────────────────────────────────────────── */
/* Кнопки в стиле iOS 26 (Liquid Glass). Все — капсулы или круги; при
   нажатии чуть вырастают и светлеют на пружинке, а не сжимаются. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .875rem 1.375rem; border-radius: 999px;
  font-size: 1.0625rem; font-weight: 590;
  transition: transform .42s var(--spring), filter .2s var(--ease), background .18s;
}
.btn:active { transform: scale(1.03); filter: brightness(1.06); transition-duration: .18s; }
.btn-block { width: 100%; }
/* «стекло с заливкой»: основной цвет, блик сверху, светлый край, без свечения */
.btn-primary, .sheet-done {
  color: #fff;
  background:
    radial-gradient(120% 85% at 50% 0%, rgba(255,255,255,.4), rgba(255,255,255,0) 58%),
    var(--tint);
  box-shadow:
    inset 0 .0625rem .03125rem rgba(255,255,255,.6),
    inset 0 -.0625rem .125rem rgba(0,0,0,.14),
    inset 0 0 0 .03125rem rgba(255,255,255,.28);
}
/* обычное стекло поверх серой подложки */
.btn-secondary {
  color: var(--tint);
  background: linear-gradient(180deg, var(--glass-hi), transparent 65%), var(--fill);
  box-shadow: inset 0 .0625rem .03125rem var(--glass-rim), inset 0 0 0 .03125rem var(--glass-brd);
}
.btn-secondary.danger { color: var(--red); }

/* круглая стеклянная кнопка в шапке: шестерёнка, «+», «назад», крестик */
.icon-btn {
  width: 2.75rem; height: 2.75rem; padding: .6875rem; flex: none;
  display: grid; place-items: center;
  border-radius: 50%; color: var(--label);
  background: linear-gradient(180deg, var(--glass-hi), transparent 62%), var(--glass-bg);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow:
    inset 0 .0625rem .03125rem var(--glass-rim),
    inset 0 0 0 .03125rem var(--glass-brd),
    0 .125rem .625rem rgba(0,0,0,.08);
  transition: transform .42s var(--spring), filter .2s var(--ease);
}
.icon-btn:active { transform: scale(1.1); filter: brightness(1.06); transition-duration: .18s; }
.icon-btn .flip { transform: scaleX(-1); }
.icon-btn[disabled] { opacity: .35; }
/* строка с кнопкой «назад» над крупным заголовком */
.nav-back { justify-content: flex-start; margin-bottom: .625rem; }

.link-btn { color: var(--tint); font-size: .9375rem; font-weight: 500; padding: .25rem 0; }
.link-btn:active { opacity: .5; }

/* ── каркас ──────────────────────────────────────────────────────────── */
#app { padding-bottom: calc(6.25rem + var(--safe-b)); }
.screen { padding: 0 var(--gutter); animation: fadein .3s var(--ease); }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } }

.nav { padding: calc(var(--safe-t) + .875rem) .125rem .875rem; }
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.large-title { font-size: 2.125rem; font-weight: 700; letter-spacing: -.0176em; line-height: 1.1; }
.nav-sub { color: var(--label-2); font-size: .9375rem; margin-top: .1875rem; }

/* Переключатель месяца: капсула на всю ширину, название строго по центру,
   стрелки прижаты к краям и не двигают текст. */
.period-switch {
  display: grid; grid-template-columns: 2.75rem 1fr 2.75rem; align-items: center;
  height: 2.75rem; margin-top: .875rem; padding: 0 .25rem;
  border-radius: 1.375rem;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: .5px solid var(--glass-brd);
}
.ps-label {
  text-align: center; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ps-btn {
  width: 2.25rem; height: 2.25rem; justify-self: center;
  display: grid; place-items: center; border-radius: 50%;
  color: var(--label);
  transition: background .15s, transform .42s var(--spring), opacity .2s;
}
.ps-btn svg { width: 1.125rem; height: 1.125rem; }
.ps-btn svg use { stroke-width: 2.2; }
.ps-btn .flip { transform: scaleX(-1); }
.ps-btn:active { background: var(--fill); transform: scale(1.1); transition-duration: .18s; }
.ps-btn[disabled] { opacity: .25; pointer-events: none; }

/* ── герой ───────────────────────────────────────────────────────────── */
.card-glass {
  border-radius: var(--r-card);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: .5px solid var(--glass-brd);
  box-shadow: var(--glass-shadow);
}

.hero { padding: 1.375rem 1.25rem 1.25rem; text-align: center; position: relative; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
}
.hero-label { font-size: .8125rem; font-weight: 500; color: var(--label-2);
  text-transform: uppercase; letter-spacing: .0385em; }
.hero-amount {
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
  font-size: 3.375rem; font-weight: 700; letter-spacing: -.0333em; line-height: 1.08;
  margin: .5rem 0 .25rem; font-variant-numeric: tabular-nums;
  transition: color .3s;
}
.hero-amount.over { color: var(--red); }
.hero-amount.tight { color: var(--orange); }

.hero-carry { margin-top: .625rem; font-size: .8125rem; color: var(--label-2); }
.hero-foot { font-size: .8125rem; color: var(--label-2); }

/* Крупная сумма дохода — она же кнопка правки. */
.income-hero {
  display: block; width: 100%; text-align: center;
  /* дальше сразу идёт сводка месяца — держим тот же ритм, что у .stat-row */
  margin-bottom: .625rem;
  border: .5px solid var(--glass-brd);
  transition: transform .18s var(--ease), filter .18s;
}
.income-hero:active { transform: scale(.985); filter: brightness(.97); }
.income-hero .hero-amount.placeholder {
  font-size: 2.125rem; letter-spacing: -.0235em; color: var(--tint);
}

/* Первый шаг на главном экране, пока доход не задан. */
.setup-card {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  width: 100%; padding: 1.625rem 1.375rem 1.375rem; text-align: center;
  border: .5px solid var(--glass-brd);
  transition: transform .18s var(--ease), filter .18s;
}
.setup-card:active { transform: scale(.985); filter: brightness(.97); }
.setup-icon {
  width: 3.25rem; height: 3.25rem; padding: .8125rem; margin-bottom: .125rem;
  border-radius: 1rem; color: #fff;
  background: linear-gradient(160deg, var(--blue), var(--indigo));
  box-shadow: 0 6px 18px color-mix(in oklab, var(--blue) 38%, transparent);
}
.setup-title { font-size: 1.25rem; font-weight: 680; letter-spacing: -.3px; }
.setup-text { font-size: .875rem; line-height: 1.38; color: var(--label-2); max-width: 32ch; }
.setup-btn {
  margin-top: .5rem; padding: .75rem 1.625rem; border-radius: var(--r-ctl);
  background: var(--tint); color: #fff; font-size: 1rem; font-weight: 590;
}

.sheet-note {
  font-size: .8125rem; line-height: 1.38; color: var(--label-2);
  padding: .875rem .25rem 0;
}

.stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-top: .625rem; }
.stat {
  padding: .75rem .625rem; border-radius: 1.125rem; text-align: center;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: .5px solid var(--glass-brd);
}
.stat-label { display: block; font-size: .75rem; color: var(--label-2); margin-bottom: .25rem; line-height: 1.2; }
.stat-value { display: block; font-size: 1.125rem; font-weight: 640; font-variant-numeric: tabular-nums; }

/* ── группы и списки ─────────────────────────────────────────────────── */
.group { margin-top: 1.625rem; }
.group-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .625rem; padding: 0 .25rem .5rem;
}
.group-head h2 { font-size: 1.25rem; font-weight: 680; letter-spacing: -.3px; }
.group-note, .group-foot { font-size: .8125rem; color: var(--label-2); }
.group-foot { padding: .5rem .375rem 0; line-height: 1.35; }
.group-actions { margin-top: .75rem; }

.card, .list {
  border-radius: var(--r-card); overflow: hidden;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: .5px solid var(--glass-brd);
  box-shadow: var(--glass-shadow);
}
.list:empty { display: none; }

.row {
  display: flex; align-items: center; gap: .75rem;
  width: 100%; padding: .75rem 1rem; min-height: 3.25rem;
  text-align: left; position: relative;
}
.row + .row::before {
  content: ''; position: absolute; left: 1rem; right: 0; top: 0;
  height: .5px; background: var(--separator);
}
.row.column { flex-direction: column; align-items: stretch; gap: .625rem; }
.row.tappable { transition: background .15s; }
.row.tappable:active { background: var(--fill); }
.row-title { flex: 1; font-size: 1.0625rem; }
.row-sub { display: block; font-size: .8125rem; color: var(--label-2); margin-top: .125rem; }
.row-chevron { width: .9375rem; height: .9375rem; flex: none; color: var(--label-3); }

/* индикатор живой котировки */
.dot {
  display: inline-block; width: .375rem; height: .375rem; border-radius: 50%;
  margin-right: .375rem; vertical-align: middle;
  background: var(--label-3);
}
.dot.live {
  background: var(--green);
  animation: pulse 2.4s var(--ease) infinite;
}
.dot.stale { background: var(--orange); animation: none; }
@keyframes pulse {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 color-mix(in oklab, var(--green) 55%, transparent); }
  55%      { opacity: .55; box-shadow: 0 0 0 4px transparent; }
}
.rate-value { font-size: 1.0625rem; color: var(--label-2); white-space: nowrap; }
.row-input, .row-select {
  text-align: right; font-size: 1.0625rem; color: var(--label-2);
  max-width: 45%; min-width: 3.75rem; padding: .25rem 0;
}
.row-select { -webkit-appearance: none; appearance: none; padding-right: .125rem; }
.row-input:focus, .row-select:focus { outline: none; color: var(--label); }
/* числовые поля без стрелочек: иначе браузер оставляет под них место справа
   и цифры в соседних строках стоят не ровно */
.row-input::-webkit-inner-spin-button,
.row-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.row-input { font-variant-numeric: tabular-nums; }

/* строка операции */
.op { display: flex; align-items: center; gap: .75rem; width: 100%;
      padding: .625rem .875rem; min-height: 3.625rem; text-align: left; position: relative; }
.op + .op::before {
  content: ''; position: absolute; left: 3.875rem; right: 0; top: 0;
  height: .5px; background: var(--separator);
}
.op:active { background: var(--fill); }

/* ── свайп по трате: кнопки справа ───────────────────────────────────── */
.swipe { position: relative; overflow: hidden; }
/* строка ведёт себя как соседние .op: тот же разделитель между ними */
.swipe + .swipe > .op::before {
  content: ''; position: absolute; left: 3.875rem; right: 0; top: 0;
  height: .5px; background: var(--separator);
}
.swipe > .op {
  position: relative; z-index: 1;
  touch-action: pan-y;               /* вертикально — прокрутка, вбок — наш свайп */
  -webkit-user-select: none; user-select: none;
  will-change: transform;
}
.swipe-actions {
  position: absolute; top: 0; right: 0; bottom: 0; width: 10rem;
  display: flex;
  transform: translateX(100%);
}
.swipe:not(.swiped) .swipe-actions { visibility: hidden; pointer-events: none; }
.swipe.removing { pointer-events: none; }
/* как в «Почте»: блоки на всю высоту строки, иконка и подпись под ней */
.swipe-btn {
  flex: 1 1 0; min-width: 0; height: 100%; overflow: hidden; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .75rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
  transition: filter .15s, flex-grow .24s var(--ease), padding .24s var(--ease);
}
.swipe-in { display: flex; flex-direction: column; align-items: center; gap: .1875rem; }
/* Полный свайп: «Удалить» забирает всё место, иконка — у края строки,
   как в iOS; «В платежи» сжимается в ноль. */
.swipe.full .swipe-btn.monthly { flex-grow: 0; }
.swipe.full .swipe-btn.delete { flex-grow: 1; justify-content: flex-start; padding-left: 1.5rem; }
.swipe-btn svg { width: 1.375rem; height: 1.375rem; }
.swipe-btn svg use { stroke-width: 1.9; }
.swipe-btn.monthly { background: var(--indigo); }
.swipe-btn.delete  { background: var(--red); }
.swipe-btn:active { filter: brightness(.85); }
.op-icon {
  width: 2.125rem; height: 2.125rem; flex: none; padding: .4375rem;
  border-radius: .625rem; color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.14);
}
.op-main { flex: 1; min-width: 0; }
/* Название и подпись переносятся на вторую строку, а не режутся: на узком
   экране «Кафе и еда вне дома» иначе превращалось в «Кафе и еда в…».
   Совсем длинное всё же обрезается — но только после двух строк. */
.op-title, .op-sub {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
}
.op-title { font-size: 1rem; font-weight: 500; line-height: 1.25; }
.op-sub { font-size: .8125rem; color: var(--label-2); margin-top: 1px; line-height: 1.3; }
.op-amount { font-size: 1.0625rem; font-weight: 600; font-variant-numeric: tabular-nums;
             white-space: nowrap; text-align: right; }
.op-amount.pos { color: var(--green); }
.op-amount.muted { color: var(--label-2); font-weight: 500; }
.op-orig { display: block; font-size: .75rem; color: var(--label-3);
           font-weight: 400; font-style: normal; text-align: right; }

/* строка «Лимит на день» */
.limit-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; width: 100%; padding: 1rem 1.125rem; text-align: left;
  transition: background .15s;
}
.limit-row:active { background: var(--fill); }
.limit-value { display: block; font-size: 1.5rem; font-weight: 680;
               font-variant-numeric: tabular-nums; }
.limit-note { display: block; font-size: .8125rem; color: var(--label-2); margin-top: .125rem; }
.limit-action { color: var(--tint); font-size: 1rem; font-weight: 500; flex: none; }

/* ── валюты: как «Язык и регион» в настройках iOS ── */
.cur-row { min-height: 3.625rem; }
.cur-tag { font-size: .9375rem; color: var(--label-2); flex: none; }
/* кнопка удаления — красный кружок с чертой, как в режиме правки списков iOS */
.cur-remove {
  width: 1.625rem; height: 1.625rem; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--red);
  transition: transform .15s var(--ease);
}
.cur-remove span { width: .6875rem; height: .125rem; border-radius: 1px; background: #fff; }
.cur-remove:active { transform: scale(.85); }
.add-row { color: var(--tint); font-size: 1.0625rem; }
/* разделители внутри обёртки и перед «Добавить…» — обычное правило .row + .row
   их не видит, потому что строки лежат в отдельном контейнере */
#cur-list .row + .row::before,
#cur-list:not(:empty) + .add-row::before {
  content: ''; position: absolute; left: 1rem; right: 0; top: 0;
  height: .5px; background: var(--separator);
}

/* поиск как в iOS 26: капсула из серого стекла */
.search {
  display: flex; align-items: center; gap: .375rem;
  height: 2.5rem; padding: 0 .875rem; margin: .25rem 0 .375rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--glass-hi), transparent 65%), var(--fill);
  box-shadow: inset 0 .0625rem .03125rem var(--glass-rim), inset 0 0 0 .03125rem var(--glass-brd);
}
.search svg { width: 1.125rem; height: 1.125rem; flex: none; color: var(--label-2); }
.search svg circle, .search svg path {
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}
.search input { flex: 1; min-width: 0; font-size: 1.0625rem; outline: none; }
.search input::placeholder { color: var(--label-2); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.pick-head {
  padding: 1.125rem .375rem .4375rem; font-size: .8125rem; font-weight: 500;
  color: var(--label-2); text-transform: uppercase; letter-spacing: .3px;
}
.pick-row { min-height: 3.5rem; }
.pick-row.added { opacity: .45; }
.pick-check { width: 1.25rem; height: 1.25rem; flex: none; color: var(--tint); }
.pick-check use { stroke-width: 2.4; }
.pick-empty { padding: 2.5rem 0; text-align: center; color: var(--label-2); }

/* правый верхний угол с двумя кнопками */
.nav-actions { display: flex; align-items: center; gap: .5rem; flex: none; }

.empty { padding: 1.625rem 1rem; text-align: center; color: var(--label-2); font-size: .9375rem; }

/* ── распределение денег месяца: как «Хранилище iPhone» ───────────────── */
.alloc { overflow: hidden; }
/* за крупной карточкой — тот же шаг, что между остальными блоками */
.hero + .alloc { margin-top: .625rem; }
.alloc-head { padding: 1.125rem 1.125rem 1rem; }
/* без крупной цифры полоса стоит сразу под подписью */
.alloc-head .hero-label + .alloc-bar { margin-top: .625rem; }
.alloc-amount {
  margin: .125rem 0 .875rem;
  font-size: 2rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.alloc-amount.neg { color: var(--red); }
/* серый трек — то, что осталось; зазор между долями — как в хранилище */
.alloc-bar {
  display: flex; gap: 2px; height: .5rem;
  border-radius: .25rem; overflow: hidden;
  /* пустая часть — тот же серый, что у точки «Осталось», только спокойнее */
  background: color-mix(in oklab, var(--gray) 32%, transparent);
}
.alloc-bar i { flex: none; height: 100%; transition: width .55s var(--ease); }

.alloc-row {
  position: relative; display: flex; align-items: center; gap: .75rem;
  min-height: 2.75rem; padding: .5rem 1.125rem;
}
/* разделитель от текста, а не от края — как у системных ячеек */
.alloc-row::before {
  content: ''; position: absolute; top: 0; right: 0;
  left: calc(1.125rem + .5rem + .75rem);
  height: .5px; background: var(--separator);
}
.alloc-dot { width: .5rem; height: .5rem; border-radius: 50%; flex: none; }
/* строка-кнопка: ведёт в свой раздел, стрелка как у системных ячеек */
.alloc-row.tappable { width: 100%; text-align: left; transition: background .15s; }
.alloc-row.tappable:active { background: var(--fill); }
.alloc-row .row-chevron { margin-left: -.375rem; }
/* подсветка блока, к которому привёл переход */
.flash { outline: 3px solid transparent; outline-offset: 2px; animation: flash 1.4s var(--ease); }
@keyframes flash {
  25%, 55% { outline-color: color-mix(in oklab, var(--tint) 55%, transparent); }
}

/* группа ячеек под блоком распределения */
.alloc + .info-list { margin-top: .625rem; }
.row-value {
  flex: none; font-size: 1.0625rem; color: var(--label-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.alloc-name {
  flex: 1; min-width: 0; font-size: 1.0625rem;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.alloc-val {
  flex: none; font-size: 1.0625rem; color: var(--label-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ── график ──────────────────────────────────────────────────────────── */
.chart-card { padding: 1rem .875rem .75rem; position: relative; overflow: visible; }
.chart { display: flex; align-items: flex-end; gap: .125rem; height: 7.375rem; }
.bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
       height: 100%; min-width: 0; padding: 0; border-radius: .25rem;
       transition: opacity .2s var(--ease); }
button.bar { cursor: pointer; }
/* пока открыто окошко, выбранный столбик ярче остальных */
.chart:has(.picked) .bar:not(.picked) { opacity: .35; }
.bar.picked i { background: var(--tint); }
.bar i {
  display: block; width: 100%; min-height: .1875rem; border-radius: .25rem;
  background: color-mix(in oklab, var(--tint) 72%, transparent);
  /* высоту выставляет скрипт: от прежней к новой, при смене месяца — от нуля */
  transition: height .55s var(--ease), background-color .2s;
}
.bar.today i { background: var(--tint); box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--tint) 30%, transparent); }
.chart-axis { display: flex; justify-content: space-between; margin-top: .5rem;
              font-size: .6875rem; color: var(--label-3); font-variant-numeric: tabular-nums; }

/* Окошко над столбиком — как всплывающие подсказки в «Здоровье» и «Экранном времени». */
.bar-pop {
  position: absolute; z-index: 20;
  width: 13.75rem; max-width: calc(100% - 1rem);
  padding: .75rem .875rem .625rem; border-radius: 1rem;
  background: var(--bg-elevated);
  border: .5px solid var(--separator);
  box-shadow: 0 10px 30px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.08);
  opacity: 0; transform: scale(.9) translateY(6px);
  transition: opacity .2s var(--ease), transform .32s var(--spring);
  pointer-events: none;
}
.bar-pop.shown { opacity: 1; transform: none; pointer-events: auto; }
.bp-head { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
/* дата уступает место первой, сумма не сжимается никогда */
.bp-date { min-width: 0; font-size: .8125rem; font-weight: 600; color: var(--label-2);
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-total { flex: none; font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums;
            white-space: nowrap; }
.bp-list { margin-top: .5rem; padding-top: .375rem; border-top: .5px solid var(--separator); }
.bp-row { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; font-size: .875rem; }
.bp-dot { width: .5rem; height: .5rem; border-radius: 50%; flex: none; }
.bp-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-sum { font-variant-numeric: tabular-nums; color: var(--label-2); white-space: nowrap; }
.bp-more, .bp-empty { font-size: .8125rem; color: var(--label-2); padding-top: .25rem; }
.bp-empty { margin-top: .375rem; }
/* хвостик указывает на выбранный столбик */
.bp-tail {
  position: absolute; bottom: -.375rem; width: .75rem; height: .75rem; margin-left: -.375rem;
  background: var(--bg-elevated);
  border-right: .5px solid var(--separator); border-bottom: .5px solid var(--separator);
  transform: rotate(45deg); border-bottom-right-radius: .1875rem;
}

/* ── траты по дням ─────────────────────────────────────────────────────── */
.day-group + .day-group { margin-top: 1.125rem; }
.day-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0 .375rem .4375rem; font-size: .8125rem; color: var(--label-2);
}
.day-head span { font-weight: 600; text-transform: none; }
.day-head b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── экран месяца: переход как в UINavigationController ── */
.screen.pushing { animation: push-in .38s var(--ease) both; }
.screen.popping { animation: push-out .26s var(--ease) both; }
@keyframes push-in { from { transform: translateX(100%); opacity: .6; } }
@keyframes push-out { to { transform: translateX(100%); opacity: .6; } }

.op .row-chevron { margin-left: .125rem; }

/* шапка экрана категории: крупная иконка над суммой */
.cat-hero { padding-top: 1.5rem; }
.cat-hero-icon { display: flex; justify-content: center; margin-bottom: .375rem; }
.cat-hero-icon .op-icon {
  width: 3.5rem; height: 3.5rem; padding: .8125rem; border-radius: 1.0625rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.cat-hero .hero-amount { margin-top: .25rem; }

/* ── чипы, сегменты ──────────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  padding: .4375rem .875rem; border-radius: 6.1875rem; font-size: .9375rem; font-weight: 500;
  background: var(--fill); color: var(--label-2);
  transition: transform .15s var(--ease), background .15s, color .15s;
}
.chip:active { transform: scale(.94); }
.chip.on { background: var(--tint); color: #fff; }

/* Выделение — отдельная «пилюля», которая переезжает между сегментами,
   как в системном UISegmentedControl. */
.segmented {
  position: relative; display: flex; gap: 0; padding: .1875rem;
  border-radius: 999px; background: var(--fill);
  isolation: isolate;
}
.seg-pill {
  position: absolute; top: .1875rem; bottom: .1875rem; left: .1875rem;
  width: 0; border-radius: 999px; z-index: 0;
  background: var(--segment); box-shadow: 0 2px 6px rgba(0,0,0,.14);
  transition: transform .32s var(--ease), width .32s var(--ease), background .2s;
}
.segmented button {
  position: relative; z-index: 1;
  flex: 1; min-width: 0; padding: .5625rem .5rem; border-radius: 999px;
  font-size: .9375rem; font-weight: 550; color: var(--label-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .22s var(--ease);
}
.segmented button.active { color: var(--label); }

/* ── таб-бар ─────────────────────────────────────────────────────────── */
/* Одна стеклянная капсула: две вкладки, кнопка добавления ровно в центре,
   ещё две вкладки. Все ячейки равной ширины, поэтому ряд читается ровным. */
.tabbar {
  --bar-h: 3.75rem;
  position: fixed; z-index: 40;
  left: max(var(--gutter), env(safe-area-inset-left));
  right: max(var(--gutter), env(safe-area-inset-right));
  bottom: calc(var(--safe-b) + .625rem);
  height: var(--bar-h);
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  align-items: stretch;
  padding: 0 .25rem; border-radius: calc(var(--bar-h) / 2);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: .5px solid var(--glass-brd);
  box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 14px 40px rgba(0,0,0,.16);
  transition: transform .36s var(--ease), opacity .26s var(--ease), visibility 0s;
}
/* Пока открыта шторка или клавиатура, панель уезжает вниз: иначе iOS
   поднимает её над клавиатурой, и она прыгает посреди экрана. */
html.bar-hidden .tabbar {
  transform: translateY(calc(100% + var(--safe-b) + 1.5rem));
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .3s var(--ease), opacity .2s var(--ease), visibility 0s .3s;
}
.tabbar button {
  position: relative; z-index: 1;
  min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .125rem; padding: 0 .125rem; border-radius: 1.375rem;
  /* как в iOS 26: невыбранные — основным цветом текста, не серым */
  color: var(--label);
  transition: color .25s, transform .18s var(--ease);
}
.tabbar button svg { width: 1.5rem; height: 1.5rem; flex: none; }
.tabbar button svg use { stroke-width: 1.9; }
.tabbar button span {
  font-size: .625rem; font-weight: 600; letter-spacing: -.2px; line-height: 1.1;
  /* подпись может чуть выйти за узкую ячейку (у соседей есть место),
     чтобы «Накоплено» не обрезалась на маленьких айфонах */
  max-width: calc(100% + .75rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tabbar button:active { transform: scale(.9); }
.tabbar button.active { color: var(--tint); }
.tabbar button.active svg use { stroke-width: 2.1; }
/* Капсула под выбранной вкладкой, как в «Здоровье» на iOS 26: переезжает
   к новой вкладке. Место и ширину ставит скрипт. */
.tab-pill {
  position: absolute; z-index: 0; left: 0; top: .3125rem; bottom: .3125rem;
  width: 0; border-radius: 999px;
  background: var(--fill);
  pointer-events: none;
  /* ровный ход без проскока: быстро стартует и мягко тормозит у цели */
  transition: transform .42s var(--ease), width .42s var(--ease), opacity .2s var(--ease);
}

/* Центральная кнопка — «стекло с заливкой», как главные кнопки в iOS 26:
   ровный системный синий, блик сверху, светлый ободок и лёгкая тень
   внутри снизу. Без наружного свечения. При нажатии чуть вырастает
   и светлеет — так отзываются стеклянные кнопки в iOS 26. */
.tab-add { padding: 0 !important; }
.tabbar .tab-add:active { transform: none; }
.tab-add-circle {
  position: relative;
  width: 2.875rem; height: 2.875rem; display: grid; place-items: center;
  border-radius: 50%; color: #fff;
  background:
    radial-gradient(120% 85% at 50% 0%, rgba(255,255,255,.42), rgba(255,255,255,0) 58%),
    var(--tint);
  box-shadow:
    inset 0 .0625rem .03125rem rgba(255,255,255,.6),
    inset 0 -.0625rem .125rem rgba(0,0,0,.14),
    inset 0 0 0 .03125rem rgba(255,255,255,.28),
    0 .125rem .375rem rgba(0,0,0,.12);
  transition: transform .42s var(--spring), filter .2s var(--ease);
}
.tab-add-circle svg { width: 1.375rem; height: 1.375rem; }
.tab-add-circle svg use { stroke-width: 2.7; }
.tab-add:active .tab-add-circle { transform: scale(1.1); filter: brightness(1.12) saturate(1.05); transition-duration: .18s; }

/* ── шторка ──────────────────────────────────────────────────────────── */
.sheet-root { position: fixed; inset: 0; z-index: 60; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.35);
               animation: fade .3s var(--ease) both; }
@keyframes fade { from { opacity: 0; } }

.sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 92dvh; display: flex; flex-direction: column;
  border-radius: 2.125rem 2.125rem 0 0;
  background: var(--bg-elevated);
  border-top: .5px solid var(--glass-brd);
  box-shadow: 0 -8px 40px rgba(0,0,0,.28);
  animation: slideup .42s var(--ease) both;
  padding-bottom: var(--safe-b);
}
@keyframes slideup { from { transform: translateY(100%); } }
.sheet.closing { animation: slidedown .28s var(--ease) both; }
@keyframes slidedown { to { transform: translateY(100%); } }
.sheet-root.closing .sheet-scrim { animation: fade .28s var(--ease) reverse both; }

/* ── подтверждение действия (action sheet) ─────────────────────────── */
.ask-root { position: fixed; inset: 0; z-index: 70; }
.ask-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.4);
             animation: fade .3s var(--ease) both; }
.ask {
  position: absolute; left: .5rem; right: .5rem; bottom: calc(var(--safe-b) + .5rem);
  max-width: 32rem; margin: 0 auto;
  display: grid; gap: .5rem;
  animation: slideup .42s var(--ease) both;
}
.ask-group, .ask-cancel {
  border-radius: 1.5rem; overflow: hidden;
  background: var(--bg-ask);
  box-shadow: 0 8px 30px rgba(0,0,0,.18);
}
.ask-title {
  padding: .875rem 1rem; text-align: center;
  font-size: .8125rem; line-height: 1.35; color: var(--label-2);
}
.ask-btn {
  display: block; width: 100%; min-height: 3.5rem; padding: 0 1rem;
  font-size: 1.25rem; color: var(--tint); text-align: center;
  transition: background .15s;
}
.ask-group .ask-btn { border-top: .5px solid var(--separator); }
.ask-btn.destructive { color: var(--red); }
.ask-btn:active { background: var(--fill); }
.ask-cancel { font-weight: 600; }
.ask-root.closing .ask { animation: slidedown .28s var(--ease) both; }
.ask-root.closing .ask-scrim { animation: fade .28s var(--ease) reverse both; }

.sheet-grabber {
  width: 2.25rem; height: .3125rem; border-radius: 6.1875rem; background: var(--label-3);
  margin: .5rem auto 0; flex: none;
}
/* Шапка шторки: кнопки по краям никогда не сжимаются, заголовок по центру.
   Боковые колонки делят остаток поровну, пока хватает места, — поэтому
   заголовок стоит строго посередине, а длинный обрезается многоточием. */
.sheet-head {
  display: grid; align-items: center; gap: .625rem;
  grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr);
  padding: .75rem 1rem .5rem;
}
.sheet-titles { min-width: 0; text-align: center; }
/* заголовок не влез при строгом центре — как в iOS, отдаём ему место
   между кнопками целиком: он чуть смещается, но читается полностью */
.sheet-head.loose { grid-template-columns: max-content minmax(0, 1fr) max-content; }
.sheet-head h2 {
  font-size: 1.0625rem; font-weight: 640;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sheet-sub {
  font-size: .75rem; color: var(--label-2); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sheet-cancel.icon-btn {
  justify-self: start; width: 2.5rem; height: 2.5rem; padding: .6875rem;
  background: linear-gradient(180deg, var(--glass-hi), transparent 62%), var(--fill);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 .0625rem .03125rem var(--glass-rim), inset 0 0 0 .03125rem var(--glass-brd);
}
.sheet-done {
  justify-self: end; width: 2.5rem; height: 2.5rem; padding: .5625rem;
  display: grid; place-items: center; border-radius: 50%;
  transition: transform .42s var(--spring), filter .2s var(--ease);
}
.sheet-done:active { transform: scale(1.1); filter: brightness(1.1); transition-duration: .18s; }
.sheet-done[disabled] { background: var(--fill); color: var(--label-3); box-shadow: none; }
.sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch;
              padding: .375rem 1rem 1.375rem;
              /* только вертикально: вбок шторку не утащить, даже если
                 что-то внутри окажется шире на пиксель */
              overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; }

/* поля ввода в шторке */
/* Три колонки одинаковой крайней ширины: сумма в середине стоит по центру
   шторки, а валюта выравнивается по её середине средствами сетки —
   без абсолютного позиционирования, из-за которого чип уезжал вниз. */
.amount-field {
  --cur-w: 4.125rem;
  display: grid; align-items: center;
  grid-template-columns: var(--cur-w) minmax(0, 1fr) var(--cur-w);
  padding: 1rem 0 .625rem;
  cursor: text;
}
.amount-field input {
  grid-column: 2;
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
  font-size: 3.25rem; font-weight: 700; letter-spacing: -.0308em;
  /* плотная строка: её центр совпадает с оптическим центром цифр */
  line-height: 1;
  width: 100%; min-width: 0;
  text-align: center; font-variant-numeric: tabular-nums;
  transition: font-size .12s var(--ease);
}
.amount-field input:focus { outline: none; }
.amount-field input::placeholder { color: var(--label-3); }
/* Ступени под ширину средней колонки — пороги сверены замером. */
.amount-field input.long { font-size: 2.5rem; letter-spacing: -.0275em; }
.amount-field input.longer { font-size: 1.75rem; letter-spacing: -.0179em; }
.amount-field input.longest { font-size: 1.375rem; letter-spacing: -.2px; }
.amount-cur {
  /* line-height: 1 у суммы делает центр строки и оптический центр цифр
     практически одним и тем же, так что сетке хватает align-items: center */
  grid-column: 3; justify-self: start;
  max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  font-size: .9375rem; font-weight: 600; color: var(--tint);
  padding: .3125rem .625rem; border-radius: 999px; background: var(--fill);
  text-align: center;
}
.amount-hint { text-align: center; font-size: .8125rem; color: var(--label-2);
               min-height: 1.125rem; margin-bottom: .625rem; }

.field { margin-top: .875rem; }
.field-label { display: block; font-size: .8125rem; font-weight: 500; color: var(--label-2);
               text-transform: uppercase; letter-spacing: .4px; padding: 0 .25rem .4375rem; }
.field input[type=text], .field input[type=date], .field input[type=number], .field select {
  width: 100%; padding: .8125rem .9375rem; border-radius: var(--r-ctl);
  background: var(--fill); font-size: 1.0625rem;
}
.field select { -webkit-appearance: none; appearance: none; }
/* Поле даты в iOS живёт своей шириной и вылезает за край шторки —
   из-за этого её можно было таскать вбок. Прижимаем к ширине колонки,
   а дату — к левому краю, как у остальных полей. */
.field input[type=date] {
  -webkit-appearance: none; appearance: none;
  display: block; min-width: 0; max-width: 100%; box-sizing: border-box;
  text-align: left; min-height: 2.9375rem;
}
.field input[type=date]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.field input:focus, .field select:focus {
  outline: 2.5px solid color-mix(in oklab, var(--tint) 50%, transparent);
}

/* minmax(0, …): иначе длинная подпись («Развлечения») раздвигает колонку,
   и на iPhone сетка вылезает за край шторки на пару пикселей */
.cat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .625rem; }
.cat {
  display: flex; flex-direction: column; align-items: center; gap: .3125rem;
  padding: .25rem 0; transition: transform .15s var(--ease);
}
.cat:active { transform: scale(.9); }
.cat i {
  width: 2.875rem; height: 2.875rem; padding: .6875rem; border-radius: 50%;
  background: var(--c); color: #fff;
  transition: box-shadow .22s var(--ease);
}
.cat span {
  font-size: .625rem; color: var(--label-2); text-align: center; line-height: 1.15;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* тонкое кольцо в цвет самой категории: зазор фоном, затем обод */
.cat.on i { box-shadow: 0 0 0 2.5px var(--bg-elevated), 0 0 0 4.5px var(--c); }
.cat.on span { color: var(--label); font-weight: 590; }

.sheet-danger { margin-top: 1.25rem; }

/* ── системный переключатель UISwitch ── */
.toggle-card {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  min-height: 3.125rem; padding: .5625rem .75rem .5625rem 1rem;
  border-radius: var(--r-ctl); background: var(--fill);
  cursor: pointer;
}
.toggle-title { font-size: 1.0625rem; }
.ios-switch {
  -webkit-appearance: none; appearance: none;
  position: relative; flex: none; margin: 0;
  width: 3.1875rem; height: 1.9375rem; border-radius: 1rem;
  background: var(--fill-strong);
  transition: background .25s var(--ease);
  cursor: pointer;
}
.ios-switch::after {
  content: ''; position: absolute; top: .125rem; left: .125rem;
  width: 1.6875rem; height: 1.6875rem; border-radius: 50%; background: #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.16);
  transition: transform .3s var(--spring);
}
.ios-switch:checked { background: var(--green); }
.ios-switch:checked::after { transform: translateX(20px); }
.ios-switch:focus-visible { outline: 2.5px solid color-mix(in oklab, var(--tint) 55%, transparent); outline-offset: 2px; }

.tag-unexpected { color: var(--orange); font-weight: 500; }

/* ── тост ────────────────────────────────────────────────────────────── */
/* Уведомление всплывает и уходит по кривой iOS, а не появляется рывком.
   Скрывается прозрачностью, поэтому уход тоже плавный. */
.toast {
  position: fixed; z-index: 80; left: 50%;
  bottom: calc(var(--safe-b) + 5.375rem);
  max-width: calc(100vw - 2.5rem);
  padding: .6875rem 1.25rem; border-radius: 6.1875rem;
  font-size: .9375rem; font-weight: 500; text-align: center;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: .5px solid var(--glass-brd);
  box-shadow: var(--glass-shadow);
  opacity: 0; transform: translate(-50%, 16px) scale(.92);
  transition: opacity .3s var(--ease), transform .42s var(--spring);
  pointer-events: none;
  /* одна строка по умолчанию; перенос включаем только если текст не влез */
  white-space: nowrap; overflow: hidden;
}
.toast.wrap { white-space: normal; overflow: visible; line-height: 1.3; }
.toast.shown { opacity: 1; transform: translate(-50%, 0) scale(1); }
.toast.err { color: var(--red); }

/* ── прочее ──────────────────────────────────────────────────────────── */
.skeleton { color: var(--label-3); }
/* Переход между темами: кроссфейд всего экрана вместо мгновенной подмены. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .38s;
  animation-timing-function: cubic-bezier(.32,.72,0,1);
}
/* Подстраховка для браузеров без View Transitions: доводим цвета плавно. */
html.theme-fade,
html.theme-fade body,
html.theme-fade .card,
html.theme-fade .list,
html.theme-fade .card-glass,
html.theme-fade .tabbar,
html.theme-fade .sheet,
html.theme-fade .stat,
html.theme-fade .segmented,
html.theme-fade .chip {
  transition: background-color .38s var(--ease), color .38s var(--ease),
              border-color .38s var(--ease), box-shadow .38s var(--ease);
}

/* Переключение вкладок: экран целиком уезжает в сторону, новый въезжает
   с другой — как листание страниц. Панель вкладок остаётся на месте. */
.tabbar { view-transition-name: tabbar; }
/* панель при смене вкладок — живая, без кроссфейда: капсула под
   выбранной вкладкой при этом едет своей анимацией */
:root[data-nav]::view-transition-old(tabbar) { display: none; }
:root[data-nav]::view-transition-new(tabbar) { animation: none; }
:root[data-nav]::view-transition-old(root),
:root[data-nav]::view-transition-new(root) {
  animation-duration: .38s;
  animation-timing-function: cubic-bezier(.32,.72,0,1);
  animation-fill-mode: both;
  mix-blend-mode: normal;
}
:root[data-nav="fwd"]::view-transition-old(root)  { animation-name: nav-out-left; }
:root[data-nav="fwd"]::view-transition-new(root)  { animation-name: nav-in-right; }
:root[data-nav="back"]::view-transition-old(root) { animation-name: nav-out-right; }
:root[data-nav="back"]::view-transition-new(root) { animation-name: nav-in-left; }
@keyframes nav-out-left  { to   { transform: translateX(-100%); } }
@keyframes nav-in-right  { from { transform: translateX(100%); } }
@keyframes nav-out-right { to   { transform: translateX(100%); } }
@keyframes nav-in-left   { from { transform: translateX(-100%); } }
/* въезд блока с нужной стороны: смена месяца, запасной вариант вкладок */
.slide-fwd  { animation: slide-in-right .34s var(--ease) both; }
.slide-back { animation: slide-in-left .34s var(--ease) both; }
@keyframes slide-in-right { from { transform: translateX(30%); opacity: 0; } }
@keyframes slide-in-left  { from { transform: translateX(-30%); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
/* на широком экране держим телефонную колонку по центру */
@media (min-width: 620px) {
  #app { max-width: 520px; margin: 0 auto; }
  .tabbar { max-width: 520px; left: 50%; right: auto; transform: translateX(-50%); width: 100%; }
  .sheet { max-width: 520px; left: 50%; transform: translateX(-50%); border-radius: 2.125rem 2.125rem 0 0; }
  @keyframes slideup { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } }
  @keyframes slidedown { from { transform: translate(-50%, 0); } to { transform: translate(-50%, 100%); } }
}