feat: redesign header, switch font to Manrope, fix z-indexes

.ai/BENTO_REFACTOR.md

@@ -8,7 +8,7 @@
 
 - **Стиль:** Bento Grids (карточки разных размеров в сетке)
 - **Цветовая схема:** Зеленый неон на темном фоне, чистота
-- **Шрифт:** Urbanist (современный гротеск)
+- **Шрифт:** Manrope (современный гротеск, заменён с Urbanist)
 - **Скругления:** Крупные (24-32px)
 
 ---
@@ -112,9 +112,9 @@ interface BentoCardProps {
 
 ## Что НЕ делаем
 
-- ❌ Модалки (ConnectionModal, TopUpModal) — вторично
+- ✅ ~~Модалки (ConnectionModal, TopUpModal)~~ — Phase 6 complete
-- ❌ Страницы кроме Dashboard — после MVP
+- ✅ ~~Страницы кроме Dashboard~~ — Phase 5 complete
-- ❌ Header — работает, не ломаем
+- ✅ ~~Header~~ — Phase 7 complete
 - ❌ Рефакторинг логики — только UI
 
 ---
@@ -127,6 +127,8 @@ interface BentoCardProps {
 Этап 3: ██████████ 100%
 Этап 4: ██████████ 100%
 Этап 5: ██████████ 100%
+Этап 6: ██████████ 100%
+Этап 7: ██████████ 100%
 ─────────────────────
 Общий:  ██████████ 100%
 ```
@@ -182,10 +184,13 @@ interface BentoCardProps {
 ### Этап 7: Header
 > Обновить шапку (опционально)
 
-| # | Задача | Заметки |
+| # | Задача | Статус | Заметки |
-|---|--------|---------|
+|---|--------|--------|---------|
-| 7.1 | Лого в bento-стиле | Скругления, тень |
+| 7.0 | Смена шрифта Urbanist → Manrope | `[x]` | Google Fonts, tailwind.config.js, globals.css |
-| 7.2 | Mobile menu | Floating стиль? |
+| 7.1 | Glass container + shadow | `[x]` | `glass shadow-lg shadow-black/10` (без border-b) |
+| 7.2 | Logo в bento-контейнере | `[x]` | `rounded-xl bg-dark-800/80 border border-dark-700/50` (app icon style) |
+| 7.3 | Controls в bento-стиле | `[x]` | Все кнопки: `rounded-xl bg-dark-800/50 hover:bg-dark-700 border border-dark-700/50` |
+| 7.4 | Z-Index = 50 | `[x]` | Подтверждено (выше контента, ниже модалок z-[60]) |
 
 ### Этап 8: Полировка
 > Финальные штрихи
@@ -229,7 +234,14 @@ interface BentoCardProps {
 - ✅ **Profile.tsx**: 3 карточки → `bento-card`
 - ✅ **Info.tsx**: FAQ items, rules, privacy, offer → `bento-card`
 
-### 2026-01-20 — Phase 6 Complete (Модальные окна)
+### 2026-01-20 — Phase 7 Complete (Header + Font)
+- ✅ **Шрифт:** Urbanist → Manrope (Google Fonts, tailwind.config.js, globals.css)
+- ✅ **Header Container:** `glass` + `shadow-lg shadow-black/10` (убран border-b)
+- ✅ **Logo:** App icon style — `rounded-xl bg-dark-800/80 border border-dark-700/50`
+- ✅ **Theme Toggle:** Bento style — `rounded-xl bg-dark-800/50 hover:bg-dark-700 border border-dark-700/50`
+- ✅ **Language Switcher:** Bento style — то же
+- ✅ **Notification Bell:** Bento style — то же
+- ✅ **Z-Index:** Header = z-50 (верифицировано)
 - ✅ **ConnectionModal.tsx**: z-[60], rounded-3xl, backdrop-blur-xl (desktop + mobile wrapper)
 - ✅ **TopUpModal.tsx**: z-[60], rounded-3xl, backdrop-blur-xl
 - ✅ **InsufficientBalancePrompt.tsx**: z-[60], rounded-3xl, backdrop-blur-xl (PaymentMethodModal тоже)

src/components/LanguageSwitcher.tsx

@@ -41,13 +41,13 @@ export default function LanguageSwitcher() {
     <div className="relative" ref={dropdownRef}>
       <button
         onClick={() => setIsOpen(!isOpen)}
-        className="flex items-center gap-2 px-3 py-2 rounded-xl border border-dark-700/50 hover:border-dark-600 bg-dark-800/50 transition-all text-sm"
+        className="flex items-center gap-1.5 px-2.5 py-2 rounded-xl border border-dark-700/50 hover:border-dark-600 bg-dark-800/50 hover:bg-dark-700 transition-all text-sm"
         aria-label="Change language"
       >
         <span>{currentLang.flag}</span>
         <span className="font-medium text-dark-200">{currentLang.name}</span>
         <svg
-          className={`w-4 h-4 text-dark-400 transition-transform ${isOpen ? 'rotate-180' : ''}`}
+          className={`w-3.5 h-3.5 text-dark-400 transition-transform ${isOpen ? 'rotate-180' : ''}`}
           fill="none"
           stroke="currentColor"
           viewBox="0 0 24 24"

src/components/TicketNotificationBell.tsx

@@ -198,7 +198,7 @@ export default function TicketNotificationBell({ isAdmin = false }: TicketNotifi
       {/* Bell button */}
       <button
         onClick={() => setIsOpen(!isOpen)}
-        className="relative p-2.5 rounded-xl transition-all duration-200 hover:bg-dark-800/50 text-dark-400 hover:text-dark-100"
+        className="relative p-2 rounded-xl transition-all duration-200 bg-dark-800/50 hover:bg-dark-700 border border-dark-700/50 text-dark-400 hover:text-accent-400"
         title={t('notifications.ticketNotifications', 'Ticket notifications')}
       >
         <BellIcon />

src/components/layout/Layout.tsx

@@ -353,7 +353,7 @@ export default function Layout({ children }: LayoutProps) {
 
       {/* Header */}
       <header
-        className="fixed top-0 left-0 right-0 z-50 glass border-b border-dark-800/50"
+        className="fixed top-0 left-0 right-0 z-50 glass shadow-lg shadow-black/10"
         style={{
           // In fullscreen mode, add padding for safe area + Telegram native controls (close/menu buttons in corners)
           paddingTop: isFullscreen ? `${Math.max(safeAreaInset.top, contentSafeAreaInset.top) + 45}px` : undefined,
@@ -363,9 +363,9 @@ export default function Layout({ children }: LayoutProps) {
           <div className="flex justify-between items-center h-16 lg:h-20">
             {/* Logo */}
             <Link to="/" onClick={() => setMobileMenuOpen(false)} className={`flex items-center gap-2.5 flex-shrink-0 ${!appName ? 'lg:mr-4' : ''}`}>
-              <div className="w-10 h-10 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl bg-gradient-to-br from-accent-400 to-accent-600 flex items-center justify-center overflow-hidden shadow-lg shadow-accent-500/20 flex-shrink-0 relative">
+              <div className="w-10 h-10 sm:w-11 sm:h-11 lg:w-12 lg:h-12 rounded-xl bg-dark-800/80 dark:bg-dark-800/80 border border-dark-700/50 flex items-center justify-center overflow-hidden shadow-md flex-shrink-0 relative">
                 {/* Always show letter as fallback */}
-                <span className={`text-white font-bold text-lg sm:text-xl lg:text-2xl absolute transition-opacity duration-200 ${hasCustomLogo && logoLoaded ? 'opacity-0' : 'opacity-100'}`}>
+                <span className={`text-accent-400 font-bold text-lg sm:text-xl absolute transition-opacity duration-200 ${hasCustomLogo && logoLoaded ? 'opacity-0' : 'opacity-100'}`}>
                   {logoLetter}
                 </span>
                 {/* Logo image with smooth fade-in */}
@@ -423,7 +423,7 @@ export default function Layout({ children }: LayoutProps) {
             </nav>
 
             {/* Right side */}
-            <div className="flex items-center gap-2 sm:gap-3">
+            <div className="flex items-center gap-1.5 sm:gap-2">
               {/* Theme toggle button - only show if both themes are enabled */}
               {canToggle && (
                 <button
@@ -431,9 +431,10 @@ export default function Layout({ children }: LayoutProps) {
                     toggleTheme()
                     setMobileMenuOpen(false)
                   }}
-                  className="relative p-2.5 rounded-xl transition-all duration-300 hover:scale-110 active:scale-95
+                  className="relative p-2 rounded-xl transition-all duration-200 
-                             dark:text-dark-400 dark:hover:text-dark-100 dark:hover:bg-dark-800
+                             bg-dark-800/50 hover:bg-dark-700 border border-dark-700/50
-                             text-champagne-500 hover:text-champagne-800 hover:bg-champagne-200/50"
+                             dark:text-dark-400 dark:hover:text-accent-400
+                             text-champagne-500 hover:text-champagne-800"
                   title={isDark ? t('theme.light') || 'Light mode' : t('theme.dark') || 'Dark mode'}
                   aria-label={isDark ? t('theme.light') || 'Switch to light mode' : t('theme.dark') || 'Switch to dark mode'}
                 >

src/styles/globals.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700;800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
 
 @tailwind base;
 @tailwind components;

tailwind.config.js

@@ -106,7 +106,7 @@ export default {
         },
       },
       fontFamily: {
-        sans: ['Urbanist', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
+        sans: ['Manrope', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
       },
       borderRadius: {
         'bento': '24px',