/* ===== css/fonts.css ===== */
/* ==========================================================================
   Onest — шрифт хранится в проекте (папка fonts/), в интернет за ним ходить не нужно.
   Лицензия SIL OFL 1.1 — текст в fonts/OFL.txt. Вариативный: один файл — все начертания 300–600.
   unicode-range: браузер скачивает только те наборы, символы которых реально есть на странице.
   ========================================================================== */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("fonts/onest-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("fonts/onest-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("fonts/onest-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("fonts/onest-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== css/tokens.css ===== */
/* ==========================================================================
   Arkad — design tokens
   Светлая тема по умолчанию, тёмная — через [data-theme="dark"].
   Все цвета/радиусы/тени живут здесь: меняешь токен — меняется весь интерфейс.
   ========================================================================== */

:root {
  color-scheme: light;

  --font: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* поверхности */
  --bg: #e4e4e8;
  --card: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .6));
  --card-solid: #f4f4f6;
  --card-border: rgba(255, 255, 255, .8);
  --card-shadow: 0 1px 0 rgba(255, 255, 255, .95) inset, 0 14px 34px -18px rgba(26, 28, 44, .32), 0 2px 6px -3px rgba(26, 28, 44, .08);
  --well: rgba(255, 255, 255, .6);
  --well-strong: rgba(255, 255, 255, .86);
  --well-dim: rgba(19, 19, 22, .045);
  --line: rgba(19, 19, 22, .09);
  --overlay: rgba(18, 18, 24, .38);

  /* кнопки без рамок: матовая заливка + тонкая линия-«волосок» + мягкая тень */
  --btn-fill: rgba(19, 19, 22, .055);
  --btn-fill-hover: rgba(19, 19, 22, .09);
  --btn-hair: rgba(19, 19, 22, .11);
  --btn-shadow: 0 1px 2px rgba(19, 19, 22, .05);
  --ring: rgba(110, 190, 145, .42);

  /* текст */
  --text: #131316;
  --text-2: #55565e;
  --text-3: #6b6c75;
  --ink: #131316;
  --on-ink: #ffffff;

  /* акцент: мягкий мятный (вместо неонового лайма) — для «положительных» кнопок, меток и плавающего «+» */
  --accent: #cdebd8;
  --accent-strong: #8fd1a8;
  --on-accent: #0c3b22;

  /* статусы: заливка для меток/полос + отдельный тёмный тон для текста */
  --pos: #0a7a2c;
  --pos-fill: #34ab55;
  --pos-bg: rgba(52, 171, 85, .15);
  --neg: #bf2f49;
  --neg-fill: #e2536c;
  --neg-bg: rgba(226, 83, 108, .14);
  --warn: #a95508;
  --warn-fill: #ee8c33;
  --warn-bg: rgba(238, 140, 51, .17);
  --slate: #54698f;
  --slate-bg: rgba(84, 105, 143, .14);

  /* точечный LED-шрифт */
  --dm-ghost: rgba(19, 19, 22, .085);

  /* градиентные плитки (аврора) */
  --aurora-a: #f1e27d;
  --aurora-b: #9fb2d6;
  --aurora-c: #f2b9c4;
  --tone-save:
    radial-gradient(90% 75% at 12% 0%, #f8d890 0%, rgba(248, 216, 144, 0) 72%),
    radial-gradient(110% 90% at 92% 105%, #82cd76 0%, rgba(130, 205, 118, 0) 70%),
    linear-gradient(180deg, #efde9f, #b4dc93);
  --tone-debt:
    radial-gradient(90% 80% at 100% 0%, #f7b5c1 0%, rgba(247, 181, 193, 0) 72%),
    radial-gradient(100% 85% at 0% 105%, #f8c698 0%, rgba(248, 198, 152, 0) 72%),
    linear-gradient(180deg, #f5d6cf, #f2cfb4);
  --tone-balance:
    radial-gradient(75% 95% at 100% 0%, #93a8d1 0%, rgba(147, 168, 209, 0) 68%),
    radial-gradient(70% 80% at 0% 100%, rgba(150, 215, 175, .38) 0%, rgba(150, 215, 175, 0) 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .62));
  --tone-calm-a: #f2b9c4;
  --tone-calm-b: #f8c698;
  --tone-calm-c: #fbe58f;

  /* радиусы */
  --r-xl: 34px;
  --r-lg: 26px;
  --r-md: 18px;
  --r-sm: 12px;

  /* ритм */
  --gap: 20px;
  --pad: 26px;
  --gutter: 28px;

  /* безопасные зоны (телефон / Telegram) — переопределяются в telegram.js */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  /* высота нижней панели: 8 + 50 + низ (зона полоски «Домой» или 8 px) + кромка — от неё считаются «+» и низ страницы */
  --tabbar-h: max(67px, calc(var(--safe-bottom) + 53px));

  /* движение */
  --ease: cubic-bezier(.22, .8, .24, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .5, 1);
  /* Pro: фирменный градиент (переключатель, рамка, активный раздел) */
  --pro-grad: linear-gradient(135deg, #6d7dff 0%, #8b6cff 55%, #b46cff 100%);
  --pro-glow: rgba(120, 110, 255, .55);
  /* колесо: мягкая палитра долей (различимы и без цвета — в легенде подпись и процент) */
  --d1: #7f8cf5;
  --d2: #f0a46b;
  --d3: #54bf9e;
  --d4: #b98cf0;
  --d5: #62b6e8;
  --d6: #ee8aa8;
  --d-rest: #b6b9c6;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  /* фон — фирменный цвет аватарки #2B3246; поверхности (окна, нижняя панель) чуть светлее */
  --bg: #2b3246;
  --card: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .05));
  --card-solid: #353d55;
  --card-border: rgba(255, 255, 255, .09);
  --card-shadow: 0 1px 0 rgba(255, 255, 255, .07) inset, 0 16px 36px -20px rgba(8, 11, 22, .7);
  --well: rgba(255, 255, 255, .07);
  --well-strong: rgba(255, 255, 255, .12);
  --well-dim: rgba(255, 255, 255, .05);
  --line: rgba(255, 255, 255, .1);
  --overlay: rgba(10, 13, 24, .6);

  --btn-fill: rgba(255, 255, 255, .08);
  --btn-fill-hover: rgba(255, 255, 255, .13);
  --btn-hair: rgba(255, 255, 255, .11);
  --btn-shadow: none;
  --ring: rgba(143, 217, 173, .3);

  --text: #f3f3f6;
  --text-2: #b0b1ba;
  --text-3: #8a8b95;
  --ink: #f3f3f6;
  --on-ink: #131316;

  --pos: #5fd484;
  --pos-fill: #46bf6b;
  --pos-bg: rgba(70, 191, 107, .17);
  --neg: #ff8196;
  --neg-fill: #ee647c;
  --neg-bg: rgba(238, 100, 124, .18);
  --warn: #ffab5e;
  --warn-fill: #f2994a;
  --warn-bg: rgba(242, 153, 74, .18);
  --slate: #9fb4dd;
  --slate-bg: rgba(159, 180, 221, .16);

  --dm-ghost: rgba(255, 255, 255, .09);

  --accent: #8fd9ad;
  --accent-strong: #6cc795;
  --on-accent: #0d2a1b;

  --aurora-a: #3b4a78;
  --aurora-b: #34406b;
  --aurora-c: #4a4070;
  --tone-save:
    radial-gradient(90% 75% at 12% 0%, #6a6340 0%, rgba(106, 99, 64, 0) 72%),
    radial-gradient(110% 90% at 92% 105%, #2f7d5c 0%, rgba(47, 125, 92, 0) 70%),
    linear-gradient(180deg, #34493f, #27493d);
  --tone-debt:
    radial-gradient(90% 80% at 100% 0%, #7a2f46 0%, rgba(122, 47, 70, 0) 72%),
    radial-gradient(100% 85% at 0% 105%, #7a4a22 0%, rgba(122, 74, 34, 0) 72%),
    linear-gradient(180deg, #3a2328, #3b2a20);
  --tone-balance:
    radial-gradient(75% 95% at 100% 0%, #324a82 0%, rgba(50, 74, 130, 0) 68%),
    radial-gradient(70% 80% at 0% 100%, rgba(143, 217, 173, .16) 0%, rgba(143, 217, 173, 0) 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .04));
  --tone-calm-a: #7a2f46;
  --tone-calm-b: #7a4a22;
  --tone-calm-c: #6b5a24;
  --d1: #9aa5ff;
  --d2: #f5b685;
  --d3: #6fd3b2;
  --d4: #c9a3ff;
  --d5: #7ec8f2;
  --d6: #f5a0ba;
  --d-rest: #7d8296;
}

/* ==========================================================================
   Mini — «матовое стекло» (по образцу макета Payno): холодный светло-серый фон с мягким сине-серым «облаком» сверху,
   плашки без теней — полупрозрачные, с лёгким зерном и дымкой в углу, будто стекло чуть запотело; тонкая белая кромка.
   Фон неподвижный, поэтому настоящий blur не нужен: размытие гладкого градиента выглядит так же, а телефону ничего не стоит.
   Главный цвет — графитово-синий (#3e4b6a), статусы — приглушённые зелёный и розовый.
   Шрифт: на iPhone/Mac — системный SF Pro (как в макете), на остальных — Onest из проекта.
   Селекторы с :not([data-theme="dark"]) / [data-theme="dark"] — чтобы светлые значения Mini не перебивали тёмную тему.
   ========================================================================== */
:root[data-mode="minimum"] {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Onest", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  /* зерно «запотевшего» стекла: шум рисуется самим браузером из этого описания, ничего не скачивается */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-op: .1;
  --r-xl: 30px;
  --r-lg: 22px;
}
:root[data-mode="minimum"]:not([data-theme="dark"]) {
  /* светлая чуть темнее (2026-10-20): фон — холодный «туман», облако сдвинуто влево-вверх и гуще, второе — справа */
  --bg: #dde1e8;
  --grain-op: .13;
  --backdrop:
    radial-gradient(80% 50% at 28% -12%, rgba(64, 84, 128, .72) 0%, rgba(64, 84, 128, 0) 72%),
    radial-gradient(45% 38% at 100% 22%, rgba(120, 140, 182, .5) 0%, rgba(120, 140, 182, 0) 70%),
    radial-gradient(60% 45% at 0% 100%, rgba(150, 166, 196, .5) 0%, rgba(150, 166, 196, 0) 70%),
    linear-gradient(170deg, #d4d9e2 0%, #dfe2e9 50%, #d9dde5 100%);
  --glass: rgba(255, 255, 255, .42);
  /* «зеркальное» матовое стекло: косой блик сверху-слева (как отражение окна), мягкая дымка, внизу плотнее */
  --card:
    linear-gradient(128deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .16) 26%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0) 78%, rgba(255, 255, 255, .18) 100%),
    radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, rgba(246, 248, 251, .62), rgba(240, 243, 247, .46));
  --card-solid: #eef1f5;
  --card-border: rgba(255, 255, 255, .85);
  /* кромка: светлая линия сверху и тонкая «грань» снизу — без теней */
  --card-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .35);
  --well: rgba(255, 255, 255, .5);
  --well-strong: rgba(255, 255, 255, .72);
  --well-dim: rgba(255, 255, 255, .42);
  --line: rgba(46, 58, 85, .1);
  --overlay: rgba(36, 44, 64, .32);

  --btn-fill: rgba(255, 255, 255, .55);
  --btn-fill-hover: rgba(255, 255, 255, .8);
  --btn-hair: rgba(255, 255, 255, .85);
  --btn-shadow: none;
  --ring: rgba(78, 98, 140, .3);

  --text: #1c2231;
  --text-2: #5d6476;
  --text-3: #6c7385;
  --ink: #3e4b6a;
  --on-ink: #ffffff;

  --accent: #dfe5f0;
  --accent-strong: #8b9cc0;
  --on-accent: #2e3a55;

  --pos: #2f7d4a;
  --pos-fill: #5bb07c;
  --pos-bg: rgba(91, 176, 124, .16);
  --neg: #b0405a;
  --neg-fill: #e07a8f;
  --neg-bg: rgba(224, 122, 143, .16);
  --slate: #4e5f84;
  --slate-bg: rgba(78, 95, 132, .1);

  --dm-ghost: rgba(46, 58, 85, .08);
  --tone-balance: var(--card);
  --tone-save: var(--card);
  --tone-debt: var(--card);
  --tone-calm-a: rgba(150, 168, 200, .35);
  --tone-calm-b: rgba(190, 200, 220, .3);
  --tone-calm-c: rgba(120, 140, 180, .25);

  --d1: #4f6290;
  --d2: #d99a72;
  --d3: #6fae93;
  --d4: #9a8cc4;
  --d5: #7fa7cf;
  --d6: #d48ca2;
  --d-rest: #b3bac8;
}
:root[data-mode="minimum"][data-theme="dark"] {
  /* графит: тот же приём, что у светлой — «облако» сверху, матовое стекло, без теней; только ночью */
  --bg: #23262c;
  --grain-op: .12;
  --backdrop:
    radial-gradient(70% 42% at 52% -8%, rgba(104, 118, 146, .5) 0%, rgba(104, 118, 146, 0) 72%),
    radial-gradient(40% 30% at 92% 4%, rgba(90, 98, 114, .55) 0%, rgba(90, 98, 114, 0) 70%),
    radial-gradient(55% 40% at 0% 100%, rgba(74, 82, 98, .5) 0%, rgba(74, 82, 98, 0) 70%),
    linear-gradient(180deg, #2a2d34 0%, #24272d 55%, #212329 100%);
  --card:
    radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .04));
  --card-solid: #2e3138;
  --card-border: rgba(255, 255, 255, .1);
  --card-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  --well: rgba(255, 255, 255, .06);
  --well-strong: rgba(255, 255, 255, .1);
  --well-dim: rgba(255, 255, 255, .04);
  --line: rgba(255, 255, 255, .09);
  --overlay: rgba(12, 14, 18, .55);

  --btn-fill: rgba(255, 255, 255, .07);
  --btn-fill-hover: rgba(255, 255, 255, .12);
  --btn-hair: rgba(255, 255, 255, .1);
  --btn-shadow: none;
  --ring: rgba(150, 166, 200, .3);

  --text: #eef0f4;
  --text-2: #aeb3bf;
  --text-3: #959baa;
  --ink: #5d6d93;
  --on-ink: #ffffff;

  --accent: #3b4357;
  --accent-strong: #8b9cc0;
  --on-accent: #dfe5f2;

  --slate: #a9b8d6;
  --slate-bg: rgba(169, 184, 214, .14);
  --dm-ghost: rgba(255, 255, 255, .08);

  --tone-balance: var(--card);
  --tone-save: var(--card);
  --tone-debt: var(--card);
  --tone-calm-a: rgba(104, 118, 146, .3);
  --tone-calm-b: rgba(90, 98, 114, .3);
  --tone-calm-c: rgba(74, 82, 98, .3);

  --d1: #8d9fcc;
  --d2: #e0aa86;
  --d3: #7cc0a3;
  --d4: #b0a3dc;
  --d5: #8fb8de;
  --d6: #e0a0b4;
  --d-rest: #6c7282;
}

/* ===== css/base.css ===== */
/* ==========================================================================
   Arkad — основа: сброс, типографика, фон, каркас (шапка, навигация)
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
}

/* Прокрутка живёт в .scroller, а не в документе: у страницы нет собственной прокрутки, и закреплённые элементы
   (нижняя панель, «+») не двигаются при смене разделов и при сворачивании панелей браузера на iPhone. */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.scroller {
  position: fixed;
  inset: 0 0 var(--kb, 0px) 0;      /* над экранной клавиатурой: поле всегда можно докрутить в видимую часть */
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  outline: none;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
svg { display: block; flex: none; }
.ic { width: 20px; height: 20px; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

:focus { outline: none; }
/* кольцо фокуса — только для клавиатуры и только у интерактивных элементов */
:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ink) 78%, transparent);
  outline-offset: 3px;
}
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }

/* выделение текста — только там, где оно действительно нужно (поля, заметки, текст политики) */
html { touch-action: manipulation; -webkit-touch-callout: none; }
body { -webkit-user-select: none; user-select: none; }
/* документ не прокручивается и не «подкручивается» под клавиатуру */
body { position: fixed; inset: 0; width: 100%; }
input, textarea, select, [contenteditable], .selectable, .bubble__body, .doc {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
img, svg { -webkit-user-drag: none; }
::selection { background: color-mix(in srgb, var(--accent) 75%, transparent); color: var(--text); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- фон-аврора ---------- */
.aurora {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;          /* «большой» вьюпорт — не дёргается, когда адресная строка прячется */
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg);
}
.aurora::before,
.aurora::after {
  content: "";
  position: absolute;
  width: 78vmax;
  height: 78vmax;
  border-radius: 50%;
  will-change: transform;
}
.aurora::before {
  top: -38vmax; right: -22vmax;
  background: radial-gradient(closest-side, var(--aurora-a), transparent 72%);
  opacity: .8;
  animation: drift-a 46s ease-in-out infinite alternate;
}
.aurora::after {
  top: -26vmax; left: -34vmax;
  background: radial-gradient(closest-side, var(--aurora-b), transparent 72%);
  opacity: .75;
  animation: drift-b 58s ease-in-out infinite alternate;
}
.aurora i {
  position: absolute;
  bottom: -40vmax; right: -10vmax;
  width: 70vmax; height: 70vmax;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--aurora-c), transparent 72%);
  opacity: .5;
  animation: drift-a 64s ease-in-out infinite alternate-reverse;
}
@keyframes drift-a { to { transform: translate3d(-6vmax, 5vmax, 0) scale(1.08); } }
@keyframes drift-b { to { transform: translate3d(7vmax, 4vmax, 0) scale(1.05); } }

/* ---------- каркас ---------- */
.app {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  min-height: 100%;
  overflow-x: clip;
  padding:
    calc(var(--safe-top) + 14px)
    calc(var(--gutter) + var(--safe-right))
    calc(var(--tabbar-h) + 56px)   /* низ страницы — над нижней панелью и «+» (он заходит лишь на поля последней карточки) */
    calc(var(--gutter) + var(--safe-left));
}

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.045em;
}
.brand__mark {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--on-ink);
}
.brand__mark svg { width: 20px; height: 14px; }

.nav {
  position: relative;
  display: none;
  margin: 0 auto;
  padding: 5px;
  gap: 4px;
  border-radius: 999px;
  background: var(--well);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}
.nav a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  color: var(--text-2);
  font-weight: 500;
  transition: color .25s var(--ease), background-color .25s var(--ease);
}
.nav a svg { width: 18px; height: 18px; }
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] { color: var(--on-ink); }

