---
name: reference-dashboard-design-artifact
description: Ссылка на согласованный визуальный макет дашборда «Бюджет» (тёмная тема, room-card, dock-навбар) — сверяться при любой работе над UI
metadata:
  type: reference
---

Макет дашборда согласован заранее (в другой сессии) как Claude Artifact:
`https://claude.ai/code/artifact/55e7f715-2ee7-45e2-acb7-82b883fcad02` («Бюджет — обзор (макет)»).

Ключевые элементы дизайна оттуда, уже перенесённые в `App/media/css/dashboard.css` и
`App/view/Index/index.html`/`App/view/layout.html`:
- Тёмная тема (`--bg:#0b0b0f`, `--surface:#17171d`, акцентные цвета per-карточка через
  `--card-accent`), inline SVG-иконки (не Bootstrap Icons) для навигации/типов счетов.
- Карточки-«комнаты» (`.room-card`) для счетов, кольца прогресса (`.ring`) для целей копилок,
  списки `.budget-list`/`.budget-row` с прогресс-баром для план/факта по категориям.
- Нижний dock-навбар (`.dock`) вместо верхнего меню: Обзор/Счета/Категории/Операции/Цели.
- Верхний блок — «Доступно сейчас» + «Всего по всем счетам», строка stat-pills (дата/% бюджета/
  изменение за месяц/курс валюты) — в реализации пока упрощена (нет данных по бюджету/курсу).

Макет — на русском, включает демо-данные (Кошелёк/Карта Тинькофф/Евро, цели «Отпуск»/«Остаток»,
полный список категорий из [[бюджет_текущий_план]]) — не копировать демо-суммы как реальные, только
структуру/классы/цветовую схему.

**How to apply**: перед тем как добавлять новый раздел UI (Счета/Категории/Операции/Цели — сейчас
это просто неактивные пункты dock-навбара) — свериться с этим макетом (`WebFetch` по ссылке выше),
не изобретать свой стиль карточек/навигации заново.