:root{
  color-scheme:light;
  --paper:#FAF8F3; --ink:#22292F; --dim:#6B7480; --line:#E4DFD4;
  --pine:#2E6B4F; --pine-soft:#E7F0EB; --amber:#C98A2D; --red:#B4433A;
  --card:#FFFFFF; --amber-soft:#FBF1DF;
  --red-soft:#F6E4E2; --red-line:#E7C9C5; --pine-line:#C9DED3;
  --placeholder:#C9C3B6; --disabled:#CFD5D1; --on-accent:#FFFFFF;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}

/* Тёмная тема.
   Два источника: системная настройка (prefers-color-scheme) и тема самого
   Telegram — приложение живёт в его WebView, и человек с тёмным мессенджером
   на светлой системе ожидает тёмный экран. Поэтому app.js ставит на <html>
   data-theme, и он побеждает системную настройку в обе стороны.
   color-scheme обязателен: без него системные поля ввода и селекты остаются
   белыми, и половина форм светится посреди тёмного экрана. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#14161A; --ink:#E8E6E1; --dim:#98A1AC; --line:#2A2F36;
    --pine:#6FB08E; --pine-soft:#1B2A22; --amber:#E0A94A; --red:#E2695E;
    --card:#1B1E24; --amber-soft:#2A2317;
    --red-soft:#33211F; --red-line:#4A302C; --pine-line:#274535;
    --placeholder:#6C7480; --disabled:#3A4048; --on-accent:#10231A;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#14161A; --ink:#E8E6E1; --dim:#98A1AC; --line:#2A2F36;
  --pine:#6FB08E; --pine-soft:#1B2A22; --amber:#E0A94A; --red:#E2695E;
  --card:#1B1E24; --amber-soft:#2A2317;
  --red-soft:#33211F; --red-line:#4A302C; --pine-line:#274535;
  --placeholder:#6C7480; --disabled:#3A4048; --on-accent:#10231A;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);
  font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;padding-bottom:82px}
.wrap{max-width:520px;margin:0 auto;padding:14px 14px 0}
header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
header h1{font-size:19px;font-weight:700;letter-spacing:.2px}
header .mon{font-family:var(--mono);font-size:13px;color:var(--dim)}
/* лента-термометр лимита */
.limitbar{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px 12px;margin-bottom:14px;position:relative}
.limitbar .row{display:flex;justify-content:space-between;font-size:13px;color:var(--dim)}
/* nowrap: без него знак ₽ отрывается от суммы и уезжает на вторую строку,
   а шапка прыгает по высоте при каждой записи */
.limitbar .nums{font-family:var(--mono);font-size:13px;color:var(--ink);
  white-space:nowrap}
.track{height:12px;border-radius:6px;background:var(--pine-soft);margin-top:7px;
  overflow:hidden;border:1px solid var(--line)}
.fill{height:100%;background:var(--pine);border-radius:6px;transition:width .4s}
.fill.warn{background:var(--amber)} .fill.over{background:var(--red)}
.perf{position:absolute;left:12px;right:12px;bottom:4px;border-bottom:2px dotted var(--line)}
/* вкладки */
/* Нижний бар: пунктов стало пять, и он подрос. Плюс safe-area — в Telegram
   на iPhone снизу системная полоса жеста, из-за неё по нижнему ряду
   промахивались. env() на старых WebView просто вернёт 0. */
nav{position:fixed;bottom:0;left:0;right:0;background:var(--card);
  border-top:1px solid var(--line);display:flex;z-index:5;
  padding-bottom:env(safe-area-inset-bottom,0px)}
nav button{flex:1;padding:15px 0 18px;border:0;background:none;font:600 11.5px system-ui;
  color:var(--dim);cursor:pointer;letter-spacing:-.2px}
nav button.on{color:var(--pine)}
nav button.on span{border-bottom:2px solid var(--pine);padding-bottom:3px}
.tab{display:none}.tab.on{display:block}
/* ввод */
.entry{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px}
.entry label{font-size:12px;color:var(--dim);display:block;margin-bottom:6px}
.inrow{display:flex;gap:8px}
input[type=text],input[type=number],select{width:100%;padding:12px;border:1px solid var(--line);
  border-radius:9px;font:16px system-ui;background:var(--paper);color:var(--ink)}
input:focus,select:focus{outline:2px solid var(--pine);outline-offset:0;border-color:var(--pine)}
/* .btn — только форма. Фон задают модификаторы (.main, .ghost, .btn-quiet,
   .btn-danger); кнопка с одним лишь .btn получит системный серый и в тёмной
   теме будет выглядеть отключённой. */
.btn{border:0;border-radius:9px;padding:12px 16px;font:600 15px system-ui;cursor:pointer}
.btn.main{background:var(--pine);color:var(--on-accent);width:100%;margin-top:10px}
.btn.ghost{background:var(--pine-soft);color:var(--pine)}
.btn.tiny{padding:7px 10px;font-size:13px;border-radius:7px}
.hint{font-size:12px;color:var(--dim);margin-top:8px}
.qrline{display:flex;gap:8px;margin-top:10px}
.qrline .btn{flex:1}
#qrfile{display:none}
/* чипы категорий */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.chip{padding:7px 12px;border-radius:16px;border:1px solid var(--line);background:var(--card);
  font:500 13px system-ui;color:var(--ink);cursor:pointer}
.chip.sel{background:var(--pine);border-color:var(--pine);color:var(--on-accent)}
/* карточка подтверждения */
.confirm{background:var(--card);border:1.5px solid var(--pine);border-radius:12px;
  padding:14px;margin-top:12px}
.confirm .sum{font-family:var(--mono);font-size:26px;font-weight:700}
.confirm .meta{font-size:13px;color:var(--dim);margin-top:2px}
.split-row{display:flex;gap:8px;margin-top:8px}
.split-row input{flex:1} .split-row select{flex:1.4}
.split-left{font-family:var(--mono);font-size:13px;margin-top:8px}
.split-left.bad{color:var(--red)}
/* список операций */
h2{font-size:13px;color:var(--dim);text-transform:uppercase;letter-spacing:.6px;
  margin:18px 2px 8px}
.tx{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;margin-bottom:7px;display:flex;align-items:center;gap:10px}
.tx .cat{font-size:13px;font-weight:600}
.tx .note{font-size:12px;color:var(--dim)}
.tx .amt{margin-left:auto;font-family:var(--mono);font-size:15px;font-weight:700;
  white-space:nowrap}
.tx .amt.in{color:var(--pine)}
.tx .del{border:0;background:none;color:var(--dim);font-size:17px;cursor:pointer;padding:4px}
.empty{color:var(--dim);font-size:14px;text-align:center;padding:24px 0}
/* отчёт */
.report .block{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:14px;margin-bottom:12px}
.rrow{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--line);
  font-size:14px}