/* скользящая «таблетка» активного раздела (двигает JS: left/top = 0, размер и сдвиг — через transform) */
.ind {
  position: absolute;
  left: 0; top: 0;
  z-index: 0;
  width: 0; height: 0;
  background: var(--ink);
  box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--ink) 85%, transparent);
  pointer-events: none;
  opacity: 0;
  transition: transform .5s var(--ease), width .5s var(--ease), height .5s var(--ease), opacity .2s ease;
  will-change: transform;
}
.nav .ind { border-radius: 999px; }
.tabbar .ind { border-radius: 18px; }

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* переключатель версии «Mini | Pro» — рядом с логотипом; компактнее обычных сегментов, но в кнопку легко попасть */
.topbar .mode-switch { flex: none; padding: 3px; }
.topbar .mode-switch button { min-height: 34px; padding: 0 12px; font-size: 13px; letter-spacing: -.01em; transition: color .32s var(--ease); }
.topbar .mode-switch.has-thumb [aria-pressed="true"] { background: none; }
/* «капля» под выбранной версией: края едут отдельно (left/right) — передний с лёгкой пружиной, задний догоняет.
   Двигается один маленький элемент, поэтому left/right здесь дешёвые. В Pro капля светится градиентом. */
.ms-thumb {
  position: absolute;
  z-index: 0;
  top: 3px; bottom: 3px;
  left: var(--ms-l, 3px);
  right: var(--ms-r, 50%);
  border-radius: 999px;
  background: var(--ink);
  box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--ink) 80%, transparent);
  pointer-events: none;
  transition: none;
}
.mode-switch.is-set .ms-thumb { transition: left .42s var(--ease-spring), right .42s var(--ease-spring); }
.ms-thumb::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--pro-grad);
  box-shadow: 0 6px 18px -6px var(--pro-glow);
  opacity: 0;
  transition: opacity .38s var(--ease);
}
.mode-switch[data-on="pro"] .ms-thumb::after { opacity: 1; }
.mode-switch.is-set.to-right .ms-thumb { transition: right .3s cubic-bezier(.3, 1.45, .55, 1), left .44s cubic-bezier(.6, 0, .2, 1) .07s; }
.mode-switch.is-set.to-left .ms-thumb { transition: left .3s cubic-bezier(.3, 1.45, .55, 1), right .44s cubic-bezier(.6, 0, .2, 1) .07s; }
.mode-switch button:active { transform: scale(.96); }
.topbar .mode-switch [data-mode="pro"][aria-pressed="true"] { color: #fff; }
/* на телефоне места мало: слово «arkad» уступает место переключателю, остаётся знак */
@media (max-width: 479px) {
  .brand__word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .topbar { gap: 10px; }
}
@media (max-width: 379px) {
  .topbar { gap: 8px; }
  .topbar__actions { gap: 6px; }
  .topbar .mode-switch button { padding: 0 8px; font-size: 12.5px; }
}
/* совсем узкие (320 px): знак логотипа прячем — на Главную ведёт нижняя панель */
@media (max-width: 340px) {
  .brand { display: none; }
}

/* ---------- нижняя навигация (телефон / планшет) ----------
   Прижата к нижнему краю окна, без «плавающего» зазора и без transform:
   так она не «пересаживается» относительно панели браузера и не дёргается при её появлении. */
.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  margin-inline: auto;
  max-width: 640px;
  z-index: 30;
  display: flex;
  gap: 4px;
  /* снизу — только зона полоски «Домой» (safe-area), без лишних 10 px: под подписями не было «пустого этажа» */
  padding: 8px 12px max(8px, calc(var(--safe-bottom) - 6px));
  border-radius: 28px 28px 0 0;
  background: color-mix(in srgb, var(--card-solid) 94%, transparent);
  border: 1px solid var(--card-border);
  border-bottom: 0;
  box-shadow: 0 -12px 30px -20px rgba(18, 20, 36, .45);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  transition: opacity .18s ease, visibility 0s;
}
.tabbar a {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  border-radius: 18px;
  color: var(--text-3);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: color .25s var(--ease);
}
.tabbar a svg { width: 24px; height: 24px; }
/* подпись есть только у активного раздела — остальным остаётся значок, и на панели есть воздух.
   У неактивных подпись спрятана «для глаз», но остаётся для скринридеров. */
.tabbar a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tabbar a[aria-current="page"] { flex: 0 0 auto; padding-inline: 20px; color: var(--on-ink); }
/* Три раздела (Mini): панель делится на три РАВНЫЕ доли; значок и подпись стоят по центру своей доли, таблетка — во всю долю.
   Ширина слова больше не двигает кнопки. (Шесть разделов Pro — как раньше: у активного раздела подпись, у остальных значок.) */
.tabbar[data-n="3"] a, .tabbar[data-n="3"] a[aria-current="page"] { flex: 1 1 0; min-width: 0; padding-inline: 0; }
.tabbar[data-n="3"] a[aria-current="page"] span { margin-left: 0; }
/* Четыре раздела (Mini с «Планами»): четыре РАВНЫЕ доли, как на iPhone — значок и под ним маленькая подпись у каждого.
   Кнопки не двигаются при переключении (таблетка — во всю долю), подписи видны все; на 320 px доля ≈ 71 px, «Нагрузка» — ≈ 52. */
.tabbar[data-n="4"] a, .tabbar[data-n="4"] a[aria-current="page"] { flex: 1 1 0; min-width: 0; padding-inline: 0; flex-direction: column; gap: 3px; font-size: 11px; letter-spacing: 0; }
.tabbar[data-n="4"] a svg { width: 22px; height: 22px; }
.tabbar[data-n="4"] a { min-height: 50px; }
.tabbar[data-n="4"] a span { position: static; width: auto; height: auto; overflow: visible; clip: auto; line-height: 1.1; animation: none; }
.tabbar a[aria-current="page"] span { position: static; width: auto; height: auto; overflow: visible; clip: auto; animation: tab-label .35s var(--ease) both; }
@keyframes tab-label { from { opacity: 0; transform: translateX(-6px); } }

.fab {
  position: fixed;
  right: calc(16px + var(--safe-right));
  bottom: calc(var(--tabbar-h) + 14px);   /* высота панели + отступ */
  z-index: 31;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 14px 28px -12px color-mix(in srgb, var(--on-accent) 55%, transparent), 0 0 0 1px color-mix(in srgb, var(--on-accent) 14%, transparent) inset;
  transition: transform .3s var(--ease-spring), box-shadow .3s var(--ease), opacity .18s ease;
}
.fab svg { width: 26px; height: 26px; }
.fab:active { transform: scale(.92); }
/* «+» не должен закрывать текст и кнопки: при прокрутке вниз он уезжает, при прокрутке вверх возвращается */
.fab-away .fab { transform: translateY(24px) scale(.8); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .25s var(--ease), opacity .2s ease, visibility 0s .25s; }

/* пока открыта экранная клавиатура, нижняя панель и «+» прячутся: иначе на iOS они «прыгают» при её закрытии */
body[data-route="settings"] .fab { display: none; }   /* в настройках «+» не нужен и перекрывал кнопку «Сохранить» */
/* без «+» место под него не нужно: последняя карточка Настроек — сразу над панелью, без «пропасти» */
@media (max-width: 999px) { body[data-route="settings"] .app { padding-bottom: calc(var(--tabbar-h) + 22px); } }
.kbd-open .tabbar, .kbd-open .fab { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s ease, visibility 0s .12s; }

/* узкие экраны: у активного раздела подпись и поля чуть компактнее */
@media (max-width: 360px) {
  .tabbar { padding-inline: 8px; gap: 2px; }
  .tabbar a[aria-current="page"] { padding-inline: 14px; font-size: 13px; }
  .tabbar a svg { width: 22px; height: 22px; }
}

