redesign: glassmorphism UI with big cards, 3-col layout, ambient orbs

components/BottomNav.tsx

@@ -9,16 +9,17 @@ interface Props {
 }
 
 const TABS = [
-  { id: "home", label: "Главная", icon: Home },
-  { id: "devices", label: "Устройства", icon: Cpu },
-  { id: "tasks", label: "Задачи", icon: CheckSquare },
-  { id: "settings", label: "Настройки", icon: Settings },
+  { id: "home", label: "Главная", icon: Home, color: "#6366f1" },
+  { id: "devices", label: "Устройства", icon: Cpu, color: "#3b82f6" },
+  { id: "tasks", label: "Задачи", icon: CheckSquare, color: "#8b5cf6" },
+  { id: "settings", label: "Настройки", icon: Settings, color: "#10b981" },
 ];
 
 export default function BottomNav({ active, onChange }: Props) {
   return (
     <motion.div
-      className="glass-card px-4 py-2 flex items-center justify-around no-select"
+      className="glass-card px-3 py-2 flex items-center justify-around no-select"
+      style={{ borderRadius: "20px" }}
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.5 }}
@@ -30,33 +31,29 @@ export default function BottomNav({ active, onChange }: Props) {
           <motion.button
             key={tab.id}
             onClick={() => onChange(tab.id)}
-            className="flex flex-col items-center gap-1 px-6 py-2 rounded-xl relative"
-            whileTap={{ scale: 0.88 }}
-            style={{
-              background: isActive
-                ? "rgba(99,102,241,0.15)"
-                : "transparent",
-            }}
+            className="flex flex-col items-center gap-1.5 px-8 py-2 rounded-2xl relative"
+            whileTap={{ scale: 0.85 }}
           >
             {isActive && (
               <motion.div
-                className="absolute inset-0 rounded-xl"
+                className="absolute inset-0 rounded-2xl"
                 style={{
-                  background:
-                    "linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.1))",
-                  border: "1px solid rgba(99,102,241,0.3)",
+                  background: `${tab.color}15`,
+                  border: `1px solid ${tab.color}30`,
+                  boxShadow: `0 0 16px ${tab.color}20`,
                 }}
                 layoutId="navActive"
-                transition={{ type: "spring", stiffness: 400, damping: 30 }}
+                transition={{ type: "spring", stiffness: 450, damping: 30 }}
               />
             )}
             <Icon
               size={22}
-              color={isActive ? "#6366f1" : "var(--text-secondary)"}
+              color={isActive ? tab.color : "var(--text-secondary)"}
+              strokeWidth={isActive ? 2 : 1.5}
             />
             <span
-              className="text-xs font-medium"
-              style={{ color: isActive ? "#6366f1" : "var(--text-secondary)" }}
+              className="text-xs font-semibold"
+              style={{ color: isActive ? tab.color : "var(--text-secondary)" }}
             >
               {tab.label}
             </span>

components/TopBar.tsx

@@ -36,7 +36,7 @@ export default function TopBar({ isDark, onToggleTheme, weather }: Props) {
       );
       setDate(
         now.toLocaleDateString("ru-RU", {
-          weekday: "long",
+          weekday: "short",
           day: "numeric",
           month: "long",
         })
@@ -50,6 +50,7 @@ export default function TopBar({ isDark, onToggleTheme, weather }: Props) {
   return (
     <motion.div
       className="glass-card px-6 py-3 flex items-center justify-between no-select"
+      style={{ borderRadius: "20px" }}
       initial={{ opacity: 0, y: -20 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.5 }}
@@ -57,8 +58,8 @@ export default function TopBar({ isDark, onToggleTheme, weather }: Props) {
       {/* Time & Date */}
       <div className="flex items-baseline gap-4">
         <span
-          className="text-5xl font-bold tracking-tight"
-          style={{ color: "var(--text-primary)" }}
+          className="font-black tracking-tight leading-none"
+          style={{ fontSize: "42px", color: "var(--text-primary)" }}
         >
           {time}
         </span>
@@ -70,41 +71,35 @@ export default function TopBar({ isDark, onToggleTheme, weather }: Props) {
         </span>
       </div>
 
-      {/* Weather */}
+      {/* Weather pill */}
       {weather && (
         <motion.div
-          className="flex items-center gap-3 px-4 py-2 rounded-xl"
+          className="flex items-center gap-3 px-5 py-2 rounded-2xl"
           style={{
-            background: "rgba(99,102,241,0.1)",
-            border: "1px solid rgba(99,102,241,0.2)",
+            background: "rgba(59,130,246,0.1)",
+            border: "1px solid rgba(59,130,246,0.22)",
           }}
           initial={{ opacity: 0, scale: 0.9 }}
           animate={{ opacity: 1, scale: 1 }}
           transition={{ delay: 0.3 }}
         >
-          <span className="text-2xl">
+          <span className="text-2xl leading-none">
             {getWeatherEmoji(weather.weatherCode)}
           </span>
           <div>
             <div
-              className="text-xl font-bold"
+              className="text-xl font-black leading-tight"
               style={{ color: "var(--text-primary)" }}
             >
               {weather.temp}°C
             </div>
             <div
-              className="text-xs"
+              className="text-xs leading-tight"
               style={{ color: "var(--text-secondary)" }}
             >
-              Ощущается {weather.feelsLike}°
+              {weather.desc}
             </div>
           </div>
-          <div
-            className="text-xs ml-2 max-w-[80px] text-center leading-tight"
-            style={{ color: "var(--text-secondary)" }}
-          >
-            {weather.desc}
-          </div>
         </motion.div>
       )}
 
@@ -112,7 +107,7 @@ export default function TopBar({ isDark, onToggleTheme, weather }: Props) {
       <div className="flex items-center gap-3">
         {weather?.demo && (
           <span
-            className="text-xs px-2 py-1 rounded-full"
+            className="text-xs px-2.5 py-1 rounded-full font-semibold"
             style={{
               background: "rgba(245,158,11,0.15)",
               color: "#f59e0b",

components/cards/AirPurifierCard.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useCallback } from "react";
-import { motion } from "framer-motion";
+import { motion, AnimatePresence } from "framer-motion";
 import { Wind } from "lucide-react";
 import { toggleFan, setFanPreset } from "@/lib/api";
 
@@ -13,9 +13,9 @@ interface Props {
 }
 
 const MODES = [
-  { id: "Auto", label: "Авто", color: "#06b6d4" },
+  { id: "Auto", label: "Авто", color: "#10b981" },
   { id: "Night", label: "Ночь", color: "#6366f1" },
-  { id: "High", label: "Макс", color: "#f43f5e" },
+  { id: "High", label: "Турбо", color: "#f59e0b" },
 ];
 
 export default function AirPurifierCard({
@@ -45,102 +45,137 @@ export default function AirPurifierCard({
     [entityId, onUpdate]
   );
 
-  const activeColor =
-    MODES.find((m) => m.id === currentMode)?.color || "#06b6d4";
+  const activeMode = MODES.find((m) => m.id === currentMode) || MODES[0];
+  const accentColor = isOn ? activeMode.color : "rgba(255,255,255,0.3)";
 
   return (
     <motion.div
-      className="glass-card p-5 h-full flex flex-col justify-between"
+      className="glass-card p-6 h-full flex flex-col"
       style={
         isOn
           ? {
-              background: `rgba(6,182,212,0.06)`,
-              border: `1px solid rgba(6,182,212,0.2)`,
+              background: `${activeMode.color}08`,
+              border: `1px solid ${activeMode.color}25`,
+              boxShadow: `0 0 40px ${activeMode.color}10`,
             }
           : {}
       }
-      initial={{ opacity: 0, scale: 0.95 }}
-      animate={{ opacity: 1, scale: 1 }}
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.35, delay: 0.14 }}
       whileHover={{ scale: 1.01 }}
     >
-      <div className="flex items-start justify-between">
-        <div>
-          <div
-            className="w-10 h-10 rounded-xl flex items-center justify-center mb-3"
-            style={{
-              background: isOn
-                ? "rgba(6,182,212,0.15)"
-                : "rgba(255,255,255,0.06)",
-            }}
+      {/* Top row: icon + name + toggle */}
+      <div className="flex items-center gap-4">
+        {/* Animated icon */}
+        <div
+          className="w-16 h-16 rounded-2xl flex items-center justify-center flex-shrink-0"
+          style={{
+            background: isOn ? `${activeMode.color}20` : "rgba(255,255,255,0.06)",
+            boxShadow: isOn ? `0 0 28px ${activeMode.color}40` : "none",
+          }}
+        >
+          <motion.div
+            animate={isOn ? { rotate: 360 } : { rotate: 0 }}
+            transition={
+              isOn ? { duration: 4, repeat: Infinity, ease: "linear" } : {}
+            }
           >
-            <motion.div
-              animate={isOn ? { rotate: 360 } : { rotate: 0 }}
-              transition={
-                isOn
-                  ? { duration: 3, repeat: Infinity, ease: "linear" }
-                  : {}
-              }
-            >
-              <Wind
-                size={20}
-                color={isOn ? "#06b6d4" : "var(--text-secondary)"}
-              />
-            </motion.div>
-          </div>
+            <Wind
+              size={32}
+              color={isOn ? activeMode.color : "rgba(255,255,255,0.3)"}
+              strokeWidth={1.5}
+            />
+          </motion.div>
+        </div>
+
+        <div className="flex-1 min-w-0">
           <div
-            className="text-sm font-semibold"
+            className="text-xl font-bold truncate"
             style={{ color: "var(--text-primary)" }}
           >
             Очиститель воздуха
           </div>
           <div
-            className="text-xs mt-0.5"
-            style={{ color: isOn ? activeColor : "var(--text-secondary)" }}
+            className="text-sm mt-0.5 font-medium"
+            style={{ color: isOn ? activeMode.color : "var(--text-secondary)" }}
           >
-            {isOn ? currentMode : "Выключен"}
+            {isOn ? activeMode.label : "Выключен"}
           </div>
         </div>
 
+        {/* Toggle */}
         <motion.div
           className={`toggle-track ${isOn ? "toggle-on" : ""}`}
-          style={{ background: isOn ? "#06b6d4" : "rgba(255,255,255,0.1)" }}
+          style={{
+            background: isOn ? activeMode.color : "rgba(255,255,255,0.1)",
+            boxShadow: isOn ? `0 0 16px ${activeMode.color}60` : "none",
+          }}
           onClick={handleToggle}
-          whileTap={{ scale: 0.9 }}
+          whileTap={{ scale: 0.88 }}
         >
           <div className="toggle-thumb" />
         </motion.div>
       </div>
 
-      {isOn && (
-        <motion.div
-          className="flex gap-2 mt-4"
-          initial={{ opacity: 0, y: 5 }}
-          animate={{ opacity: 1, y: 0 }}
-        >
+      {/* Mode buttons */}
+      <AnimatePresence>
+        {isOn && (
+          <motion.div
+            className="flex gap-3 mt-auto pt-4"
+            initial={{ opacity: 0, y: 8 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 8 }}
+            transition={{ duration: 0.22 }}
+          >
+            {MODES.map((mode) => {
+              const isActive = currentMode === mode.id;
+              return (
+                <motion.button
+                  key={mode.id}
+                  onClick={() => handleMode(mode.id)}
+                  className="flex-1 py-2.5 rounded-2xl text-sm font-semibold"
+                  style={
+                    isActive
+                      ? {
+                          background: `${mode.color}22`,
+                          border: `1.5px solid ${mode.color}60`,
+                          color: mode.color,
+                          boxShadow: `0 0 14px ${mode.color}30`,
+                        }
+                      : {
+                          background: "rgba(255,255,255,0.05)",
+                          border: "1px solid rgba(255,255,255,0.08)",
+                          color: "var(--text-secondary)",
+                        }
+                  }
+                  whileTap={{ scale: 0.88 }}
+                >
+                  {mode.label}
+                </motion.button>
+              );
+            })}
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* Offline state bottom fill */}
+      {!isOn && (
+        <div className="mt-auto flex gap-3 pt-4">
           {MODES.map((mode) => (
-            <motion.button
+            <div
               key={mode.id}
-              onClick={() => handleMode(mode.id)}
-              className="flex-1 py-2 rounded-xl text-xs font-medium"
-              style={
-                currentMode === mode.id
-                  ? {
-                      background: `${mode.color}25`,
-                      border: `1px solid ${mode.color}60`,
-                      color: mode.color,
-                    }
-                  : {
-                      background: "rgba(255,255,255,0.06)",
-                      border: "1px solid rgba(255,255,255,0.08)",
-                      color: "var(--text-secondary)",
-                    }
-              }
-              whileTap={{ scale: 0.9 }}
+              className="flex-1 py-2.5 rounded-2xl text-sm font-semibold text-center"
+              style={{
+                background: "rgba(255,255,255,0.03)",
+                border: "1px solid rgba(255,255,255,0.05)",
+                color: "rgba(255,255,255,0.15)",
+              }}
             >
               {mode.label}
-            </motion.button>
+            </div>
           ))}
-        </motion.div>
+        </div>
       )}
     </motion.div>
   );

components/cards/LightCard.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useCallback } from "react";
-import { motion } from "framer-motion";
+import { motion, AnimatePresence } from "framer-motion";
 import { Lightbulb } from "lucide-react";
 import { toggleLight, setLightBrightness } from "@/lib/api";
 import { getBrightnessPct, pctToBrightness } from "@/lib/ha";
@@ -47,50 +47,42 @@ export default function LightCard({
 
   return (
     <motion.div
-      className="glass-card p-5 h-full flex flex-col justify-between"
+      className="glass-card p-6 h-full flex flex-col justify-between"
       style={
         isOn
           ? {
-              background: "rgba(245,158,11,0.08)",
-              border: "1px solid rgba(245,158,11,0.2)",
-              boxShadow: "0 0 30px rgba(245,158,11,0.1)",
+              background: "rgba(245,158,11,0.07)",
+              border: "1px solid rgba(245,158,11,0.22)",
+              boxShadow: "0 0 40px rgba(245,158,11,0.08), inset 0 1px 0 rgba(245,158,11,0.1)",
             }
           : {}
       }
-      initial={{ opacity: 0, scale: 0.95 }}
-      animate={{ opacity: 1, scale: 1 }}
-      transition={{ duration: 0.3 }}
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.35 }}
       whileHover={{ scale: 1.01 }}
     >
+      {/* Top row: icon + toggle */}
       <div className="flex items-start justify-between">
-        <div>
-          <div
-            className="w-10 h-10 rounded-xl flex items-center justify-center mb-3"
-            style={{
-              background: isOn
-                ? "rgba(245,158,11,0.2)"
-                : "rgba(255,255,255,0.06)",
-            }}
-          >
-            <Lightbulb
-              size={20}
-              color={isOn ? "#f59e0b" : "var(--text-secondary)"}
-              fill={isOn ? "#f59e0b" : "none"}
-            />
-          </div>
-          <div
-            className="text-sm font-semibold"
-            style={{ color: "var(--text-primary)" }}
-          >
-            {name}
-          </div>
-          <div
-            className="text-xs mt-0.5"
-            style={{ color: isOn ? "#f59e0b" : "var(--text-secondary)" }}
-          >
-            {isOn ? (showSlider ? `${localBrightness}%` : "Включён") : "Выключен"}
-          </div>
-        </div>
+        {/* Icon */}
+        <motion.div
+          className="w-16 h-16 rounded-2xl flex items-center justify-center"
+          style={{
+            background: isOn
+              ? "rgba(245,158,11,0.18)"
+              : "rgba(255,255,255,0.06)",
+            boxShadow: isOn ? "0 0 28px rgba(245,158,11,0.35)" : "none",
+          }}
+          animate={{ scale: isOn ? 1 : 0.97 }}
+          transition={{ duration: 0.3 }}
+        >
+          <Lightbulb
+            size={32}
+            color={isOn ? "#f59e0b" : "rgba(255,255,255,0.35)"}
+            fill={isOn ? "#f59e0b" : "none"}
+            strokeWidth={isOn ? 1.5 : 2}
+          />
+        </motion.div>
 
         {/* Toggle */}
         <motion.div
@@ -99,52 +91,70 @@ export default function LightCard({
             background: isOn
               ? "#f59e0b"
               : "rgba(255,255,255,0.1)",
+            boxShadow: isOn ? "0 0 16px rgba(245,158,11,0.5)" : "none",
           }}
           onClick={handleToggle}
-          whileTap={{ scale: 0.9 }}
+          whileTap={{ scale: 0.88 }}
         >
           <div className="toggle-thumb" />
         </motion.div>
       </div>
 
-      {showSlider && isOn && (
-        <motion.div
-          className="mt-4"
-          initial={{ opacity: 0, y: 5 }}
-          animate={{ opacity: 1, y: 0 }}
+      {/* Name + state */}
+      <div className="mt-auto">
+        <div
+          className="text-xl font-bold leading-tight"
+          style={{ color: isOn ? "#f59e0b" : "var(--text-primary)" }}
         >
-          <div
-            className="text-xs mb-2 flex justify-between"
-            style={{ color: "var(--text-secondary)" }}
-          >
-            <span>Яркость</span>
-            <span>{localBrightness}%</span>
-          </div>
-          <div className="relative">
-            <div
-              className="absolute inset-y-0 left-0 rounded-l-full pointer-events-none"
-              style={{
-                width: `${localBrightness}%`,
-                background: "linear-gradient(90deg, rgba(245,158,11,0.4), rgba(245,158,11,0.8))",
-                height: "6px",
-                top: "50%",
-                transform: "translateY(-50%)",
-              }}
-            />
-            <input
-              type="range"
-              min={5}
-              max={100}
-              value={localBrightness}
-              onChange={(e) => setLocalBrightness(parseInt(e.target.value))}
-              onMouseUp={(e) => handleBrightnessChange(parseInt((e.target as HTMLInputElement).value))}
-              onTouchEnd={(e) => handleBrightnessChange(parseInt((e.target as HTMLInputElement).value))}
-              className="w-full relative z-10"
-              style={{ background: "transparent" }}
-            />
-          </div>
-        </motion.div>
-      )}
+          {name}
+        </div>
+        <div
+          className="text-sm mt-1 font-medium"
+          style={{ color: isOn ? "rgba(245,158,11,0.7)" : "var(--text-secondary)" }}
+        >
+          {isOn ? (showSlider ? `Яркость ${localBrightness}%` : "Включён") : "Выключен"}
+        </div>
+
+        {/* Brightness slider */}
+        <AnimatePresence>
+          {showSlider && isOn && (
+            <motion.div
+              className="mt-4"
+              initial={{ opacity: 0, height: 0 }}
+              animate={{ opacity: 1, height: "auto" }}
+              exit={{ opacity: 0, height: 0 }}
+              transition={{ duration: 0.25 }}
+            >
+              <div className="relative pt-1">
+                <div
+                  className="absolute left-0 rounded-full pointer-events-none"
+                  style={{
+                    width: `${localBrightness}%`,
+                    height: "6px",
+                    top: "calc(50% + 4px)",
+                    background: "linear-gradient(90deg, rgba(245,158,11,0.5), rgba(245,158,11,0.9))",
+                  }}
+                />
+                <input
+                  type="range"
+                  min={5}
+                  max={100}
+                  value={localBrightness}
+                  onChange={(e) => setLocalBrightness(parseInt(e.target.value))}
+                  onMouseUp={(e) =>
+                    handleBrightnessChange(parseInt((e.target as HTMLInputElement).value))
+                  }
+                  onTouchEnd={(e) =>
+                    handleBrightnessChange(parseInt((e.target as HTMLInputElement).value))
+                  }
+                  className="w-full relative z-10"
+                  style={{ background: "transparent" }}
+                />
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
     </motion.div>
   );
 }

components/cards/SavingsCard.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { motion } from "framer-motion";
-import { PiggyBank } from "lucide-react";
+import { Target } from "lucide-react";
 
 interface Saving {
   id: number;
@@ -17,31 +17,51 @@ interface Props {
 }
 
 function formatAmount(n: number): string {
-  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
-  if (n >= 1_000) return `${Math.round(n / 1_000)}K`;
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}М`;
+  if (n >= 1_000) return `${Math.round(n / 1_000)}К`;
   return String(n);
 }
 
+const COLORS = ["#f59e0b", "#3b82f6", "#10b981", "#8b5cf6", "#f43f5e"];
+
 export default function SavingsCard({ savings }: Props) {
   return (
     <motion.div
-      className="glass-card p-5 h-full flex flex-col"
+      className="glass-card p-6 h-full flex flex-col"
       style={{
-        background: "rgba(99,102,241,0.04)",
-        border: "1px solid rgba(99,102,241,0.12)",
+        background: "rgba(245,158,11,0.04)",
+        border: "1px solid rgba(245,158,11,0.15)",
       }}
-      initial={{ opacity: 0, scale: 0.95 }}
-      animate={{ opacity: 1, scale: 1 }}
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.35, delay: 0.21 }}
       whileHover={{ scale: 1.01 }}
     >
-      <div className="flex items-center gap-2 mb-4">
-        <PiggyBank size={18} color="#6366f1" />
-        <span
-          className="text-sm font-semibold"
-          style={{ color: "var(--text-primary)" }}
+      {/* Header */}
+      <div className="flex items-center gap-3 mb-5">
+        <div
+          className="w-10 h-10 rounded-xl flex items-center justify-center"
+          style={{
+            background: "rgba(245,158,11,0.2)",
+            boxShadow: "0 0 16px rgba(245,158,11,0.3)",
+          }}
         >
-          Накопления
-        </span>
+          <Target size={20} color="#f59e0b" />
+        </div>
+        <div>
+          <div
+            className="text-base font-bold"
+            style={{ color: "var(--text-primary)" }}
+          >
+            Накопления
+          </div>
+          <div
+            className="text-xs"
+            style={{ color: "var(--text-secondary)" }}
+          >
+            {savings.length} {savings.length === 1 ? "цель" : "целей"}
+          </div>
+        </div>
       </div>
 
       <div className="flex-1 space-y-4">
@@ -50,56 +70,57 @@ export default function SavingsCard({ savings }: Props) {
             100,
             Math.round((s.current_amount / s.target_amount) * 100)
           );
-          const color = s.color || "#6366f1";
+          const color = s.color || COLORS[i % COLORS.length];
 
           return (
             <motion.div
               key={s.id}
               initial={{ opacity: 0, y: 10 }}
               animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: i * 0.1 }}
+              transition={{ delay: 0.1 + i * 0.1 }}
             >
               <div className="flex items-center justify-between mb-2">
                 <div className="flex items-center gap-2">
                   {s.icon && <span className="text-base">{s.icon}</span>}
                   <span
-                    className="text-xs font-medium"
+                    className="text-sm font-semibold"
                     style={{ color: "var(--text-primary)" }}
                   >
                     {s.name}
                   </span>
                 </div>
                 <span
-                  className="text-xs font-semibold"
+                  className="text-sm font-black"
                   style={{ color }}
                 >
                   {pct}%
                 </span>
               </div>
 
+              {/* Progress bar with glow */}
               <div className="progress-bar">
                 <motion.div
-                  className="progress-fill"
+                  className="h-full rounded-full"
                   style={{
-                    background: `linear-gradient(90deg, ${color}aa, ${color})`,
-                    width: `${pct}%`,
+                    background: `linear-gradient(90deg, ${color}80, ${color})`,
+                    boxShadow: `0 0 12px ${color}60`,
                   }}
                   initial={{ width: "0%" }}
                   animate={{ width: `${pct}%` }}
                   transition={{
-                    duration: 1,
-                    delay: i * 0.2,
+                    duration: 1.2,
+                    delay: 0.2 + i * 0.15,
                     ease: "easeOut",
                   }}
                 />
               </div>
 
               <div
-                className="flex justify-between text-xs mt-1"
+                className="flex justify-between text-xs mt-1.5"
                 style={{ color: "var(--text-secondary)" }}
               >
                 <span>{formatAmount(s.current_amount)} ₽</span>
-                <span>цель: {formatAmount(s.target_amount)} ₽</span>
+                <span>из {formatAmount(s.target_amount)} ₽</span>
               </div>
             </motion.div>
           );

components/cards/TasksCard.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useCallback } from "react";
 import { motion, AnimatePresence } from "framer-motion";
-import { CheckSquare, Square, Plus } from "lucide-react";
+import { CheckCircle2, Circle, Plus, ListTodo } from "lucide-react";
 import { createTask, toggleTask } from "@/lib/api";
 import AddTaskModal from "../AddTaskModal";
 
@@ -49,57 +49,84 @@ export default function TasksCard({ tasks, onUpdate }: Props) {
   return (
     <>
       <motion.div
-        className="glass-card p-5 h-full flex flex-col"
-        initial={{ opacity: 0, scale: 0.95 }}
-        animate={{ opacity: 1, scale: 1 }}
+        className="glass-card p-6 h-full flex flex-col"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.35, delay: 0.14 }}
         whileHover={{ scale: 1.005 }}
       >
+        {/* Header */}
         <div className="flex items-center justify-between mb-4">
-          <div>
-            <div className="flex items-center gap-2">
-              <CheckSquare size={18} color="#6366f1" />
-              <span
-                className="text-sm font-semibold"
+          <div className="flex items-center gap-3">
+            <div
+              className="w-10 h-10 rounded-xl flex items-center justify-center"
+              style={{
+                background: "rgba(139,92,246,0.18)",
+                boxShadow: "0 0 18px rgba(139,92,246,0.3)",
+              }}
+            >
+              <ListTodo size={20} color="#8b5cf6" />
+            </div>
+            <div>
+              <div
+                className="text-base font-bold"
                 style={{ color: "var(--text-primary)" }}
               >
-                Задачи сегодня
-              </span>
-            </div>
-            <div
-              className="text-xs mt-0.5"
-              style={{ color: "var(--text-secondary)" }}
-            >
-              {pending.length} осталось из {localTasks.length}
+                Задачи
+              </div>
+              <div
+                className="text-xs"
+                style={{ color: "var(--text-secondary)" }}
+              >
+                {pending.length > 0
+                  ? `${pending.length} из ${localTasks.length} осталось`
+                  : "Всё готово!"}
+              </div>
             </div>
           </div>
+
+          {/* Add button */}
           <motion.button
             onClick={() => setModalOpen(true)}
-            className="w-8 h-8 rounded-lg flex items-center justify-center"
+            className="w-10 h-10 rounded-xl flex items-center justify-center"
             style={{
-              background: "linear-gradient(135deg, #6366f1, #8b5cf6)",
-              boxShadow: "0 0 12px rgba(99,102,241,0.4)",
+              background: "linear-gradient(135deg, #8b5cf6, #6366f1)",
+              boxShadow: "0 0 18px rgba(139,92,246,0.45)",
             }}
-            whileTap={{ scale: 0.85 }}
+            whileTap={{ scale: 0.82 }}
           >
-            <Plus size={16} color="white" />
+            <Plus size={20} color="white" strokeWidth={2.5} />
           </motion.button>
         </div>
 
-        <div className="flex-1 overflow-y-auto space-y-2 pr-1">
-          <AnimatePresence>
+        {/* Task list */}
+        <div className="flex-1 overflow-y-auto space-y-2 pr-0.5">
+          <AnimatePresence initial={false}>
             {localTasks.length === 0 && (
               <motion.div
-                className="text-center py-8"
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
+                className="flex flex-col items-center justify-center h-full py-8 gap-3"
+                initial={{ opacity: 0, scale: 0.9 }}
+                animate={{ opacity: 1, scale: 1 }}
               >
-                <div className="text-3xl mb-2">🎉</div>
+                <div className="text-4xl">🎉</div>
                 <div
-                  className="text-sm"
+                  className="text-sm font-medium"
                   style={{ color: "var(--text-secondary)" }}
                 >
-                  Всё сделано!
+                  Всё сделано на сегодня!
                 </div>
+                <motion.button
+                  onClick={() => setModalOpen(true)}
+                  className="mt-2 px-5 py-2.5 rounded-xl text-sm font-semibold"
+                  style={{
+                    background: "linear-gradient(135deg, rgba(139,92,246,0.25), rgba(99,102,241,0.2))",
+                    border: "1px solid rgba(139,92,246,0.35)",
+                    color: "#8b5cf6",
+                  }}
+                  whileTap={{ scale: 0.9 }}
+                >
+                  + Добавить задачу
+                </motion.button>
               </motion.div>
             )}
 
@@ -107,32 +134,36 @@ export default function TasksCard({ tasks, onUpdate }: Props) {
               <motion.div
                 key={task.id}
                 layout
-                initial={{ opacity: 0, x: -10 }}
-                animate={{ opacity: 1, x: 0 }}
-                exit={{ opacity: 0, x: 10, height: 0 }}
-                className="flex items-center gap-3 px-3 py-2.5 rounded-xl cursor-pointer"
+                initial={{ opacity: 0, x: -12, height: 0 }}
+                animate={{ opacity: 1, x: 0, height: "auto" }}
+                exit={{ opacity: 0, x: 12, height: 0 }}
+                transition={{ duration: 0.2 }}
+                className="flex items-center gap-3 px-4 py-3 rounded-2xl cursor-pointer"
                 style={{
                   background: task.done
-                    ? "rgba(16,185,129,0.06)"
+                    ? "rgba(139,92,246,0.05)"
                     : "rgba(255,255,255,0.04)",
                   border: task.done
-                    ? "1px solid rgba(16,185,129,0.15)"
+                    ? "1px solid rgba(139,92,246,0.15)"
                     : "1px solid rgba(255,255,255,0.06)",
                 }}
                 onClick={() => handleToggle(task)}
                 whileTap={{ scale: 0.97 }}
               >
-                {task.done ? (
-                  <CheckSquare size={16} color="#10b981" />
-                ) : (
-                  <Square size={16} color="var(--text-secondary)" />
-                )}
+                <motion.div
+                  initial={{ scale: 0.8 }}
+                  animate={{ scale: 1 }}
+                >
+                  {task.done ? (
+                    <CheckCircle2 size={20} color="#8b5cf6" strokeWidth={2} />
+                  ) : (
+                    <Circle size={20} color="rgba(255,255,255,0.3)" strokeWidth={1.5} />
+                  )}
+                </motion.div>
                 <span
-                  className="text-xs font-medium flex-1 leading-snug"
+                  className="text-sm font-medium flex-1 leading-snug"
                   style={{
-                    color: task.done
-                      ? "var(--text-secondary)"
-                      : "var(--text-primary)",
+                    color: task.done ? "var(--text-secondary)" : "var(--text-primary)",
                     textDecoration: task.done ? "line-through" : "none",
                   }}
                 >

components/cards/TemperatureCard.tsx

@@ -22,6 +22,7 @@ export default function TemperatureCard({
 }: Props) {
   const [target, setTarget] = useState(targetTemp || 22);
   const isHeating = state === "heat";
+  const isActive = state !== "off";
 
   const adjust = useCallback(
     async (delta: number) => {
@@ -33,97 +34,122 @@ export default function TemperatureCard({
     [target, entityId, onUpdate]
   );
 
-  const tempDiff = currentTemp ? currentTemp - target : 0;
+  const accentColor = isHeating ? "#f43f5e" : "#3b82f6";
+  const accentBg = isHeating ? "rgba(244,63,94,0.08)" : "rgba(59,130,246,0.08)";
+  const accentBorder = isHeating ? "rgba(244,63,94,0.2)" : "rgba(59,130,246,0.2)";
+  const accentGlow = isHeating ? "rgba(244,63,94,0.25)" : "rgba(59,130,246,0.2)";
 
   return (
     <motion.div
-      className="glass-card p-5 h-full flex flex-col justify-between"
+      className="glass-card p-6 h-full flex flex-col justify-between"
       style={
-        isHeating
+        isActive
           ? {
-              background: "rgba(244,63,94,0.06)",
-              border: "1px solid rgba(244,63,94,0.15)",
+              background: accentBg,
+              border: `1px solid ${accentBorder}`,
+              boxShadow: `0 0 40px ${accentGlow}`,
             }
           : {}
       }
-      initial={{ opacity: 0, scale: 0.95 }}
-      animate={{ opacity: 1, scale: 1 }}
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.35, delay: 0.07 }}
       whileHover={{ scale: 1.01 }}
     >
+      {/* Icon row */}
       <div className="flex items-start justify-between">
-        <div>
-          <div
-            className="w-10 h-10 rounded-xl flex items-center justify-center mb-3"
-            style={{
-              background: isHeating
-                ? "rgba(244,63,94,0.15)"
-                : "rgba(255,255,255,0.06)",
-            }}
-          >
-            <Thermometer
-              size={20}
-              color={isHeating ? "#f43f5e" : "var(--text-secondary)"}
-            />
-          </div>
-          <div
-            className="text-sm font-semibold"
-            style={{ color: "var(--text-primary)" }}
-          >
-            Термостат
-          </div>
-          <div
-            className="text-xs mt-0.5"
-            style={{ color: isHeating ? "#f43f5e" : "var(--text-secondary)" }}
-          >
-            {isHeating ? "Нагрев" : "Ожидание"}
-          </div>
-        </div>
+        <motion.div
+          className="w-16 h-16 rounded-2xl flex items-center justify-center"
+          style={{
+            background: isActive ? `${accentColor}22` : "rgba(255,255,255,0.06)",
+            boxShadow: isActive ? `0 0 28px ${accentGlow}` : "none",
+          }}
+        >
+          <Thermometer
+            size={32}
+            color={isActive ? accentColor : "rgba(255,255,255,0.35)"}
+            strokeWidth={1.5}
+          />
+        </motion.div>
 
-        <div className="text-right">
-          <div
-            className="text-3xl font-bold"
-            style={{ color: "var(--text-primary)" }}
-          >
-            {currentTemp?.toFixed(1) ?? "—"}°
-          </div>
-          <div
-            className="text-xs"
-            style={{ color: "var(--text-secondary)" }}
-          >
-            текущая
-          </div>
+        {/* Status badge */}
+        <div
+          className="px-3 py-1 rounded-full text-xs font-semibold"
+          style={{
+            background: isActive ? `${accentColor}18` : "rgba(255,255,255,0.06)",
+            color: isActive ? accentColor : "var(--text-secondary)",
+            border: `1px solid ${isActive ? accentColor + "40" : "rgba(255,255,255,0.08)"}`,
+          }}
+        >
+          {isHeating ? "Нагрев" : isActive ? "Охлаждение" : "Выкл"}
         </div>
       </div>
 
-      <div className="flex items-center justify-between mt-4">
+      {/* Current temperature — BIG */}
+      <div className="my-4">
         <div
-          className="text-xs"
+          className="font-black leading-none tracking-tight"
+          style={{
+            fontSize: "56px",
+            color: isActive ? accentColor : "var(--text-primary)",
+            textShadow: isActive ? `0 0 40px ${accentColor}60` : "none",
+          }}
+        >
+          {currentTemp?.toFixed(1) ?? "—"}°
+        </div>
+        <div
+          className="text-sm mt-1"
           style={{ color: "var(--text-secondary)" }}
         >
-          Целевая температура
+          текущая температура
         </div>
+      </div>
+
+      {/* Target temperature controls */}
+      <div
+        className="flex items-center justify-between px-4 py-3 rounded-2xl"
+        style={{
+          background: "rgba(255,255,255,0.04)",
+          border: "1px solid rgba(255,255,255,0.07)",
+        }}
+      >
+        <span
+          className="text-sm font-medium"
+          style={{ color: "var(--text-secondary)" }}
+        >
+          Цель
+        </span>
+
         <div className="flex items-center gap-3">
           <motion.button
             onClick={() => adjust(-0.5)}
-            className="w-8 h-8 rounded-lg flex items-center justify-center"
-            style={{ background: "rgba(255,255,255,0.08)" }}
-            whileTap={{ scale: 0.85 }}
+            className="w-10 h-10 rounded-xl flex items-center justify-center"
+            style={{
+              background: "rgba(255,255,255,0.08)",
+              border: "1px solid rgba(255,255,255,0.1)",
+            }}
+            whileTap={{ scale: 0.82 }}
           >
-            <Minus size={14} color="var(--text-primary)" />
+            <Minus size={16} color="var(--text-primary)" />
           </motion.button>
+
           <span
-            className="text-lg font-bold min-w-[48px] text-center"
-            style={{ color: "#6366f1" }}
+            className="text-2xl font-bold min-w-[56px] text-center"
+            style={{ color: accentColor }}
           >
             {target}°
           </span>
+
           <motion.button
             onClick={() => adjust(0.5)}
-            className="w-8 h-8 rounded-lg flex items-center justify-center"
-            style={{ background: "rgba(99,102,241,0.2)" }}
-            whileTap={{ scale: 0.85 }}
+            className="w-10 h-10 rounded-xl flex items-center justify-center"
+            style={{
+              background: `${accentColor}22`,
+              border: `1px solid ${accentColor}50`,
+            }}
+            whileTap={{ scale: 0.82 }}
           >
-            <Plus size={14} color="#6366f1" />
+            <Plus size={16} color={accentColor} />
           </motion.button>
         </div>
       </div>

components/cards/WeatherCard.tsx

@@ -30,14 +30,11 @@ export default function WeatherCard({ weather }: Props) {
   if (!weather) {
     return (
       <motion.div
-        className="glass-card p-5 h-full flex items-center justify-center"
+        className="glass-card p-6 h-full flex items-center justify-center"
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
       >
-        <div
-          className="text-sm"
-          style={{ color: "var(--text-secondary)" }}
-        >
+        <div className="text-sm" style={{ color: "var(--text-secondary)" }}>
           Загрузка погоды...
         </div>
       </motion.div>
@@ -46,91 +43,93 @@ export default function WeatherCard({ weather }: Props) {
 
   return (
     <motion.div
-      className="glass-card p-5 h-full flex flex-col"
+      className="glass-card p-6 h-full flex flex-col"
       style={{
-        background: "rgba(6,182,212,0.04)",
-        border: "1px solid rgba(6,182,212,0.12)",
+        background: "rgba(59,130,246,0.05)",
+        border: "1px solid rgba(59,130,246,0.15)",
       }}
-      initial={{ opacity: 0, scale: 0.95 }}
-      animate={{ opacity: 1, scale: 1 }}
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.35, delay: 0.21 }}
       whileHover={{ scale: 1.01 }}
     >
-      <div className="flex items-start justify-between mb-4">
+      {/* Location */}
+      <div
+        className="text-sm font-medium mb-3"
+        style={{ color: "var(--text-secondary)" }}
+      >
+        📍 Санкт-Петербург
+      </div>
+
+      {/* Current weather */}
+      <div className="flex items-center gap-4 mb-4">
+        <div className="text-5xl leading-none">
+          {getWeatherEmoji(weather.weatherCode)}
+        </div>
         <div>
           <div
-            className="text-sm font-semibold"
-            style={{ color: "var(--text-primary)" }}
+            className="font-black leading-none"
+            style={{ fontSize: "44px", color: "var(--text-primary)" }}
           >
-            🌍 Санкт-Петербург
+            {weather.temp}°
           </div>
-          <div className="flex items-center gap-3 mt-2">
-            <span className="text-3xl font-bold" style={{ color: "var(--text-primary)" }}>
-              {getWeatherEmoji(weather.weatherCode)}
-            </span>
-            <div>
-              <div
-                className="text-2xl font-bold"
-                style={{ color: "var(--text-primary)" }}
-              >
-                {weather.temp}°C
-              </div>
-              <div
-                className="text-xs"
-                style={{ color: "var(--text-secondary)" }}
-              >
-                {weather.desc}
-              </div>
-            </div>
+          <div
+            className="text-sm mt-1"
+            style={{ color: "var(--text-secondary)" }}
+          >
+            {weather.desc}
           </div>
         </div>
-        <div className="text-right space-y-1">
-          <div className="flex items-center gap-1 justify-end">
-            <Droplets size={12} color="#06b6d4" />
-            <span className="text-xs" style={{ color: "var(--text-secondary)" }}>
-              {weather.humidity}%
-            </span>
-          </div>
-          <div className="flex items-center gap-1 justify-end">
-            <Wind size={12} color="#8b5cf6" />
-            <span className="text-xs" style={{ color: "var(--text-secondary)" }}>
-              {weather.windSpeed} км/ч
-            </span>
-          </div>
+      </div>
+
+      {/* Stats */}
+      <div className="flex gap-4 mb-4">
+        <div className="flex items-center gap-1.5">
+          <Droplets size={14} color="#3b82f6" />
+          <span className="text-xs" style={{ color: "var(--text-secondary)" }}>
+            {weather.humidity}%
+          </span>
+        </div>
+        <div className="flex items-center gap-1.5">
+          <Wind size={14} color="#8b5cf6" />
+          <span className="text-xs" style={{ color: "var(--text-secondary)" }}>
+            {weather.windSpeed} км/ч
+          </span>
+        </div>
+        <div
+          className="text-xs"
+          style={{ color: "var(--text-secondary)" }}
+        >
+          Ощущается {weather.feelsLike}°
         </div>
       </div>
 
       {/* Forecast */}
       <div className="flex gap-2 mt-auto">
-        {(weather.forecast || []).map((day: any, i: number) => (
+        {(weather.forecast || []).slice(0, 3).map((day: any, i: number) => (
           <motion.div
             key={day.date}
-            className="flex-1 rounded-xl p-3 text-center"
+            className="flex-1 rounded-2xl p-2.5 text-center"
             style={{
-              background: i === 0
-                ? "rgba(99,102,241,0.12)"
-                : "rgba(255,255,255,0.04)",
-              border: i === 0
-                ? "1px solid rgba(99,102,241,0.25)"
-                : "1px solid rgba(255,255,255,0.06)",
+              background: i === 0 ? "rgba(59,130,246,0.14)" : "rgba(255,255,255,0.04)",
+              border: i === 0 ? "1px solid rgba(59,130,246,0.28)" : "1px solid rgba(255,255,255,0.06)",
             }}
-            initial={{ opacity: 0, y: 10 }}
+            initial={{ opacity: 0, y: 8 }}
             animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: i * 0.1 }}
+            transition={{ delay: 0.3 + i * 0.08 }}
           >
             <div
               className="text-xs mb-1 font-medium"
               style={{ color: "var(--text-secondary)" }}
             >
-              {i === 0 ? "Сегодня" : formatDate(day.date)}
-            </div>
-            <div className="text-lg mb-1">
-              {getWeatherEmoji(day.weatherCode)}
+              {i === 0 ? "Сег." : formatDate(day.date)}
             </div>
+            <div className="text-lg mb-1">{getWeatherEmoji(day.weatherCode)}</div>
             <div
-              className="text-xs font-semibold"
+              className="text-xs font-bold"
               style={{ color: "var(--text-primary)" }}
             >
-              {day.maxTemp}° / {day.minTemp}°
+              {day.maxTemp}°/{day.minTemp}°
             </div>
           </motion.div>
         ))}

components/cards/WeatherSavingsCard.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import WeatherCard from "./WeatherCard";
+import SavingsCard from "./SavingsCard";
+
+interface Props {
+  weather: any;
+  savings: any[];
+}
+
+export default function WeatherSavingsCard({ weather, savings }: Props) {
+  const [view, setView] = useState<"weather" | "savings">("weather");
+
+  return (
+    <div className="h-full flex flex-col gap-2">
+      {/* Toggle pills */}
+      <div
+        className="flex rounded-2xl p-1 gap-1"
+        style={{
+          background: "rgba(255,255,255,0.04)",
+          border: "1px solid rgba(255,255,255,0.07)",
+        }}
+      >
+        {[
+          { id: "weather", label: "🌤 Погода" },
+          { id: "savings", label: "💰 Цели" },
+        ].map((tab) => (
+          <motion.button
+            key={tab.id}
+            onClick={() => setView(tab.id as "weather" | "savings")}
+            className="flex-1 py-1.5 rounded-xl text-xs font-semibold relative"
+            style={{
+              color: view === tab.id ? "var(--text-primary)" : "var(--text-secondary)",
+            }}
+            whileTap={{ scale: 0.95 }}
+          >
+            {view === tab.id && (
+              <motion.div
+                className="absolute inset-0 rounded-xl"
+                style={{
+                  background: "rgba(255,255,255,0.08)",
+                  border: "1px solid rgba(255,255,255,0.12)",
+                }}
+                layoutId="wsToggle"
+                transition={{ type: "spring", stiffness: 500, damping: 35 }}
+              />
+            )}
+            <span className="relative z-10">{tab.label}</span>
+          </motion.button>
+        ))}
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 min-h-0">
+        <AnimatePresence mode="wait">
+          {view === "weather" ? (
+            <motion.div
+              key="weather"
+              className="h-full"
+              initial={{ opacity: 0, x: -10 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: 10 }}
+              transition={{ duration: 0.2 }}
+            >
+              <WeatherCard weather={weather} />
+            </motion.div>
+          ) : (
+            <motion.div
+              key="savings"
+              className="h-full"
+              initial={{ opacity: 0, x: 10 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: -10 }}
+              transition={{ duration: 0.2 }}
+            >
+              <SavingsCard savings={savings} />
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+}