.rrow:last-child{border:0}
.rrow b{font-family:var(--mono)}
.fakt{background:var(--pine-soft);border-color:var(--pine)}
.fakt h3{font-size:14px;margin-bottom:8px;color:var(--pine)}
.monsel{display:flex;gap:8px;align-items:center;margin-bottom:12px}
.monsel select{flex:1}
.env{background:var(--card);border:1px solid var(--line);border-radius:11px;
  padding:11px 12px;margin-bottom:8px}
.env .top{display:flex;justify-content:space-between;align-items:baseline}
.env .nm{font-weight:700;font-size:14px}
.env .bal{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--pine)}
.env .goal{font-size:12px;color:var(--dim);margin-top:1px}
.env .track{height:8px;margin-top:6px}
/* Планы оформлены как конверты — это соседние по смыслу карточки со
   своей суммой и прогрессом, и разводить два непохожих вида карточек
   на соседних вкладках незачем. */
.plan{background:var(--card);border:1px solid var(--line);border-radius:11px;
  padding:11px 12px;margin-bottom:8px}
.plan .top{display:flex;justify-content:space-between;align-items:baseline}
.plan .nm{font-weight:700;font-size:14px}
.plan .bal{font-family:var(--mono);font-size:15px;font-weight:700}
.plan .goal{font-size:12px;color:var(--dim);margin-top:1px}
.plan .track{height:8px;margin-top:6px}
/* выполненный план приглушён, но остаётся читаемым: он ещё нужен как
   свидетельство того, что деньги записаны */
.plan.done{opacity:.62}
.plan.done .nm{text-decoration:line-through}