/* ---------- экран ---------- */
.view { outline: none; transition: opacity .14s ease, transform .16s var(--ease); }
.view.is-leaving { opacity: 0; transform: translateY(6px); }
.view.is-entering .page > * {
  animation: rise .55s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.page-head { margin-bottom: 26px; }
.page-title {
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.05;
  font-weight: 300;
  letter-spacing: -.035em;
}
.page-sub { margin-top: 12px; color: var(--text-2); max-width: 56ch; line-height: 1.5; }

/* ---------- адаптив ---------- */
@media (max-width: 719px) {
  :root { --pad: 24px; --gap: 16px; --gutter: 18px; --r-xl: 28px; --r-lg: 22px; }
  .topbar { padding-bottom: 22px; }
  .hide-sm { display: none !important; }      /* !important: у .pill и .btn свой display, без него «скрытое» оставалось на экране */
}
@media (min-width: 720px) { .only-sm { display: none !important; } }
/* пока работает нижняя панель и кнопка «+», кнопка «Добавить» в шапке не нужна */
@media (max-width: 999px) { .topbar .btn--add { display: none; } }

/* Компьютер (от 1000 px): меню — колонка круглых кнопок слева (как у дашбордов), подпись — подсказкой при наведении
   и для скринридеров; в шапке остаются переключатель версии и действия. Нижней панели и «+» нет. */
@media (min-width: 1000px) {
  .tabbar, .fab { display: none; }
  /* шире и с меньшими полями (как у дашбордов): слева — колонка меню, справа — небольшой отступ; на очень широких экранах — не шире 1920 */
  /* поля: слева — меню (кнопки до 74 px) и воздух 18 px + 4% ширины экрана; основная часть на 10% уже прежней
     (была «ширина − 116 px», стала 90% от неё: правое поле добирает разницу). 1440 px: поля 150 / 98, середина 1192 px. */
  .app { max-width: 1920px; padding-bottom: calc(var(--safe-bottom) + 64px); padding-left: calc(92px + 4vw + var(--safe-left)); padding-right: calc(6vw + 12px + var(--safe-right)); }
  .brand { position: fixed; z-index: 31; left: calc(26px + var(--safe-left)); top: calc(var(--safe-top) + 22px); }
  .brand__mark { width: 44px; height: 44px; }
  .brand__word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav {
    position: fixed; z-index: 30;
    left: calc(22px + var(--safe-left)); top: 50%;
    transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 12px;
    margin: 0; padding: 0;
    background: none; border: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .nav a {
    width: 52px; height: 52px; padding: 0;
    justify-content: center;
    border-radius: 50%;
    background: var(--card-solid);
    border: 1px solid var(--card-border);
    box-shadow: 0 8px 18px -12px rgba(26, 28, 44, .35);
    color: var(--text-2);
  }
  .nav a svg { display: block; width: 21px; height: 21px; }
  .nav a[aria-current="page"] { background: transparent; border-color: transparent; box-shadow: none; color: var(--on-ink); }
  .nav .ind { border-radius: 50%; box-shadow: 0 14px 26px -12px color-mix(in srgb, var(--ink) 85%, transparent); }
  :root[data-mode="pro"] .nav .ind { background: var(--pro-grad); box-shadow: 0 14px 30px -8px var(--pro-glow); }
  :root[data-mode="pro"] .nav a[aria-current="page"] { color: #fff; }
  .nav a span {
    position: absolute; left: calc(100% + 12px); top: 50%;
    padding: 6px 10px; border-radius: 10px;
    background: var(--ink); color: var(--on-ink);
    font-size: 13px; white-space: nowrap;
    opacity: 0; pointer-events: none;
    transform: translate(-4px, -50%);
    transition: opacity .18s ease, transform .18s var(--ease);
  }
  .nav a:hover span, .nav a:focus-visible span { opacity: 1; transform: translate(0, -50%); }
  .topbar { min-height: 52px; }
  .topbar__actions { margin-left: auto; }
}
@media (min-width: 1000px) and (max-width: 1279px) {
  .btn--add { width: 44px; padding: 0; }
  .btn--add span { display: none; }
}
@media (min-width: 1100px) {
  :root { --gap: 24px; --pad: 32px; --gutter: 40px; }
}

/* смена темы: короткое мягкое «растворение» (View Transitions, только на компьютере) */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; animation-timing-function: ease; }

/* ---------- телефоны и планшеты: легче для прокрутки ----------
   Размытие под каждой карточкой и бесконечная анимация фона на мобильных браузерах
   нагружают видеокарту и делают прокрутку (и нижнюю панель) дёрганой. */
@media (max-width: 899px), (pointer: coarse) {
  .aurora::before, .aurora::after, .aurora i { animation: none; will-change: auto; }
}
/* Сенсорные экраны: «живое» размытие под нижней панелью пересчитывается в каждом кадре прокрутки (на Android — заметно),
   поэтому там панель просто плотная — на вид почти то же самое. */
@media (pointer: coarse) {
  .tabbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--card-solid); }
}

/* ---------- уменьшенное движение ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .aurora::before, .aurora::after, .aurora i { animation: none !important; }
}

/* скрыть суммы (кнопка «глаз») */
.amounts-hidden .sensitive {
  filter: blur(9px);
  transition: filter .3s var(--ease);
  user-select: none;
}
.sensitive { transition: filter .3s var(--ease); }

/* пока открыта шторка, фон «замирает»: меньше работы, нет лишних перерисовок под окном */
.sheet-open .aurora::before, .sheet-open .aurora::after, .sheet-open .aurora i { animation-play-state: paused; }

/* ---------- Mini: без «сияния» за карточками, заголовки и цифры тоньше ---------- */
:root[data-mode="minimum"] .aurora { display: none; }
:root[data-mode="minimum"] body { background: var(--backdrop, var(--bg)); }
/* матовость: зерно поверх фона и поверх каждой плашки (не ловит касания, не двигается) */
:root[data-mode="minimum"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--grain); opacity: calc(var(--grain-op) * 1.6);
}
:root[data-mode="minimum"] .card, :root[data-mode="minimum"] .kpi { isolation: isolate; }
:root[data-mode="minimum"] .card::before, :root[data-mode="minimum"] .kpi::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--grain); opacity: var(--grain-op);
}
/* без теней: ни у кнопок, ни у «таблеток», ни у панелей — только стекло и тонкая светлая кромка */
:root[data-mode="minimum"] .btn--ink, :root[data-mode="minimum"] .ind, :root[data-mode="minimum"] .ms-thumb,
:root[data-mode="minimum"] .seg-thumb, :root[data-mode="minimum"] .tabbar, :root[data-mode="minimum"] .fab,
:root[data-mode="minimum"] .nav a, :root[data-mode="minimum"] .nav .ind, :root[data-mode="minimum"] .chip input:checked + span, :root[data-mode="minimum"] .chip--btn[aria-pressed="true"],
:root[data-mode="minimum"] .toast, :root[data-mode="minimum"] .sheet__panel { box-shadow: none; }
:root[data-mode="minimum"] .btn--lime { box-shadow: inset 0 0 0 1px var(--btn-hair); }
:root[data-mode="minimum"] .fab { box-shadow: inset 0 0 0 1px var(--btn-hair); }
@media (hover: hover) { :root[data-mode="minimum"] button.row:hover { box-shadow: none; } }
/* нижняя панель и шторка — то же матовое стекло, только плотнее (под ними едет содержимое) */
:root[data-mode="minimum"] .tabbar { background: color-mix(in srgb, var(--card-solid) 86%, transparent); border-color: var(--card-border); }
:root[data-mode="minimum"] .tabbar::before, :root[data-mode="minimum"] .sheet__panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--grain); opacity: var(--grain-op);
}
:root[data-mode="minimum"] .tabbar, :root[data-mode="minimum"] .sheet__panel { isolation: isolate; }
@media (pointer: coarse) { :root[data-mode="minimum"] .tabbar { background: color-mix(in srgb, var(--card-solid) 96%, transparent); } }
/* значки в плашках-показателях — белые «стеклянные» кружки с тонкой кромкой, как в макете */
:root[data-mode="minimum"] .kpi__icon { background: var(--well-strong); box-shadow: inset 0 0 0 1px var(--card-border); color: var(--ink); }
:root[data-mode="minimum"][data-theme="dark"] .kpi__icon { color: var(--slate); }
:root[data-mode="minimum"] .page-title { font-weight: 300; letter-spacing: -.04em; }
:root[data-mode="minimum"] .card__title { font-weight: 400; }
:root[data-mode="minimum"] .kpi__value { font-weight: 300; }

/* ---------- Pro: лёгкая неоновая рамка по краю окна ----------
   Статичная (без анимации — так она ничего не стоит при прокрутке), поверх всего и не ловит касания. */
:root[data-mode="pro"] body::after {
  content: "";
  position: fixed; inset: 0; z-index: 90;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1.5px rgba(128, 112, 255, .5),
    inset 0 0 26px -6px rgba(128, 112, 255, .38);
}
:root[data-mode="pro"][data-theme="dark"] body::after {
  box-shadow:
    inset 0 0 0 1.5px rgba(150, 130, 255, .62),
    inset 0 0 30px -6px rgba(150, 130, 255, .45);
}
/* Mini: внутренние плашки — тоже стекло со светлой кромкой */
:root[data-mode="minimum"] .well--dim { border-color: color-mix(in srgb, var(--card-border) 70%, transparent); }

/* ===== css/components.css ===== */
/* ==========================================================================
   Arkad — компоненты
   ========================================================================== */

/* ---------- карточки ---------- */
.card {
  position: relative;
  min-width: 0;
  padding: var(--pad);
  border-radius: var(--r-xl);
  background: var(--card);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  /* Размытия под карточками нет намеренно: поверх анимированного фона оно пересчитывалось каждый кадр
     и тормозило интерфейс. Фон — мягкие градиенты, так что на вид разницы почти нет. */
}
.card--tone-balance { background: var(--tone-balance); }
.card--tone-save    { background: var(--tone-save); }
.card--tone-debt    { background: var(--tone-debt); }
.card--tone-calm {
  background:
    radial-gradient(90% 80% at 0% 0%, var(--tone-calm-a) 0%, transparent 70%),
    radial-gradient(90% 80% at 100% 100%, var(--tone-calm-c) 0%, transparent 70%),
    radial-gradient(70% 60% at 100% 0%, var(--tone-calm-b) 0%, transparent 70%),
    var(--card-solid);
  transition: background .8s var(--ease);
}
.card--flat { background: var(--well); box-shadow: none; }

.card__tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; min-width: 0; }
.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  min-height: 40px;
}
.card__title {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -.015em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card__sub { color: var(--text-2); font-size: 13px; }

/* внутренняя «стеклянная» плашка (как мини-карточки у Superpower) */
.well {
  border-radius: var(--r-md);
  background: var(--well);
  border: 1px solid var(--card-border);
  padding: 16px 18px;
}
.well--dim { background: var(--well-dim); border-color: transparent; }

/* ---------- типографика ---------- */
.label { font-size: 13px; color: var(--text-2); font-weight: 400; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.num { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.big {
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: 1.05;
}
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.warn { color: var(--warn); }

/* ---------- кнопки ----------
   Без рамок. Светлые кнопки — матовая заливка чуть темнее поверхности + линия-«волосок» внутри
   (поэтому читаются на любой карточке). Тёмные и лаймовые — с мягким свечением снизу. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  font-weight: 500;
  font-size: 15px;
  white-space: nowrap;
  background: var(--btn-fill);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--btn-hair), var(--btn-shadow);
  transition: transform .2s var(--ease), background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease), opacity .2s ease;
}
.btn svg { width: 18px; height: 18px; }
.btn:active { transform: scale(.97); }
.btn--ink {
  background: var(--ink);
  color: var(--on-ink);
  box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--ink) 85%, transparent), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.btn--lime {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-accent) 16%, transparent), 0 8px 16px -12px color-mix(in srgb, var(--on-accent) 60%, transparent);
}
.btn--danger {
  background: var(--neg-bg);
  color: var(--neg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neg) 18%, transparent);
}
.btn--ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--btn-hair); }
.btn--sm { min-height: 42px; padding: 0 22px; font-size: 14.5px; }
.btn--block { width: 100%; min-height: 54px; font-size: 16px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
@media (hover: hover) {
  .btn:hover { background: var(--btn-fill-hover); }
  .btn--ink:hover { background: color-mix(in srgb, var(--ink) 86%, var(--on-ink)); }
  .btn--lime:hover { background: color-mix(in srgb, var(--accent) 82%, var(--accent-strong)); }
  .btn--danger:hover { background: color-mix(in srgb, var(--neg) 20%, transparent); }
  .btn--ghost:hover { background: var(--btn-fill); }
}

.icon-btn {
  width: 44px; height: 44px;
  border: 0;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: var(--well-strong);
  color: var(--text);
  flex: none;
  box-shadow: inset 0 0 0 1px var(--btn-hair), var(--btn-shadow);
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:active { transform: scale(.92); }
.icon-btn--sm { width: 36px; height: 36px; }
.icon-btn--sm svg { width: 18px; height: 18px; }
@media (hover: hover) { .icon-btn:hover { box-shadow: inset 0 0 0 1px var(--btn-hair), 0 8px 16px -10px rgba(19, 19, 22, .35); } }

/* ---------- метки ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  background: var(--well-dim);
  color: var(--text-2);
}
.pill svg { width: 14px; height: 14px; }
.pill--pos { background: var(--pos-bg); color: var(--pos); }
.pill--neg { background: var(--neg-bg); color: var(--neg); }
.pill--warn { background: var(--warn-bg); color: var(--warn); }
.pill--lime { background: var(--accent); color: var(--on-accent); }
.pill--slate { background: var(--slate-bg); color: var(--slate); }
.pill--soon { background: var(--accent); color: var(--on-accent); height: 22px; font-size: 11.5px; }

/* ---------- чипы / сегменты ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips--scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: calc(var(--pad) * -1);
  padding-inline: var(--pad);
  scroll-snap-type: x proximity;
}
.chips--scroll::-webkit-scrollbar { display: none; }
.chip { position: relative; flex: none; scroll-snap-align: start; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip > span, .chip--btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--btn-fill);
  box-shadow: inset 0 0 0 1px var(--btn-hair);
  color: var(--text-2);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease), transform .2s var(--ease);
}
@media (hover: hover) { .chip:hover > span, .chip--btn:hover { background: var(--btn-fill-hover); } }
.chip > span svg { width: 16px; height: 16px; }
.chip input:checked + span, .chip--btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--on-ink);
  box-shadow: 0 8px 16px -10px color-mix(in srgb, var(--ink) 85%, transparent);
}
.chip input:focus-visible + span { outline: 2px solid color-mix(in srgb, var(--ink) 78%, transparent); outline-offset: 2px; }
.chip:active > span { transform: scale(.96); }

.segmented {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  padding: 4px;
  gap: 2px;
  border-radius: 999px;
  background: var(--btn-fill);
  box-shadow: inset 0 0 0 1px var(--btn-hair);
}
.segmented button, .segmented label {
  position: relative;
  z-index: 1;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: color .3s var(--ease);
}
.segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented [aria-pressed="true"], .segmented label:has(input:checked) { color: var(--on-ink); }
.segmented:not(.has-thumb) [aria-pressed="true"], .segmented:not(.has-thumb) label:has(input:checked) { background: var(--ink); }
.segmented label:has(input:focus-visible) { outline: 2px solid color-mix(in srgb, var(--ink) 78%, transparent); outline-offset: 2px; }
.seg-thumb {
  position: absolute;
  left: 0; top: 0;
  z-index: 0;
  width: 0; height: 0;
  border-radius: 999px;
  background: var(--ink);
  box-shadow: 0 8px 16px -10px color-mix(in srgb, var(--ink) 85%, transparent);
  pointer-events: none;
  opacity: 0;
  transition: transform .28s var(--ease), width .28s var(--ease), height .28s var(--ease), opacity .2s ease;
}
.segmented--full { display: flex; }
.segmented--full > * { flex: 1; }

/* ---------- полосы прогресса (чёрная + штриховка, как у Aurex) ---------- */
.bar {
  --p: 0;
  --bar: var(--ink);
  display: block;
  position: relative;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(19, 19, 22, .2) 0 1.5px, transparent 1.5px 6px),
    var(--well-dim);
}
:root[data-theme="dark"] .bar {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .22) 0 1.5px, transparent 1.5px 6px),
    var(--well-dim);
}
.bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p) * 100%);
  border-radius: 999px;
  background: var(--bar);
  transform-origin: left center;
  animation: bar-grow .9s var(--ease) both;
  animation-delay: calc(var(--d, 0) * 1ms + 150ms);
}
.bar--sm { height: 8px; }
.bar--pos { --bar: var(--pos-fill); }
.bar--neg { --bar: var(--neg-fill); }
.bar--warn { --bar: var(--warn-fill); }
.bar--slate { --bar: var(--slate); }
@keyframes bar-grow { from { transform: scaleX(0); } }
.no-anim .bar__fill { animation: none; }

