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

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>
         )