.chk{display:flex;align-items:center;gap:8px;font-size:13px;
  color:var(--dim);margin-top:8px}
.chk input{width:auto;margin:0}
.fttl{font-weight:700;font-size:14px;margin-bottom:8px}
.w100{width:100%}

.edit{background:var(--amber-soft);border:1.5px solid var(--amber);border-radius:11px;
  padding:12px;margin-bottom:10px}
.edit label{font-size:12px;color:var(--dim);display:block;margin:8px 0 4px}
.frow{display:flex;gap:8px}
.frow>*{flex:1}
.tx.click{cursor:pointer}
.tx .dt{font-family:var(--mono);font-size:11px;color:var(--dim)}
/* данные */
.data .btn{width:100%;margin-bottom:9px}
.note-warn{background:var(--amber-soft);border:1px solid var(--amber);border-radius:10px;
  padding:11px 13px;font-size:13px;margin-bottom:12px}
textarea{width:100%;height:90px;border:1px solid var(--line);border-radius:9px;
  padding:10px;font:13px var(--mono);background:var(--paper)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:76px;background:var(--ink);
  color:var(--paper);padding:10px 18px;border-radius:20px;font-size:14px;opacity:0;transition:.3s;
  pointer-events:none;z-index:9}
.toast.show{opacity:1}
/* классы вместо атрибутов style= в разметке и в собираемых из JS узлах:
   строгая политика style-src 'self' запрещает инлайновые стили */
.env-total{border-color:var(--pine)}
.env-del{margin-top:8px;background:none;color:var(--dim);padding:2px 0}
.edit-title{font-weight:700;font-size:14px}
.ed-frow{margin-top:12px}
.ed-save{margin:0}
.ed-del{margin-top:8px;background:none;color:var(--red)}

/* ---------- служебные классы вместо атрибутов style= ----------
   Строгая политика style-src 'self' запрещает инлайновые стили в разметке.
   Присваивания из JS (el.style.width = …) под запрет не подпадают: это
   CSSOM, а не разметка, — поэтому шкалы прогресса по-прежнему двигаются. */
.m0{margin:0}
/* .m0 обнулял отступ не везде: у .btn.main специфичность выше, и margin-top
   в 10px оставался. В ряду это было видно глазами — «выполнено» и «Записать»
   стояли на десять пикселей ниже соседей и на столько же ниже ростом, потому
   что отступ съедал высоту растянутого элемента. Правило ниже и той же
   специфичности, что .btn.main, поэтому побеждает. */
.btn.m0{margin:0}
/* Ряд действий у плана: все кнопки по своему тексту и одного роста.
   width:100% от .btn.main здесь снимается — с ним «выполнено» требовала всю
   строку, а потом сжималась сильнее соседок (доля сжатия считается от
   базиса) и превращалась в огрызок в двадцать пикселей. */
.plan .inrow .btn{width:auto;white-space:nowrap}
.mt6{margin-top:6px}
.mt8{margin-top:8px}
.mt9{margin-top:9px}
.mt10{margin-top:10px}
.mt12{margin-top:12px}
.mt14{margin-top:14px}
.w0{width:0%}
.wide{width:100%}
.sys-font{font-family:system-ui}
.dim-small{font-size:11.5px;color:var(--dim)}
.check-label{font-size:14px;color:var(--ink)}
.btn-quiet{background:none;color:var(--dim)}
.btn-danger{background:var(--red-soft);color:var(--red)}

/* Заглушка вне Telegram (#gate). Показывается вместо всего приложения:
   локального режима больше нет, вход только через Telegram. */
.gate{min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:24px}
/* .hidden объявлен выше и с той же специфичностью, поэтому при равном весе
   побеждал бы более поздний .gate — и заглушка вылезала бы поверх приложения
   в Telegram. Явное правило на два класса снимает зависимость от порядка. */
.gate.hidden{display:none}
.gate-box{max-width:420px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:22px 20px;text-align:center}
.gate-box h1{font-size:19px;font-weight:700;letter-spacing:.2px;margin-bottom:12px}
.gate-lead{font-size:15px;margin-bottom:10px}
.gate-hint{font-size:13px;color:var(--dim)}


/* ---------- экран ввода: три шага ---------- */
/* Шаг 1. Высота 74 px (вариант Б): знак и подпись в строку. Кнопки шириной
   в пол-экрана, промахнуться невозможно, а место остаётся форме ввода. */