.bar-row { display: grid; gap: 6px; }
.bar-row__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13.5px; }
.bar-row__top .label { color: var(--text-2); }

/* ---------- точечные числа ---------- */
.hero-num { display: flex; align-items: flex-end; gap: 10px; min-width: 0; }
.dm-holder { display: block; min-width: 0; flex: 0 1 auto; max-width: 100%; }
.dm {
  display: block;
  height: var(--dm-h, 56px);
  width: min(100%, calc(var(--dm-h, 56px) * var(--dm-ratio, 3)));
  color: var(--text);
}
.dm-unit {
  flex: none;
  padding-bottom: 2px;
  font-size: calc(var(--dm-h, 56px) * .34);
  font-weight: 300;
  color: var(--text-2);
  letter-spacing: -.02em;
  line-height: 1;
}
.hero-num--neg .dm { color: var(--neg); }
.hero-num--pos .dm { color: var(--text); }
.dm-xl { --dm-h: 72px; }
.dm-lg { --dm-h: 56px; }
.dm-md { --dm-h: 40px; }
.dm-sm { --dm-h: 28px; }
@media (max-width: 719px) {
  .dm-xl { --dm-h: 58px; }
  .dm-lg { --dm-h: 46px; }
}

/* ---------- штрихкод-график (ticks) ---------- */
.ticks {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: var(--h, 44px);
}
.ticks i {
  flex: 1 1 0;
  min-width: 2px;
  max-width: 6px;
  height: calc(var(--v, .5) * 100%);
  min-height: 3px;
  border-radius: 3px;
  background: var(--tick, var(--text-3));
  opacity: .55;
  transform-origin: bottom;
  animation: tick-up .7s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 9ms + 200ms);
}
.ticks i.is-hot { background: var(--ink); opacity: 1; }
@keyframes tick-up { from { transform: scaleY(.05); opacity: 0; } }
.no-anim .ticks i { animation: none; }

/* ---------- зеркальные столбцы доход/расход ---------- */
.flow {
  position: relative;
  display: flex;
  height: 190px;
  gap: var(--flow-gap, 4px);
  touch-action: pan-y;
  cursor: crosshair;
}
.flow:focus-visible { outline-offset: 6px; }
.flow__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
.flow__col::before {
  content: "";
  position: absolute;
  inset: 0 -2px;
  border-radius: 8px;
  background: var(--well-dim);
  opacity: 0;
  transition: opacity .15s;
}
.flow__col.is-active::before { opacity: 1; }
.flow__up, .flow__down { flex: 1; display: flex; justify-content: center; position: relative; }
.flow__up { align-items: flex-end; padding-bottom: 1px; }
.flow__down { align-items: flex-start; padding-top: 1px; }
.flow__up i, .flow__down i {
  display: block;
  width: 100%;
  max-width: 14px;
  min-height: 0;
  position: relative;
  animation: flow-grow .8s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 12ms + 150ms);
}
.flow__up i { height: calc(var(--v, 0) * 100%); background: var(--pos-fill); border-radius: 5px 5px 0 0; transform-origin: bottom; }
.flow__down i { height: calc(var(--v, 0) * 100%); background: var(--ink); border-radius: 0 0 5px 5px; transform-origin: top; opacity: .9; }
.flow__up i[style*="--v:0;"], .flow__down i[style*="--v:0;"] { display: none; }
@keyframes flow-grow { from { transform: scaleY(0); } }
.no-anim .flow__up i, .no-anim .flow__down i { animation: none; }
.flow__axis {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--line);
  pointer-events: none;
}
.flow-x {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-3);
}
.flow-legend { display: flex; gap: 16px; font-size: 13px; color: var(--text-2); }
.flow-legend span { display: inline-flex; align-items: center; gap: 6px; }
.flow-legend i { width: 10px; height: 10px; border-radius: 3px; display: block; }

/* подсказка при наведении/касании */
.tip {
  position: fixed;
  z-index: 80;
  pointer-events: none;
  min-width: 140px;
  max-width: 240px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 13px;
  line-height: 1.35;
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .45);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .15s, transform .15s;
}
.tip.is-on { opacity: 1; transform: none; }
.tip b { font-weight: 500; display: block; margin-bottom: 3px; }
.tip span { display: flex; justify-content: space-between; gap: 16px; opacity: .92; }

/* ---------- дуговой датчик ---------- */
.gauge { position: relative; width: 100%; max-width: 320px; margin-inline: auto; }
.gauge > svg { width: 100%; height: auto; overflow: visible; }
.gauge__track { fill: none; stroke: rgba(19, 19, 22, .08); stroke-width: 16; stroke-linecap: round; }
:root[data-theme="dark"] .gauge__track { stroke: rgba(255, 255, 255, .1); }
.gauge__fill {
  fill: none; stroke-width: 16; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 0;
  animation: gauge-draw 1.1s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 120ms + 250ms);
}
.gauge__fill--pos { stroke: var(--pos-fill); }
.gauge__fill--warn { stroke: var(--warn-fill); }
.gauge__fill--neg { stroke: var(--neg-fill); }
@keyframes gauge-draw { from { stroke-dashoffset: 1; } }
.no-anim .gauge__fill { animation: none; }
.gauge__center {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
}

/* ---------- линейный график ---------- */
.lc { position: relative; padding-left: 44px; }
.lc__plot { position: relative; height: 220px; cursor: crosshair; touch-action: pan-y; }
.lc__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lc__grid { position: absolute; left: 0; right: 0; height: 1px; background: var(--line); }
.lc__ylab { position: absolute; left: -44px; width: 38px; text-align: right; transform: translateY(-50%); font-size: 11.5px; color: var(--text-3); }
.lc__xlab { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--text-3); }
.lc__line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.lc__area { opacity: .1; }
.lc__cursor { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ink); opacity: 0; pointer-events: none; transition: opacity .15s; }
.lc__dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--ink); border: 2px solid var(--card-solid); opacity: 0; pointer-events: none; transition: opacity .15s; }
.lc.is-active .lc__cursor, .lc.is-active .lc__dot { opacity: 1; }
.lc__path { stroke-dasharray: 1; animation: gauge-draw 1.3s var(--ease) both; }
.no-anim .lc__path { animation: none; }
.lc-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; font-size: 13px; color: var(--text-2); }
.lc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lc-legend i { width: 14px; height: 2px; border-radius: 2px; display: block; }

/* ---------- списки ---------- */
.list { display: grid; gap: 10px; }
.row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 68px;
  padding: 14px 16px;
  text-align: left;
  border-radius: var(--r-md);
  background: var(--well);
  border: 1px solid transparent;
  transition: transform .22s var(--ease), background-color .22s var(--ease), box-shadow .22s var(--ease);
}
button.row { cursor: pointer; }
button.row:active { transform: scale(.985); }
@media (hover: hover) {
  button.row:hover { background: var(--well-strong); box-shadow: 0 8px 22px -14px rgba(26, 28, 44, .35); }
}
.row__icon {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--well-strong);
  color: var(--text);
}
.row__icon svg { width: 20px; height: 20px; }
.row__icon--pos { background: var(--pos-bg); color: var(--pos); }
.row__icon--neg { background: var(--neg-bg); color: var(--neg); }
.row__icon--warn { background: var(--warn-bg); color: var(--warn); }
.row__icon--ink { background: var(--ink); color: var(--on-ink); }
.row__main { flex: 1; min-width: 0; }
.row__title { font-weight: 500; font-size: 15.5px; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__sub { color: var(--text-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__side { text-align: right; flex: none; }
.row__amount { font-weight: 500; font-size: 15.5px; letter-spacing: -.01em; }

.day-label { margin: 24px 0 10px 4px; font-size: 13px; color: var(--text-2); display: flex; justify-content: space-between; }
.day-label:first-child { margin-top: 0; }

/* пустое состояние */
.empty {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 34px 20px;
  text-align: center;
  color: var(--text-2);
}
.empty__icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--well-strong); color: var(--text); }
.empty__icon svg { width: 24px; height: 24px; }
.empty b { color: var(--text); font-weight: 500; font-size: 16px; }
/* пустое состояние: одна кнопка — по центру, две («Доход» и «Расход») — рядом, поровну, а не друг под другом */
.empty .btn--sm { min-width: 168px; }
.empty .cluster { width: 100%; max-width: 420px; flex-wrap: nowrap; }
.empty .cluster > .btn--sm:not(:only-child) { flex: 1 1 0; min-width: 0; padding-inline: 12px; }
.empty p { max-width: 36ch; font-size: 14px; }

/* заглушка «скоро» */
/* «Скоро»: метка «Скоро» у каждой строки дублировала заголовок карточки и сжимала текст в узкую колонку (3–4 строки);
   теперь строка — значок, название и одна-две строки описания, без пунктирной рамки */
.soon {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--well-dim);
  color: var(--text-2);
}
.soon .row__icon { width: 38px; height: 38px; background: var(--well); color: var(--text-2); }
.soon__text { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--text-3); }
.soon b { color: var(--text); font-weight: 500; display: block; }

/* ---------- формы ---------- */
.form { display: grid; gap: 24px; }
.field { display: grid; gap: 10px; min-width: 0; }
.field__label { font-size: 13.5px; font-weight: 500; color: var(--text-2); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.field__hint { font-size: 12.5px; color: var(--text-3); font-weight: 400; }
.field__control {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 16px;
  border-radius: 16px;
  background: var(--well);
  border: 1.5px solid transparent;
  box-shadow: 0 0 0 1px var(--line) inset;
  transition: box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.field__control:focus-within { background: var(--well-strong); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 40%, transparent) inset, 0 0 0 4px var(--ring); }
.field__control input, .field__control select, .field__control textarea {
  flex: 1;
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  font-size: 16px;
  min-height: 48px;
  outline: none;
  color: var(--text);
}
.field__control textarea { padding: 12px 0; min-height: 96px; resize: vertical; line-height: 1.4; }
.field__control select { appearance: none; -webkit-appearance: none; padding-right: 30px; background-image: none; cursor: pointer; }
/* Стрелка лежит поверх правого края списка и «прозрачна» для касаний: нажатие на неё открывает список, а не пропадает впустую. */
.field__control select + svg { flex: none; margin-left: -34px; pointer-events: none; color: var(--text-2); }
.field__control input::placeholder, .field__control textarea::placeholder { color: var(--text-3); }
.field__suffix { color: var(--text-2); font-weight: 500; flex: none; }
.field.has-error .field__control { box-shadow: 0 0 0 2px var(--neg-fill) inset; }
.field__note { color: var(--text-2); font-size: 13px; }
.plain-list { margin: 8px 0 0; padding-left: 18px; list-style: disc; display: grid; gap: 6px; font-size: 14px; line-height: 1.4; color: var(--text-2); }
.report-preview { font-size: 13px; line-height: 1.45; color: var(--text-2); font-family: inherit; }
.backup-text { font-size: 12.5px; line-height: 1.4; color: var(--text-2); font-family: ui-monospace, "SF Mono", Menlo, monospace; word-break: break-all; }
.field__note[hidden] { display: none; }
.field__note--warn { color: var(--warn); }
.field__error { color: var(--neg); font-size: 13px; min-height: 0; }
.field__error:empty { display: none; }

.field--amount .field__control {
  min-height: 84px;
  border-radius: 22px;
  justify-content: center;
}
.field--amount input {
  font-size: 40px;
  font-weight: 300;
  letter-spacing: -.035em;
  text-align: center;
  min-height: 80px;
}
.field--amount .field__suffix { font-size: 26px; font-weight: 300; }

/* поля в ряд выравниваются по ВЕРХУ: сообщение об ошибке под одним полем («Укажите число от 1 до 31») удлиняет только его —
   раньше (align-items: end) соседнее поле при этом «съезжало» вниз */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.field-row--wide { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .field-row--wide { grid-template-columns: 1fr 1fr; } }

.switch { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.switch__text { flex: 1; min-width: 0; }
.switch__text b { font-weight: 500; display: block; }
.switch__text span { color: var(--text-2); font-size: 13px; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__ui {
  position: relative;
  width: 52px; height: 32px;
  border-radius: 999px;
  flex: none;
  background: var(--well-dim);
  box-shadow: 0 0 0 1px var(--line) inset;
  transition: background-color .25s var(--ease);
}
.switch__ui::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
  transition: transform .3s var(--ease-spring);
}
.switch input:checked + .switch__ui { background: var(--ink); }
.switch input:checked + .switch__ui::after { transform: translateX(20px); background: var(--accent); }
.switch input:focus-visible + .switch__ui { outline: 2px solid color-mix(in srgb, var(--ink) 78%, transparent); outline-offset: 3px; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 32px;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, var(--ink) var(--fill, 0%), var(--well-dim) var(--fill, 0%));
  box-shadow: 0 0 0 1px var(--line) inset;
}
input[type="range"]::-moz-range-track { height: 8px; border-radius: 999px; background: var(--well-dim); }
input[type="range"]::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--ink); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px; height: 28px; margin-top: -10px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--ink);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
}
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--ink);
}

