feat(ui): implement Bento Grid design system

- Add Urbanist font (replace Inter)
- Add CSS variables: --bento-radius, --bento-gap, --bento-padding
- Add Tailwind extend: rounded-bento, rounded-4xl, spacing.bento
- Create BentoCard component with size variants (sm/md/lg/xl)
- Add .bento-card, .bento-card-hover, .bento-card-glow classes
- Add .bento-grid container with responsive columns
- Implement floating TabBar (margin 16px, shadow, pill active state)
- Apply bento styles to Dashboard cards
- Support both dark and light themes

.ai/BENTO_REFACTOR.md

@@ -0,0 +1,150 @@
+# Bento Grids Refactor
+
+> **Ветка:** `bento-grids`
+> **Статус:** В работе
+> **Последнее обновление:** 2026-01-20
+
+## Референс
+
+- **Стиль:** Bento Grids (карточки разных размеров в сетке)
+- **Цветовая схема:** Зеленый неон на темном фоне, чистота
+- **Шрифт:** Urbanist (современный гротеск)
+- **Скругления:** Крупные (24-32px)
+
+---
+
+## План рефакторинга
+
+### Этап 1: Фундамент (Vibe Check)
+> Цель: Пустая страница уже выглядит "секси"
+
+| # | Задача | Статус | Заметки |
+|---|--------|--------|---------|
+| 1.1 | Подключить Urbanist шрифт | `[x]` | Google Fonts, заменить Inter |
+| 1.2 | Tailwind: bento radius/spacing | `[x]` | `rounded-bento`, `rounded-4xl`, `spacing.bento` |
+| 1.3 | globals.css: CSS переменные Bento | `[x]` | `--bento-radius`, `--bento-gap`, `--bento-padding` |
+
+**Файлы:**
+- `src/styles/globals.css`
+- `tailwind.config.js`
+
+---
+
+### Этап 2: Атом (BentoCard)
+> Цель: Один идеальный компонент-карточка
+
+| # | Задача | Статус | Заметки |
+|---|--------|--------|---------|
+| 2.1 | Создать BentoCard компонент | `[x]` | С вариантами размеров |
+| 2.2 | Обновить .card в globals.css | `[x]` | Новые классы .bento-card, .bento-card-hover, .bento-card-glow |
+
+**Файлы:**
+- `src/components/ui/BentoCard.tsx` (новый)
+- `src/styles/globals.css`
+
+**API компонента:**
+```tsx
+type BentoSize = 'sm' | 'md' | 'lg' | 'xl' // 1x1, 2x1, 1x2, 2x2
+
+interface BentoCardProps {
+  size?: BentoSize
+  children: React.ReactNode
+  className?: string
+  hover?: boolean
+  as?: 'div' | 'Link' | 'button'
+}
+```
+
+---
+
+### Этап 3: Скелет (Floating TabBar)
+> Цель: Bottom navigation как "парящий остров"
+
+| # | Задача | Статус | Заметки |
+|---|--------|--------|---------|
+| 3.1 | Floating island стиль | `[x]` | margin 16px от краев, shadow |
+| 3.2 | Active state с pill | `[x]` | rounded-2xl фон под активной иконкой |
+| 3.3 | Убрать border-top | `[x]` | Заменено на shadow |
+
+**Файлы:**
+- `src/components/layout/Layout.tsx` (секция bottom-nav)
+- `src/styles/globals.css` (`.bottom-nav` классы)
+
+---
+
+### Этап 4: Мясо (Dashboard Grid)
+> Цель: Главная страница в стиле Bento
+
+| # | Задача | Статус | Заметки |
+|---|--------|--------|---------|
+| 4.1 | Создать .bento-grid контейнер | `[x]` | CSS Grid с gap, 2 колонки mobile, 4 desktop |
+| 4.2 | Subscription Status → bento-card | `[x]` | Главная карточка подписки |
+| 4.3 | Stats Grid → bento-grid + bento-card-hover | `[x]` | Balance, Subscription, Referrals, Earnings |
+| 4.4 | Quick Actions → bento-card | `[x]` | Контейнер для кнопок |
+| 4.5 | Trial + Wheel Banner → bento-card-glow/hover | `[x]` | Акцентные карточки |
+
+**Файлы:**
+- `src/pages/Dashboard.tsx`
+- `src/styles/globals.css`
+
+**Правило:** Логику JS/TS НЕ трогаем — только UI обёртки.
+
+---
+
+## Решения и обоснования
+
+### Почему Urbanist, а не Inter?
+- Urbanist более геометричный, лучше подходит под Bento-эстетику
+- Хорошая читаемость на мобильных
+- Бесплатный, Google Fonts
+
+### Почему rounded-3xl (24px)?
+- Стандарт Bento — крупные скругления
+- 16px (текущий rounded-2xl) выглядит слишком "приложенечно"
+- 32px (rounded-4xl) для особо крупных элементов
+
+### Floating TabBar vs прилипший
+- Floating выглядит премиально
+- Отделяет навигацию от контента визуально
+- Работает с safe-area на iOS
+
+---
+
+## Что НЕ делаем
+
+- ❌ Модалки (ConnectionModal, TopUpModal) — вторично
+- ❌ Страницы кроме Dashboard — после MVP
+- ❌ Header — работает, не ломаем
+- ❌ Рефакторинг логики — только UI
+
+---
+
+## Прогресс
+
+```
+Этап 1: ██████████ 100%
+Этап 2: ██████████ 100%
+Этап 3: ██████████ 100%
+Этап 4: ██████████ 100%
+─────────────────────
+Общий:  ██████████ 100%
+```
+
+---
+
+## Заметки для агентов
+
+**Контекст:** Это Mini App для Telegram (VPN кабинет). Мобильный фокус.
+
+**Текущий стек:**
+- React + Vite + TypeScript
+- Tailwind CSS
+- React Query для данных
+
+**Ключевые файлы:**
+- `tailwind.config.js` — цвета через CSS переменные
+- `src/styles/globals.css` — компонентные классы (.card, .btn, etc)
+- `src/components/layout/Layout.tsx` — шапка + таббар
+- `src/pages/Dashboard.tsx` — главный экран (монстр, но логику не трогаем)
+
+**Темы:** Есть dark и light (champagne). Bento-стили должны работать в обеих.