.step1{display:flex;gap:12px;height:74px;margin-bottom:12px;transition:height .18s ease}
.step1.compact{height:58px}
.step1.compact .sign{font-size:22px}
.big{flex:1;border:0;border-radius:14px;font:700 15px system-ui;cursor:pointer;
  display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;
  transition:transform .08s, box-shadow .12s, opacity .12s}
.big:active{transform:scale(.985)}
.big .sign{font-size:30px;line-height:1;font-weight:600}
.big.minus{background:var(--red-soft);color:var(--red);border:1px solid var(--red-line)}
.big.plus{background:var(--pine-soft);color:var(--pine);border:1px solid var(--pine-line)}
.big.sel{box-shadow:0 0 0 2px currentColor inset}
.big.dim{opacity:.42}

/* Шаг 2. Своя клавиатура: одинакова на всех устройствах и не перекрывает
   пол-экрана, как системная в WebView. */
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:12px;margin-bottom:12px}
.steplbl{font-size:11.5px;color:var(--dim);margin-bottom:8px;
  text-transform:uppercase;letter-spacing:.06em}
.bigamt{font-family:var(--mono);font-size:38px;text-align:center;padding:4px 0 10px;
  font-weight:600;min-height:56px}
.bigamt.sm{font-size:24px;padding:0;min-height:0;text-align:left}
.bigamt.expense{color:var(--red)} .bigamt.income{color:var(--pine)}
.bigamt .cur{font-size:22px;color:var(--dim);margin-left:4px}
.bigamt.sm .cur{font-size:16px}
.bigamt .ph{color:var(--placeholder)}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px}
.key{background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:14px 0;font:600 21px var(--mono);cursor:pointer;color:var(--ink)}
.key:active{background:var(--pine-soft)}
.btn.wide{width:100%;margin-top:10px}
/* обе кнопки в ряду подтверждения делят ширину поровну: «Разделить чек»
   иначе переносилось на две строки и ряд получался разной высоты */
.confirm .inrow .btn{flex:1;white-space:nowrap}
.btn[disabled]{background:var(--disabled);cursor:default}

/* Свёрнутая сумма вместо клавиатуры на третьем шаге. */
.sumline{display:flex;justify-content:space-between;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;margin-bottom:12px}
.linkbtn{background:none;border:0;color:var(--pine);font:600 13px system-ui;
  cursor:pointer;text-decoration:underline;padding:0}
.other{text-align:center;padding:2px 0 12px}
.other .linkbtn{color:var(--dim);font-weight:400}

/* .hidden — ПОСЛЕДНИМ правилом файла. При равной специфичности побеждает
   более позднее, поэтому любой класс с display, добавленный выше (.gate,
   .step1, .sumline, .card), иначе перебивал бы «скрыто». Обожглись дважды. */

/* редактор отчислений во вкладке «Настройки» */
.dedrow{border:1px solid var(--line);border-radius:10px;padding:11px;
  margin-bottom:9px;background:var(--paper)}
.dedrow .inrow select{flex:0 0 74px}
.preview{background:var(--pine-soft);border:1px solid var(--pine);border-radius:10px;
  padding:11px 12px;margin-top:12px}
.preview-h{font-size:11px;color:var(--pine);text-transform:uppercase;
  letter-spacing:.06em;font-weight:700;margin-bottom:4px}
.preview-total{font-weight:700}
.tobot{background:var(--card);border:1px dashed var(--line);border-radius:12px;
  padding:13px 14px;font-size:12.5px;color:var(--dim);line-height:1.5}
.tobot b{color:var(--ink)}
.tobot code{font-family:var(--mono);background:var(--paper);
  border:1px solid var(--line);border-radius:5px;padding:1px 6px;color:var(--pine)}


/* флаг «расход на работу» в списке категорий */
.catwork{margin-left:auto;font-size:12px;color:var(--dim);white-space:nowrap}
.catwork input{margin-right:3px}

/* свободные деньги: в отчёте — первым блоком, крупной цифрой */
.free h3{font-size:14px;margin-bottom:6px}
.free .rrow b{font-size:17px;font-weight:700}
.free .hint{margin-top:4px}
#freeNow{font-family:var(--mono);font-size:17px;font-weight:700}