/* ---------- шторка (bottom sheet / модалка) ---------- */
.sheet {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  overflow: hidden;
  overflow: clip;            /* clip запрещает и программную прокрутку: окно не «подпрыгивает» при открытии */
  overscroll-behavior: contain;
}
.sheet:not([open]) { display: none; }
.sheet::backdrop { background: transparent; }
.sheet__scrim {
  position: absolute;
  inset: 0;
  background: var(--overlay);
  opacity: 0;
  transition: opacity .3s var(--ease);
  touch-action: none;
}
@media (hover: hover) and (pointer: fine) {
  .sheet__scrim { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
}
.sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  margin-inline: auto;               /* по центру без transform: постоянный transform на iPhone сдвигает каретку в полях */
  bottom: var(--kb, 0px);            /* над клавиатурой */
  width: min(100%, 560px);
  max-height: min(92svh, 860px, calc(var(--vvh, 100svh) - 12px));
  display: flex;
  flex-direction: column;
  border-radius: 32px 32px 0 0;
  background: var(--card-solid);
  border: 1px solid var(--card-border);
  box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, .4);
  transform: translateY(102%);
  transition: transform .42s var(--ease);
  padding-bottom: var(--safe-bottom);
}
.sheet.is-open .sheet__scrim { opacity: 1; }
.sheet.is-open .sheet__panel { transform: none; }
.sheet__grab { width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin: 10px auto 0; flex: none; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px 6px 24px; flex: none; }
.sheet__title { font-size: 22px; font-weight: 400; letter-spacing: -.025em; }
.sheet__body { padding: 8px 24px 24px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.sheet__foot { padding: 4px 24px 20px; display: grid; gap: 10px; flex: none; }
.in-telegram .sheet__foot[data-tg-main="on"] { display: none; }
@media (min-width: 720px) {
  .sheet__panel {
    left: 50%;
    right: auto;
    margin-inline: 0;
    bottom: auto;
    top: 50%;
    max-height: min(92svh, 860px);
    border-radius: 32px;
    transform: translate(-50%, -46%) scale(.96);
    opacity: 0;
    transition: transform .4s var(--ease), opacity .3s var(--ease);
    padding-bottom: 0;
  }
  .sheet.is-open .sheet__panel { transform: translate(-50%, -50%); opacity: 1; }
  .sheet__grab { display: none; }
}

/* ---------- тост ---------- */
.toasts {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-bottom) + 100px);
  transform: translateX(-50%);
  z-index: 90;
  display: grid;
  gap: 8px;
  width: min(calc(100% - 28px), 440px);
  pointer-events: none;
}
@media (min-width: 1000px) { .toasts { bottom: calc(var(--safe-bottom) + 28px); } }
.toast {
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 18px;
  min-height: 52px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 14.5px;
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .5);
  animation: toast-in .45s var(--ease-spring) both;
}
.toast.is-out { animation: toast-out .25s ease forwards; }
.toast span { flex: 1; }
.toast button {
  padding: 0 14px;
  min-height: 34px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  font-size: 13.5px;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px) scale(.98); } }

/* ---------- прочее ---------- */
.divider { height: 1px; background: var(--line); margin: 14px 0; border: 0; }
.kv { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: 14px; padding: 8px 0; }
.kv span:first-child { color: var(--text-2); }
.kv b { font-weight: 500; }
.stack-sm { display: grid; gap: 10px; }
.stack { display: grid; gap: 20px; }
.cluster { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.between { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.grow { flex: 1; min-width: 0; }
.link-btn { color: var(--text-2); font-weight: 500; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--btn-fill); box-shadow: inset 0 0 0 1px var(--btn-hair); transition: color .25s var(--ease), background-color .25s var(--ease), transform .2s var(--ease); }
.link-btn:active { transform: scale(.97); }
.link-btn--sm { min-height: 30px; padding: 0 12px; margin-top: 8px; font-size: 13px; }
.link-btn svg { width: 16px; height: 16px; }
@media (hover: hover) { .link-btn:hover { color: var(--text); background: var(--btn-fill-hover); } }

/* ---------- сетки, которые обязаны сжиматься ----------
   Без minmax(0, 1fr) колонка растёт под самый длинный текст без переноса, и содержимое
   (например, кнопка «Оплатить») вылезает за край карточки на узких экранах. */
.list, .stack, .stack-sm, .form, .ins, .leaks, .cats, .babs, .order, .cures, .feed__list, .calm-parts, .facts {
  grid-template-columns: minmax(0, 1fr);
}

/* строка платежа: сумма и кнопка «Оплатить» — одним блоком справа */
.row__amtbox { display: block; }
.row__side--pay { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.row--pay .row__title { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
.row--pay .row__sub { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }
.row--pay .btn { min-height: 40px; padding: 0 20px; }
@media (min-width: 720px) {
  .row__side--pay { flex-direction: row; align-items: center; gap: 16px; }
  .row--pay .row__title, .row--pay .row__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- шторка: лёгкий каскад появления содержимого ---------- */
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.sheet.is-open .quick,
.sheet.is-open .form > * {
  animation: pop .42s var(--ease) backwards;
  animation-delay: calc(var(--k, 0) * 38ms + 90ms);
}
.quick:nth-child(2), .form > :nth-child(2) { --k: 1; }
.quick:nth-child(3), .form > :nth-child(3) { --k: 2; }
.quick:nth-child(4), .form > :nth-child(4) { --k: 3; }
.quick:nth-child(5), .form > :nth-child(5) { --k: 4; }
.quick:nth-child(6), .form > :nth-child(6) { --k: 5; }
.form > :nth-child(n+7) { --k: 6; }

/* на телефоне — только плавное появление без сдвига (меньше работы для видеокарты) */
@keyframes fade { from { opacity: 0; } }
@media (pointer: coarse) {
  .sheet.is-open .quick, .sheet.is-open .form > * { animation-name: fade; }
}

/* ---------- чипы и сегменты: одна высота у всех ----------
   Чип со значком, суммой или просто с текстом («Все») раньше получался чуть разной высоты. Теперь высота задана жёстко. */
.chip > span, .chip--btn { height: 40px; min-height: 40px; box-sizing: border-box; line-height: 1; }
.segmented button, .segmented label { box-sizing: border-box; line-height: 1; }

/* ---------- списки с собственной прокруткой (.sbox) ----------
   Видны первые строки и краешек следующей; остальное листается внутри списка. Сверху и снизу — мягкое затухание,
   справа — тонкая полоса (на компьютере), снизу — «Ещё N». Высоту окна выставляет JS (v.fitBoxes). */
@property --ft { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --fb { syntax: '<length>'; inherits: false; initial-value: 0px; }
.sbox { position: relative; }
.sbox__view {
  --ft: 0px;
  --fb: 0px;
  position: relative;                    /* от него считается offsetTop строк */
  margin: -6px -10px;                    /* запас под тени и обводку фокуса: окно их не обрезает */
  padding: 6px 10px;
  overflow-y: auto;
  overscroll-behavior-y: none;           /* на краю списка страницу подхватывает JS (v: «стыковка» прокрутки), без «резинки» внутри списка */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text) 24%, transparent) transparent;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--ft), #000 calc(100% - var(--fb)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--ft), #000 calc(100% - var(--fb)), transparent 100%);
  transition: --ft .25s var(--ease), --fb .25s var(--ease);
}
/* строки истории операций (самый длинный список) вне окна браузер не рисует, пока до них не долистали; «auto» запоминает настоящую высоту */
.sbox__view .row[data-action="open-tx"] { content-visibility: auto; contain-intrinsic-size: auto 68px; }
.sbox.can-up .sbox__view { --ft: 28px; }
.sbox.can-down .sbox__view { --fb: 46px; }
.sbox__view:focus { outline: none; }
.sbox__view:focus-visible { outline: 2px solid color-mix(in srgb, var(--ink) 70%, transparent); outline-offset: -2px; border-radius: var(--r-md); }
.sbox__view::-webkit-scrollbar { width: 6px; }
.sbox__view::-webkit-scrollbar-track { background: transparent; }
.sbox__view::-webkit-scrollbar-thumb { border-radius: 999px; background: color-mix(in srgb, var(--text) 24%, transparent); }
.sbox__more {
  position: absolute;
  left: 50%;
  bottom: 6px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  padding: 0 10px 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--card-solid);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--btn-hair), 0 10px 20px -10px rgba(26, 28, 44, .5);
  transform: translateX(-50%);
  cursor: pointer;
  animation: fade .3s var(--ease) both;
}
.sbox__more[hidden] { display: none; }
.sbox__more:active { transform: translateX(-50%) scale(.96); }
.sbox__more svg { width: 14px; height: 14px; }
@media (hover: hover) { .sbox__more:hover { background: var(--btn-fill-hover); } }

/* новая строка мягко «проявляется» (добавили операцию, платёж, цель) */
@keyframes row-in { from { opacity: 0; transform: translateY(-10px) scale(.97); } }
.row--new { animation: row-in .5s var(--ease) both; }

