feat: premium UI redesign — glassmorphism, gradient accents, ambient background

app/globals.css

@@ -5,22 +5,37 @@
 }
 
 :root {
-  --bg: #0a0a14;
-  --sidebar-bg: rgba(255, 255, 255, 0.02);
-  --card-bg: rgba(255, 255, 255, 0.05);
-  --card-border: rgba(255, 255, 255, 0.08);
-  --text-primary: rgba(255, 255, 255, 0.92);
+  --bg: #0c0c18;
+  --bg-secondary: #12121f;
+  --sidebar-bg: rgba(12, 12, 24, 0.8);
+  --card-bg: rgba(255, 255, 255, 0.04);
+  --card-bg-hover: rgba(255, 255, 255, 0.07);
+  --card-border: rgba(255, 255, 255, 0.07);
+  --card-border-hover: rgba(255, 255, 255, 0.12);
+  --text-primary: rgba(255, 255, 255, 0.95);
   --text-secondary: rgba(255, 255, 255, 0.45);
-  --accent: #00d4ff;
-  --accent-glow: rgba(0, 212, 255, 0.15);
-  --on-color: #00d4ff;
-  --off-color: rgba(255, 255, 255, 0.2);
+  --text-tertiary: rgba(255, 255, 255, 0.25);
+  --accent: #818cf8;
+  --accent-secondary: #22d3ee;
+  --accent-glow: rgba(129, 140, 248, 0.15);
+  --glass: rgba(255, 255, 255, 0.03);
+  --glass-border: rgba(255, 255, 255, 0.06);
+  --gradient-primary: linear-gradient(135deg, #6366f1, #8b5cf6);
+  --gradient-warm: linear-gradient(135deg, #f59e0b, #ef4444);
+  --gradient-cool: linear-gradient(135deg, #06b6d4, #3b82f6);
+  --gradient-green: linear-gradient(135deg, #10b981, #34d399);
+  --on-color: #818cf8;
+  --off-color: rgba(255, 255, 255, 0.15);
+  --radius-sm: 12px;
+  --radius-md: 16px;
+  --radius-lg: 22px;
+  --radius-xl: 28px;
 }
 
 html, body {
   background: var(--bg);
   color: var(--text-primary);
-  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
   height: 100%;
   overflow: hidden;
   -webkit-font-smoothing: antialiased;
@@ -31,6 +46,70 @@ html, body {
   height: 100%;
 }
 
+/* Ambient background orbs */
+.bg-ambient {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+.bg-ambient::before {
+  content: '';
+  position: absolute;
+  width: 600px;
+  height: 600px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, transparent 70%);
+  top: -200px;
+  right: -100px;
+  animation: float1 20s ease-in-out infinite;
+}
+.bg-ambient::after {
+  content: '';
+  position: absolute;
+  width: 500px;
+  height: 500px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(139, 92, 246, 0.06) 0%, transparent 70%);
+  bottom: -150px;
+  left: -50px;
+  animation: float2 25s ease-in-out infinite;
+}
+
+@keyframes float1 {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  33% { transform: translate(30px, 40px) scale(1.05); }
+  66% { transform: translate(-20px, 20px) scale(0.95); }
+}
+@keyframes float2 {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  33% { transform: translate(-40px, -30px) scale(1.1); }
+  66% { transform: translate(20px, -10px) scale(0.9); }
+}
+
+/* Glass card base */
+.glass-card {
+  background: var(--card-bg);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid var(--card-border);
+  border-radius: var(--radius-lg);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.glass-card:hover {
+  background: var(--card-bg-hover);
+  border-color: var(--card-border-hover);
+}
+
+/* Gradient text */
+.gradient-text {
+  background: var(--gradient-primary);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
 button {
   cursor: pointer;
   border: none;
@@ -46,20 +125,34 @@ button:focus-visible {
   outline-offset: 2px;
 }
 
+/* Smooth scrollbar */
 ::-webkit-scrollbar {
   width: 4px;
   height: 4px;
 }
-
 ::-webkit-scrollbar-track {
   background: transparent;
 }
-
 ::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.1);
+  background: rgba(255, 255, 255, 0.08);
   border-radius: 2px;
 }
-
 ::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.2);
+  background: rgba(255, 255, 255, 0.15);
+}
+
+/* Pulse animation for active devices */
+@keyframes pulse-glow {
+  0%, 100% { box-shadow: 0 0 20px rgba(129, 140, 248, 0.15); }
+  50% { box-shadow: 0 0 30px rgba(129, 140, 248, 0.25); }
+}
+
+/* Slide in animation */
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.animate-slide-up {
+  animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
 }

app/layout.tsx

@@ -3,7 +3,7 @@ import "./globals.css";
 
 export const metadata: Metadata = {
   title: "Smart Home Dashboard",
-  description: "Smart Home Tablet Dashboard — управление умным домом",
+  description: "Smart Home Tablet Dashboard",
   manifest: "/manifest.json",
 };
 
@@ -26,6 +26,7 @@ export default function RootLayout({
         <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
       </head>
       <body className="antialiased">{children}</body>
     </html>

app/page.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useState, useEffect, useCallback } from 'react'
+import { Thermometer, Droplets, Wind, Calendar, Sun, CloudRain, Snowflake as SnowIcon, Cloud, CloudSun, Zap, Settings as SettingsIcon } from 'lucide-react'
 import Sidebar from '@/components/Sidebar'
 import TopBar from '@/components/TopBar'
 import RoomTabs from '@/components/RoomTabs'
@@ -56,53 +57,19 @@ const DEVICES_BY_ROOM: Record<string, {
   isMock?: boolean
 }[]> = {
   living: [
-    {
-      id: 'air_purifier',
-      name: 'Очиститель воздуха',
-      icon: '💨',
-      entityId: 'fan.zhimi_rmb1_9528_air_purifier',
-      domain: 'fan',
-      haKey: 'fan.air_purifier',
-      isMock: false,
-    },
-    {
-      id: 'light_living',
-      name: 'Свет',
-      icon: '💡',
-      entityId: 'light.living_room',
-      domain: 'light',
-      haKey: 'light.living_room',
-      isMock: true,
-    },
-    {
-      id: 'tv',
-      name: 'Телевизор',
-      icon: '📺',
-      isMock: true,
-    },
+    { id: 'air_purifier', name: 'Очиститель воздуха', icon: '💨', entityId: 'fan.zhimi_rmb1_9528_air_purifier', domain: 'fan', haKey: 'fan.air_purifier', isMock: false },
+    { id: 'light_living', name: 'Свет', icon: '💡', entityId: 'light.living_room', domain: 'light', haKey: 'light.living_room', isMock: true },
+    { id: 'tv', name: 'Телевизор', icon: '📺', isMock: true },
   ],
   bedroom: [
-    {
-      id: 'light_bedroom',
-      name: 'Свет',
-      icon: '💡',
-      entityId: 'light.bedroom',
-      domain: 'light',
-      haKey: 'light.bedroom',
-      isMock: true,
-    },
-    {
-      id: 'ac',
-      name: 'Кондиционер',
-      icon: '❄️',
-      isMock: true,
-    },
+    { id: 'light_bedroom', name: 'Свет', icon: '💡', entityId: 'light.bedroom', domain: 'light', haKey: 'light.bedroom', isMock: true },
+    { id: 'ac', name: 'Кондиционер', icon: '❄️', isMock: true },
   ],
   kitchen: [],
   bathroom: [],
 }
 
-function getWeatherEmoji(desc: string): string {
+function getWeatherIcon(desc: string): string {
   const d = desc?.toLowerCase() || ''
   if (d.includes('ясно') || d.includes('солнеч')) return '☀️'
   if (d.includes('облач')) return '⛅'
@@ -118,6 +85,13 @@ function formatEventTime(iso: string): string {
   return d.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' })
 }
 
+function getPm25Level(pm25: number): { label: string; color: string; bg: string } {
+  if (pm25 <= 12) return { label: 'Отлично', color: '#34d399', bg: 'rgba(52,211,153,0.12)' }
+  if (pm25 <= 35) return { label: 'Хорошо', color: '#a3e635', bg: 'rgba(163,230,53,0.12)' }
+  if (pm25 <= 55) return { label: 'Умеренно', color: '#fbbf24', bg: 'rgba(251,191,36,0.12)' }
+  return { label: 'Плохо', color: '#f87171', bg: 'rgba(248,113,113,0.12)' }
+}
+
 // ————— Home Tab —————
 function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: SensorData | null }) {
   const [todayEvents, setTodayEvents] = useState<CalendarEvent[]>([])
@@ -131,38 +105,182 @@ function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: S
       .finally(() => setCalLoading(false))
   }, [])
 
-  return (
-    <div style={{ flex: 1, overflowY: 'auto', WebkitOverflowScrolling: 'touch' as any, padding: '16px 20px 24px', display: 'flex', flexDirection: 'column', gap: 16 }}>
+  const pm25Info = sensors ? getPm25Level(sensors.pm25) : null
 
-      {/* Today Widget */}
+  return (
+    <div style={{ flex: 1, overflowY: 'auto', WebkitOverflowScrolling: 'touch' as any, padding: '20px 24px 28px', display: 'flex', flexDirection: 'column', gap: 16 }}>
+
+      {/* Top row: Weather + Sensors side by side */}
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
+
+        {/* Weather Card */}
+        {weather && (
+          <div style={{
+            background: 'linear-gradient(135deg, rgba(99,102,241,0.12), rgba(139,92,246,0.06))',
+            backdropFilter: 'blur(20px)',
+            border: '1px solid rgba(129,140,248,0.12)',
+            borderRadius: 22,
+            padding: '22px 24px',
+            position: 'relative',
+            overflow: 'hidden',
+          }}>
+            {/* Background decoration */}
+            <div style={{
+              position: 'absolute', top: -20, right: -10,
+              fontSize: 80, opacity: 0.12, pointerEvents: 'none',
+            }}>
+              {getWeatherIcon(weather.desc)}
+            </div>
+
+            <div style={{ fontSize: 11, color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 600, marginBottom: 16 }}>
+              Погода
+            </div>
+
+            <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 18, position: 'relative', zIndex: 1 }}>
+              <span style={{ fontSize: 44 }}>{getWeatherIcon(weather.desc)}</span>
+              <div>
+                <div style={{ fontSize: 36, fontWeight: 800, color: 'var(--text-primary)', lineHeight: 1, letterSpacing: '-2px' }}>{weather.temp}°</div>
+                <div style={{ fontSize: 14, color: 'var(--text-secondary)', marginTop: 4, fontWeight: 500 }}>{weather.desc}</div>
+              </div>
+            </div>
+
+            {/* Forecast mini */}
+            {weather.forecast && weather.forecast.length > 0 && (
+              <div style={{ display: 'flex', gap: 8 }}>
+                {weather.forecast.slice(0, 3).map(day => {
+                  const d = new Date(day.date)
+                  const label = d.toLocaleDateString('ru-RU', { weekday: 'short' })
+                  return (
+                    <div key={day.date} style={{
+                      flex: 1,
+                      background: 'rgba(255,255,255,0.04)',
+                      borderRadius: 14,
+                      padding: '10px 8px',
+                      textAlign: 'center',
+                      border: '1px solid rgba(255,255,255,0.04)',
+                    }}>
+                      <div style={{ fontSize: 10, color: 'var(--text-secondary)', textTransform: 'capitalize', marginBottom: 4, fontWeight: 500 }}>{label}</div>
+                      <div style={{ fontSize: 20, marginBottom: 4 }}>{getWeatherIcon(day.desc)}</div>
+                      <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-primary)' }}>{day.maxTemp}°</div>
+                      <div style={{ fontSize: 11, color: 'var(--text-secondary)' }}>{day.minTemp}°</div>
+                    </div>
+                  )
+                })}
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Sensors Card */}
+        {sensors && (
+          <div style={{
+            background: 'rgba(255,255,255,0.03)',
+            backdropFilter: 'blur(20px)',
+            border: '1px solid rgba(255,255,255,0.06)',
+            borderRadius: 22,
+            padding: '22px 24px',
+          }}>
+            <div style={{ fontSize: 11, color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 600, marginBottom: 16 }}>
+              Климат в квартире
+            </div>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
+              {/* Temperature */}
+              <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
+                <div style={{
+                  width: 48, height: 48, borderRadius: 16,
+                  background: 'linear-gradient(135deg, rgba(251,146,60,0.15), rgba(245,158,11,0.08))',
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                }}>
+                  <Thermometer size={22} color="#fb923c" />
+                </div>
+                <div>
+                  <div style={{ fontSize: 24, fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1 }}>{sensors.temperature}°C</div>
+                  <div style={{ fontSize: 12, color: 'var(--text-secondary)', marginTop: 2 }}>Температура</div>
+                </div>
+              </div>
+
+              {/* Humidity */}
+              <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
+                <div style={{
+                  width: 48, height: 48, borderRadius: 16,
+                  background: 'linear-gradient(135deg, rgba(59,130,246,0.15), rgba(99,102,241,0.08))',
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                }}>
+                  <Droplets size={22} color="#3b82f6" />
+                </div>
+                <div>
+                  <div style={{ fontSize: 24, fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1 }}>{sensors.humidity}%</div>
+                  <div style={{ fontSize: 12, color: 'var(--text-secondary)', marginTop: 2 }}>Влажность</div>
+                </div>
+              </div>
+
+              {/* PM2.5 */}
+              <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
+                <div style={{
+                  width: 48, height: 48, borderRadius: 16,
+                  background: pm25Info?.bg || 'rgba(255,255,255,0.05)',
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                }}>
+                  <Wind size={22} color={pm25Info?.color || '#999'} />
+                </div>
+                <div style={{ flex: 1 }}>
+                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
+                    <span style={{ fontSize: 24, fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1 }}>{sensors.pm25}</span>
+                    <span style={{ fontSize: 12, color: 'var(--text-secondary)' }}>µg/m³</span>
+                  </div>
+                  <div style={{ fontSize: 12, color: pm25Info?.color, marginTop: 2, fontWeight: 500 }}>PM2.5 · {pm25Info?.label}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Today Events */}
       <div style={{
-        background: 'var(--card-bg)',
-        border: '1px solid var(--card-border)',
-        borderRadius: 20,
-        padding: '18px 20px',
+        background: 'rgba(255,255,255,0.03)',
+        backdropFilter: 'blur(20px)',
+        border: '1px solid rgba(255,255,255,0.06)',
+        borderRadius: 22,
+        padding: '22px 24px',
       }}>
-        <div style={{ fontSize: 12, color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600, marginBottom: 14 }}>
-          📅 Сегодня
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 }}>
+          <Calendar size={15} color="var(--text-secondary)" />
+          <span style={{ fontSize: 11, color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 600 }}>
+            Сегодня
+          </span>
         </div>
 
         {calLoading ? (
           <div style={{ fontSize: 14, color: 'var(--text-secondary)' }}>Загрузка...</div>
         ) : todayEvents.length === 0 ? (
-          <div style={{ fontSize: 15, color: 'var(--text-secondary)', textAlign: 'center', padding: '8px 0' }}>
-            Свободный день 🎉
+          <div style={{ fontSize: 15, color: 'var(--text-secondary)', textAlign: 'center', padding: '12px 0' }}>
+            Нет событий на сегодня
           </div>
         ) : (
           <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
             {todayEvents.map(ev => (
-              <div key={ev.id} style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
-                <div style={{ width: 3, borderRadius: 2, background: ev.color, alignSelf: 'stretch', minHeight: 32, flexShrink: 0 }} />
+              <div key={ev.id} style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 14,
+                padding: '12px 16px',
+                borderRadius: 14,
+                background: `${ev.color}0a`,
+                border: `1px solid ${ev.color}18`,
+              }}>
+                <div style={{
+                  width: 4, borderRadius: 2,
+                  background: ev.color,
+                  alignSelf: 'stretch', minHeight: 36, flexShrink: 0,
+                }} />
                 <div style={{ flex: 1, minWidth: 0 }}>
                   <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                     {ev.title}
                   </div>
-                  <div style={{ fontSize: 12, color: 'var(--text-secondary)', marginTop: 2, display: 'flex', gap: 6 }}>
+                  <div style={{ fontSize: 12, color: 'var(--text-secondary)', marginTop: 3, display: 'flex', gap: 8 }}>
                     <span>{ev.allDay ? 'Весь день' : `${formatEventTime(ev.start)} — ${formatEventTime(ev.end)}`}</span>
-                    <span style={{ color: ev.color }}>{ev.ownerName}</span>
+                    <span style={{ color: ev.color, fontWeight: 500 }}>{ev.ownerName}</span>
                   </div>
                 </div>
               </div>
@@ -170,90 +288,6 @@ function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: S
           </div>
         )}
       </div>
-
-      {/* Weather Widget */}
-      {weather && (
-        <div style={{
-          background: 'var(--card-bg)',
-          border: '1px solid var(--card-border)',
-          borderRadius: 20,
-          padding: '18px 20px',
-        }}>
-          <div style={{ fontSize: 12, color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600, marginBottom: 14 }}>
-            🌤️ Погода
-          </div>
-
-          {/* Current */}
-          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 16 }}>
-            <span style={{ fontSize: 44 }}>{getWeatherEmoji(weather.desc)}</span>
-            <div>
-              <div style={{ fontSize: 32, fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1 }}>{weather.temp}°C</div>
-              <div style={{ fontSize: 14, color: 'var(--text-secondary)', marginTop: 4 }}>{weather.desc}</div>
-              <div style={{ fontSize: 12, color: 'var(--text-secondary)', marginTop: 2 }}>
-                💧 {weather.humidity}% · 💨 {weather.windSpeed} км/ч · Ощущается {weather.feelsLike}°
-              </div>
-            </div>
-          </div>
-
-          {/* Forecast */}
-          {weather.forecast && weather.forecast.length > 0 && (
-            <div style={{ display: 'flex', gap: 8 }}>
-              {weather.forecast.slice(0, 3).map(day => {
-                const d = new Date(day.date)
-                const label = d.toLocaleDateString('ru-RU', { weekday: 'short' })
-                return (
-                  <div key={day.date} style={{
-                    flex: 1,
-                    background: 'rgba(255,255,255,0.04)',
-                    borderRadius: 12,
-                    padding: '10px 8px',
-                    textAlign: 'center',
-                    border: '1px solid rgba(255,255,255,0.06)',
-                  }}>
-                    <div style={{ fontSize: 11, color: 'var(--text-secondary)', textTransform: 'capitalize', marginBottom: 4 }}>{label}</div>
-                    <div style={{ fontSize: 20, marginBottom: 4 }}>{getWeatherEmoji(day.desc)}</div>
-                    <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-primary)' }}>{day.maxTemp}°</div>
-                    <div style={{ fontSize: 11, color: 'var(--text-secondary)' }}>{day.minTemp}°</div>
-                  </div>
-                )
-              })}
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* Sensors Widget */}
-      {sensors && (
-        <div style={{
-          background: 'var(--card-bg)',
-          border: '1px solid var(--card-border)',
-          borderRadius: 20,
-          padding: '18px 20px',
-        }}>
-          <div style={{ fontSize: 12, color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600, marginBottom: 14 }}>
-            📊 Датчики квартиры
-          </div>
-          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
-            {[
-              { label: 'Температура', value: `${sensors.temperature}°C`, icon: '🌡️' },
-              { label: 'Влажность', value: `${sensors.humidity}%`, icon: '💧' },
-              { label: 'PM2.5', value: `${sensors.pm25} μg`, icon: '💨' },
-            ].map(s => (
-              <div key={s.label} style={{
-                background: 'rgba(255,255,255,0.04)',
-                border: '1px solid rgba(255,255,255,0.06)',
-                borderRadius: 14,
-                padding: '12px 10px',
-                textAlign: 'center',
-              }}>
-                <div style={{ fontSize: 24, marginBottom: 6 }}>{s.icon}</div>
-                <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--text-primary)' }}>{s.value}</div>
-                <div style={{ fontSize: 11, color: 'var(--text-secondary)', marginTop: 2 }}>{s.label}</div>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
     </div>
   )
 }
@@ -301,9 +335,7 @@ export default function HomePage() {
   }
 
   const getDeviceExtra = (id: string): string | undefined => {
-    if (id === 'air_purifier' && sensors) {
-      return `PM2.5: ${sensors.pm25}`
-    }
+    if (id === 'air_purifier' && sensors) return `PM2.5: ${sensors.pm25}`
     return undefined
   }
 
@@ -314,7 +346,11 @@ export default function HomePage() {
       width: '100%',
       background: 'var(--bg)',
       overflow: 'hidden',
+      position: 'relative',
     }}>
+      {/* Ambient background */}
+      <div className="bg-ambient" />
+
       <Sidebar active={tab} onChange={setTab} />
 
       <main style={{
@@ -323,6 +359,8 @@ export default function HomePage() {
         flexDirection: 'column',
         overflow: 'hidden',
         minWidth: 0,
+        position: 'relative',
+        zIndex: 1,
       }}>
         <TopBar weather={weather} sensors={sensors} />
 
@@ -335,7 +373,7 @@ export default function HomePage() {
               flex: 1,
               overflowY: 'auto',
               WebkitOverflowScrolling: 'touch' as any,
-              padding: '16px 20px 24px',
+              padding: '16px 24px 28px',
             }}>
               {devicesInRoom.length === 0 ? (
                 <div style={{
@@ -343,15 +381,20 @@ export default function HomePage() {
                   flexDirection: 'column',
                   alignItems: 'center',
                   justifyContent: 'center',
-                  height: 200,
+                  height: 220,
                   color: 'var(--text-secondary)',
-                  gap: 8,
+                  gap: 12,
                 }}>
-                  <span style={{ fontSize: 40 }}>🏠</span>
-                  <span style={{ fontSize: 15 }}>Устройства не добавлены</span>
+                  <div style={{
+                    width: 64, height: 64, borderRadius: 20,
+                    background: 'rgba(255,255,255,0.04)',
+                    display: 'flex', alignItems: 'center', justifyContent: 'center',
+                    fontSize: 28,
+                  }}>🏠</div>
+                  <span style={{ fontSize: 15, fontWeight: 500 }}>Устройства не добавлены</span>
                 </div>
               ) : (
-                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>
+                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
                   {devicesInRoom.map(device => (
                     <DeviceCard
                       key={device.id}
@@ -380,11 +423,18 @@ export default function HomePage() {
             flexDirection: 'column',
             alignItems: 'center',
             justifyContent: 'center',
-            gap: 12,
+            gap: 16,
             color: 'var(--text-secondary)',
           }}>
-            <span style={{ fontSize: 48 }}>⚙️</span>
-            <span style={{ fontSize: 16 }}>Настройки</span>
+            <div style={{
+              width: 72, height: 72, borderRadius: 22,
+              background: 'linear-gradient(135deg, rgba(99,102,241,0.12), rgba(139,92,246,0.08))',
+              border: '1px solid rgba(129,140,248,0.15)',
+              display: 'flex', alignItems: 'center', justifyContent: 'center',
+            }}>
+              <SettingsIcon size={32} color="#818cf8" />
+            </div>
+            <span style={{ fontSize: 18, fontWeight: 600 }}>Настройки</span>
             <span style={{ fontSize: 13 }}>Скоро</span>
           </div>
         )}

components/CalendarTab.tsx

@@ -27,18 +27,24 @@ function AddEventModal({ defaultDate, onClose, onSaved }: { defaultDate: string;
   const [saving, setSaving] = useState(false)
   const [error, setError] = useState('')
 
+  const inputStyle = {
+    padding: '12px 16px',
+    borderRadius: 14,
+    background: 'rgba(255,255,255,0.05)',
+    border: '1px solid rgba(255,255,255,0.08)',
+    color: 'var(--text-primary)',
+    fontSize: 14,
+    outline: 'none',
+    fontFamily: 'inherit',
+    transition: 'border-color 0.2s ease',
+  }
+
   const save = async () => {
     if (!title.trim()) { setError('Введите название'); return }
     setSaving(true)
     setError('')
     try {
-      const body = {
-        title: title.trim(),
-        date,
-        startTime: allDay ? null : startTime,
-        endTime: allDay ? null : endTime,
-        allDay,
-      }
+      const body = { title: title.trim(), date, startTime: allDay ? null : startTime, endTime: allDay ? null : endTime, allDay }
       const r = await fetch('/api/calendar', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) })
       const d = await r.json()
       if (d.error) throw new Error(d.error)
@@ -50,31 +56,20 @@ function AddEventModal({ defaultDate, onClose, onSaved }: { defaultDate: string;
   }
 
   return (
-    <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.6)', zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }} onClick={onClose}>
-      <div style={{ background: 'var(--bg)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 20, padding: 24, maxWidth: 340, width: '100%' }} onClick={e => e.stopPropagation()}>
-        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 20 }}>
-          <span style={{ fontSize: 16, fontWeight: 700, color: 'var(--text-primary)' }}>Новое событие</span>
-          <button onClick={onClose} style={{ background: 'none', border: 'none', color: 'var(--text-secondary)', cursor: 'pointer' }}><X size={18} /></button>
+    <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(8px)', zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }} onClick={onClose}>
+      <div style={{ background: 'rgba(18,18,35,0.95)', backdropFilter: 'blur(40px)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 24, padding: 28, maxWidth: 360, width: '100%', boxShadow: '0 25px 60px rgba(0,0,0,0.5)' }} onClick={e => e.stopPropagation()}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 24 }}>
+          <span style={{ fontSize: 18, fontWeight: 700, color: 'var(--text-primary)' }}>Новое событие</span>
+          <button onClick={onClose} style={{ color: 'var(--text-secondary)', padding: 4 }}><X size={18} /></button>
         </div>
 
         <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-          <input
-            value={title}
-            onChange={e => setTitle(e.target.value)}
-            placeholder="Название события"
-            autoFocus
-            style={{ padding: '10px 14px', borderRadius: 10, background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.1)', color: 'var(--text-primary)', fontSize: 14, outline: 'none' }}
-          />
-          <input
-            type="date"
-            value={date}
-            onChange={e => setDate(e.target.value)}
-            style={{ padding: '10px 14px', borderRadius: 10, background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.1)', color: 'var(--text-primary)', fontSize: 14, outline: 'none' }}
-          />
+          <input value={title} onChange={e => setTitle(e.target.value)} placeholder="Название события" autoFocus style={inputStyle} />
+          <input type="date" value={date} onChange={e => setDate(e.target.value)} style={inputStyle} />
           {!allDay && (
             <div style={{ display: 'flex', gap: 8 }}>
-              <input type="time" value={startTime} onChange={e => setStartTime(e.target.value)} style={{ flex: 1, padding: '10px 14px', borderRadius: 10, background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.1)', color: 'var(--text-primary)', fontSize: 14, outline: 'none' }} />
-              <input type="time" value={endTime} onChange={e => setEndTime(e.target.value)} style={{ flex: 1, padding: '10px 14px', borderRadius: 10, background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.1)', color: 'var(--text-primary)', fontSize: 14, outline: 'none' }} />
+              <input type="time" value={startTime} onChange={e => setStartTime(e.target.value)} style={{ ...inputStyle, flex: 1 }} />
+              <input type="time" value={endTime} onChange={e => setEndTime(e.target.value)} style={{ ...inputStyle, flex: 1 }} />
             </div>
           )}
           <label style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--text-secondary)', fontSize: 13, cursor: 'pointer' }}>
@@ -85,7 +80,17 @@ function AddEventModal({ defaultDate, onClose, onSaved }: { defaultDate: string;
           <button
             onClick={save}
             disabled={saving}
-            style={{ padding: '11px', borderRadius: 12, background: saving ? 'rgba(99,102,241,0.3)' : 'rgba(99,102,241,0.5)', border: '1px solid rgba(99,102,241,0.5)', color: '#a5b4fc', fontSize: 14, fontWeight: 600, cursor: saving ? 'default' : 'pointer', touchAction: 'manipulation' }}
+            style={{
+              padding: '13px',
+              borderRadius: 14,
+              background: saving ? 'rgba(99,102,241,0.2)' : 'linear-gradient(135deg, rgba(99,102,241,0.4), rgba(139,92,246,0.3))',
+              border: '1px solid rgba(129,140,248,0.3)',
+              color: '#a5b4fc',
+              fontSize: 14,
+              fontWeight: 600,
+              cursor: saving ? 'default' : 'pointer',
+              transition: 'all 0.25s ease',
+            }}
           >
             {saving ? 'Сохранение...' : 'Создать событие'}
           </button>
@@ -102,9 +107,9 @@ export default function CalendarTab() {
   const [loading, setLoading] = useState(true)
   const [selectedEvent, setSelectedEvent] = useState<CalendarEvent | null>(null)
   const [showAddModal, setShowAddModal] = useState(false)
+  const [addDate, setAddDate] = useState<string>('')
   const [deleting, setDeleting] = useState(false)
   const [confirmDelete, setConfirmDelete] = useState(false)
-  const [addDate, setAddDate] = useState<string>('')
 
   useEffect(() => {
     setLoading(true)
@@ -114,7 +119,6 @@ export default function CalendarTab() {
       .catch(() => setLoading(false))
   }, [year, month])
 
-
   const deleteEvent = async (event: CalendarEvent) => {
     setDeleting(true)
     try {
@@ -131,15 +135,12 @@ export default function CalendarTab() {
     }
   }
 
-  // Upcoming events (next 30 days)
   const upcoming = events
     .filter(e => new Date(e.start) >= new Date())
     .slice(0, 6)
 
-  // Build calendar grid
   const firstDay = new Date(year, month, 1)
   const lastDay = new Date(year, month + 1, 0)
-  // Monday-based week: 0=Mon, 6=Sun
   const startOffset = (firstDay.getDay() + 6) % 7
   const totalCells = Math.ceil((startOffset + lastDay.getDate()) / 7) * 7
   const cells: (number | null)[] = []
@@ -161,25 +162,46 @@ export default function CalendarTab() {
   const today = new Date()
 
   return (
-    <div style={{ flex: 1, display: 'flex', overflow: 'hidden', padding: '12px 16px 16px', gap: 16 }}>
+    <div style={{ flex: 1, display: 'flex', overflow: 'hidden', padding: '16px 24px 24px', gap: 20 }}>
       {/* Main calendar grid */}
       <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
         {/* Header */}
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
           <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
-            <button onClick={prevMonth} style={{ width: 32, height: 32, borderRadius: 8, background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.1)', color: 'var(--text-primary)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <button onClick={prevMonth} style={{
+              width: 36, height: 36, borderRadius: 12,
+              background: 'rgba(255,255,255,0.04)',
+              border: '1px solid rgba(255,255,255,0.06)',
+              color: 'var(--text-primary)',
+              display: 'flex', alignItems: 'center', justifyContent: 'center',
+              transition: 'all 0.2s ease',
+            }}>
               <ChevronLeft size={16} />
             </button>
-            <span style={{ fontSize: 18, fontWeight: 700, color: 'var(--text-primary)', minWidth: 160, textAlign: 'center' }}>
+            <span style={{ fontSize: 20, fontWeight: 700, color: 'var(--text-primary)', minWidth: 180, textAlign: 'center' }}>
               {MONTHS[month]} {year}
             </span>
-            <button onClick={nextMonth} style={{ width: 32, height: 32, borderRadius: 8, background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.1)', color: 'var(--text-primary)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <button onClick={nextMonth} style={{
+              width: 36, height: 36, borderRadius: 12,
+              background: 'rgba(255,255,255,0.04)',
+              border: '1px solid rgba(255,255,255,0.06)',
+              color: 'var(--text-primary)',
+              display: 'flex', alignItems: 'center', justifyContent: 'center',
+              transition: 'all 0.2s ease',
+            }}>
               <ChevronRight size={16} />
             </button>
           </div>
           <button
             onClick={() => { setAddDate(today.toISOString().split('T')[0]); setShowAddModal(true) }}
-            style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '8px 14px', borderRadius: 10, background: 'rgba(99,102,241,0.2)', border: '1px solid rgba(99,102,241,0.4)', color: '#a5b4fc', fontSize: 13, fontWeight: 600, cursor: 'pointer', touchAction: 'manipulation' }}
+            style={{
+              display: 'flex', alignItems: 'center', gap: 6,
+              padding: '10px 18px', borderRadius: 14,
+              background: 'linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.15))',
+              border: '1px solid rgba(129,140,248,0.25)',
+              color: '#a5b4fc', fontSize: 13, fontWeight: 600,
+              transition: 'all 0.25s ease',
+            }}
           >
             <Plus size={15} />
             Событие
@@ -187,18 +209,24 @@ export default function CalendarTab() {
         </div>
 
         {/* Weekday headers */}
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', marginBottom: 4 }}>
-          {WEEKDAYS.map(d => (
-            <div key={d} style={{ textAlign: 'center', fontSize: 11, fontWeight: 600, color: 'var(--text-secondary)', textTransform: 'uppercase', padding: '4px 0' }}>{d}</div>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', marginBottom: 6 }}>
+          {WEEKDAYS.map((d, i) => (
+            <div key={d} style={{
+              textAlign: 'center', fontSize: 11, fontWeight: 600,
+              color: i >= 5 ? 'rgba(248,113,113,0.5)' : 'var(--text-secondary)',
+              textTransform: 'uppercase', padding: '6px 0', letterSpacing: '0.05em',
+            }}>{d}</div>
           ))}
         </div>
 
         {/* Calendar cells */}
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', flex: 1, gap: 2 }}>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', flex: 1, gap: 3 }}>
           {cells.map((day, idx) => {
             if (!day) return <div key={idx} />
             const dayEvents = getEventsForDay(day)
             const isToday = today.getFullYear() === year && today.getMonth() === month && today.getDate() === day
+            const dayOfWeek = (startOffset + day - 1) % 7
+            const isWeekend = dayOfWeek >= 5
             return (
               <div
                 key={idx}
@@ -210,34 +238,40 @@ export default function CalendarTab() {
                   }
                 }}
                 style={{
-                  borderRadius: 8,
-                  padding: '4px 3px',
-                  background: isToday ? 'rgba(99,102,241,0.12)' : 'rgba(255,255,255,0.02)',
-                  border: isToday ? '1px solid rgba(99,102,241,0.35)' : '1px solid transparent',
+                  borderRadius: 12,
+                  padding: '5px 4px',
+                  background: isToday
+                    ? 'linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.08))'
+                    : 'rgba(255,255,255,0.015)',
+                  border: isToday
+                    ? '1px solid rgba(129,140,248,0.3)'
+                    : '1px solid transparent',
                   cursor: 'pointer',
-                  minHeight: 52,
+                  minHeight: 56,
                   display: 'flex',
                   flexDirection: 'column',
                   gap: 2,
-                  touchAction: 'manipulation',
+                  transition: 'all 0.2s ease',
                 }}
               >
-                <span style={{ fontSize: 12, fontWeight: isToday ? 700 : 400, color: isToday ? '#a5b4fc' : 'var(--text-secondary)', textAlign: 'right', paddingRight: 3 }}>{day}</span>
+                <span style={{
+                  fontSize: 12,
+                  fontWeight: isToday ? 700 : 500,
+                  color: isToday ? '#a5b4fc' : isWeekend ? 'rgba(248,113,113,0.6)' : 'var(--text-secondary)',
+                  textAlign: 'right', paddingRight: 4,
+                }}>{day}</span>
                 {dayEvents.slice(0, 2).map(e => (
                   <div
                     key={e.id}
                     onClick={ev => { ev.stopPropagation(); setSelectedEvent(e) }}
                     style={{
-                      fontSize: 10,
-                      fontWeight: 600,
-                      background: e.color + '33',
-                      border: `1px solid ${e.color}55`,
+                      fontSize: 10, fontWeight: 600,
+                      background: e.color + '1a',
+                      border: `1px solid ${e.color}30`,
                       color: e.color,
-                      borderRadius: 4,
-                      padding: '1px 4px',
-                      overflow: 'hidden',
-                      textOverflow: 'ellipsis',
-                      whiteSpace: 'nowrap',
+                      borderRadius: 6,
+                      padding: '2px 5px',
+                      overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                       cursor: 'pointer',
                     }}
                   >
@@ -254,10 +288,18 @@ export default function CalendarTab() {
       </div>
 
       {/* Right panel: upcoming events */}
-      <div style={{ width: 200, flexShrink: 0, display: 'flex', flexDirection: 'column', gap: 8, overflowY: 'auto' }}>
-        <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 4 }}>Ближайшие</div>
+      <div style={{
+        width: 220, flexShrink: 0,
+        display: 'flex', flexDirection: 'column', gap: 10,
+        overflowY: 'auto',
+        background: 'rgba(255,255,255,0.02)',
+        borderRadius: 22,
+        padding: '20px 16px',
+        border: '1px solid rgba(255,255,255,0.04)',
+      }}>
+        <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 4 }}>Ближайшие</div>
         {upcoming.length === 0 && !loading && (
-          <div style={{ fontSize: 13, color: 'var(--text-secondary)' }}>Нет событий</div>
+          <div style={{ fontSize: 13, color: 'var(--text-secondary)', padding: '20px 0', textAlign: 'center' }}>Нет событий</div>
         )}
         {upcoming.map(e => {
           const d = new Date(e.start)
@@ -266,25 +308,29 @@ export default function CalendarTab() {
               key={e.id}
               onClick={() => setSelectedEvent(e)}
               style={{
-                borderRadius: 12,
-                padding: '10px 12px',
-                background: e.color + '18',
-                border: `1px solid ${e.color}33`,
+                borderRadius: 16,
+                padding: '14px 14px',
+                background: `${e.color}0c`,
+                border: `1px solid ${e.color}1a`,
                 cursor: 'pointer',
-                touchAction: 'manipulation',
+                transition: 'all 0.25s ease',
               }}
             >
-              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
-                <div style={{ width: 28, height: 28, borderRadius: 8, background: e.color + '33', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
+                <div style={{
+                  width: 32, height: 32, borderRadius: 10,
+                  background: `${e.color}1a`,
+                  display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
+                }}>
                   <span style={{ fontSize: 14, fontWeight: 700, color: e.color }}>{d.getDate()}</span>
                 </div>
                 <div style={{ fontSize: 10, color: e.color, fontWeight: 600 }}>{MONTHS[d.getMonth()].slice(0, 3)}</div>
               </div>
-              <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{e.title}</div>
-              <div style={{ fontSize: 11, color: 'var(--text-secondary)', marginTop: 2 }}>
+              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{e.title}</div>
+              <div style={{ fontSize: 11, color: 'var(--text-secondary)', marginTop: 4 }}>
                 {e.allDay ? 'Весь день' : d.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' })}
               </div>
-              <div style={{ fontSize: 10, color: e.color, marginTop: 3, fontWeight: 500 }}>{e.ownerName}</div>
+              <div style={{ fontSize: 10, color: e.color, marginTop: 4, fontWeight: 500 }}>{e.ownerName}</div>
             </div>
           )
         })}
@@ -292,38 +338,66 @@ export default function CalendarTab() {
 
       {/* Event detail modal */}
       {selectedEvent && (
-        <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.6)', zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }} onClick={() => { setSelectedEvent(null); setConfirmDelete(false) }}>
-          <div style={{ background: 'var(--bg)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 20, padding: 24, maxWidth: 360, width: '100%', boxShadow: '0 20px 60px rgba(0,0,0,0.5)' }} onClick={e => e.stopPropagation()}>
-            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 16 }}>
-              <div style={{ width: 4, height: 40, borderRadius: 2, background: selectedEvent.color, marginRight: 12, flexShrink: 0, marginTop: 2 }} />
-              <div style={{ flex: 1 }}>
-                <div style={{ fontSize: 16, fontWeight: 700, color: 'var(--text-primary)' }}>{selectedEvent.title}</div>
-                <div style={{ fontSize: 12, color: selectedEvent.color, fontWeight: 500, marginTop: 2 }}>{selectedEvent.ownerName}</div>
+        <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(8px)', zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }} onClick={() => { setSelectedEvent(null); setConfirmDelete(false) }}>
+          <div style={{
+            background: 'rgba(18,18,35,0.95)',
+            backdropFilter: 'blur(40px)',
+            border: '1px solid rgba(255,255,255,0.08)',
+            borderRadius: 24, padding: 28, maxWidth: 380, width: '100%',
+            boxShadow: '0 25px 60px rgba(0,0,0,0.5)',
+          }} onClick={e => e.stopPropagation()}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 20 }}>
+              <div style={{ display: 'flex', gap: 14 }}>
+                <div style={{ width: 4, borderRadius: 3, background: selectedEvent.color, alignSelf: 'stretch', minHeight: 44, flexShrink: 0 }} />
+                <div>
+                  <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--text-primary)' }}>{selectedEvent.title}</div>
+                  <div style={{ fontSize: 13, color: selectedEvent.color, fontWeight: 500, marginTop: 3 }}>{selectedEvent.ownerName}</div>
+                </div>
               </div>
-              <button onClick={() => setSelectedEvent(null)} style={{ background: 'none', border: 'none', color: 'var(--text-secondary)', cursor: 'pointer', padding: 4 }}><X size={18} /></button>
+              <button onClick={() => { setSelectedEvent(null); setConfirmDelete(false) }} style={{ color: 'var(--text-secondary)', padding: 4 }}><X size={18} /></button>
             </div>
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-              <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--text-secondary)', fontSize: 13 }}>
-                <Clock size={14} />
+
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+              <div style={{
+                display: 'flex', alignItems: 'center', gap: 10,
+                padding: '10px 14px', borderRadius: 12,
+                background: 'rgba(255,255,255,0.03)',
+                color: 'var(--text-secondary)', fontSize: 13,
+              }}>
+                <Clock size={15} />
                 {selectedEvent.allDay
                   ? 'Весь день'
                   : `${new Date(selectedEvent.start).toLocaleString('ru-RU', { day: 'numeric', month: 'long', hour: '2-digit', minute: '2-digit' })} — ${new Date(selectedEvent.end).toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' })}`
                 }
               </div>
               {selectedEvent.location && (
-                <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--text-secondary)', fontSize: 13 }}>
-                  <MapPin size={14} /> {selectedEvent.location}
+                <div style={{
+                  display: 'flex', alignItems: 'center', gap: 10,
+                  padding: '10px 14px', borderRadius: 12,
+                  background: 'rgba(255,255,255,0.03)',
+                  color: 'var(--text-secondary)', fontSize: 13,
+                }}>
+                  <MapPin size={15} /> {selectedEvent.location}
                 </div>
               )}
               {selectedEvent.description && (
-                <div style={{ fontSize: 13, color: 'var(--text-secondary)', marginTop: 4, lineHeight: 1.5 }}>{selectedEvent.description}</div>
+                <div style={{ fontSize: 13, color: 'var(--text-secondary)', marginTop: 4, lineHeight: 1.6 }}>{selectedEvent.description}</div>
               )}
+
               {/* Delete button */}
-              <div style={{ marginTop: 8, borderTop: '1px solid rgba(255,255,255,0.08)', paddingTop: 12 }}>
+              <div style={{ marginTop: 8, borderTop: '1px solid rgba(255,255,255,0.06)', paddingTop: 14 }}>
                 {!confirmDelete ? (
                   <button
                     onClick={() => setConfirmDelete(true)}
-                    style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '8px 14px', borderRadius: 10, background: 'rgba(239,68,68,0.1)', border: '1px solid rgba(239,68,68,0.3)', color: '#f87171', fontSize: 13, fontWeight: 600, cursor: 'pointer', touchAction: 'manipulation', width: '100%', justifyContent: 'center' }}
+                    style={{
+                      display: 'flex', alignItems: 'center', gap: 6,
+                      padding: '10px 14px', borderRadius: 12,
+                      background: 'rgba(239,68,68,0.08)',
+                      border: '1px solid rgba(239,68,68,0.2)',
+                      color: '#f87171', fontSize: 13, fontWeight: 600,
+                      width: '100%', justifyContent: 'center',
+                      transition: 'all 0.25s ease',
+                    }}
                   >
                     <Trash2 size={14} />
                     Удалить событие
@@ -333,13 +407,26 @@ export default function CalendarTab() {
                     <button
                       onClick={() => deleteEvent(selectedEvent)}
                       disabled={deleting}
-                      style={{ flex: 1, padding: '8px 14px', borderRadius: 10, background: deleting ? 'rgba(239,68,68,0.15)' : 'rgba(239,68,68,0.25)', border: '1px solid rgba(239,68,68,0.5)', color: '#f87171', fontSize: 13, fontWeight: 600, cursor: deleting ? 'default' : 'pointer', touchAction: 'manipulation' }}
+                      style={{
+                        flex: 1, padding: '10px 14px', borderRadius: 12,
+                        background: deleting ? 'rgba(239,68,68,0.1)' : 'rgba(239,68,68,0.2)',
+                        border: '1px solid rgba(239,68,68,0.35)',
+                        color: '#f87171', fontSize: 13, fontWeight: 600,
+                        cursor: deleting ? 'default' : 'pointer',
+                        transition: 'all 0.25s ease',
+                      }}
                     >
                       {deleting ? 'Удаление...' : 'Да, удалить'}
                     </button>
                     <button
                       onClick={() => setConfirmDelete(false)}
-                      style={{ flex: 1, padding: '8px 14px', borderRadius: 10, background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.1)', color: 'var(--text-secondary)', fontSize: 13, fontWeight: 600, cursor: 'pointer', touchAction: 'manipulation' }}
+                      style={{
+                        flex: 1, padding: '10px 14px', borderRadius: 12,
+                        background: 'rgba(255,255,255,0.04)',
+                        border: '1px solid rgba(255,255,255,0.08)',
+                        color: 'var(--text-secondary)', fontSize: 13, fontWeight: 600,
+                        transition: 'all 0.25s ease',
+                      }}
                     >
                       Отмена
                     </button>
@@ -351,7 +438,6 @@ export default function CalendarTab() {
         </div>
       )}
 
-      {/* Add event modal */}
       {showAddModal && (
         <AddEventModal
           defaultDate={addDate}

components/DeviceCard.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useState, useEffect } from 'react'
+import { Fan, Lightbulb, Tv, Snowflake, Power } from 'lucide-react'
 
 interface DeviceCardProps {
   id: string
@@ -13,6 +14,32 @@ interface DeviceCardProps {
   extraInfo?: string
 }
 
+function getDeviceIcon(id: string, isOn: boolean) {
+  const color = isOn ? '#a5b4fc' : 'rgba(255,255,255,0.35)'
+  const size = 24
+  if (id.includes('air_purifier')) return <Fan size={size} color={color} />
+  if (id.includes('light')) return <Lightbulb size={size} color={isOn ? '#fbbf24' : color} />
+  if (id.includes('tv')) return <Tv size={size} color={color} />
+  if (id.includes('ac')) return <Snowflake size={size} color={isOn ? '#22d3ee' : color} />
+  return <Power size={size} color={color} />
+}
+
+function getDeviceGradient(id: string): string {
+  if (id.includes('air_purifier')) return 'linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.12))'
+  if (id.includes('light')) return 'linear-gradient(135deg, rgba(251,191,36,0.18), rgba(245,158,11,0.1))'
+  if (id.includes('tv')) return 'linear-gradient(135deg, rgba(59,130,246,0.18), rgba(99,102,241,0.1))'
+  if (id.includes('ac')) return 'linear-gradient(135deg, rgba(34,211,238,0.18), rgba(6,182,212,0.1))'
+  return 'linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.08))'
+}
+
+function getDeviceBorder(id: string): string {
+  if (id.includes('air_purifier')) return 'rgba(129,140,248,0.25)'
+  if (id.includes('light')) return 'rgba(251,191,36,0.25)'
+  if (id.includes('tv')) return 'rgba(99,102,241,0.25)'
+  if (id.includes('ac')) return 'rgba(34,211,238,0.25)'
+  return 'rgba(129,140,248,0.2)'
+}
+
 export default function DeviceCard({
   id, name, icon, entityId, domain, initialState, isMock = false, extraInfo,
 }: DeviceCardProps) {
@@ -20,7 +47,6 @@ export default function DeviceCard({
   const [synced, setSynced] = useState(false)
   const [loading, setLoading] = useState(false)
 
-  // Sync from HA only once — when real data first arrives (not mock default)
   useEffect(() => {
     if (!synced && !isMock) {
       setIsOn(initialState)
@@ -30,7 +56,7 @@ export default function DeviceCard({
 
   const toggle = async () => {
     const next = !isOn
-    setIsOn(next) // optimistic
+    setIsOn(next)
 
     if (!isMock && entityId && domain) {
       setLoading(true)
@@ -52,69 +78,98 @@ export default function DeviceCard({
     }
   }
 
-  const accent = '#00d4ff'
-
   return (
     <div style={{
-      background: isOn ? 'rgba(0,212,255,0.07)' : 'rgba(255,255,255,0.04)',
-      border: isOn ? '1px solid rgba(0,212,255,0.25)' : '1px solid rgba(255,255,255,0.08)',
-      borderRadius: 18,
-      padding: '18px 16px 16px',
-      minHeight: 140,
+      background: isOn ? getDeviceGradient(id) : 'rgba(255,255,255,0.03)',
+      backdropFilter: 'blur(20px)',
+      WebkitBackdropFilter: 'blur(20px)',
+      border: isOn ? `1px solid ${getDeviceBorder(id)}` : '1px solid rgba(255,255,255,0.06)',
+      borderRadius: 22,
+      padding: '20px 18px 18px',
+      minHeight: 150,
       display: 'flex',
       flexDirection: 'column',
       justifyContent: 'space-between',
-      transition: 'background 0.25s ease, border-color 0.25s ease',
-      boxShadow: isOn ? '0 0 24px rgba(0,212,255,0.06)' : 'none',
+      transition: 'all 0.35s cubic-bezier(0.4, 0, 0.2, 1)',
+      boxShadow: isOn ? '0 8px 32px rgba(99,102,241,0.1)' : '0 2px 8px rgba(0,0,0,0.1)',
+      position: 'relative',
+      overflow: 'hidden',
     }}>
-      {/* Top: icon + toggle */}
-      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
+      {/* Subtle glow effect when on */}
+      {isOn && (
         <div style={{
-          width: 42, height: 42, borderRadius: 12,
-          background: isOn ? 'rgba(0,212,255,0.15)' : 'rgba(255,255,255,0.06)',
+          position: 'absolute',
+          top: -30,
+          right: -30,
+          width: 100,
+          height: 100,
+          borderRadius: '50%',
+          background: 'radial-gradient(circle, rgba(129,140,248,0.15) 0%, transparent 70%)',
+          pointerEvents: 'none',
+        }} />
+      )}
+
+      {/* Top: icon + toggle */}
+      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', position: 'relative', zIndex: 1 }}>
+        <div style={{
+          width: 48, height: 48, borderRadius: 16,
+          background: isOn ? 'rgba(255,255,255,0.1)' : 'rgba(255,255,255,0.05)',
           display: 'flex', alignItems: 'center', justifyContent: 'center',
-          fontSize: 20,
-          transition: 'background 0.25s ease',
-          boxShadow: isOn ? '0 0 16px rgba(0,212,255,0.25)' : 'none',
+          transition: 'all 0.3s ease',
+          boxShadow: isOn ? '0 4px 16px rgba(0,0,0,0.1)' : 'none',
         }}>
-          {icon}
+          {getDeviceIcon(id, isOn)}
         </div>
 
         <button
           onClick={toggle}
           disabled={loading}
           style={{
-            width: 52, height: 30, borderRadius: 15,
-            background: isOn ? `linear-gradient(90deg, #00b4d8, #00d4ff)` : 'rgba(255,255,255,0.1)',
+            width: 54, height: 30, borderRadius: 15,
+            background: isOn
+              ? 'linear-gradient(90deg, #6366f1, #8b5cf6)'
+              : 'rgba(255,255,255,0.08)',
             position: 'relative', border: 'none', cursor: 'pointer',
-            flexShrink: 0, touchAction: 'manipulation',
-            WebkitTapHighlightColor: 'transparent',
-            transition: 'background 0.25s ease',
+            flexShrink: 0,
+            transition: 'all 0.3s ease',
             opacity: loading ? 0.6 : 1,
-            boxShadow: isOn ? '0 0 10px rgba(0,212,255,0.4)' : 'none',
+            boxShadow: isOn ? '0 0 16px rgba(99,102,241,0.3)' : 'none',
           }}
         >
           <span style={{
             position: 'absolute', top: 4,
-            left: isOn ? 26 : 4,
+            left: isOn ? 28 : 4,
             width: 22, height: 22, borderRadius: '50%',
             background: '#fff',
-            boxShadow: '0 1px 4px rgba(0,0,0,0.3)',
-            transition: 'left 0.22s ease',
+            boxShadow: '0 2px 6px rgba(0,0,0,0.25)',
+            transition: 'left 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
             display: 'block',
           }} />
         </button>
       </div>
 
       {/* Bottom: name + status */}
-      <div>
+      <div style={{ position: 'relative', zIndex: 1 }}>
         <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-primary)', lineHeight: 1.3 }}>
           {name}
         </div>
-        <div style={{ fontSize: 12, color: isOn ? accent : 'var(--text-secondary)', marginTop: 3 }}>
+        <div style={{
+          fontSize: 12,
+          color: isOn ? '#a5b4fc' : 'var(--text-secondary)',
+          marginTop: 4,
+          fontWeight: 500,
+        }}>
           {isOn ? 'Включён' : 'Выключен'}
           {extraInfo && isOn ? ` · ${extraInfo}` : ''}
         </div>
+        {isMock && (
+          <div style={{
+            fontSize: 10,
+            color: 'var(--text-tertiary)',
+            marginTop: 2,
+            fontStyle: 'italic',
+          }}>demo</div>
+        )}
       </div>
     </div>
   )

components/RoomTabs.tsx

@@ -18,8 +18,8 @@ export default function RoomTabs({ rooms, active, onChange }: RoomTabsProps) {
     <div
       style={{
         display: 'flex',
-        gap: 10,
-        padding: '12px 20px',
+        gap: 8,
+        padding: '14px 24px',
         overflowX: 'auto',
         flexShrink: 0,
         WebkitOverflowScrolling: 'touch' as any,
@@ -35,35 +35,39 @@ export default function RoomTabs({ rooms, active, onChange }: RoomTabsProps) {
             onClick={() => onChange(room.id)}
             style={{
               display: 'flex',
-              flexDirection: 'column',
               alignItems: 'center',
-              gap: 2,
-              padding: '10px 18px',
-              borderRadius: 14,
-              background: isActive ? 'rgba(0,212,255,0.12)' : 'rgba(255,255,255,0.04)',
-              border: isActive ? '1px solid rgba(0,212,255,0.3)' : '1px solid rgba(255,255,255,0.06)',
-              minWidth: 90,
+              gap: 8,
+              padding: '10px 20px',
+              borderRadius: 16,
+              background: isActive
+                ? 'linear-gradient(135deg, rgba(99,102,241,0.18), rgba(139,92,246,0.12))'
+                : 'rgba(255,255,255,0.03)',
+              border: isActive
+                ? '1px solid rgba(129,140,248,0.25)'
+                : '1px solid rgba(255,255,255,0.05)',
+              minWidth: 'fit-content',
               flexShrink: 0,
-              touchAction: 'manipulation',
-              WebkitTapHighlightColor: 'transparent',
-              transition: 'all 0.2s ease',
+              transition: 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
+              boxShadow: isActive ? '0 4px 16px rgba(99,102,241,0.1)' : 'none',
             }}
           >
-            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-              <span style={{ fontSize: 18 }}>{room.emoji}</span>
-              <span
-                style={{
-                  fontSize: 14,
-                  fontWeight: isActive ? 600 : 400,
-                  color: isActive ? 'var(--accent)' : 'var(--text-primary)',
-                  whiteSpace: 'nowrap',
-                }}
-              >
-                {room.name}
-              </span>
-            </div>
-            <span style={{ fontSize: 11, color: 'var(--text-secondary)' }}>
-              {room.deviceCount} {room.deviceCount === 1 ? 'устройство' : room.deviceCount >= 2 && room.deviceCount <= 4 ? 'устройства' : 'устройств'}
+            <span style={{ fontSize: 18 }}>{room.emoji}</span>
+            <span
+              style={{
+                fontSize: 14,
+                fontWeight: isActive ? 600 : 500,
+                color: isActive ? '#a5b4fc' : 'var(--text-primary)',
+                whiteSpace: 'nowrap',
+              }}
+            >
+              {room.name}
+            </span>
+            <span style={{
+              fontSize: 11,
+              color: isActive ? 'rgba(165,180,252,0.6)' : 'var(--text-tertiary)',
+              fontWeight: 500,
+            }}>
+              {room.deviceCount}
             </span>
           </button>
         )

components/Sidebar.tsx

@@ -20,19 +20,19 @@ export default function Sidebar({ active, onChange }: SidebarProps) {
   return (
     <nav
       style={{
-        width: 72,
-        minWidth: 72,
+        width: 78,
+        minWidth: 78,
         height: '100dvh',
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'center',
-        paddingTop: 20,
-        paddingBottom: 20,
-        background: 'rgba(0,0,0,0.5)',
-        backdropFilter: 'blur(20px)',
-        WebkitBackdropFilter: 'blur(20px)',
-        borderRight: '1px solid rgba(255,255,255,0.05)',
-        gap: 8,
+        paddingTop: 24,
+        paddingBottom: 24,
+        background: 'rgba(12, 12, 24, 0.6)',
+        backdropFilter: 'blur(30px)',
+        WebkitBackdropFilter: 'blur(30px)',
+        borderRight: '1px solid rgba(255,255,255,0.04)',
+        gap: 6,
         flexShrink: 0,
         zIndex: 10,
       }}
@@ -40,19 +40,20 @@ export default function Sidebar({ active, onChange }: SidebarProps) {
       {/* Logo */}
       <div
         style={{
-          width: 44,
-          height: 44,
-          borderRadius: 14,
-          background: 'linear-gradient(135deg, #00d4ff22, #00d4ff44)',
-          border: '1px solid rgba(0,212,255,0.3)',
+          width: 48,
+          height: 48,
+          borderRadius: 16,
+          background: 'linear-gradient(135deg, rgba(99,102,241,0.25), rgba(139,92,246,0.25))',
+          border: '1px solid rgba(129,140,248,0.3)',
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
-          marginBottom: 24,
+          marginBottom: 28,
           flexShrink: 0,
+          boxShadow: '0 0 20px rgba(99,102,241,0.15)',
         }}
       >
-        <Home size={20} color="#00d4ff" />
+        <Home size={22} color="#818cf8" />
       </div>
 
       {/* Nav items */}
@@ -64,19 +65,38 @@ export default function Sidebar({ active, onChange }: SidebarProps) {
             onClick={() => onChange(id)}
             title={label}
             style={{
-              width: 48,
-              height: 48,
-              borderRadius: 14,
+              width: 52,
+              height: 52,
+              borderRadius: 16,
               display: 'flex',
+              flexDirection: 'column',
               alignItems: 'center',
               justifyContent: 'center',
-              background: isActive ? 'rgba(0,212,255,0.15)' : 'transparent',
-              border: isActive ? '1px solid rgba(0,212,255,0.25)' : '1px solid transparent',
-              transition: 'all 0.2s ease',
+              gap: 4,
+              background: isActive
+                ? 'linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.15))'
+                : 'transparent',
+              border: isActive
+                ? '1px solid rgba(129,140,248,0.25)'
+                : '1px solid transparent',
+              transition: 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
               flexShrink: 0,
+              boxShadow: isActive ? '0 0 20px rgba(99,102,241,0.1)' : 'none',
             }}
           >
-            <Icon size={22} color={isActive ? '#00d4ff' : 'rgba(255,255,255,0.4)'} />
+            <Icon
+              size={20}
+              color={isActive ? '#a5b4fc' : 'rgba(255,255,255,0.3)'}
+              strokeWidth={isActive ? 2.2 : 1.8}
+            />
+            <span style={{
+              fontSize: 9,
+              fontWeight: isActive ? 600 : 500,
+              color: isActive ? '#a5b4fc' : 'rgba(255,255,255,0.25)',
+              letterSpacing: '0.02em',
+            }}>
+              {label}
+            </span>
           </button>
         )
       })}

components/TopBar.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useState, useEffect } from 'react'
-import { Cloud, Droplets, Wind } from 'lucide-react'
+import { Droplets, Wind, Thermometer, X } from 'lucide-react'
 
 interface WeatherData {
   temp: string
@@ -23,7 +23,7 @@ interface TopBarProps {
   sensors: SensorData | null
 }
 
-function getWeatherEmoji(desc: string): string {
+function getWeatherIcon(desc: string): string {
   const d = desc?.toLowerCase() || ''
   if (d.includes('ясно') || d.includes('солнеч')) return '☀️'
   if (d.includes('облач')) return '⛅'
@@ -39,7 +39,10 @@ function formatTime(date: Date): string {
 }
 
 function formatDate(date: Date): string {
-  return date.toLocaleDateString('ru-RU', { weekday: 'short', day: 'numeric', month: 'short' })
+  const weekday = date.toLocaleDateString('ru-RU', { weekday: 'long' })
+  const day = date.getDate()
+  const month = date.toLocaleDateString('ru-RU', { month: 'long' })
+  return `${weekday}, ${day} ${month}`
 }
 
 export default function TopBar({ weather, sensors }: TopBarProps) {
@@ -55,60 +58,67 @@ export default function TopBar({ weather, sensors }: TopBarProps) {
     <>
       <header
         style={{
-          height: 64,
+          height: 72,
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'space-between',
-          padding: '0 20px',
-          borderBottom: '1px solid rgba(255,255,255,0.06)',
-          background: 'rgba(255,255,255,0.02)',
-          backdropFilter: 'blur(10px)',
+          padding: '0 24px',
+          borderBottom: '1px solid rgba(255,255,255,0.04)',
+          background: 'transparent',
           flexShrink: 0,
+          position: 'relative',
+          zIndex: 5,
         }}
       >
         {/* Left: time + date */}
-        <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
-          <span style={{ fontSize: 22, fontWeight: 600, color: 'var(--text-primary)', letterSpacing: '-0.5px' }}>
+        <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
+          <span style={{
+            fontSize: 28,
+            fontWeight: 700,
+            color: 'var(--text-primary)',
+            letterSpacing: '-1px',
+            fontVariantNumeric: 'tabular-nums',
+          }}>
             {formatTime(time)}
           </span>
-          <span style={{ fontSize: 13, color: 'var(--text-secondary)' }}>
+          <span style={{
+            fontSize: 14,
+            color: 'var(--text-secondary)',
+            fontWeight: 400,
+            textTransform: 'capitalize',
+          }}>
             {formatDate(time)}
           </span>
         </div>
 
         {/* Right: sensors + weather */}
-        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
           {/* Room sensors */}
           {sensors && (
-            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
-              <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
-                <span style={{ fontSize: 12, color: 'var(--text-secondary)' }}>🌡️</span>
-                <span style={{ fontSize: 14, fontWeight: 500, color: 'var(--text-primary)' }}>
-                  {sensors.temperature}°
-                </span>
-              </div>
-              <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
-                <Droplets size={13} color="rgba(255,255,255,0.4)" />
-                <span style={{ fontSize: 14, fontWeight: 500, color: 'var(--text-primary)' }}>
-                  {sensors.humidity}%
-                </span>
-              </div>
-              {sensors.pm25 !== undefined && (
-                <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
-                  <Wind size={13} color="rgba(255,255,255,0.4)" />
-                  <span style={{ fontSize: 13, color: 'var(--text-secondary)' }}>
-                    PM2.5: {sensors.pm25}
-                  </span>
-                </div>
-              )}
+            <div style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 4,
+              padding: '8px 14px',
+              borderRadius: 14,
+              background: 'rgba(255,255,255,0.03)',
+              border: '1px solid rgba(255,255,255,0.05)',
+            }}>
+              <Thermometer size={14} color="rgba(255,255,255,0.35)" />
+              <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', marginRight: 8 }}>
+                {sensors.temperature}°
+              </span>
+              <Droplets size={14} color="rgba(255,255,255,0.35)" />
+              <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', marginRight: 8 }}>
+                {sensors.humidity}%
+              </span>
+              <Wind size={14} color="rgba(255,255,255,0.35)" />
+              <span style={{ fontSize: 13, color: 'var(--text-secondary)' }}>
+                {sensors.pm25}
+              </span>
             </div>
           )}
 
-          {/* Divider */}
-          {sensors && weather && (
-            <div style={{ width: 1, height: 24, background: 'rgba(255,255,255,0.08)' }} />
-          )}
-
           {/* Weather widget */}
           {weather && (
             <button
@@ -116,19 +126,18 @@ export default function TopBar({ weather, sensors }: TopBarProps) {
               style={{
                 display: 'flex',
                 alignItems: 'center',
-                gap: 6,
-                padding: '6px 12px',
-                borderRadius: 10,
-                background: 'rgba(255,255,255,0.05)',
-                border: '1px solid rgba(255,255,255,0.08)',
+                gap: 8,
+                padding: '8px 16px',
+                borderRadius: 14,
+                background: 'linear-gradient(135deg, rgba(99,102,241,0.1), rgba(139,92,246,0.08))',
+                border: '1px solid rgba(129,140,248,0.15)',
                 color: 'var(--text-primary)',
-                touchAction: 'manipulation',
-                WebkitTapHighlightColor: 'transparent',
+                transition: 'all 0.25s ease',
               }}
             >
-              <span style={{ fontSize: 16 }}>{getWeatherEmoji(weather.desc)}</span>
-              <span style={{ fontSize: 16, fontWeight: 600 }}>{weather.temp}°</span>
-              <span style={{ fontSize: 12, color: 'var(--text-secondary)' }}>{weather.desc}</span>
+              <span style={{ fontSize: 20 }}>{getWeatherIcon(weather.desc)}</span>
+              <span style={{ fontSize: 15, fontWeight: 700 }}>{weather.temp}°</span>
+              <span style={{ fontSize: 12, color: 'var(--text-secondary)', fontWeight: 500 }}>{weather.desc}</span>
             </button>
           )}
         </div>
@@ -142,7 +151,7 @@ export default function TopBar({ weather, sensors }: TopBarProps) {
             position: 'fixed',
             inset: 0,
             background: 'rgba(0,0,0,0.7)',
-            backdropFilter: 'blur(8px)',
+            backdropFilter: 'blur(12px)',
             zIndex: 100,
             display: 'flex',
             alignItems: 'center',
@@ -152,75 +161,84 @@ export default function TopBar({ weather, sensors }: TopBarProps) {
           <div
             onClick={e => e.stopPropagation()}
             style={{
-              background: '#13131f',
-              border: '1px solid rgba(255,255,255,0.1)',
-              borderRadius: 20,
-              padding: 28,
-              minWidth: 320,
-              maxWidth: 400,
+              background: 'rgba(18, 18, 35, 0.95)',
+              backdropFilter: 'blur(40px)',
+              border: '1px solid rgba(255,255,255,0.08)',
+              borderRadius: 24,
+              padding: 32,
+              minWidth: 360,
+              maxWidth: 420,
+              boxShadow: '0 25px 60px rgba(0,0,0,0.5)',
             }}
           >
-            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
-              <span style={{ fontSize: 40 }}>{getWeatherEmoji(weather.desc)}</span>
-              <div>
-                <div style={{ fontSize: 36, fontWeight: 700, lineHeight: 1 }}>{weather.temp}°C</div>
-                <div style={{ fontSize: 15, color: 'var(--text-secondary)', marginTop: 2 }}>{weather.desc}</div>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 24 }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
+                <span style={{ fontSize: 48 }}>{getWeatherIcon(weather.desc)}</span>
+                <div>
+                  <div style={{ fontSize: 40, fontWeight: 800, lineHeight: 1, letterSpacing: '-2px' }}>{weather.temp}°</div>
+                  <div style={{ fontSize: 15, color: 'var(--text-secondary)', marginTop: 4, fontWeight: 500 }}>{weather.desc}</div>
+                </div>
               </div>
+              <button onClick={() => setShowModal(false)} style={{ color: 'var(--text-secondary)', padding: 4 }}>
+                <X size={20} />
+              </button>
             </div>
 
-            <div style={{ display: 'flex', gap: 16, marginBottom: 20 }}>
-              <div style={{ fontSize: 13, color: 'var(--text-secondary)' }}>
-                <Droplets size={13} style={{ marginRight: 4 }} />
-                Влажность: {weather.humidity}%
-              </div>
-              <div style={{ fontSize: 13, color: 'var(--text-secondary)' }}>
-                <Wind size={13} style={{ marginRight: 4 }} />
-                Ветер: {weather.windSpeed} км/ч
-              </div>
-              <div style={{ fontSize: 13, color: 'var(--text-secondary)' }}>
-                Ощущается: {weather.feelsLike}°
-              </div>
+            <div style={{
+              display: 'grid',
+              gridTemplateColumns: 'repeat(3, 1fr)',
+              gap: 10,
+              marginBottom: 24,
+            }}>
+              {[
+                { icon: <Droplets size={16} />, label: 'Влажность', value: `${weather.humidity}%` },
+                { icon: <Wind size={16} />, label: 'Ветер', value: `${weather.windSpeed} км/ч` },
+                { icon: <Thermometer size={16} />, label: 'Ощущается', value: `${weather.feelsLike}°` },
+              ].map(item => (
+                <div key={item.label} style={{
+                  padding: '14px 12px',
+                  borderRadius: 16,
+                  background: 'rgba(255,255,255,0.04)',
+                  border: '1px solid rgba(255,255,255,0.06)',
+                  textAlign: 'center',
+                }}>
+                  <div style={{ color: 'var(--text-secondary)', marginBottom: 8, display: 'flex', justifyContent: 'center' }}>{item.icon}</div>
+                  <div style={{ fontSize: 16, fontWeight: 700, color: 'var(--text-primary)' }}>{item.value}</div>
+                  <div style={{ fontSize: 11, color: 'var(--text-secondary)', marginTop: 4 }}>{item.label}</div>
+                </div>
+              ))}
             </div>
 
             {weather.forecast && weather.forecast.length > 0 && (
-              <div>
-                <div style={{ fontSize: 12, color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 12 }}>
+              <>
+                <div style={{ fontSize: 11, color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 600, marginBottom: 14 }}>
                   Прогноз
                 </div>
-                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                   {weather.forecast.map(day => {
                     const d = new Date(day.date)
                     const label = d.toLocaleDateString('ru-RU', { weekday: 'short', day: 'numeric', month: 'short' })
                     return (
-                      <div key={day.date} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-                        <span style={{ fontSize: 13, color: 'var(--text-secondary)', minWidth: 80 }}>{label}</span>
-                        <span style={{ fontSize: 16 }}>{getWeatherEmoji(day.desc)}</span>
-                        <span style={{ fontSize: 13, color: 'var(--text-secondary)' }}>{day.desc}</span>
-                        <span style={{ fontSize: 13, color: 'var(--text-primary)', fontWeight: 500 }}>
-                          {day.maxTemp}° / {day.minTemp}°
+                      <div key={day.date} style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        padding: '10px 14px',
+                        borderRadius: 12,
+                        background: 'rgba(255,255,255,0.03)',
+                      }}>
+                        <span style={{ fontSize: 13, color: 'var(--text-secondary)', minWidth: 100, textTransform: 'capitalize' }}>{label}</span>
+                        <span style={{ fontSize: 18 }}>{getWeatherIcon(day.desc)}</span>
+                        <span style={{ fontSize: 12, color: 'var(--text-secondary)', minWidth: 80, textAlign: 'center' }}>{day.desc}</span>
+                        <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-primary)' }}>
+                          {day.maxTemp}° <span style={{ color: 'var(--text-secondary)', fontWeight: 400 }}>/ {day.minTemp}°</span>
                         </span>
                       </div>
                     )
                   })}
                 </div>
-              </div>
+              </>
             )}
-
-            <button
-              onClick={() => setShowModal(false)}
-              style={{
-                marginTop: 20,
-                width: '100%',
-                padding: '10px',
-                borderRadius: 10,
-                background: 'rgba(255,255,255,0.05)',
-                color: 'var(--text-secondary)',
-                fontSize: 14,
-                touchAction: 'manipulation',
-              }}
-            >
-              Закрыть
-            </button>
           </div>
         </div>
       )}