/* Строка о неотмеченном переводе в копилки: не ошибка, но цифра на экране
   врёт, пока перевод не отмечен, — поэтому янтарный, а не серый. */
.warn-note{color:var(--amber);margin-top:6px}

.ai-mode{margin-top:10px;padding:10px 12px;border-radius:10px;
  background:var(--pine-soft);border:1px solid var(--line);font-size:13px}
.ai-mode b{font-family:var(--mono);font-size:13px}

/* Текст разбора: читается как письмо, а не как таблица цифр — отсюда
   увеличенный интерлиньяж и сохранение переносов строк от модели. */
.ai-out{margin-top:12px;padding:12px;border-radius:10px;background:var(--card);
  border:1px solid var(--line);font-size:14px;line-height:1.5;
  white-space:pre-wrap}
.ai-out.busy{color:var(--dim)}

/* Сегментный переключатель разделов внутри вкладки «Цели». Не вкладки
   второго уровня: их было бы девять на четыре нижних, и человек терялся бы
   в том, где он находится. */
.seg{display:flex;gap:6px;margin-bottom:12px;padding:4px;border-radius:10px;
  background:var(--pine-soft);border:1px solid var(--line)}
.seg-btn{flex:1;border:0;border-radius:7px;padding:9px 10px;cursor:pointer;
  font:600 14px system-ui;background:transparent;color:var(--dim)}
/* рамка, а не только фон: в тёмной теме карточка и подложка сегмента
   различаются на пару процентов яркости, и активный раздел терялся */
.seg-btn.on{background:var(--card);color:var(--ink);
  box-shadow:0 0 0 1px var(--line)}
.subtab{display:none}
.subtab.on{display:block}

/* Полоска стрика: спокойная, без соревновательности — это напоминание о
   привычке, а не табло. Живёт над лентой лимита и потому набрана мельче. */
.streakbar{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
  margin-bottom:10px;padding:8px 12px;border-radius:10px;
  background:var(--pine-soft);border:1px solid var(--line);font-size:13px}
.streakbar .streak-main{font-weight:600;color:var(--ink)}
.streakbar .streak-sub{color:var(--dim);margin-left:auto;font-family:var(--mono);
  font-size:12px}
.streakbar .streak-note{width:100%;color:var(--amber);font-size:12px}

/* Подсказка о расхождении часовых поясов: заметная, но не тревожная —
   ничего не сломалось, просто даты считаются по поясу семьи. display здесь
   не задаётся, поэтому .hidden продолжает прятать блок. */
.tzhint{margin:10px 0 14px;padding:10px 12px;border-radius:10px;
  background:var(--amber-soft);border:1px solid var(--line);
  font-size:13px;line-height:1.45;color:var(--ink)}
.tzhint .btn{margin-top:8px}

/* Подсказка про раскладку — одна строка над вкладками. Отдельно от .tzhint,
   у которой свой смысл (расхождение поясов) и своя высота: эта появляется у
   каждого при первом запуске, и карточка в четверть экрана отодвигала бы
   содержимое вкладки за нижний край. */
#viewHint{display:flex;align-items:center;gap:8px;margin:8px 0 12px;
  padding:7px 10px;border-radius:9px;background:var(--card);
  border:1px solid var(--line);font-size:12.5px;color:var(--dim)}
#viewHint span{flex:1}
#viewHint .btn{padding:2px 6px;font-size:13px;line-height:1}
#viewHint.hidden{display:none}

/* ---------- настройка вида: блоки и шторка действий ----------
   Долгое удержание на блоке открывает меню «выше / ниже / скрыть». Системное
   меню iOS по тому же жесту отключено: «Копировать» и «Найти» поверх нашего
   меню — это два ответа на одно нажатие. Выделение текста не трогаем, оно
   вызывается двойным касанием и никому не мешает. */
[data-block]{-webkit-touch-callout:none}

/* Скрытый блок. Свой класс, а не .hidden: тем управляют условия сервера
   (разбор месяца не подключён, стрика ещё нет), и общий класс означал бы,
   что возврат блока показывает то, чего показывать нельзя. */
.blk-off{display:none}

.sheet{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;
  justify-content:center;background:rgba(0,0,0,.35)}
