Add auto theme mode (light/dark/auto by time of day)

- ThemeContext: add 'auto' mode that switches light 7:00-22:00, dark otherwise, re-checks every minute
- Topbar: cycle through 3 modes on click, show Monitor icon for auto mode
- Settings → Внешний вид: 3-button grid with split preview for auto

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/layout/Topbar.tsx

@@ -1,4 +1,4 @@
-import { Sun, Moon, Bell, LogOut, ChevronDown, Menu,
+import { Sun, Moon, Monitor, Bell, LogOut, ChevronDown, Menu,
   BookOpen, X, CheckCheck, CalendarCheck2, CalendarX2,
   Sparkles, AlertTriangle, Star, CreditCard, Info,
   ArrowRight, Wrench,
@@ -204,7 +204,7 @@ interface TopbarProps {
 }
 
 export function Topbar({ onMenuToggle, title }: TopbarProps) {
-  const { theme, toggle } = useTheme()
+  const { mode, toggle } = useTheme()
   const { user, logout }  = useAuth()
   const navigate = useNavigate()
   const { notifications } = useNotifications()
@@ -257,8 +257,8 @@ export function Topbar({ onMenuToggle, title }: TopbarProps) {
       </div>
 
       {/* Theme toggle */}
-      <button onClick={toggle} className="btn-ghost p-2">
-        {theme === 'light' ? <Moon size={18} /> : <Sun size={18} />}
+      <button onClick={toggle} className="btn-ghost p-2" title={mode === 'light' ? 'Светлая тема' : mode === 'dark' ? 'Тёмная тема' : 'Авто (по времени)'}>
+        {mode === 'light' ? <Moon size={18} /> : mode === 'dark' ? <Sun size={18} /> : <Monitor size={18} />}
       </button>
 
       {/* User menu */}