Учёт расходов на автомобиль: топливо, ремонты и стоимость километра на одном экране

Ты — senior frontend-разработчик и аналитик, который собирает личные финансовые панели. Сделай однофайловое приложение «Дашборд расходов на автомобиль» для человека, который считает топливо, ремонты и стоимость километра сам, без программирования и без бухгалтера.

КОНТЕКСТ ПОЛЬЗОВАТЕЛЯ
Он ведёт дела в блокноте, заметках телефона и переписке: чеки с заправок, суммы из сервиса, напоминание про страховку. Ему нужны не термины, а ответы: сколько машина стоила в этом месяце, где перерасход, во сколько обходится один километр. Интерфейс на русском, простыми словами, без бухгалтерского жаргона.

ДАННЫЕ
1. Операция: дата, тип (расход / доход / корректировка одометра), сумма, категория, пробег в километрах, литры (для топлива), заметка, автомобиль.
2. Категория: топливо, ремонт и запчасти, ТО по регламенту, шины, страховка и налоги, мойка и уход, парковка, прочее. Названия можно менять, добавлять свои, задавать цвет метки.
3. План на период: лимит по каждой категории и лимит пробега; период — месяц или год, переключатель в шапке.
4. Автомобиль: название, марка, средний расход, текущий одометр. Поддержи 1–3 машины.

ЛОГИКА И РАСЧЁТЫ
- факт = сумма операций категории за период; план берётся из настроек периода.
- отклонение = факт − план, отдельно в рублях и в процентах; статус идёт цепочкой план → факт → отклонение: «в норме» (до 10% сверху), «на границе» (10–20%), «перерасход» (больше 20%).
- стоимость километра = все расходы периода / пробег периода (разница одометра на границах периода).
- расход топлива = литры / пробег × 100; средняя цена литра = сумма топлива / литры.
- итог месяца пересчитывается сразу, без кнопки «Пересчитать», и сохраняется между визитами.

ЭКРАНЫ
1. Дашборд: 4–6 KPI-карточек (расходы за период, стоимость километра, литры и средний расход, отклонение от плана, число операций), под ними строка «план → факт → отклонение».
2. График по месяцам: парные столбцы план и факт за 12 месяцев, сумма во всплывающей подсказке, отдельная линия пробега. На мобильном — горизонтальная прокрутка.
3. Таблица план/факт: категория, план, факт, отклонение в рублях и процентах, статус точкой. Итоговая строка закреплена снизу.
4. Список операций: сортировка по дате и сумме, фильтры по месяцу, категории и машине, поиск по заметке. Добавление, редактирование и удаление — в модальном окне; любая правка мгновенно меняет цифры на дашборде.
5. Категории и план: редактирование лимитов на месяц и год, перенос остатка, напоминание о крупных годовых платежах (страховка, налог, шины).
6. Импорт CSV: загрузка файла или вставка текста, сопоставление колонок (дата, сумма, описание), предпросмотр первых строк, список отклонённых строк с причиной. Экспорт журнала обратно в CSV.

ТРЕБОВАНИЯ К СБОРКЕ
Один HTML-файл: inline CSS и JavaScript, без внешних библиотек, шрифтов и запросов в сеть. Данные — localStorage. Тёмная техническая тема: фон #101418, текст #e8eaf0, вторичный #9aa3b2, линии rgba(255,255,255,.12), акцент #3ddc97 только на кнопках и активных ссылках. Прямые углы 0–4 px, моноширинные подписи и цифры, плотные таблицы. Вёрстка от 360 px: карточки и таблицы складываются в один столбец, суммы читаются без зума. Все суммы в рублях с разделением разрядов.

ПРОВЕРКА ПЕРЕД ВЫДАЧЕЙ
Файл открывается двойным кликом; пустая база показывает нули и подсказку «добавьте первую операцию», а не ошибку; стоимость километра без пробега показывает прочерк; после перезагрузки записи на месте; ни одна кнопка не ведёт на внешний сайт.