/* ---------- карусели (.hs): мягкое размытие у края, за которым есть ещё элементы ---------- */
.hs { position: relative; min-width: 0; max-width: 100%; }
.hs--bleed { margin-inline: calc(var(--pad) * -1); max-width: none; }   /* тянется до краёв карточки: без max-width, иначе он режет отрицательные поля */
.hs--bleed > .chips--scroll { margin-inline: 0; }
.hs::before, .hs::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: 48px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s var(--ease);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
/* на сенсорных экранах край карусели — мягкое затухание цветом карточки, без размытия (оно пересчитывалось при прокрутке) */
@media (pointer: coarse) {
  .hs::before, .hs::after { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--card-solid); }
}
.hs::after { right: 0; -webkit-mask-image: linear-gradient(to right, transparent, #000 80%); mask-image: linear-gradient(to right, transparent, #000 80%); }
.hs::before { left: 0; -webkit-mask-image: linear-gradient(to left, transparent, #000 80%); mask-image: linear-gradient(to left, transparent, #000 80%); }
.hs.has-right::after, .hs.has-left::before { opacity: 1; }
.hs--bleed::after, .hs--bleed::before { width: calc(var(--pad) + 28px); }
.flow-tools > .hs { flex: 0 1 auto; }
.flow-tools > .hs .segmented { display: flex; }
@media (max-width: 719px) { .flow-tools > .hs { width: 100%; } }

/* строки «Долгов» и «Обязательств» — одной высоты: колонки рядом выглядят ровно (строка долга со шкалой раньше была выше) */
.t-debts .row, .t-obs .row { min-height: 92px; }

/* ---------- колесо (C.donut) и переключатель «график ↔ колесо» ---------- */
/* колесо: контейнер для адаптивной раскладки (колесо слева, легенда справа — от 440 px ширины карточки) */
.donut-box { container-type: inline-size; }
.donut { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: center; }
@container (min-width: 440px) { .donut { grid-template-columns: 196px minmax(0, 1fr); gap: 24px; } }
.donut__wheel { position: relative; width: min(100%, 210px); aspect-ratio: 1; margin-inline: auto; }
.donut__wheel svg { display: block; width: 100%; height: 100%; overflow: visible; }
.donut__track { fill: none; stroke: var(--well-dim); stroke-width: 22; }
.donut__slice { transition: opacity .28s var(--ease); cursor: pointer; }
.donut__halo { fill: none; stroke: var(--c); stroke-width: 36; stroke-linecap: round; opacity: .13; transition: opacity .28s var(--ease), stroke-width .28s var(--ease); }
.donut__arc {
  fill: none; stroke: var(--c); stroke-width: 22; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 0;
  animation: donut-in .9s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 80ms);
  transition: stroke-width .28s var(--ease-spring);
}
.donut__arc--flat { stroke-linecap: butt; }
@keyframes donut-in { from { stroke-dashoffset: 1; } }
.donut.has-active .donut__slice:not(.is-on) { opacity: .28; }
.donut__slice.is-on .donut__arc { stroke-width: 28; }
.donut__slice.is-on .donut__halo { opacity: .24; stroke-width: 44; }
.donut__center { position: absolute; inset: 22%; display: grid; place-content: center; text-align: center; gap: 4px; pointer-events: none; }
.donut__value { font-size: clamp(18px, 6.2cqi, 26px); font-weight: 500; letter-spacing: -.02em; line-height: 1.1; }
.donut__sub { font-size: 12.5px; color: var(--text-2); line-height: 1.3; }
.donut--empty .donut__value { display: none; }
.donut__legend { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.donut__key {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 40px; align-items: center; gap: 10px;
  min-height: 40px; padding: 6px 10px; border-radius: 12px; text-align: left; color: var(--text);
  transition: background-color .22s var(--ease), opacity .22s var(--ease);
}
.donut__key i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent); }
.donut__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.donut__key b { font-weight: 500; font-size: 14px; }
.donut__pct { color: var(--text-3); font-size: 13px; text-align: right; }
.donut__key.is-on { background: var(--well-strong); }
.donut.has-active .donut__key:not(.is-on) { opacity: .55; }
@media (hover: hover) { .donut__key:hover { background: var(--well); } }
.donut__key:focus-visible { outline: 2px solid color-mix(in srgb, var(--ink) 70%, transparent); outline-offset: 1px; }

/* строки «Ближайших платежей»: пояснение — одной строкой (на узком телефоне оно переносилось в 3–4 строки) */
.t-up .row__title, .t-up .row__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.donut__chip { font-style: normal; font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: var(--well-dim); color: var(--text-2); margin-left: 4px; }

/* ---------- поля в два столбца: всегда на одном уровне (2026-10-21) ----------
   Подпись в узкой колонке переносилась на вторую строку («Ставка, % годовых / если есть»), и одно поле вставало ниже
   соседнего. Теперь подпись в ряду — ровно одна строка: название целиком, подсказка — справа и сокращается «…»,
   если места мало. Короткие подсказки по смыслу перенесены в пустое поле (placeholder). */
.field-row .field__label { flex-wrap: nowrap; min-width: 0; white-space: nowrap; }
.field-row .field__label > span:first-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.field-row .field__hint { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* текст-подсказка в пустом поле — чуть мельче вводимого, чтобы не спорил с цифрами (сам ввод остаётся 16 px — иначе iPhone приближает) */
.field__control input::placeholder { font-size: .9em; }

/* Политика конфиденциальности внутри окна */
.doc--sheet { font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.doc--sheet h2 { margin: 22px 0 8px; font-size: 16px; font-weight: 500; color: var(--text); letter-spacing: -.01em; }
.doc--sheet p, .doc--sheet ul { margin: 0 0 10px; }
.doc--sheet ul { padding-left: 20px; }
.doc--sheet .meta { font-size: 12.5px; color: var(--text-3); }
.doc--sheet .lead { color: var(--text); }
/* на телефоне в «Скоро» — только названия: карточка не тянется на полэкрана, описания видны на компьютере */
@media (max-width: 719px) {
  .soon { padding: 10px 12px; }
  .soon .row__icon { width: 34px; height: 34px; }
  .soon__text { display: none; }
}
.doc--sheet ul { list-style: none; padding-left: 0; }
.doc--sheet li { margin-bottom: 8px; }

/* ===== css/views.css ===== */
/* ==========================================================================
   Arkad — экраны
   ========================================================================== */

.page {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: stretch;
}
.page > * { grid-column: 1 / -1; min-width: 0; }
.page > .page-head { margin-bottom: 8px; }
.page-head b { font-weight: 500; color: var(--text); }
.inl { display: inline-block; vertical-align: -2px; }

/* ---------- главная ---------- */
/* плитки-показатели: иконка в мягком круге, название и пояснение, крупная сумма, плашка динамики */
.kpis { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpis > .kpi--hero { grid-column: 1 / -1; }                 /* телефон: баланс — на всю ширину, ниже долги и накопления/сундук */
@media (min-width: 720px) {
  .kpis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }           /* «Аналитика» */
  /* Mini: баланс крупнее соседей — самое главное число экрана */
  .kpis--mini { grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); }
  .kpis--mini > .kpi--hero { grid-column: auto; }
  /* Pro: слева одна большая плашка «Баланс» во всю высоту, справа две вытянутые — «Долги» и «Сундук Аркада» */
  .kpis--pro { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .kpis--pro > .kpi--hero { grid-column: 1; grid-row: 1 / span 2; }
  .kpis--pro > .kpi--wide { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; gap: 18px; min-height: 0; }
  .kpi--wide .kpi__foot { align-items: flex-end; }
}
.kpi {
  --kc: var(--d1);
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  min-width: 0; min-height: 132px;
  padding: 18px 18px 16px;
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  color: var(--text);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.kpi--bal { --kc: var(--d1); }
.kpi--debt { --kc: var(--d2); }
.kpi--save { --kc: var(--d3); }
.kpi--day { --kc: var(--d4); }
a.kpi:active { transform: scale(.98); }
@media (hover: hover) { a.kpi:hover { box-shadow: var(--card-shadow), 0 16px 32px -20px color-mix(in srgb, var(--kc) 60%, transparent); } }
.kpi__head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.kpi__icon {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--kc);
  background: color-mix(in srgb, var(--kc) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kc) 22%, transparent);
}
.kpi__icon svg { width: 20px; height: 20px; }
.kpi__titles { display: grid; gap: 1px; min-width: 0; }
.kpi__title, .kpi__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi__title { font-size: 14.5px; font-weight: 500; letter-spacing: -.01em; }
.kpi__sub { font-size: 12.5px; color: var(--text-3); }
.kpi--hero { gap: 22px; padding: 22px 22px 20px; }
.kpi--hero .kpi__icon { width: 46px; height: 46px; }
.kpi--hero .kpi__icon svg { width: 22px; height: 22px; }
.kpi--hero .kpi__title { font-size: 16px; }
.kpi--hero .kpi__foot { gap: 18px; }
.kpi__extra { font-size: 13px; color: var(--text-2); line-height: 1.35; }
.kpi__extra b { color: var(--text); font-weight: 500; }
.kpi__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
/* Сумма и плашка — ВСЕГДА друг под другом, на любой ширине: раньше в широкой плитке они стояли в одну строку, в узкой — в две,
   и после поворота телефона (вертикально → горизонтально → вертикально) iOS не пересчитывал высоту плитки — текст «слезал». */
.kpi__value { font-size: clamp(22px, 2.3vw, 28px); font-weight: 300; letter-spacing: -.035em; line-height: 1.05; white-space: nowrap; }
.kpi__value small { font-size: .5em; color: var(--text-2); margin-left: 2px; letter-spacing: 0; }
.kpis { grid-column: 1 / -1; }
.kpi .hero-num { min-width: 0; }
.kpi__pill { flex: none; height: 24px; font-size: 12px; }
.kpi__pill svg { width: 13px; height: 13px; }
@media (max-width: 419px) {
  .kpi { padding: 16px 14px 14px; gap: 14px; min-height: 120px; }
  .kpi__icon { width: 36px; height: 36px; }
  .kpi__sub { font-size: 12px; }
}

.t-bal { display: flex; flex-direction: column; }
.bal__note { margin-top: 14px; max-width: 48ch; color: var(--text-2); }
.bal__note b { color: var(--text); font-weight: 500; }
/* колесо в «Обзоре баланса» растёт вместе с карточкой, лишнее место — вокруг него */
.t-bal > .donut-box { flex: 1 1 auto; display: grid; align-content: center; margin-top: 18px; }
.bal__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: auto; padding-top: 28px; }
.bal__stats .well { display: grid; gap: 3px; align-content: start; }
.bal__stats b { font-size: clamp(18px, 2.2vw, 22px); font-weight: 400; letter-spacing: -.025em; }
.bal__stats small { font-size: 12.5px; }

.t-save { display: flex; flex-direction: column; }

/* «Долги» и «Сундук»: на телефоне — колонкой, от планшета — в две колонки, чтобы карточка занимала ровно столько места,
   сколько нужно её содержимому (без пустоты внизу). */
.dcard, .scard { display: grid; gap: 14px; }
.dcard__main .label, .scard__main .label { display: block; margin-top: 10px; }
.scard__main .label + .label { margin-top: 4px; }
.scard__split .split { margin-top: 4px; }
.dcard__side { margin-top: 6px; }
.well__info { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.well__act { margin-top: 10px; }
.well__act .btn { max-width: 100%; }

.split {
  display: grid;
  grid-template-columns: calc(var(--w1) * 1fr) calc(var(--w2) * 1fr) calc(var(--w3) * 1fr);
  gap: 4px;
  margin-top: 18px;
}
.split__seg .bar { height: 10px; }
.split-legend { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--text-2); }

.card--tone-calm { display: flex; flex-direction: column; }
.card--tone-calm[data-level="none"]      { --tone-calm-a: #dcdce2; --tone-calm-b: #e8e8ec; --tone-calm-c: #f0f0f3; }
.card--tone-calm[data-level="alert"]     { --tone-calm-a: #f5b2bf; --tone-calm-b: #f8c4a0; --tone-calm-c: #f9d8c6; }
.card--tone-calm[data-level="attention"] { --tone-calm-a: #f8d398; --tone-calm-b: #f5e08e; --tone-calm-c: #f6c8a6; }
.card--tone-calm[data-level="steady"]    { --tone-calm-a: #f4e68e; --tone-calm-b: #d0e79a; --tone-calm-c: #bde2af; }
.card--tone-calm[data-level="calm"]      { --tone-calm-a: #bde3a6; --tone-calm-b: #9dd8a4; --tone-calm-c: #d9ef9a; }
:root[data-theme="dark"] .card--tone-calm[data-level="none"]      { --tone-calm-a: #2a2b32; --tone-calm-b: #23242a; --tone-calm-c: #1e1f24; }
:root[data-theme="dark"] .card--tone-calm[data-level="alert"]     { --tone-calm-a: #7a2f46; --tone-calm-b: #7a4a22; --tone-calm-c: #4a2a30; }
:root[data-theme="dark"] .card--tone-calm[data-level="attention"] { --tone-calm-a: #7a5a22; --tone-calm-b: #6b6422; --tone-calm-c: #5a3a22; }
:root[data-theme="dark"] .card--tone-calm[data-level="steady"]    { --tone-calm-a: #5e6a22; --tone-calm-b: #3c6a2a; --tone-calm-c: #2c5a3a; }
:root[data-theme="dark"] .card--tone-calm[data-level="calm"]      { --tone-calm-a: #2c6a3a; --tone-calm-b: #2a6a52; --tone-calm-c: #4a6a22; }
.card--tone-calm .gauge { margin-top: 8px; }
.card--tone-calm .gauge__center .hero-num { justify-content: center; }
.calm-parts { display: grid; gap: 10px; margin-top: 22px; padding: 14px 16px; border-radius: var(--r-md); background: var(--well); border: 1px solid var(--card-border); }
.calm-parts li { display: grid; grid-template-columns: minmax(84px, 108px) 1fr 44px; align-items: center; gap: 12px; font-size: 13.5px; }
.calm-parts .num { text-align: right; font-size: 12.5px; }

.t-up .row .btn { flex: none; }
.t-up .row__main { min-width: 0; }

.month-switch { display: flex; align-items: center; gap: 4px; }
.month-switch__label { min-width: 132px; text-align: center; font-weight: 500; font-size: 15px; }
.icon-btn[disabled] { opacity: .35; pointer-events: none; }

.flow-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 30px; }
.flow-sum > div { display: grid; gap: 2px; min-width: 0; align-content: start; }
.flow-sum .big { font-size: clamp(18px, 2.6vw, 32px); white-space: nowrap; }
.flow-sum small { font-size: 13px; }
/* на телефоне «Доходы − расходы» с пометкой «из них отложено себе» — отдельной строкой: подпись длинная и в три колонки не влезает */
@media (max-width: 719px) {
  .flow-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .flow-sum > div:nth-child(3) { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid var(--line); }
}
/* операции «заранее»: в итоги и баланс войдут в свой день */
.flow-planned { margin: -18px 0 24px; font-size: 13px; }
.day-label--planned { color: var(--text-3); }
.row--planned > * { opacity: .6; }   /* не на самой строке: её анимация «pop» вернула бы opacity 1 */
.row--planned .row__amount { color: var(--text-2); }
.flow-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin: 28px 0 22px; }
.flow-tools .segmented { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.flow-tools .segmented::-webkit-scrollbar { display: none; }
.flow-tools .segmented button { flex: none; }

.tx-hero { display: grid; justify-items: center; gap: 4px; padding: 6px 0 10px; }
.tx-hero b { font-size: 40px; font-weight: 300; letter-spacing: -.035em; }

.row__icon--lime { background: var(--accent); color: var(--on-accent); }
.tip em { font-style: normal; font-weight: 500; }

/* быстрые действия */
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quick {
  display: grid;
  align-content: start;          /* значок и заголовок всегда на одной высоте, подпись — под ними */
  justify-items: start;
  gap: 4px;
  min-height: 128px;
  padding: 16px;
  text-align: left;
  border-radius: 22px;
  background: var(--well);
  border: 1px solid var(--card-border);
  transition: transform .22s var(--ease), background-color .22s var(--ease);
}
.quick:active { transform: scale(.97); }
@media (hover: hover) { .quick:hover { background: var(--well-strong); } }
.quick__icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--well-strong); }
.quick__icon svg { width: 20px; height: 20px; }
.quick--pos .quick__icon { background: var(--pos-bg); color: var(--pos); }
.quick--warn .quick__icon { background: var(--warn-bg); color: var(--warn); }
.quick--lime .quick__icon { background: var(--accent); color: var(--on-accent); }
.quick--ink .quick__icon { background: var(--ink); color: var(--on-ink); }
.quick b { font-weight: 500; font-size: 15.5px; margin-top: 14px; letter-spacing: -.01em; }
.quick > span:last-child { color: var(--text-2); font-size: 12.5px; line-height: 1.3; }

/* ---------- сетки главной ----------
   телефон: всё колонкой · планшет: плитки в ряд, карточки на всю ширину ·
   компьютер (от 1100) — дашборд: сверху плитки-показатели, ниже «Обзор баланса» и «Платежи» рядом,
   под ними «Доходы и расходы» слева, «Цели» и «Правило Аркада» справа. Главное помещается в первый экран. */
@media (min-width: 720px) {
  .dcard { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 36px; align-items: end; }
  .scard { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 36px; row-gap: 20px; align-items: end; }
  .scard__well { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
  .well__info { display: grid; justify-content: start; gap: 2px; }
  .well__act { margin-top: 0; flex: none; }
  .home .t-calm { grid-column: span 5; }
}
@media (min-width: 1100px) {
  .home .t-bal { grid-column: 1 / span 7; }
  .home .t-up { grid-column: 8 / span 5; }
  .home .t-calm { grid-column: span 12; }
  .home .t-flow { grid-column: 1 / span 7; grid-row: span 2; align-self: start; }
  .home .t-goals, .home .t-save { grid-column: 8 / span 5; align-self: start; }
  /* «Платежи» рядом с «Обзором» — одной высоты: лишняя высота достаётся области списка, а не пустоте под ним */
  .home .t-up { display: flex; flex-direction: column; }
  .home .t-up > .list, .home .t-up > .empty { flex: 1 1 auto; align-content: start; }
  .home--mini .t-up { grid-column: 1 / span 5; }
  .home--mini .t-flow { grid-column: 6 / span 7; grid-row: auto; align-self: stretch; display: flex; flex-direction: column; }
  .home .t-goals .list--cols { grid-template-columns: minmax(0, 1fr); }
  /* в узкой колонке дашборда «Правило Аркада» — в одну колонку, «Обзор баланса» — без лишней высоты */
  .home .t-save .scard { grid-template-columns: minmax(0, 1fr); }
  .home .t-save .scard__well { display: grid; gap: 10px; }
  .home .home-head { margin-bottom: 0; }
  .home .t-up .row { min-height: 60px; padding-block: 9px; }
  .home .kpi:not(.kpi--hero) { min-height: 0; padding: 14px 18px 12px; gap: 10px; }
  .home--mini .kpi--hero { gap: 12px; padding: 18px 22px 16px; }
  .home--mini .kpi--hero .kpi__foot { gap: 14px; }
  .home--mini .home-head .page-sub { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .home .home-head .page-title { font-size: 34px; }
  .home .home-head .page-sub { margin-top: 8px; max-width: 90ch; }
}
@media (max-width: 719px) {
  /* «Доход» и «Расход» — на всю ширину строки, равными крупными кнопками */
  .flow-tools .segmented { width: 100%; }
  .flow-tools .segmented button { flex: 1 1 auto; padding: 0 8px; font-size: 13.5px; }
  .flow-tools .cluster { width: 100%; flex-wrap: nowrap; }
  .flow-tools .cluster .btn { flex: 1 1 0; min-height: 48px; }
  .bal__stats { grid-template-columns: 1fr; }
  .month-switch__label { min-width: 112px; }
  .flow-tools { margin-top: 20px; }
  .calm-parts li { grid-template-columns: 84px 1fr 42px; }
}

/* ==========================================================================
   Нагрузка
   ========================================================================== */
.sum-grid { display: grid; gap: 28px; }
.sum-side { min-width: 0; }
.stackbar { display: flex; gap: 2px; height: 16px; }
.stackbar span { display: block; min-width: 0; border-radius: 4px; transition: flex .6s var(--ease); }
.stackbar span:first-child { border-radius: 999px 4px 4px 999px; }
.stackbar span:last-child { border-radius: 4px 999px 999px 4px; }
.stackbar span[style*="flex:0;"] { display: none; }
.stackbar--sm { height: 12px; }
.stack-legend { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 18px; font-size: 13.5px; color: var(--text-2); }
.stack-legend span { display: inline-flex; align-items: center; gap: 8px; }
.stack-legend i { width: 10px; height: 10px; border-radius: 3px; display: block; }
.stack-legend b { color: var(--text); font-weight: 500; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.facts .well { display: grid; gap: 2px; }
.facts b { font-size: clamp(18px, 2vw, 22px); font-weight: 400; letter-spacing: -.02em; }
.facts small { font-size: 13px; }
.row.is-off { opacity: .55; }
.debt-row .row__main { min-width: 0; }
@media (min-width: 900px) { .sum-grid { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); align-items: center; } }
@media (min-width: 1000px) { .load .t-debts, .load .t-obs { grid-column: span 6; } }
@media (max-width: 719px) { .facts { grid-template-columns: 1fr; } }

/* ==========================================================================
   План
   ========================================================================== */
.plan-hero { display: grid; gap: 28px; }
.plan-date { margin-top: 18px; font-size: clamp(20px, 2.6vw, 26px); font-weight: 300; letter-spacing: -.03em; }
.plan-ctl { display: grid; gap: 12px; align-content: center; }
.plan-marks { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; color: var(--text-2); margin-top: -4px; }
#pl-whatif { display: grid; gap: 8px; font-size: 14px; }
#pl-whatif b { font-weight: 500; }

.card--next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
  background: linear-gradient(115deg, #e1f4e8 0%, #cdebd8 55%, #bde3cc 100%);
  color: var(--on-accent);
  border-color: rgba(255, 255, 255, .5);
}
.card--next .label { color: rgba(12, 59, 34, .7); }
.card--next h2 { font-size: 20px; font-weight: 500; letter-spacing: -.02em; margin: 2px 0 4px; }
.card--next p { color: rgba(12, 59, 34, .85); max-width: 62ch; }
.card--next .btn--ink { background: #0c3b22; color: #e6f8ec; }
.next__icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #0c3b22; color: #cdebd8; flex: none; }
.next__icon svg { width: 24px; height: 24px; }
.next__text { flex: 1 1 280px; min-width: 0; }
:root[data-theme="dark"] .card--next { background: linear-gradient(115deg, #3a6b55 0%, #2f5a48 100%); color: #e1f6ea; }
:root[data-theme="dark"] .card--next .label, :root[data-theme="dark"] .card--next p { color: rgba(225, 246, 234, .86); }
:root[data-theme="dark"] .card--next .btn--ink { background: #8fd9ad; color: #0d2a1b; }
:root[data-theme="dark"] .next__icon { background: #8fd9ad; color: #0d2a1b; }

.methods { display: grid; gap: var(--gap); }
.mcard {
  position: relative;
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 20px;
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.mcard input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mcard.is-selected { box-shadow: 0 0 0 1.5px var(--ink), 0 0 0 5px var(--ring), var(--card-shadow); }
.mcard:has(input:focus-visible) { outline: 2px solid color-mix(in srgb, var(--ink) 78%, transparent); outline-offset: 4px; }
.mcard:active { transform: scale(.985); }
.mcard__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mcard__top b { font-size: 18px; font-weight: 500; letter-spacing: -.02em; }
.mcard__short { color: var(--text-2); font-size: 14px; }
.mcard__stats { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: var(--well-dim); }
.mcard__stats span { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.mcard__stats em { font-style: normal; color: var(--text-2); }
.mcard__stats b { font-weight: 500; text-align: right; }
.mcard__desc { font-size: 13px; color: var(--text-2); }

button.pcard { width: 100%; font: inherit; color: inherit; text-align: left; }
.pcard__sum { display: block; font-size: clamp(26px, 3vw, 32px); font-weight: 300; letter-spacing: -.035em; line-height: 1.05; white-space: nowrap; }
.pcard__sum small { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--text-2); margin-left: 4px; }
.methods__note { margin-bottom: 14px; }
.t-paces .section-head, .t-methods .section-head { flex-wrap: wrap; align-items: baseline; row-gap: 2px; }
.mcard__stats b { overflow-wrap: anywhere; }

.order { display: grid; gap: 16px; }
.order__row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; }
.order__move { display: inline-flex; gap: 6px; }
.order__move .icon-btn { width: 38px; height: 38px; }
.order__note { margin: -6px 0 16px; font-size: 13.5px; max-width: 60ch; }
.order__row.is-moved { animation: row-in .5s var(--ease) both; }
@media (max-width: 419px) { .order__row { grid-template-columns: 30px minmax(0, 1fr) auto; } .order__amt { grid-column: 2; grid-row: 2; justify-self: start; } .order__move { grid-column: 3; grid-row: 1 / span 2; flex-direction: column; } }
.order__n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--on-ink); font-weight: 500; font-size: 14px; }
.order__main { display: grid; gap: 4px; min-width: 0; }
.order__main b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order__main .muted { font-size: 13px; }
.order__amt { font-size: 14.5px; font-weight: 500; }

.road { display: grid; }
.road__step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding-bottom: 24px; }
.road__step:last-child { padding-bottom: 0; }
.road__step::before { content: ""; position: absolute; left: 21px; top: 46px; bottom: 2px; width: 2px; background: var(--line); border-radius: 2px; }
.road__step:last-child::before { display: none; }
.road__step.is-done::before { background: var(--pos-fill); }
.road__dot { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--well-dim); color: var(--text-3); }
.road__step.is-done .road__dot { background: var(--pos-bg); color: var(--pos); }
.road__step.is-current .road__dot { background: var(--ink); color: var(--on-ink); box-shadow: 0 0 0 6px var(--well-dim); }
.road__body b { display: block; font-weight: 500; font-size: 16px; letter-spacing: -.01em; padding-top: 2px; }
.road__body p { color: var(--text-2); font-size: 14px; max-width: 62ch; margin-top: 2px; }
.road__step.is-todo .road__body { opacity: .72; }

@media (min-width: 900px) {
  .plan-hero { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 40px; align-items: center; }
  .methods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   Аналитика
   ========================================================================== */

.leaks, .ins, .cats, .babs { display: grid; gap: 18px; }
.leak { display: flex; gap: 14px; align-items: flex-start; }
.leak__main { flex: 1; min-width: 0; display: grid; gap: 6px; }
.leak__main p { font-size: 13.5px; }
.leak__main .between b:first-child { font-weight: 500; }

.ins__item { display: flex; gap: 14px; padding: 16px; border-radius: var(--r-md); background: var(--well); }
.ins__icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--well-strong); }
.ins__icon svg { width: 18px; height: 18px; }
.ins--bad .ins__icon { background: var(--neg-bg); color: var(--neg); }
.ins--warn .ins__icon { background: var(--warn-bg); color: var(--warn); }
.ins--good .ins__icon { background: var(--pos-bg); color: var(--pos); }
.ins--info .ins__icon { background: var(--slate-bg); color: var(--slate); }
.ins__main { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.ins__main b { font-weight: 500; }
.ins__main p { font-size: 13.5px; color: var(--text-2); }
.ins__main .btn { margin-top: 6px; }

.catrow { display: grid; grid-template-columns: 42px minmax(0, 1fr) 62px; gap: 12px; align-items: center; }
.catrow__main { display: grid; gap: 8px; min-width: 0; }
.catrow__main b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catrow__chip { text-align: right; }

.flow-x--cols { gap: 10px; }
.flow-x--cols span { flex: 1; text-align: center; }

.bab { display: grid; grid-template-columns: 78px minmax(0, 1fr) 88px; gap: 12px; align-items: center; font-size: 13.5px; }
.bab__v { text-align: right; font-size: 12.5px; white-space: nowrap; }

.cures { display: grid; gap: 18px 36px; }
.cure { display: flex; gap: 14px; align-items: flex-start; }
.cure__mark { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); flex: none; display: grid; place-items: center; margin-top: 1px; }
.cure__mark svg { width: 15px; height: 15px; }
.cure.is-done .cure__mark { background: var(--pos-fill); border-color: transparent; color: #fff; }
.cure b { font-weight: 500; }
.cure p { font-size: 13.5px; color: var(--text-2); }

@media (min-width: 720px) {
  .cures { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
  .analytics .t-leaks { grid-column: span 7; }
  .analytics .t-ins { grid-column: span 5; }
  .analytics .t-cats, .analytics .t-cash, .analytics .t-bab, .analytics .t-how, .analytics .t-cf, .analytics .t-src { grid-column: span 6; }
}

/* ==========================================================================
   Заметки
   ========================================================================== */
.feed { display: flex; flex-direction: column; max-height: min(56vh, 540px); min-height: 280px; overflow-y: auto; overscroll-behavior: contain; padding: 4px 2px; scroll-behavior: smooth; }
.feed > :first-child { margin-top: auto; }
.feed__label { margin: 14px 4px 8px; font-size: 12.5px; color: var(--text-2); text-align: center; }
.feed__list { display: grid; gap: 10px; justify-items: end; }
.bubble { max-width: min(560px, 92%); padding: 12px 14px 8px; border-radius: 22px 22px 6px 22px; background: var(--ink); color: var(--on-ink); }
.bubble.is-pinned { box-shadow: 0 0 0 2px var(--accent); }
.bubble__body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.bubble__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; font-size: 12px; opacity: .92; }
.bubble__meta .pill { background: color-mix(in srgb, currentColor 16%, transparent); color: inherit; height: 22px; font-size: 12px; }
.bubble__meta time { opacity: .75; }
.bubble__acts { margin-left: auto; display: inline-flex; gap: 2px; opacity: 0; transition: opacity .2s; }
.bubble:hover .bubble__acts, .bubble:focus-within .bubble__acts { opacity: 1; }
@media (hover: none) { .bubble__acts { opacity: .9; } }
.bubble__acts .icon-btn { background: transparent; border-color: transparent; color: inherit; width: 30px; height: 30px; }
.bubble__acts .icon-btn svg { width: 16px; height: 16px; }
.bubble__acts .icon-btn[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }

.composer { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.composer__row { display: flex; align-items: flex-end; gap: 10px; }
.composer textarea { flex: 1; min-height: 48px; max-height: 160px; padding: 13px 18px; border-radius: 24px; border: 0; background: var(--well); box-shadow: 0 0 0 1px var(--line) inset; resize: none; line-height: 1.4; font-size: 16px; outline: none; color: var(--text); }
.composer textarea:focus { background: var(--well-strong); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 40%, transparent) inset, 0 0 0 4px var(--ring); }
.composer textarea::placeholder { color: var(--text-3); }
.composer__send { width: 48px; height: 48px; background: var(--accent); color: var(--on-accent); border-color: transparent; }

.bot { display: grid; gap: 16px; margin-top: 4px; }
.bot__msg { padding: 14px 16px; border-radius: 20px 20px 20px 6px; background: var(--well-strong); max-width: 36ch; }
.bot__ask { display: flex; flex-wrap: wrap; gap: 8px; }
.bot__ask span { padding: 8px 14px; border-radius: 999px; background: var(--well); font-size: 13px; color: var(--text-2); }
.bot__input { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 999px; border: 1.5px dashed var(--line); color: var(--text-2); font-size: 14px; }
.bot__input svg { width: 18px; height: 18px; }
@media (min-width: 1100px) {
  .notes .t-feed { grid-column: span 8; }
  .notes .t-bot { grid-column: span 4; align-self: start; }
}

/* ==========================================================================
   Настройки
   ========================================================================== */
.setrow { padding: 6px 0; }
.settings .t-set { grid-column: 1 / -1; }
@media (min-width: 1000px) {
  .settings .t-set { grid-column: span 6; }
  .settings .t-soon { grid-column: 1 / -1; }
}

/* ==========================================================================
   Цели
   ========================================================================== */
.quick--slate .quick__icon { background: var(--slate-bg); color: var(--slate); }
.quick-grid .quick:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 92px; }

.ghero { display: grid; gap: 34px; }
.ghero__main { display: grid; gap: 16px; align-content: start; justify-items: start; min-width: 0; }
.ghero__main > .hero-num { margin-bottom: 6px; }
.ghero__side { display: grid; gap: 20px; align-content: center; min-width: 0; }
.ghero__lead { color: var(--text-2); max-width: 48ch; }
.ghero__side .facts { margin-top: 4px; }
.facts small.block { display: block; margin-top: 2px; }
.ghero__side .chips { gap: 8px; }

.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; min-height: 40px; }

.goal-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.goal { display: grid; gap: 22px; align-content: start; }
.goal__head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  grid-template-areas: "icon name pill" "icon when when";
  column-gap: 14px;
  row-gap: 8px;
  align-items: center;
  width: calc(100% + 12px);
  margin: -6px -6px 0;
  padding: 6px;
  text-align: left;
  border-radius: var(--r-md);
  transition: background-color .22s var(--ease), transform .22s var(--ease);
}
.goal__head:active { transform: scale(.99); }
@media (hover: hover) { .goal__head:hover { background: var(--well); } }
.goal__head .row__icon { grid-area: icon; align-self: start; }
.goal__name { grid-area: name; font-weight: 500; font-size: 17px; letter-spacing: -.015em; line-height: 1.25; overflow-wrap: anywhere; }
.goal__head .pill { grid-area: pill; align-self: start; }
.goal__when { grid-area: when; color: var(--text-2); font-size: 13px; line-height: 1.35; }
.goal__nums { display: grid; gap: 8px; }
.goal__big { display: block; font-size: clamp(28px, 3vw, 34px); font-weight: 300; letter-spacing: -.035em; line-height: 1.05; white-space: nowrap; }
.goal__big small { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--text-2); margin-left: 4px; }
.goal__bar { display: grid; gap: 8px; }
.goal__prog { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--text-2); }
.goal__prog b { color: var(--text); font-weight: 500; }
.goal__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; }
.goal__month { font-size: 13.5px; color: var(--text-2); }
.goal__month b { color: var(--text); font-weight: 500; }

.notice { margin: 0 0 18px; }
.notice[hidden] { display: none; }
.notice .gnote { align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 14px 16px; }
.notice .gnote__text { flex: 1 1 220px; min-width: 0; }
.notice .gnote__text b { font-weight: 500; }
.notice .gnote .cluster { gap: 8px; }
.feed__more { display: flex; margin: 0 auto 12px; }
.gnote {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--well-dim);
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.45;
}
.gnote svg { width: 18px; height: 18px; margin-top: 1px; color: var(--text-2); }
.gnote--warn { background: var(--warn-bg); color: var(--text); }
.gnote--warn svg { color: var(--warn); }
.cap + .gnote, .cap__note + .gnote { margin-top: 14px; }
.inline-link {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 500;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--text) 30%, transparent);
  text-underline-offset: 3px;
  cursor: pointer;
}
.inline-link:hover { text-decoration-color: currentColor; }

.cap .kv { padding: 7px 0; }
.cap .kv small { font-size: 12.5px; }
.cap .divider { margin: 8px 0; }
.kv--total { align-items: center; padding-top: 4px; }
.kv--total span:first-child { color: var(--text); font-weight: 500; }
.kv--total b { font-size: 26px; font-weight: 300; letter-spacing: -.035em; }
.cap__note { margin-top: 16px; font-size: 13px; line-height: 1.5; max-width: 60ch; }

/* «живой» расчёт в форме цели */
.gprev { display: grid; gap: 12px; align-content: start; min-height: 132px; background: var(--well-strong); }
.gprev__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.gprev__sum { display: grid; gap: 2px; min-width: 0; }
.gprev__num { font-size: clamp(30px, 8vw, 38px); font-weight: 300; letter-spacing: -.035em; line-height: 1.05; }
.gprev__text { font-size: 14px; line-height: 1.5; color: var(--text-2); }
.gprev__hint { font-size: 13.5px; line-height: 1.5; }
.gprev .btn { justify-self: start; }

/* карточка целей на главной */
.t-goals .list--cols { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.t-goals .row__side { min-width: 64px; }

.goals .t-gdone { padding: 14px; }

@media (min-width: 720px) {
  .ghero { grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); gap: 40px; align-items: center; }
  .ghero--intro { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}
@media (min-width: 1100px) {
  .goals .t-lhead, .goals .t-list { grid-column: span 8; }
  .goals .t-cap { grid-column: span 4; align-self: start; }
  .goals .t-cap--solo { grid-column: 1 / -1; }
  .goals .goal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* шапка страницы со своей кнопкой «Добавить»: всегда справа от заголовка, на ПК и на телефоне */
.page-head--row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title act" "sub sub"; column-gap: 16px; row-gap: 12px; align-items: center; }
.page-head--row .page-title { grid-area: title; }
.page-head--row .page-sub { grid-area: sub; margin-top: 0; }
.page-head--row .head-add { grid-area: act; }
@media (min-width: 720px) {
  .page-head--row { grid-template-areas: "title act" "sub act"; }
  .page-head--row .head-add { align-self: center; }
}
@media (max-width: 719px) { .head-add { min-height: 40px; padding: 0 16px; font-size: 14px; } .head-add svg { width: 16px; height: 16px; } }
.goals-tabs { margin-top: 0; }
/* заголовок раздела с числом-индексом: «Мои цели²», «Мои хотелки⁶» — одинаково в обеих вкладках */
.title-count { align-self: flex-start; margin: -2px 0 0 -5px; font-size: 11.5px; font-weight: 500; line-height: 1; color: var(--text-3); font-variant-numeric: tabular-nums; }
.goals .t-list > .card__head, .t-wlist > .card__head { margin-bottom: 18px; }
/* цели внутри плашки «Мои цели» — мягкие внутренние карточки, как строки хотелок */
.t-glist .goal { padding: 18px; border-radius: var(--r-lg); background: var(--well); border-color: transparent; box-shadow: none; }
@media (hover: hover) { .t-glist .goal__head:hover { background: color-mix(in srgb, var(--text) 5%, transparent); } }
@media (max-width: 419px) { .t-glist .goal { padding: 16px; } }

/* шапка «Цели / Хотелки»: оба варианта текста в одной ячейке — ничего не прыгает */
.swap { display: inline-grid; }
.page-sub .swap { display: grid; }
.swap__i { grid-area: 1 / 1; }
.swap__i:not(.is-on) { visibility: hidden; }
.head-add .swap { justify-items: center; }

/* смена вкладки и фильтра: старое уходит в сторону за 0,11 с, новое въезжает за 0,3 с (только сдвиг и прозрачность) */
.goals > .page-head .swap__i, .goals > :not(.page-head):not(.goals-tabs), .wish-body { transition: opacity .11s ease-in, transform .11s ease-in; }
.goals--out-r > :not(.page-head):not(.goals-tabs), .wish-body--out-r { opacity: 0; transform: translateX(-14px); }
.goals--out-l > :not(.page-head):not(.goals-tabs), .wish-body--out-l { opacity: 0; transform: translateX(14px); }
.goals--out-r > .page-head .swap__i.is-on, .goals--out-l > .page-head .swap__i.is-on { opacity: 0; }
.goals--in-r > :not(.page-head):not(.goals-tabs), .wish-body--in-r { animation: slide-in-r .3s var(--ease) backwards; }
.goals--in-l > :not(.page-head):not(.goals-tabs), .wish-body--in-l { animation: slide-in-l .3s var(--ease) backwards; }
.goals--in-r > :nth-child(n+4), .goals--in-l > :nth-child(n+4) { animation-delay: 40ms; }
.goals--in-r > :nth-child(n+5), .goals--in-l > :nth-child(n+5) { animation-delay: 80ms; }
.goals--in-r > .page-head .swap__i.is-on, .goals--in-l > .page-head .swap__i.is-on { animation: fade .22s ease-out backwards; }
@keyframes slide-in-r { from { opacity: 0; transform: translateX(22px); } }
@keyframes slide-in-l { from { opacity: 0; transform: translateX(-22px); } }
@media (prefers-reduced-motion: reduce) {
  .goals--in-r > *, .goals--in-l > *, .wish-body--in-r, .wish-body--in-l, .goals--in-r .swap__i, .goals--in-l .swap__i { animation: none; }
}
.goals-tabs .segmented { max-width: 460px; }
.seg-count { margin-left: 2px; font-size: 12px; font-weight: 400; opacity: .65; }
.seg-dot { flex: none; width: 8px; height: 8px; margin-left: 2px; border-radius: 50%; background: var(--accent-strong); box-shadow: 0 0 0 2px var(--btn-fill); }

/* хотелки */
.wish-tools { margin: 2px 0 0; }
.wish-body { margin-top: 18px; }
.wrow { align-items: center; }
.wrow__reward { display: grid; gap: 4px; margin-top: 8px; }
.wrow__rlabel { font-size: 12.5px; line-height: 1.3; color: var(--text-2); }
.wrow .row__sub, .wrow .row__title { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }
.wrow__side { font-size: 12px; white-space: nowrap; }
.wrow__pill { height: 22px; font-size: 12px; margin-top: 4px; }
.wrow--earned { background: color-mix(in srgb, var(--accent) 26%, var(--well)); }
.wrow--bought { opacity: .85; }
.wish-form .segmented label { padding: 0 8px; font-size: 13px; white-space: nowrap; text-align: center; }
.wish-reward { display: grid; gap: 14px; }
.wish-reward-card.is-met { background: color-mix(in srgb, var(--accent) 22%, var(--well)); }
.goals-foot { margin-top: 12px; display: flex; }
.wish-link { gap: 6px; }

/* панель «сохранено / сохраняю» в настройках */
.savebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
/* «Сохранено» дублировало строку слева — пока всё сохранено, кнопки нет (место под неё держим, чтобы строка не прыгала) */
.savebar .btn.is-quiet { visibility: hidden; }
.savebar__state { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; color: var(--text-2); }
.savebar__state svg { width: 18px; height: 18px; flex: none; color: var(--pos); }
.savebar__state.is-dirty svg { color: var(--warn); }
.savebar__state.is-error { color: var(--neg); }
.savebar__state.is-error svg { color: var(--neg); }
.savebar .btn { flex: none; }

/* ---------- повтор анимации при смене месяца / фильтра ---------- */
.no-anim .flow.replay .flow__up i, .no-anim .flow.replay .flow__down i {
  animation: flow-grow .65s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 9ms);
}
.no-anim .tx-list.replay .day-label, .no-anim .tx-list.replay .row {
  animation: pop .3s var(--ease) both;
  animation-delay: calc(var(--k, 0) * 14ms);
}
.doc a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }

/* шапка карточки «Цели» на главной: слева название и подпись (на телефоне — и плашка статуса под ними), справа — одна кнопка */
.card__head--goals { align-items: flex-start; }
.gh__main { display: grid; justify-items: start; gap: 2px; min-width: 0; flex: 1 1 auto; }
.gh__main .pill { margin-top: 10px; }
.gh__side { display: flex; align-items: center; gap: 12px; flex: none; }
.gh__side .link-btn { white-space: nowrap; }

.cap__edit { margin-top: 14px; }
.demo-note { grid-column: 1 / -1; }

/* кнопка «Указать свои обычные траты» и предупреждение под ней — не вплотную */
.cap__edit { margin-bottom: 4px; }
.cap__edit + .gnote, .cap__edit + .cap__note { margin-top: 20px; }

/* денежный поток и источники дохода */
.cf-start { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.cf-start b { font-size: 22px; font-weight: 400; letter-spacing: -.02em; }
.gnote--good { background: var(--pos-bg); color: var(--text); }
.gnote--good svg { color: var(--pos); }
.srcs { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.src { display: grid; gap: 6px; }

/* «Показать ещё» под длинной историей на телефоне */
.tx-more { margin-top: 12px; }
/* Mini: список операций заполняет карточку, а не оставляет пустоту под собой */
.home--mini .t-recent .tx-list { flex: 1 1 auto; }

/* Mini, компьютер: карточка «Платежи» растягивается до высоты «Последних операций», строки делят место поровну */
@media (min-width: 1100px) {
  .home--mini .t-up { display: flex; flex-direction: column; }
  .home--mini .t-up > .list { flex: 1 1 auto; grid-auto-rows: 1fr; }
}

/* ---------- Планы ---------- */
.psum__fit { display: grid; gap: 8px; width: 100%; max-width: 360px; }
.psum__state { font-size: 13.5px; color: var(--text-2); }
.psum__budget { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; font-size: 13.5px; }
.plan-tools { margin: 2px 0 0; }
.plan-body { margin-top: 18px; }
/* строка: сама покупка (открыть) и рядом круглая «✓ Куплено» — два отдельных нажатия, не кнопка в кнопке */
.prow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.prow > .row { min-width: 0; }
.prow .row__title, .prow .row__sub { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }
.prow__buy {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--btn-fill); color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--btn-hair);
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.prow__buy svg { width: 18px; height: 18px; }
.prow__buy:active { transform: scale(.94); }
@media (hover: hover) { .prow__buy:hover { background: var(--pos-bg); color: var(--pos); } }
.prow--later .row__amount { color: var(--text-2); }
@media (min-width: 1100px) {
  .plans .t-psum, .plans .t-plist { grid-column: 1 / -1; }
}
/* категория — в заголовке группы, поэтому в строке вместо значка только точка-статус: зелёная — по карману сейчас */
.prow__main { gap: 12px; padding-left: 16px; }
.prow__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); opacity: .45; }
.prow--fits .prow__dot { background: var(--pos-fill); opacity: 1; }
.prow--noprice .prow__dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-3); }