.sheet-box{width:100%;max-width:520px;background:var(--card);
  border:1px solid var(--line);border-bottom:0;border-radius:16px 16px 0 0;
  padding:14px 14px calc(14px + env(safe-area-inset-bottom))}
.sheet-ttl{padding:2px 4px 10px;text-align:center;font-size:15px;
  font-weight:600;color:var(--ink)}
.sheet-btn{display:block;width:100%;margin-top:8px;border:0;border-radius:10px;
  padding:13px 16px;font:600 15px system-ui;cursor:pointer;
  background:var(--pine-soft);color:var(--pine)}
.sheet-btn.warn{background:var(--red-soft);color:var(--red)}
.sheet-btn.quiet{background:none;color:var(--dim)}
.sheet-btn[disabled]{background:none;color:var(--disabled);cursor:default}

/* Строка скрытого блока в настройках: название и кнопка возврата. */
.viewrow{display:flex;justify-content:space-between;align-items:center;
  gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.viewrow:last-child{border-bottom:0}

/* Строка дня на экране подтверждения. Выглядит как ссылка, а не как кнопка:
   нажимают её редко — почти всё записывается сегодняшним числом, — и
   заметная кнопка в этом месте отвлекала бы от суммы и категории. */
.daybtn{background:none;border:0;padding:0;font:inherit;color:var(--dim);
  cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.daybtn:active{color:var(--ink)}

/* Категория в отчёте нажимается. Подсветка выбранной — фоном, а не цветом
   текста: цветной текст в списке сумм читается как «тут что-то не так». */
.catrow{cursor:pointer;border-radius:8px;padding-left:6px;padding-right:6px;
  margin-left:-6px;margin-right:-6px}
.catrow.on{background:var(--pine-soft)}
.catfilter{display:flex;align-items:center;gap:8px;margin:8px 0 2px;
  font-size:13px;color:var(--dim)}

/* ---------- когда тратим ----------
   Столбики: высоту задаёт сервер, здесь только рост от низа и подписи.
   Своей библиотеки графиков в проекте нет и не нужно — внешние скрипты
   запрещены, а для семи столбиков хватает флексбокса. */
.tiny-seg{margin:8px 0 4px}
.tiny-seg .seg-btn{padding:6px 0;font-size:12.5px}
.shape-h{font-size:12px;color:var(--dim);margin:10px 0 6px}
.shape-note{font-size:12px;color:var(--dim);margin-top:6px}
.bars{display:flex;align-items:flex-end;gap:5px;height:92px}
.bars.days{gap:2px;height:56px}
.bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  height:100%;min-width:0}
.bar-fill{background:var(--pine-soft);border:1px solid var(--pine-line);
  border-radius:4px 4px 0 0;min-height:2px}
.bar.top .bar-fill{background:var(--pine);border-color:var(--pine)}
/* Выходные — плотнее, а не янтарнее: янтарный в этом приложении значит
   «внимание, перерасход», и суббота с воскресеньем читались бы как
   ошибка, хотя это просто дни недели. */
.bar.weekend .bar-fill{background:var(--pine);border-color:var(--pine)}
.bar-lbl{font-size:10.5px;color:var(--dim);text-align:center;margin-top:4px}
.bars.days .bar{min-width:3px}

/* Строка навигации по периодам: стрелки по краям, подпись или календарь
   посередине. Кнопка «вперёд» гаснет на текущем периоде — листать в будущее
   незачем. */
.pernav{display:flex;align-items:center;gap:10px;margin:10px 0 12px}
.pernav .btn{min-width:38px}
.pertitle{flex:1;text-align:center;font-weight:600;font-size:15px}
.pernav input[type=date]{flex:1;text-align:center;padding:8px}
.pernav .btn[disabled]{background:none;color:var(--disabled)}

/* ---------- банки-фонды ----------
   Карточка банки: заголовок, полоса с двумя оттенками, подпись, ползунок
   объёма и стрелки очереди. Полоса — та же .track, что у лимита и планов:
   вторая её реализация разошлась бы с первой при первой же правке. */
.fund{background:var(--card);border:1px solid var(--line);border-radius:11px;
  padding:12px 13px;margin-bottom:10px}
.fund .top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.fund .nm{font-weight:700;font-size:14px}
.fund .bal{font-family:var(--mono);font-size:14px;font-weight:700}
.fund .goal{font-size:12px;color:var(--dim);margin-top:4px}
.fund.done{border-color:var(--pine)}
.fund.done .bal{color:var(--pine)}

/* Полоса банки состоит из двух частей подряд: плотная — деньги, которые в
   ней лежат, бледная — начисленные раскладкой и ещё не переложенные. */
.track.jar{display:flex;height:10px;margin-top:8px}
.track.jar .fill{height:100%;border-radius:0}
/* «В пути» — штриховкой, а не бледной заливкой: сама дорожка того же
   светло-зелёного цвета, и заливка на ней просто не читалась бы. */
.track.jar .fill.ghost{background:repeating-linear-gradient(45deg,
  var(--pine-line) 0 5px, transparent 5px 10px)}

.jarslider{width:100%;margin-top:10px;accent-color:var(--pine)}
.jarrow{display:flex;align-items:center;gap:8px;margin-top:6px}
.jarlbl{flex:1;font-size:12px;color:var(--dim)}
.jarbtn{background:var(--pine-soft);color:var(--pine);min-width:34px}
.jarbtn[disabled]{background:none;color:var(--disabled)}


/* ---------- простой первый экран ----------
   Приложение открывают, чтобы записать трату. Поэтому по умолчанию на экране
   только «Расход», «Доход» и лимит, а всё остальное — за кнопкой внизу.
   Режим переключается классом на body: одно место вместо десятка toggle-ов
   по узлам, и ничего не может остаться включённым наполовину. */
body.simple nav{display:none}
body.simple .streakbar{display:none}
body.simple #viewHint{display:none}
/* сегодняшний список, «Цели», «Отчёт» и «Настройки» никуда не делись —
   они появляются вместе с навигацией по кнопке «Больше опций» */
body.simple [data-block="today"]{display:none}
.modeswitch{display:block;width:calc(100% - 32px);margin:10px 16px 84px}
body.simple .modeswitch{margin-bottom:24px}

/* Дневной остаток — одно крупное число: его читают у кассы, не вчитываясь.
   Цвет говорит то же, что и число, для тех, кто смотрит боковым зрением. */
.daylimit{margin:12px 16px 0;padding:16px;border-radius:14px;
  background:var(--card);border:1px solid var(--line);text-align:center}
.daylimit-sum{font-size:34px;font-weight:700;letter-spacing:-0.5px;
  color:var(--pine)}
.daylimit.over .daylimit-sum{color:var(--red)}
.daylimit-note{margin-top:6px;color:var(--dim);font-size:13px}
/* Месячная полоса уступает место дневному числу, а не соседствует с ним:
   две цифры об одном и том же заставляют выбирать, какая из них твоя. */
.limitbar.day-instead{display:none}

/* ---------- вес строк отчёта ----------
   Из отзыва: «цифры везде одинаково крупные, важное и второстепенное на
   одном уровне». Вес теперь говорит то же, что и смысл: ведущее число
   блока крупнее, сноска — мельче и приглушённее. Размеров ровно три, и
   больше заводить не стоит: четвёртый перестаёт читаться как ступень. */
.rrow.lead b{font-size:19px;font-weight:700}
.rrow.minor{padding:5px 0}
.rrow.minor span,.rrow.minor b{color:var(--dim);font-size:13px}

/* Цвет числа дублирует знак, а не заменяет его. */
.rrow b.pos{color:var(--pine)}
.rrow b.neg{color:var(--red)}
.neg{color:var(--red)}

/* Кнопка «i» рядом с полем: объяснение нужно один раз и тому, кто спросил. */
.infobtn{flex:0 0 auto;width:38px;font-weight:700;font-style:italic}

/* .hidden — ПОСЛЕДНИМ правилом файла: при равной специфичности побеждает
   тот, кто ниже, и любое правило вида «.gate{display:flex}», добавленное
   после, молча отменило бы скрытие. Это уже случалось. */

/* Поле суммы прямо в карточке (платёж, копилка): вместо системного окна
   браузера, которого нет в десктопном Telegram. Кнопки по ширине текста, а
   поле забирает остаток строки. */
.ask .inrow input{flex:1;min-width:0}
.ask .inrow .btn{width:auto;white-space:nowrap}
.hidden{display:none}