feat(design): FocusCard hero, CountdownCard, data-* palette, swipe, touch-targets

Big design pass across Home + tokens + components.

— globals.css: new data-* palette (cool/warm/hot/good/info/rose/violet/mood)
  with theme-aware variants, .grain overlay utility, .num-display
  typography helper, .hit-zone 44px wrapper, .eyebrow label, .focus-card
  base, focus-visible outline-offset 3px, space/touch scale vars.
— FocusCard.tsx: context engine — пять состояний (morning-outfit,
  tram-imminent, event-upcoming, countdown, bill-due, night, quiet).
  Auto-rotates by hour + live data. 96px display numbers, accent-mixed
  surfaces, grain overlay.
— CountdownCard.tsx + /api/countdowns: rotating 8s list, persistent
  /data/tablet-countdowns.json, full CRUD. Default seeded with Токио.
— HomeTab: replaced plain Weather hero with FocusCard, added Row 4
  with CountdownCard. Pulls trams + countdowns for the Focus context.
— Swipe between tabs: pointer-level detection on <main>, data-swipe-ignore
  bails out inside modals + note swipe-to-delete + voice overlay.
— Touch-target sweep: TopBar HA dot → 44px hit-zone, sensor chip 44px
  min-height, forecast day buttons 92px min, DeviceCard toggle 60x36,
  CalendarTab prev/next/close/list all 44x44, NotesTab buttons 44x44,
  TimerHomeWidget + 44x44, WeatherDayModal chevrons 48x48, close 48.
— Hardcoded hex → data-* tokens: TopBar sensors, TransportWidget routes
  (via color-mix), DeviceCard full rewrite (per-kind accent, glass
  removed in favor of color-mix surfaces + proper mock-state treatment),
  NotesTab palette refreshed to match dark theme.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

app/api/countdowns/route.ts

@@ -0,0 +1,97 @@
+export const dynamic = 'force-dynamic'
+import { NextResponse } from 'next/server'
+import * as fs from 'fs'
+
+const DATA_DIR = fs.existsSync('/data') ? '/data' : '/tmp'
+const COUNTDOWNS_PATH = `${DATA_DIR}/tablet-countdowns.json`
+
+export interface Countdown {
+  id: string
+  label: string
+  date: string // YYYY-MM-DD
+  emoji?: string
+  color?: string // hex or data-* token name (e.g. "data-rose")
+  note?: string
+  createdAt: string
+  updatedAt: string
+}
+
+const DEFAULT_COUNTDOWNS: Countdown[] = [
+  {
+    id: 'tokyo',
+    label: 'Токио',
+    date: '2026-10-15',
+    emoji: '🗼',
+    color: 'data-rose',
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+  },
+]
+
+function load(): Countdown[] {
+  try {
+    if (fs.existsSync(COUNTDOWNS_PATH)) {
+      return JSON.parse(fs.readFileSync(COUNTDOWNS_PATH, 'utf-8'))
+    }
+    // первая загрузка — создать дефолтный файл
+    save(DEFAULT_COUNTDOWNS)
+    return DEFAULT_COUNTDOWNS
+  } catch {
+    return []
+  }
+}
+
+function save(list: Countdown[]) {
+  try {
+    fs.writeFileSync(COUNTDOWNS_PATH, JSON.stringify(list, null, 2))
+  } catch {}
+}
+
+export async function GET() {
+  const all = load()
+  // сортируем по дате возрастания
+  const sorted = [...all].sort((a, b) => a.date.localeCompare(b.date))
+  return NextResponse.json({ countdowns: sorted })
+}
+
+export async function POST(req: Request) {
+  const body = await req.json()
+  if (!body.label || !body.date) {
+    return NextResponse.json({ error: 'label_and_date_required' }, { status: 400 })
+  }
+  const list = load()
+  const cd: Countdown = {
+    id: Date.now().toString(36) + Math.random().toString(36).slice(2, 6),
+    label: String(body.label).slice(0, 60),
+    date: String(body.date).slice(0, 10),
+    emoji: body.emoji?.slice(0, 4) || undefined,
+    color: body.color || undefined,
+    note: body.note?.slice(0, 200) || undefined,
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+  }
+  list.push(cd)
+  save(list)
+  return NextResponse.json({ countdown: cd })
+}
+
+export async function PUT(req: Request) {
+  const body = await req.json()
+  const { id, ...updates } = body
+  if (!id) return NextResponse.json({ error: 'id_required' }, { status: 400 })
+  const list = load()
+  const idx = list.findIndex(c => c.id === id)
+  if (idx < 0) return NextResponse.json({ error: 'not_found' }, { status: 404 })
+  list[idx] = { ...list[idx], ...updates, id, updatedAt: new Date().toISOString() }
+  save(list)
+  return NextResponse.json({ countdown: list[idx] })
+}
+
+export async function DELETE(req: Request) {
+  const url = new URL(req.url)
+  const id = url.searchParams.get('id')
+  if (!id) return NextResponse.json({ error: 'id_required' }, { status: 400 })
+  const list = load().filter(c => c.id !== id)
+  save(list)
+  return NextResponse.json({ ok: true })
+}

app/globals.css

@@ -26,11 +26,32 @@
   --text-secondary: rgba(255, 255, 255, 0.6);
   --text-tertiary: rgba(255, 255, 255, 0.38);
 
-  /* Accents */
+  /* Accents — UI */
   --accent: #818cf8;
+  --accent-strong: #6366f1;
   --accent-secondary: #22d3ee;
   --accent-glow: rgba(129, 140, 248, 0.22);
 
+  /* Data palette — semantic, theme-aware */
+  --data-cool: #38bdf8;     /* небо, влажность, охлаждение */
+  --data-info: #60a5fa;     /* ссылки, second-accent */
+  --data-good: #34d399;     /* успех, здоровье, streak */
+  --data-warm: #fbbf24;     /* свет, тепло, утро */
+  --data-hot: #fb923c;      /* обострение, urgent-minor */
+  --data-danger: #f87171;   /* критичное, истёк, ошибка */
+  --data-rose: #f472b6;     /* Света, романтика */
+  --data-violet: #a78bfa;   /* Cosmo, индиго-вариант */
+  --data-mood: #8b5cf6;     /* секреты, события 2-го уровня */
+
+  /* Soft backgrounds for data (color-mix with surface-2) */
+  --data-cool-bg: color-mix(in srgb, var(--data-cool) 12%, var(--surface-2));
+  --data-good-bg: color-mix(in srgb, var(--data-good) 12%, var(--surface-2));
+  --data-warm-bg: color-mix(in srgb, var(--data-warm) 12%, var(--surface-2));
+  --data-hot-bg: color-mix(in srgb, var(--data-hot) 14%, var(--surface-2));
+  --data-danger-bg: color-mix(in srgb, var(--data-danger) 12%, var(--surface-2));
+  --data-rose-bg: color-mix(in srgb, var(--data-rose) 12%, var(--surface-2));
+  --data-violet-bg: color-mix(in srgb, var(--data-violet) 12%, var(--surface-2));
+
   /* Brand gradients */
   --gradient-primary: linear-gradient(135deg, #6366f1, #8b5cf6);
   --gradient-warm: linear-gradient(135deg, #f59e0b, #ef4444);
@@ -54,6 +75,18 @@
   --radius-lg: 22px;
   --radius-xl: 28px;
 
+  /* Layout rhythm */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 22px;
+  --space-6: 28px;
+
+  /* Touch */
+  --touch-min: 44px;
+  --touch-comfy: 56px;
+
   /* Legacy aliases */
   --sidebar-bg: var(--bg);
   --card-bg: var(--surface-1);
@@ -84,9 +117,30 @@
   --text-tertiary: rgba(15, 20, 40, 0.38);
 
   --accent: #5b63e0;
+  --accent-strong: #4f46e5;
   --accent-secondary: #0891b2;
   --accent-glow: rgba(91, 99, 224, 0.14);
 
+  /* Data palette — slightly darker in light theme for contrast */
+  --data-cool: #0284c7;
+  --data-info: #2563eb;
+  --data-good: #059669;
+  --data-warm: #d97706;
+  --data-hot: #ea580c;
+  --data-danger: #dc2626;
+  --data-rose: #db2777;
+  --data-violet: #7c3aed;
+  --data-mood: #6d28d9;
+
+  /* Soft backgrounds — lighter mix for light theme */
+  --data-cool-bg: color-mix(in srgb, var(--data-cool) 9%, var(--surface-1));
+  --data-good-bg: color-mix(in srgb, var(--data-good) 9%, var(--surface-1));
+  --data-warm-bg: color-mix(in srgb, var(--data-warm) 9%, var(--surface-1));
+  --data-hot-bg: color-mix(in srgb, var(--data-hot) 10%, var(--surface-1));
+  --data-danger-bg: color-mix(in srgb, var(--data-danger) 9%, var(--surface-1));
+  --data-rose-bg: color-mix(in srgb, var(--data-rose) 9%, var(--surface-1));
+  --data-violet-bg: color-mix(in srgb, var(--data-violet) 9%, var(--surface-1));
+
   --shadow-sm: 0 1px 2px rgba(15, 20, 40, 0.05);
   --shadow-md: 0 2px 6px rgba(15, 20, 40, 0.06), 0 12px 28px -8px rgba(15, 20, 40, 0.1);
   --shadow-lg: 0 4px 10px rgba(15, 20, 40, 0.06), 0 24px 60px -12px rgba(15, 20, 40, 0.14);
@@ -112,6 +166,41 @@ html, body {
 
 #__next, main { height: 100%; }
 
+/* Better tabular numbers across the app */
+.num, .num-display {
+  font-variant-numeric: tabular-nums slashed-zero;
+  font-feature-settings: "tnum", "zero";
+}
+.num-display {
+  letter-spacing: -0.02em;
+  font-weight: 800;
+  line-height: 0.95;
+}
+
+/* ——————————————————————————————
+   Grain overlay
+   ——— subtle SVG-noise; cheap, no image asset needed
+   —————————————————————————————— */
+.grain {
+  position: relative;
+}
+.grain::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  border-radius: inherit;
+  opacity: 0.035;
+  mix-blend-mode: overlay;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
+  background-size: 120px 120px;
+}
+.light .grain::after {
+  opacity: 0.05;
+  mix-blend-mode: multiply;
+  filter: invert(1);
+}
+
 /* ——————————————————————————————
    Aurora
    —————————————————————————————— */
@@ -178,6 +267,23 @@ html, body {
   box-shadow: var(--shadow-lg);
 }
 
+/* Focus-card styling — for the context-aware hero */
+.focus-card {
+  position: relative;
+  background: var(--surface-1);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-lg);
+  overflow: hidden;
+}
+.focus-card-accent::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(circle at top right, var(--accent-glow), transparent 60%);
+  pointer-events: none;
+}
+
 .glass-card {
   background: var(--surface-1);
   border: 1px solid var(--border-subtle);
@@ -186,6 +292,32 @@ html, body {
 }
 .glass-card:hover { background: var(--surface-hover); }
 
+/* Hairline divider helper */
+.divider {
+  height: 1px;
+  width: 100%;
+  background: var(--hairline);
+}
+
+/* Chip / hit-zone — wraps small icons into 44px tap surface */
+.hit-zone {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--touch-min);
+  min-height: var(--touch-min);
+  border-radius: 12px;
+}
+
+/* Small uppercase label */
+.eyebrow {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--text-tertiary);
+}
+
 .gradient-text {
   background: var(--gradient-primary);
   -webkit-background-clip: text;
@@ -205,7 +337,8 @@ button {
 }
 button:focus-visible {
   outline: 2px solid var(--accent);
-  outline-offset: 2px;
+  outline-offset: 3px;
+  border-radius: 14px;
 }
 
 ::-webkit-scrollbar { width: 6px; height: 6px; }

app/page.tsx

@@ -14,9 +14,13 @@ import WeatherAnimation from '@/components/WeatherAnimation'
 import VoiceOverlay from '@/components/VoiceOverlay'
 import TimerWidget from '@/components/TimerWidget'
 import TimerHomeWidget from '@/components/TimerHomeWidget'
+import FocusCard from '@/components/FocusCard'
+import CountdownCard from '@/components/CountdownCard'
 
 type Tab = 'home' | 'devices' | 'calendar' | 'notes' | 'settings'
 
+const TAB_ORDER: Tab[] = ['home', 'devices', 'calendar', 'notes', 'settings']
+
 interface WeatherData {
   temp: string
   desc: string
@@ -311,7 +315,7 @@ function WeatherDayModal({ day, days, current, onClose, onChange }: {
   }
 
   return (
-    <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(12px)', zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }} onClick={onClose}>
+    <div data-swipe-ignore style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(12px)', zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }} onClick={onClose}>
       <motion.div
         key={day.date}
         drag="x"
@@ -345,11 +349,12 @@ function WeatherDayModal({ day, days, current, onClose, onChange }: {
           {canPrev && (
             <button
               onClick={() => go(-1)}
+              aria-label="Предыдущий день"
               style={{
                 position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)',
-                width: 36, height: 36, borderRadius: 12,
+                width: 48, height: 48, borderRadius: 14,
                 background: 'var(--surface-2)', border: '1px solid var(--border-subtle)',
-                color: 'var(--text-secondary)', zIndex: 2,
+                color: 'var(--text-secondary)', zIndex: 2, fontSize: 22,
                 display: 'flex', alignItems: 'center', justifyContent: 'center',
               }}
             >‹</button>
@@ -357,11 +362,12 @@ function WeatherDayModal({ day, days, current, onClose, onChange }: {
           {canNext && (
             <button
               onClick={() => go(1)}
+              aria-label="Следующий день"
               style={{
                 position: 'absolute', right: 10, top: '50%', transform: 'translateY(-50%)',
-                width: 36, height: 36, borderRadius: 12,
+                width: 48, height: 48, borderRadius: 14,
                 background: 'var(--surface-2)', border: '1px solid var(--border-subtle)',
-                color: 'var(--text-secondary)', zIndex: 2,
+                color: 'var(--text-secondary)', zIndex: 2, fontSize: 22,
                 display: 'flex', alignItems: 'center', justifyContent: 'center',
               }}
             >›</button>
@@ -422,7 +428,8 @@ function WeatherDayModal({ day, days, current, onClose, onChange }: {
           )}
 
           <button onClick={onClose} style={{
-            width: '100%', padding: '12px', borderRadius: 14, marginTop: 12,
+            width: '100%', padding: '16px', borderRadius: 14, marginTop: 12,
+            minHeight: 48,
             background: 'var(--surface-2)', border: '1px solid var(--border-subtle)',
             color: 'var(--text-secondary)', fontSize: 14, fontWeight: 600,
           }}>
@@ -441,6 +448,8 @@ function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: S
   const [calLoading, setCalLoading] = useState(true)
   const [pinnedNotes, setPinnedNotes] = useState<any[]>([])
   const [selectedDay, setSelectedDay] = useState<any>(null)
+  const [countdowns, setCountdowns] = useState<{ label: string; date: string }[]>([])
+  const [tramNext, setTramNext] = useState<{ route: string; minutes: number; direction: string } | null>(null)
 
   useEffect(() => {
     fetch('/api/calendar?range=today')
@@ -479,8 +488,58 @@ function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: S
         setPinnedNotes((pinned.length ? pinned : all).slice(0, 3))
       })
       .catch(() => {})
+
+    // Countdowns
+    fetch('/api/countdowns')
+      .then(r => r.json())
+      .then(d => setCountdowns((d.countdowns || []).map((c: any) => ({ label: c.label, date: c.date }))))
+      .catch(() => {})
   }, [])
 
+  // Nearest upcoming tram — refresh every 30s so FocusCard stays current
+  useEffect(() => {
+    let cancelled = false
+    const STOP_IDS = [
+      { id: '16226', direction: 'в центр' },
+      { id: '16354', direction: 'от центра' },
+    ]
+    const load = async () => {
+      try {
+        const results = await Promise.all(
+          STOP_IDS.map(s =>
+            fetch(`/api/transport?stopId=${s.id}`)
+              .then(r => r.json())
+              .then(j => (j.arrivals || []).map((a: any) => ({ ...a, direction: s.direction })))
+              .catch(() => [])
+          )
+        )
+        const all = results.flat().filter(a => typeof a.minutes === 'number' && a.minutes >= 0)
+        all.sort((a: any, b: any) => a.minutes - b.minutes)
+        if (!cancelled) {
+          setTramNext(all[0] ? {
+            route: all[0].route,
+            minutes: all[0].minutes,
+            direction: all[0].direction,
+          } : null)
+        }
+      } catch {}
+    }
+    load()
+    const t = setInterval(load, 30_000)
+    return () => { cancelled = true; clearInterval(t) }
+  }, [])
+
+  // Next event (today or tomorrow) — сейчас or nearest upcoming within next 24h
+  const nextEvent = (() => {
+    const now = Date.now()
+    const pool = [...todayEvents, ...tomorrowEvents]
+      .filter(e => !e.allDay)
+      .map(e => ({ e, t: new Date(e.start).getTime() }))
+      .filter(({ t }) => t >= now - 5 * 60_000)
+      .sort((a, b) => a.t - b.t)
+    return pool[0]?.e || null
+  })()
+
 
 
   return (
@@ -489,87 +548,19 @@ function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: S
       padding: '18px 22px 24px',
       display: 'flex', flexDirection: 'column', gap: 14,
     }}>
-      {/* ───── Bento row: Hero weather + Tram ───── */}
+      {/* ───── Bento row: Focus hero + Tram ───── */}
       <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.1fr)', gap: 14, alignItems: 'stretch' }}>
 
-        {/* Hero weather card */}
-        {weather ? (
-          <div
-            className="card-hero"
-            onClick={() => weather?.forecast?.[0] && setSelectedDay(weather.forecast[0])}
-            style={{
-              padding: '22px 24px',
-              display: 'flex', flexDirection: 'column',
-              position: 'relative', overflow: 'hidden',
-              cursor: 'pointer',
-            }}
-          >
-            {/* Decorative animation, large, behind */}
-            <div style={{
-              position: 'absolute', top: -24, right: -12,
-              opacity: 0.14, pointerEvents: 'none',
-            }}>
-              <WeatherAnimation condition={weather.desc} size={160} />
-            </div>
-
-            <div style={{
-              fontSize: 11, color: 'var(--text-tertiary)', fontWeight: 700,
-              textTransform: 'uppercase', letterSpacing: '0.12em', marginBottom: 8,
-              position: 'relative', zIndex: 1,
-            }}>
-              Сейчас
-            </div>
-
-            <div style={{
-              display: 'flex', alignItems: 'center', gap: 12,
-              position: 'relative', zIndex: 1, marginBottom: 6,
-            }}>
-              <div style={{
-                fontSize: 64, fontWeight: 800, letterSpacing: '-3px',
-                color: 'var(--text-primary)', lineHeight: 0.9,
-                fontVariantNumeric: 'tabular-nums',
-              }}>
-                {weather.temp}°
-              </div>
-              <WeatherAnimation condition={weather.desc} size={52} />
-            </div>
-
-            <div style={{
-              fontSize: 16, color: 'var(--text-primary)', fontWeight: 600,
-              position: 'relative', zIndex: 1, marginBottom: 12,
-            }}>
-              {weather.desc}
-            </div>
-
-            <div style={{
-              display: 'flex', gap: 16, flexWrap: 'wrap',
-              marginTop: 'auto', position: 'relative', zIndex: 1,
-            }}>
-              {weather.feelsLike && (
-                <div>
-                  <div style={{ fontSize: 10, color: 'var(--text-tertiary)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em' }}>Ощущается</div>
-                  <div style={{ fontSize: 15, color: 'var(--text-primary)', fontWeight: 700, marginTop: 2 }}>{weather.feelsLike}°</div>
-                </div>
-              )}
-              {weather.humidity && (
-                <div>
-                  <div style={{ fontSize: 10, color: 'var(--text-tertiary)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em' }}>Влажность</div>
-                  <div style={{ fontSize: 15, color: 'var(--text-primary)', fontWeight: 700, marginTop: 2 }}>{weather.humidity}</div>
-                </div>
-              )}
-              {weather.windSpeed && (
-                <div>
-                  <div style={{ fontSize: 10, color: 'var(--text-tertiary)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em' }}>Ветер</div>
-                  <div style={{ fontSize: 15, color: 'var(--text-primary)', fontWeight: 700, marginTop: 2 }}>{weather.windSpeed}</div>
-                </div>
-              )}
-            </div>
-          </div>
-        ) : (
-          <div className="card-hero" style={{ padding: '22px 24px', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-tertiary)', fontSize: 13 }}>
-            Загрузка погоды...
-          </div>
-        )}
+        {/* Focus — контекст-hero */}
+        <FocusCard
+          weather={weather ? { temp: weather.temp, desc: weather.desc, feelsLike: weather.feelsLike } : null}
+          tramNext={tramNext}
+          nextEvent={nextEvent ? {
+            id: nextEvent.id, title: nextEvent.title, start: nextEvent.start,
+            allDay: nextEvent.allDay, ownerName: nextEvent.ownerName, color: nextEvent.color,
+          } : null}
+          countdowns={countdowns}
+        />
 
         {/* Tram */}
         <TransportWidget />
@@ -592,28 +583,28 @@ function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: S
                 <button
                   onClick={() => setSelectedDay(day)}
                   style={{
-                    flex: 1, padding: '8px 4px', borderRadius: 14,
+                    flex: 1, padding: '12px 8px', borderRadius: 14,
+                    minHeight: 92,
                     background: isToday ? 'var(--surface-2)' : 'transparent',
-                    display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
+                    display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
                     transition: 'background 0.2s ease',
                   }}
                 >
                   <div style={{
-                    fontSize: 10, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase',
+                    fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase',
                     color: isToday ? 'var(--accent)' : 'var(--text-tertiary)',
                   }}>
                     {isToday ? 'Сей' : d.toLocaleDateString('ru-RU', { weekday: 'short' }).replace('.', '').slice(0, 2)}
                   </div>
-                  <div style={{ fontSize: 20 }}>{getWeatherIcon(day.desc)}</div>
-                  <div style={{
-                    fontSize: 14, fontWeight: 800, color: 'var(--text-primary)',
-                    letterSpacing: '-0.5px', fontVariantNumeric: 'tabular-nums',
+                  <div style={{ fontSize: 22 }}>{getWeatherIcon(day.desc)}</div>
+                  <div className="num" style={{
+                    fontSize: 15, fontWeight: 800, color: 'var(--text-primary)',
+                    letterSpacing: '-0.5px',
                   }}>
                     {day.maxTemp}°
                   </div>
-                  <div style={{
-                    fontSize: 11, color: 'var(--text-tertiary)', fontWeight: 500,
-                    fontVariantNumeric: 'tabular-nums',
+                  <div className="num" style={{
+                    fontSize: 12, color: 'var(--text-tertiary)', fontWeight: 500,
                   }}>
                     {day.minTemp}°
                   </div>
@@ -710,6 +701,16 @@ function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: S
         <TimerHomeWidget />
       </div>
 
+      {/* ───── Row 4: Countdown ───── */}
+      <div style={{
+        display: 'grid',
+        gridTemplateColumns: 'minmax(260px, 1fr) minmax(0, 2fr)',
+        gap: 14,
+      }}>
+        <CountdownCard />
+        <div /> {/* место под будущий виджет */}
+      </div>
+
       {/* Weather day detail modal */}
       {selectedDay && (
         <WeatherDayModal
@@ -1022,6 +1023,35 @@ function HomePageInner() {
     }
   }, [unlocked, resetIdle])
 
+  // Swipe between tabs — edge-initiated horizontal drag
+  const swipeStart = useRef<{ x: number; y: number; t: number; id: number } | null>(null)
+  const handlePointerDown = (e: React.PointerEvent) => {
+    // Only primary pointer / touch
+    if (e.pointerType === 'mouse' && e.button !== 0) return
+    swipeStart.current = { x: e.clientX, y: e.clientY, t: Date.now(), id: e.pointerId }
+  }
+  const handlePointerUp = (e: React.PointerEvent) => {
+    const s = swipeStart.current
+    swipeStart.current = null
+    if (!s || s.id !== e.pointerId) return
+    const dx = e.clientX - s.x
+    const dy = e.clientY - s.y
+    const dt = Date.now() - s.t
+    // Conditions: fast enough, mostly horizontal, big enough
+    const isHorizontal = Math.abs(dx) > Math.abs(dy) * 1.6
+    const isLong = Math.abs(dx) > 90
+    const isFast = dt < 600 || Math.abs(dx) > 160
+    if (!(isHorizontal && isLong && isFast)) return
+    // Don't steal swipe from elements that draggable-own (notes swipe-to-delete, weather modal, timer cards).
+    const target = e.target as HTMLElement | null
+    if (target?.closest('[data-swipe-ignore]')) return
+    const idx = TAB_ORDER.indexOf(tab)
+    if (idx < 0) return
+    const nextIdx = dx < 0 ? idx + 1 : idx - 1
+    if (nextIdx < 0 || nextIdx >= TAB_ORDER.length) return
+    setTab(TAB_ORDER[nextIdx])
+  }
+
   const devicesInRoom = DEVICES_BY_ROOM[activeRoom] || []
   const getDeviceState = (haKey?: string): boolean => {
     if (!haKey || !haStates[haKey]) return false
@@ -1072,7 +1102,12 @@ function HomePageInner() {
         }}
       />
 
-      <main style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', minWidth: 0, position: 'relative', zIndex: 1 }}>
+      <main
+        onPointerDown={handlePointerDown}
+        onPointerUp={handlePointerUp}
+        onPointerCancel={() => { swipeStart.current = null }}
+        style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', minWidth: 0, position: 'relative', zIndex: 1 }}
+      >
         <TopBar sensors={sensors} haConnected={haConnected} />
 
         <AnimatePresence mode="sync" initial={false}>

components/CalendarTab.tsx

@@ -57,7 +57,7 @@ function AddEventModal({ defaultDate, onClose, onSaved }: { defaultDate: string;
   }
 
   return (
-    <div style={{
+    <div data-swipe-ignore style={{
       position: 'fixed', inset: 0,
       background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(12px)',
       zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'center',
@@ -79,13 +79,13 @@ function AddEventModal({ defaultDate, onClose, onSaved }: { defaultDate: string;
           <span style={{ fontSize: 18, fontWeight: 700, color: 'var(--text-primary)' }}>
             Новое событие
           </span>
-          <button onClick={onClose} style={{
-            width: 32, height: 32, borderRadius: 10,
-            background: 'rgba(255,255,255,0.05)',
+          <button onClick={onClose} aria-label="Закрыть" style={{
+            width: 44, height: 44, borderRadius: 12,
+            background: 'var(--surface-2)',
             display: 'flex', alignItems: 'center', justifyContent: 'center',
             color: 'var(--text-secondary)',
           }}>
-            <X size={16} />
+            <X size={18} />
           </button>
         </div>
 
@@ -301,7 +301,7 @@ function EventDetailModal({ event, onClose, onDelete, onUpdate }: {
   }
 
   return (
-    <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(12px)', zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }} onClick={onClose}>
+    <div data-swipe-ignore style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(12px)', zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }} onClick={onClose}>
       <div style={{
         background: 'rgba(16,16,30,0.97)', backdropFilter: 'blur(40px)',
         border: '1px solid rgba(255,255,255,0.07)', borderRadius: 28,
@@ -348,13 +348,13 @@ function EventDetailModal({ event, onClose, onDelete, onUpdate }: {
                   Изменить
                 </button>
               )}
-              <button onClick={onClose} style={{
-                width: 32, height: 32, borderRadius: 10,
-                background: 'rgba(255,255,255,0.06)',
+              <button onClick={onClose} aria-label="Закрыть" style={{
+                width: 44, height: 44, borderRadius: 12,
+                background: 'var(--surface-2)',
                 display: 'flex', alignItems: 'center', justifyContent: 'center',
                 color: 'var(--text-secondary)',
               }}>
-                <X size={16} />
+                <X size={18} />
               </button>
             </div>
           </div>
@@ -543,7 +543,7 @@ function DayEventsModal({ day, month, year, events, onClose, onSelect }: {
   const label = date.toLocaleDateString('ru-RU', { weekday: 'long', day: 'numeric', month: 'long' })
 
   return (
-    <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(8px)', zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }} onClick={onClose}>
+    <div data-swipe-ignore style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)', 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,
@@ -701,13 +701,13 @@ export default function CalendarTab() {
         {/* Header */}
         <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
           <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
-            <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' }}>
+            <button onClick={prevMonth} aria-label="Предыдущий месяц" style={{ width: 44, height: 44, borderRadius: 12, background: 'var(--surface-2)', border: '1px solid var(--border-subtle)', color: 'var(--text-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
               <ChevronLeft size={16} />
             </button>
             <span style={{ fontSize: 20, fontWeight: 700, color: 'var(--text-primary)', minWidth: 180, textAlign: 'center' }}>
               {MONTHS[month]} {year}
             </span>
-            <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' }}>
+            <button onClick={nextMonth} aria-label="Следующий месяц" style={{ width: 44, height: 44, borderRadius: 12, background: 'var(--surface-2)', border: '1px solid var(--border-subtle)', color: 'var(--text-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
               <ChevronRight size={16} />
             </button>
           </div>
@@ -733,15 +733,19 @@ export default function CalendarTab() {
                 </button>
               )
             })}
-            <button onClick={() => setShowUpcoming(v => !v)} style={{
-              width: 36, height: 36, borderRadius: 12,
-              background: showUpcoming ? 'rgba(99,102,241,0.15)' : 'rgba(255,255,255,0.04)',
-              border: showUpcoming ? '1px solid rgba(129,140,248,0.25)' : '1px solid rgba(255,255,255,0.06)',
-              color: showUpcoming ? '#a5b4fc' : 'var(--text-secondary)',
+            <button onClick={() => setShowUpcoming(v => !v)} aria-label="Ближайшие события" style={{
+              width: 44, height: 44, borderRadius: 12,
+              background: showUpcoming
+                ? 'color-mix(in srgb, var(--accent) 18%, var(--surface-2))'
+                : 'var(--surface-2)',
+              border: showUpcoming
+                ? '1px solid color-mix(in srgb, var(--accent) 30%, var(--border-subtle))'
+                : '1px solid var(--border-subtle)',
+              color: showUpcoming ? 'var(--accent)' : 'var(--text-secondary)',
               display: 'flex', alignItems: 'center', justifyContent: 'center',
               transition: 'all 0.25s ease',
             }}>
-              <List size={16} />
+              <List size={18} />
             </button>
             <button onClick={() => { setAddDate(today.toISOString().split('T')[0]); setShowAddModal(true) }} style={{
               display: 'flex', alignItems: 'center', gap: 6,

components/CountdownCard.tsx

@@ -0,0 +1,198 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { Sparkles } from 'lucide-react'
+
+interface Countdown {
+  id: string
+  label: string
+  date: string
+  emoji?: string
+  color?: string
+  note?: string
+}
+
+interface Computed {
+  id: string
+  label: string
+  emoji?: string
+  days: number
+  accent: string
+  dateStr: string
+}
+
+const ROTATE_MS = 8_000
+
+function resolveColor(c: Countdown): string {
+  if (!c.color) return 'var(--data-violet)'
+  if (c.color.startsWith('#')) return c.color
+  // токен вида "data-rose" → "var(--data-rose)"
+  return `var(--${c.color})`
+}
+
+function formatDate(iso: string): string {
+  try {
+    return new Date(iso + 'T00:00:00').toLocaleDateString('ru-RU', {
+      day: 'numeric', month: 'long',
+    })
+  } catch {
+    return iso
+  }
+}
+
+function daysFromNow(iso: string): number {
+  const target = new Date(iso + 'T00:00:00').getTime()
+  const today = new Date()
+  today.setHours(0, 0, 0, 0)
+  return Math.ceil((target - today.getTime()) / 86_400_000)
+}
+
+function pluralizeDays(n: number): string {
+  const a = Math.abs(n)
+  if (a % 10 === 1 && a % 100 !== 11) return 'день'
+  if ([2, 3, 4].includes(a % 10) && ![12, 13, 14].includes(a % 100)) return 'дня'
+  return 'дней'
+}
+
+export default function CountdownCard() {
+  const [items, setItems] = useState<Computed[]>([])
+  const [idx, setIdx] = useState(0)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    let cancelled = false
+    fetch('/api/countdowns')
+      .then(r => r.json())
+      .then(d => {
+        if (cancelled) return
+        const list: Countdown[] = d.countdowns || []
+        const computed = list
+          .map(c => ({
+            id: c.id,
+            label: c.label,
+            emoji: c.emoji,
+            days: daysFromNow(c.date),
+            accent: resolveColor(c),
+            dateStr: formatDate(c.date),
+          }))
+          .filter(c => c.days >= 0) // прошедшие скрываем
+          .sort((a, b) => a.days - b.days)
+        setItems(computed)
+      })
+      .catch(() => {})
+      .finally(() => { if (!cancelled) setLoading(false) })
+    return () => { cancelled = true }
+  }, [])
+
+  useEffect(() => {
+    if (items.length <= 1) return
+    const t = setInterval(() => setIdx(i => (i + 1) % items.length), ROTATE_MS)
+    return () => clearInterval(t)
+  }, [items.length])
+
+  if (loading) {
+    return (
+      <div className="card" style={{
+        padding: '16px 18px', minHeight: 128,
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        color: 'var(--text-tertiary)', fontSize: 12,
+      }}>
+        …
+      </div>
+    )
+  }
+
+  if (items.length === 0) {
+    return (
+      <div className="card" style={{
+        padding: '18px 20px', minHeight: 128,
+        display: 'flex', flexDirection: 'column', gap: 10,
+        color: 'var(--text-tertiary)',
+      }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <Sparkles size={14} />
+          <span className="eyebrow">Отсчёт</span>
+        </div>
+        <div style={{ fontSize: 13, lineHeight: 1.5 }}>
+          Добавь в настройках — отпуск, др, дедлайн.
+        </div>
+      </div>
+    )
+  }
+
+  const current = items[Math.min(idx, items.length - 1)]
+  const imminent = current.days <= 3
+  const soon = current.days <= 7
+
+  return (
+    <div
+      className="card grain"
+      style={{
+        padding: '18px 20px',
+        minHeight: 128,
+        display: 'flex', flexDirection: 'column', gap: 10,
+        position: 'relative', overflow: 'hidden',
+        background: `linear-gradient(135deg, color-mix(in srgb, ${current.accent} 12%, var(--surface-1)), var(--surface-1))`,
+        border: `1px solid color-mix(in srgb, ${current.accent} 22%, var(--border-subtle))`,
+        transition: 'background 0.6s ease, border-color 0.6s ease',
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        <Sparkles size={14} color={current.accent} />
+        <span className="eyebrow" style={{ color: current.accent }}>Отсчёт</span>
+        {items.length > 1 && (
+          <div style={{ marginLeft: 'auto', display: 'flex', gap: 4 }}>
+            {items.map((_, i) => (
+              <div key={i} style={{
+                width: i === idx ? 14 : 5, height: 5, borderRadius: 3,
+                background: i === idx ? current.accent : 'var(--surface-3)',
+                transition: 'all 0.4s ease',
+              }} />
+            ))}
+          </div>
+        )}
+      </div>
+
+      <AnimatePresence mode="wait">
+        <motion.div
+          key={current.id}
+          initial={{ opacity: 0, y: 4 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: -4 }}
+          transition={{ duration: 0.4 }}
+          style={{ display: 'flex', flexDirection: 'column', gap: 4 }}
+        >
+          <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
+            <div className="num-display" style={{
+              fontSize: current.days === 0 ? 36 : 48,
+              color: imminent ? current.accent : 'var(--text-primary)',
+              letterSpacing: '-0.04em',
+            }}>
+              {current.days === 0 ? 'сегодня' : current.days}
+            </div>
+            {current.days > 0 && (
+              <div style={{
+                fontSize: 15, color: 'var(--text-secondary)', fontWeight: 600,
+              }}>
+                {pluralizeDays(current.days)}
+              </div>
+            )}
+          </div>
+          <div style={{
+            fontSize: 14, fontWeight: 700, color: 'var(--text-primary)',
+            display: 'flex', alignItems: 'center', gap: 8,
+          }}>
+            {current.emoji && <span style={{ fontSize: 16 }}>{current.emoji}</span>}
+            <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+              {current.label}
+            </span>
+          </div>
+          <div style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>
+            {current.dateStr}
+          </div>
+        </motion.div>
+      </AnimatePresence>
+    </div>
+  )
+}

components/DeviceCard.tsx

@@ -14,35 +14,44 @@ 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} />
+type DeviceKind = 'air_purifier' | 'light' | 'tv' | 'ac' | 'default'
+
+function getDeviceKind(id: string): DeviceKind {
+  if (id.includes('air_purifier')) return 'air_purifier'
+  if (id.includes('light')) return 'light'
+  if (id.includes('tv')) return 'tv'
+  if (id.includes('ac')) return 'ac'
+  return 'default'
 }
 
-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))'
+// Каждый тип устройства — свой data-token (а не хардкод hex)
+const DEVICE_ACCENT: Record<DeviceKind, string> = {
+  air_purifier: 'var(--data-violet)',
+  light:        'var(--data-warm)',
+  tv:           'var(--data-info)',
+  ac:           'var(--data-cool)',
+  default:      'var(--accent)',
 }
 
-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)'
+function getDeviceIcon(kind: DeviceKind, isOn: boolean) {
+  const color = isOn ? DEVICE_ACCENT[kind] : 'var(--text-tertiary)'
+  const size = 26
+  const strokeWidth = 1.9
+  switch (kind) {
+    case 'air_purifier': return <Fan size={size} color={color} strokeWidth={strokeWidth} />
+    case 'light':        return <Lightbulb size={size} color={color} strokeWidth={strokeWidth} />
+    case 'tv':           return <Tv size={size} color={color} strokeWidth={strokeWidth} />
+    case 'ac':           return <Snowflake size={size} color={color} strokeWidth={strokeWidth} />
+    default:             return <Power size={size} color={color} strokeWidth={strokeWidth} />
+  }
 }
 
 export default function DeviceCard({
   id, name, icon, entityId, domain, initialState, isMock = false, extraInfo,
 }: DeviceCardProps) {
+  const kind = getDeviceKind(id)
+  const accent = DEVICE_ACCENT[kind]
+
   const [isOn, setIsOn] = useState(initialState)
   const [synced, setSynced] = useState(false)
   const [loading, setLoading] = useState(false)
@@ -78,33 +87,36 @@ export default function DeviceCard({
     }
   }
 
+  const activeBg = `color-mix(in srgb, ${accent} 14%, var(--surface-1))`
+  const activeBorder = `color-mix(in srgb, ${accent} 35%, var(--border-subtle))`
+  const activeGlow = `color-mix(in srgb, ${accent} 22%, transparent)`
+
   return (
     <div style={{
-      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)',
+      background: isOn ? activeBg : 'var(--surface-1)',
+      border: `1px solid ${isOn ? activeBorder : 'var(--border-subtle)'}`,
       borderRadius: 22,
       padding: '20px 18px 18px',
-      minHeight: 150,
+      minHeight: 160,
       display: 'flex',
       flexDirection: 'column',
       justifyContent: 'space-between',
       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)',
+      boxShadow: isOn ? `0 8px 32px -12px ${activeGlow}` : 'var(--shadow-sm)',
       position: 'relative',
       overflow: 'hidden',
+      opacity: isMock ? 0.88 : 1,
     }}>
-      {/* Subtle glow effect when on */}
+      {/* Subtle accent glow when on */}
       {isOn && (
         <div style={{
           position: 'absolute',
           top: -30,
           right: -30,
-          width: 100,
-          height: 100,
+          width: 120,
+          height: 120,
           borderRadius: '50%',
-          background: 'radial-gradient(circle, rgba(129,140,248,0.15) 0%, transparent 70%)',
+          background: `radial-gradient(circle, color-mix(in srgb, ${accent} 25%, transparent) 0%, transparent 70%)`,
           pointerEvents: 'none',
         }} />
       )}
@@ -112,36 +124,40 @@ export default function DeviceCard({
       {/* Top: icon + toggle */}
       <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', position: 'relative', zIndex: 1 }}>
         <div
-          className={isOn ? (id.includes('air_purifier') ? 'fan-spinning' : id.includes('light') ? 'light-on-pulse' : 'device-active-breathe') : ''}
+          className={isOn ? (kind === 'air_purifier' ? 'fan-spinning' : kind === 'light' ? 'light-on-pulse' : 'device-active-breathe') : ''}
           style={{
-            width: 48, height: 48, borderRadius: 16,
-            background: isOn ? 'rgba(255,255,255,0.1)' : 'rgba(255,255,255,0.05)',
+            width: 52, height: 52, borderRadius: 16,
+            background: isOn
+              ? `color-mix(in srgb, ${accent} 20%, var(--surface-2))`
+              : 'var(--surface-2)',
+            border: `1px solid ${isOn ? `color-mix(in srgb, ${accent} 35%, transparent)` : 'var(--border-subtle)'}`,
             display: 'flex', alignItems: 'center', justifyContent: 'center',
             transition: 'all 0.3s ease',
-            boxShadow: isOn ? '0 4px 16px rgba(0,0,0,0.1)' : 'none',
           }}>
-          {getDeviceIcon(id, isOn)}
+          {getDeviceIcon(kind, isOn)}
         </div>
 
+        {/* Toggle switch — 60x36, touch-friendly */}
         <button
           onClick={toggle}
-          disabled={loading}
+          disabled={loading || isMock}
+          aria-label={isOn ? `Выключить ${name}` : `Включить ${name}`}
           style={{
-            width: 54, height: 30, borderRadius: 15,
+            width: 60, height: 36, borderRadius: 18,
             background: isOn
-              ? 'linear-gradient(90deg, #6366f1, #8b5cf6)'
-              : 'rgba(255,255,255,0.08)',
-            position: 'relative', border: 'none', cursor: 'pointer',
+              ? `linear-gradient(90deg, ${accent}, color-mix(in srgb, ${accent} 70%, black))`
+              : 'var(--off-color)',
+            position: 'relative', border: 'none', cursor: isMock ? 'not-allowed' : 'pointer',
             flexShrink: 0,
             transition: 'all 0.3s ease',
             opacity: loading ? 0.6 : 1,
-            boxShadow: isOn ? '0 0 16px rgba(99,102,241,0.3)' : 'none',
+            boxShadow: isOn ? `0 0 18px -2px ${activeGlow}` : 'none',
           }}
         >
           <span style={{
             position: 'absolute', top: 4,
             left: isOn ? 28 : 4,
-            width: 22, height: 22, borderRadius: '50%',
+            width: 28, height: 28, borderRadius: '50%',
             background: '#fff',
             boxShadow: '0 2px 6px rgba(0,0,0,0.25)',
             transition: 'left 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
@@ -152,14 +168,14 @@ export default function DeviceCard({
 
       {/* Bottom: name + status */}
       <div style={{ position: 'relative', zIndex: 1 }}>
-        <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-primary)', lineHeight: 1.3 }}>
+        <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1.3 }}>
           {name}
         </div>
         <div style={{
           fontSize: 12,
-          color: isOn ? '#a5b4fc' : 'var(--text-secondary)',
+          color: isOn ? accent : 'var(--text-secondary)',
           marginTop: 4,
-          fontWeight: 500,
+          fontWeight: 600,
         }}>
           {isOn ? 'Включён' : 'Выключен'}
           {extraInfo && isOn ? ` · ${extraInfo}` : ''}
@@ -168,8 +184,10 @@ export default function DeviceCard({
           <div style={{
             fontSize: 10,
             color: 'var(--text-tertiary)',
-            marginTop: 2,
-            fontStyle: 'italic',
+            marginTop: 3,
+            fontWeight: 600,
+            textTransform: 'uppercase',
+            letterSpacing: '0.08em',
           }}>demo</div>
         )}
       </div>

components/FocusCard.tsx

@@ -0,0 +1,426 @@
+'use client'
+
+import { useEffect, useMemo, useState } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import {
+  Umbrella, Wind, ThermometerSun, TramFront, Calendar as CalendarIcon,
+  Receipt, Sparkles, Moon, Sun,
+} from 'lucide-react'
+
+// ——————————————————————————————
+// Types
+// ——————————————————————————————
+
+export interface FocusWeather {
+  temp: string
+  desc: string
+  feelsLike?: string
+}
+
+export interface FocusTram {
+  route: string
+  minutes: number
+  direction: string
+}
+
+export interface FocusEvent {
+  id: string
+  title: string
+  start: string
+  allDay?: boolean
+  ownerName?: string
+  color?: string
+}
+
+export interface FocusCountdown {
+  label: string
+  date: string // ISO YYYY-MM-DD
+}
+
+export interface FocusBill {
+  title: string
+  amount: string
+  daysLeft: number
+}
+
+interface Props {
+  weather: FocusWeather | null
+  tramNext?: FocusTram | null
+  nextEvent?: FocusEvent | null
+  countdowns?: FocusCountdown[]
+  bills?: FocusBill[]
+}
+
+// ——————————————————————————————
+// Focus state machine
+// ——————————————————————————————
+
+type FocusKind =
+  | { kind: 'morning-outfit'; tempNow: string; feels: string; advice: string; Icon: any; accent: string }
+  | { kind: 'tram-imminent'; route: string; minutes: number; direction: string }
+  | { kind: 'event-upcoming'; title: string; inMinutes: number; owner?: string; color?: string }
+  | { kind: 'countdown'; label: string; days: number }
+  | { kind: 'bill-due'; title: string; amount: string; daysLeft: number }
+  | { kind: 'night'; hour: number }
+  | { kind: 'quiet'; greeting: string }
+
+function pickFocus(p: Props, hour: number): FocusKind {
+  // 1. Bill due today / tomorrow — всегда приоритет
+  const bill = p.bills?.find(b => b.daysLeft <= 1)
+  if (bill) return { kind: 'bill-due', ...bill }
+
+  // 2. Ближайшее событие ≤30 минут
+  if (p.nextEvent && !p.nextEvent.allDay) {
+    const start = new Date(p.nextEvent.start).getTime()
+    const inMin = Math.round((start - Date.now()) / 60_000)
+    if (inMin >= -5 && inMin <= 30) {
+      return {
+        kind: 'event-upcoming',
+        title: p.nextEvent.title,
+        inMinutes: inMin,
+        owner: p.nextEvent.ownerName,
+        color: p.nextEvent.color,
+      }
+    }
+  }
+
+  // 3. Трамвай в рабочий час, ≤3 мин
+  const rushHour = (hour >= 7 && hour <= 10) || (hour >= 17 && hour <= 20)
+  if (rushHour && p.tramNext && p.tramNext.minutes >= 0 && p.tramNext.minutes <= 3) {
+    return { kind: 'tram-imminent', ...p.tramNext }
+  }
+
+  // 4. Утро (7-10) → одевалка
+  if (hour >= 7 && hour < 11 && p.weather) {
+    const t = parseInt(p.weather.temp, 10)
+    const descLower = p.weather.desc?.toLowerCase() || ''
+    const rain = /дожд|ливен|грозa|морос/.test(descLower)
+    const snow = /снег|метел/.test(descLower)
+    const advice =
+      rain ? 'возьми зонт' :
+      snow ? 'шапка и зимняя обувь' :
+      t <= -10 ? 'пуховик, шапка, перчатки' :
+      t < 0 ? 'шапка и перчатки' :
+      t < 7 ? 'тёплая куртка' :
+      t < 15 ? 'лёгкая куртка' :
+      t < 22 ? 'свитер или рубашка' : 'футболка'
+    const Icon = rain ? Umbrella : snow ? Wind : t < 0 ? Wind : ThermometerSun
+    const accent =
+      rain ? 'var(--data-cool)' :
+      snow ? 'var(--data-info)' :
+      t < 0 ? 'var(--data-info)' :
+      t >= 22 ? 'var(--data-warm)' : 'var(--data-warm)'
+    return {
+      kind: 'morning-outfit',
+      tempNow: p.weather.temp,
+      feels: p.weather.feelsLike || '',
+      advice, Icon, accent,
+    }
+  }
+
+  // 5. Ближайший countdown (≤14 дней)
+  const cd = (p.countdowns || [])
+    .map(c => {
+      const target = new Date(c.date + 'T00:00:00').getTime()
+      const days = Math.ceil((target - Date.now()) / 86_400_000)
+      return { label: c.label, days }
+    })
+    .filter(c => c.days >= 0 && c.days <= 14)
+    .sort((a, b) => a.days - b.days)[0]
+  if (cd) return { kind: 'countdown', ...cd }
+
+  // 6. Ночь
+  if (hour >= 22 || hour < 5) return { kind: 'night', hour }
+
+  // 7. Тихо — приветствие
+  const greeting =
+    hour >= 5 && hour < 12 ? 'Доброе утро' :
+    hour >= 12 && hour < 17 ? 'Добрый день' :
+    hour >= 17 && hour < 22 ? 'Добрый вечер' : 'Доброй ночи'
+  return { kind: 'quiet', greeting }
+}
+
+// ——————————————————————————————
+// Presentations
+// ——————————————————————————————
+
+function Eyebrow({ children }: { children: React.ReactNode }) {
+  return (
+    <div style={{
+      fontSize: 11, fontWeight: 700, letterSpacing: '0.14em',
+      textTransform: 'uppercase', color: 'var(--text-tertiary)',
+    }}>
+      {children}
+    </div>
+  )
+}
+
+function FocusShell({
+  eyebrow,
+  accent,
+  children,
+}: {
+  eyebrow: React.ReactNode
+  accent: string
+  children: React.ReactNode
+}) {
+  return (
+    <div
+      className="focus-card grain"
+      style={{
+        padding: '26px 28px',
+        display: 'flex', flexDirection: 'column',
+        minHeight: 220,
+        background: `linear-gradient(180deg, color-mix(in srgb, ${accent} 10%, var(--surface-1)), var(--surface-1))`,
+        border: `1px solid color-mix(in srgb, ${accent} 22%, var(--border-subtle))`,
+      }}
+    >
+      {/* Top eyebrow */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
+        {eyebrow}
+      </div>
+      {children}
+    </div>
+  )
+}
+
+// ——————————————————————————————
+// Individual states
+// ——————————————————————————————
+
+function MorningOutfit(f: Extract<FocusKind, { kind: 'morning-outfit' }>) {
+  return (
+    <FocusShell
+      accent={f.accent}
+      eyebrow={<>
+        <f.Icon size={16} color={f.accent} strokeWidth={2} />
+        <Eyebrow>Собираясь на улицу</Eyebrow>
+      </>}
+    >
+      <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 16 }}>
+        <div className="num-display" style={{ fontSize: 96, color: 'var(--text-primary)' }}>
+          {f.tempNow}°
+        </div>
+        {f.feels && (
+          <div style={{ fontSize: 15, color: 'var(--text-secondary)' }}>
+            ощущается <span className="num" style={{ fontWeight: 700, color: 'var(--text-primary)' }}>{f.feels}°</span>
+          </div>
+        )}
+      </div>
+      <div style={{
+        fontSize: 22, fontWeight: 700, color: 'var(--text-primary)',
+        letterSpacing: '-0.3px', lineHeight: 1.3,
+      }}>
+        {f.advice}
+      </div>
+    </FocusShell>
+  )
+}
+
+function TramImminent(f: Extract<FocusKind, { kind: 'tram-imminent' }>) {
+  const accent = 'var(--data-hot)'
+  return (
+    <FocusShell
+      accent={accent}
+      eyebrow={<>
+        <TramFront size={16} color={accent} strokeWidth={2} />
+        <Eyebrow>Трамвай подходит</Eyebrow>
+      </>}
+    >
+      <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 14 }}>
+        <div className="num-display" style={{ fontSize: 96, color: accent }}>
+          {f.minutes <= 0 ? 'сейчас' : f.minutes}
+        </div>
+        {f.minutes > 0 && (
+          <div style={{ fontSize: 24, fontWeight: 600, color: 'var(--text-secondary)' }}>мин</div>
+        )}
+      </div>
+      <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--text-primary)' }}>
+        Маршрут {f.route} · {f.direction}
+      </div>
+    </FocusShell>
+  )
+}
+
+function EventUpcoming(f: Extract<FocusKind, { kind: 'event-upcoming' }>) {
+  const accent = f.color || 'var(--accent)'
+  const timeWord = f.inMinutes < 0 ? 'сейчас' : f.inMinutes === 0 ? 'сейчас' : `через ${f.inMinutes}м`
+  return (
+    <FocusShell
+      accent={accent}
+      eyebrow={<>
+        <CalendarIcon size={16} color={accent} strokeWidth={2} />
+        <Eyebrow>{timeWord}</Eyebrow>
+      </>}
+    >
+      <div style={{
+        fontSize: 32, fontWeight: 800, color: 'var(--text-primary)',
+        letterSpacing: '-0.8px', lineHeight: 1.15, marginBottom: 14,
+      }}>
+        {f.title}
+      </div>
+      {f.owner && (
+        <div style={{
+          display: 'inline-flex', alignItems: 'center', gap: 8,
+          padding: '6px 12px', borderRadius: 14,
+          background: `color-mix(in srgb, ${accent} 16%, var(--surface-2))`,
+          border: `1px solid color-mix(in srgb, ${accent} 28%, var(--border-subtle))`,
+          color: accent, fontSize: 13, fontWeight: 700, alignSelf: 'flex-start',
+        }}>
+          {f.owner}
+        </div>
+      )}
+    </FocusShell>
+  )
+}
+
+function CountdownView(f: Extract<FocusKind, { kind: 'countdown' }>) {
+  const accent = f.days <= 3 ? 'var(--data-hot)' : f.days <= 7 ? 'var(--data-warm)' : 'var(--data-violet)'
+  const word =
+    f.days === 0 ? 'сегодня' :
+    f.days === 1 ? 'завтра' :
+    f.days < 5 ? `${f.days} дня` : `${f.days} дней`
+  return (
+    <FocusShell
+      accent={accent}
+      eyebrow={<>
+        <Sparkles size={16} color={accent} strokeWidth={2} />
+        <Eyebrow>До события</Eyebrow>
+      </>}
+    >
+      <div className="num-display" style={{
+        fontSize: f.days === 0 ? 56 : 96,
+        color: 'var(--text-primary)', marginBottom: 12,
+      }}>
+        {f.days === 0 ? 'сегодня' : f.days}
+        {f.days > 0 && <span style={{ fontSize: 24, fontWeight: 600, color: 'var(--text-secondary)', marginLeft: 10, letterSpacing: 0 }}>
+          {f.days < 5 ? 'дня' : 'дней'}
+        </span>}
+      </div>
+      <div style={{ fontSize: 20, fontWeight: 700, color: 'var(--text-primary)' }}>
+        {f.label}
+      </div>
+    </FocusShell>
+  )
+}
+
+function BillDue(f: Extract<FocusKind, { kind: 'bill-due' }>) {
+  const accent = 'var(--data-danger)'
+  const word = f.daysLeft === 0 ? 'сегодня' : f.daysLeft === 1 ? 'завтра' : `через ${f.daysLeft}д`
+  return (
+    <FocusShell
+      accent={accent}
+      eyebrow={<>
+        <Receipt size={16} color={accent} strokeWidth={2} />
+        <Eyebrow>К оплате {word}</Eyebrow>
+      </>}
+    >
+      <div className="num-display" style={{
+        fontSize: 72, color: accent, marginBottom: 8, letterSpacing: '-0.03em',
+      }}>
+        {f.amount}
+      </div>
+      <div style={{ fontSize: 20, fontWeight: 700, color: 'var(--text-primary)' }}>
+        {f.title}
+      </div>
+    </FocusShell>
+  )
+}
+
+function NightView() {
+  const accent = 'var(--data-violet)'
+  return (
+    <FocusShell
+      accent={accent}
+      eyebrow={<>
+        <Moon size={16} color={accent} strokeWidth={2} />
+        <Eyebrow>Тихое время</Eyebrow>
+      </>}
+    >
+      <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', flex: 1, gap: 8 }}>
+        <div style={{ fontSize: 28, fontWeight: 800, color: 'var(--text-primary)', letterSpacing: '-0.5px' }}>
+          Спокойной ночи
+        </div>
+        <div style={{ fontSize: 14, color: 'var(--text-secondary)', lineHeight: 1.5 }}>
+          Дом в режиме ожидания. Касание — разблокировать.
+        </div>
+      </div>
+    </FocusShell>
+  )
+}
+
+function QuietView({ greeting, weather }: { greeting: string; weather: FocusWeather | null }) {
+  const accent = 'var(--accent)'
+  const [now, setNow] = useState(() => new Date())
+  useEffect(() => {
+    const t = setInterval(() => setNow(new Date()), 30_000)
+    return () => clearInterval(t)
+  }, [])
+  return (
+    <FocusShell
+      accent={accent}
+      eyebrow={<>
+        <Sun size={16} color={accent} strokeWidth={2} />
+        <Eyebrow>{now.toLocaleDateString('ru-RU', { weekday: 'long', day: 'numeric', month: 'long' })}</Eyebrow>
+      </>}
+    >
+      <div style={{ fontSize: 32, fontWeight: 800, color: 'var(--text-primary)', letterSpacing: '-0.5px', marginBottom: 12 }}>
+        {greeting}
+      </div>
+      {weather && (
+        <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
+          <div className="num-display" style={{ fontSize: 56, color: 'var(--text-primary)' }}>
+            {weather.temp}°
+          </div>
+          <div style={{ fontSize: 15, color: 'var(--text-secondary)', fontWeight: 500 }}>
+            {weather.desc}
+          </div>
+        </div>
+      )}
+    </FocusShell>
+  )
+}
+
+// ——————————————————————————————
+// Root
+// ——————————————————————————————
+
+export default function FocusCard(props: Props) {
+  const [hour, setHour] = useState(() => new Date().getHours())
+  useEffect(() => {
+    const t = setInterval(() => setHour(new Date().getHours()), 60_000)
+    return () => clearInterval(t)
+  }, [])
+
+  const focus = useMemo(() => pickFocus(props, hour), [props, hour])
+
+  const key = focus.kind + (
+    focus.kind === 'morning-outfit' ? focus.advice :
+    focus.kind === 'tram-imminent' ? `${focus.route}-${focus.minutes}` :
+    focus.kind === 'event-upcoming' ? focus.title :
+    focus.kind === 'countdown' ? focus.label :
+    focus.kind === 'bill-due' ? focus.title :
+    focus.kind === 'quiet' ? focus.greeting : ''
+  )
+
+  return (
+    <AnimatePresence mode="wait">
+      <motion.div
+        key={key}
+        initial={{ opacity: 0, y: 8 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: -8 }}
+        transition={{ duration: 0.35, ease: [0.4, 0, 0.2, 1] }}
+        style={{ display: 'flex', flexDirection: 'column', height: '100%' }}
+      >
+        {focus.kind === 'morning-outfit' && <MorningOutfit {...focus} />}
+        {focus.kind === 'tram-imminent' && <TramImminent {...focus} />}
+        {focus.kind === 'event-upcoming' && <EventUpcoming {...focus} />}
+        {focus.kind === 'countdown' && <CountdownView {...focus} />}
+        {focus.kind === 'bill-due' && <BillDue {...focus} />}
+        {focus.kind === 'night' && <NightView />}
+        {focus.kind === 'quiet' && <QuietView greeting={focus.greeting} weather={props.weather} />}
+      </motion.div>
+    </AnimatePresence>
+  )
+}

components/NotesTab.tsx

@@ -21,7 +21,11 @@ interface Note {
   updatedAt: string
 }
 
-const NOTE_COLORS = ['#6366f1', '#ec4899', '#10b981', '#f59e0b', '#3b82f6', '#8b5cf6']
+// NOTE: заметки сохраняют свой цвет на всё время жизни —
+// храним hex, но генерим их из theme-aware CSS-переменных через computed style.
+// Для совместимости с существующими заметками оставляем hex-палитру,
+// но подобранную под новые data-токены (dark theme).
+const NOTE_COLORS = ['#818cf8', '#f472b6', '#34d399', '#fbbf24', '#38bdf8', '#a78bfa']
 
 export default function NotesTab() {
   const [notes, setNotes] = useState<Note[]>([])
@@ -104,14 +108,21 @@ export default function NotesTab() {
       <div style={{ width: 260, flexShrink: 0, display: 'flex', flexDirection: 'column', gap: 10, overflowY: 'auto' }}>
         <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
           <h2 style={{ fontSize: 20, fontWeight: 700, color: 'var(--text-primary)', margin: 0 }}>Заметки</h2>
-          <button onClick={() => setShowCreate(v => !v)} style={{
-            width: 36, height: 36, borderRadius: 12,
-            background: showCreate ? 'rgba(255,255,255,0.06)' : 'linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.15))',
-            border: showCreate ? '1px solid rgba(255,255,255,0.08)' : '1px solid rgba(129,140,248,0.25)',
-            display: 'flex', alignItems: 'center', justifyContent: 'center',
-            color: showCreate ? 'var(--text-secondary)' : '#a5b4fc',
-          }}>
-            {showCreate ? <X size={16} /> : <Plus size={16} />}
+          <button
+            onClick={() => setShowCreate(v => !v)}
+            aria-label={showCreate ? 'Отмена' : 'Создать заметку'}
+            style={{
+              width: 44, height: 44, borderRadius: 14,
+              background: showCreate
+                ? 'var(--surface-2)'
+                : 'color-mix(in srgb, var(--accent) 16%, var(--surface-2))',
+              border: showCreate
+                ? '1px solid var(--border-subtle)'
+                : '1px solid color-mix(in srgb, var(--accent) 30%, var(--border-subtle))',
+              display: 'flex', alignItems: 'center', justifyContent: 'center',
+              color: showCreate ? 'var(--text-secondary)' : 'var(--accent)',
+            }}>
+            {showCreate ? <X size={18} /> : <Plus size={18} />}
           </button>
         </div>
 
@@ -148,6 +159,7 @@ export default function NotesTab() {
             <motion.div
               key={note.id}
               layout
+              data-swipe-ignore
               style={{ position: 'relative', borderRadius: 16, overflow: 'hidden' }}
             >
               {/* Delete reveal layer */}
@@ -260,13 +272,16 @@ export default function NotesTab() {
                     fontFamily: 'inherit', flex: 1, minWidth: 0,
                   }}
                 />
-                <button onClick={() => setConfirmDelete(activeNote)} style={{
-                  width: 32, height: 32, borderRadius: 10,
-                  background: 'rgba(239,68,68,0.08)',
-                  display: 'flex', alignItems: 'center', justifyContent: 'center',
-                  color: '#f87171', flexShrink: 0,
-                }}>
-                  <Trash2 size={15} />
+                <button
+                  onClick={() => setConfirmDelete(activeNote)}
+                  aria-label="Удалить заметку"
+                  style={{
+                    width: 44, height: 44, borderRadius: 12,
+                    background: 'var(--data-danger-bg)',
+                    display: 'flex', alignItems: 'center', justifyContent: 'center',
+                    color: 'var(--data-danger)', flexShrink: 0,
+                  }}>
+                  <Trash2 size={18} />
                 </button>
               </div>
               <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
@@ -414,6 +429,7 @@ export default function NotesTab() {
       {confirmDelete && (
         <div
           onClick={() => setConfirmDelete(null)}
+          data-swipe-ignore
           style={{
             position: 'fixed', inset: 0, zIndex: 100,
             background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(12px)',

components/TimerHomeWidget.tsx

@@ -125,15 +125,15 @@ export default function TimerHomeWidget() {
             onClick={() => setModal({ type: 'create' })}
             aria-label="Новый таймер"
             style={{
-              width: 32, height: 32, borderRadius: 10,
-              background: 'color-mix(in srgb, #818cf8 12%, var(--surface-2))',
-              border: '1px solid color-mix(in srgb, #818cf8 30%, var(--border-subtle))',
-              color: '#a5b4fc',
+              width: 44, height: 44, borderRadius: 14,
+              background: 'color-mix(in srgb, var(--accent) 14%, var(--surface-2))',
+              border: '1px solid color-mix(in srgb, var(--accent) 30%, var(--border-subtle))',
+              color: 'var(--accent)',
               display: 'flex', alignItems: 'center', justifyContent: 'center',
               cursor: 'pointer',
             }}
           >
-            <Plus size={15} />
+            <Plus size={18} />
           </button>
         </div>
 

components/TimerModal.tsx

@@ -69,6 +69,7 @@ export default function TimerModal({ mode, onClose }: TimerModalProps) {
           exit={{ opacity: 0 }}
           transition={{ duration: 0.2 }}
           onClick={onClose}
+          data-swipe-ignore
           style={{
             position: 'fixed', inset: 0, zIndex: 250,
             background: 'rgba(5, 5, 15, 0.72)',

components/TopBar.tsx

@@ -86,32 +86,41 @@ export default function TopBar({ sensors, haConnected }: TopBarProps) {
         </div>
 
         {/* Right: sensors + weather */}
-        <div style={{ display: 'flex', alignItems: 'center', gap: 6, justifySelf: 'end' }}>
-          {/* HA status */}
-          <div title={haConnected ? 'Home Assistant подключён' : 'Home Assistant недоступен'} style={{
-            width: 10, height: 10, borderRadius: '50%',
-            background: haConnected ? '#34d399' : '#f87171',
-            boxShadow: haConnected ? '0 0 8px rgba(52,211,153,0.5)' : '0 0 8px rgba(248,113,113,0.5)',
-            transition: 'all 0.5s ease',
-            flexShrink: 0,
-          }} />
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, justifySelf: 'end' }}>
+          {/* HA status — 44px hit-zone wrapping 14px dot */}
+          <div
+            title={haConnected ? 'Home Assistant подключён' : 'Home Assistant недоступен'}
+            className="hit-zone"
+            style={{ width: 44, height: 44 }}
+          >
+            <div style={{
+              width: 14, height: 14, borderRadius: '50%',
+              background: haConnected ? 'var(--data-good)' : 'var(--data-danger)',
+              boxShadow: haConnected
+                ? '0 0 10px color-mix(in srgb, var(--data-good) 55%, transparent)'
+                : '0 0 10px color-mix(in srgb, var(--data-danger) 55%, transparent)',
+              transition: 'all 0.5s ease',
+              flexShrink: 0,
+            }} />
+          </div>
 
           {sensors && (
             <div style={{
-              display: 'flex', alignItems: 'center', gap: 4,
-              padding: '8px 14px', borderRadius: 14,
+              display: 'flex', alignItems: 'center', gap: 6,
+              padding: '10px 16px', borderRadius: 16,
+              minHeight: 44,
               background: 'var(--surface-2)', border: '1px solid var(--border-subtle)',
             }}>
-              <Thermometer size={14} color="var(--text-tertiary)" />
-              <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', marginRight: 8 }}>
+              <Thermometer size={18} color="var(--data-hot)" strokeWidth={1.8} />
+              <span className="num" style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-primary)', marginRight: 10 }}>
                 {sensors.temperature}°
               </span>
-              <Droplets size={14} color="var(--text-tertiary)" />
-              <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', marginRight: 8 }}>
+              <Droplets size={18} color="var(--data-cool)" strokeWidth={1.8} />
+              <span className="num" style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-primary)', marginRight: 10 }}>
                 {sensors.humidity}%
               </span>
-              <Wind size={14} color="var(--text-tertiary)" />
-              <span style={{ fontSize: 13, color: 'var(--text-secondary)' }}>
+              <Wind size={18} color="var(--text-tertiary)" strokeWidth={1.8} />
+              <span className="num" style={{ fontSize: 14, color: 'var(--text-secondary)' }}>
                 {sensors.pm25}
               </span>
             </div>

components/TransportWidget.tsx

@@ -21,10 +21,12 @@ const DIRECTIONS: Direction[] = [
   { stopId: '16354', short: 'Дыбенко', sub: 'от центра' },
 ]
 
+// Маршрут-специфичные цвета — соответствуют реальной окраске маршрутов
+// (но в правильной семантике: good=23, info=27, danger=39)
 const ROUTES: { num: string; color: string; bg: string }[] = [
-  { num: '23', color: '#10b981', bg: 'linear-gradient(135deg, #10b981, #059669)' },
-  { num: '27', color: '#3b82f6', bg: 'linear-gradient(135deg, #3b82f6, #2563eb)' },
-  { num: '39', color: '#ef4444', bg: 'linear-gradient(135deg, #ef4444, #dc2626)' },
+  { num: '23', color: 'var(--data-good)',   bg: 'linear-gradient(135deg, var(--data-good), color-mix(in srgb, var(--data-good) 75%, black))' },
+  { num: '27', color: 'var(--data-info)',   bg: 'linear-gradient(135deg, var(--data-info), color-mix(in srgb, var(--data-info) 75%, black))' },
+  { num: '39', color: 'var(--data-danger)', bg: 'linear-gradient(135deg, var(--data-danger), color-mix(in srgb, var(--data-danger) 75%, black))' },
 ]
 
 function Cell({ arrivals, color }: { arrivals: Arrival[]; color: string }) {
@@ -189,7 +191,7 @@ export default function TransportWidget() {
           }}>
             <div style={{
               background: route.bg,
-              boxShadow: `0 6px 16px -4px ${route.color}55`,
+              boxShadow: `0 6px 16px -4px color-mix(in srgb, ${route.color} 35%, transparent)`,
               borderRadius: 12,
               display: 'flex', alignItems: 'center', justifyContent: 'center',
               color: 'white', fontWeight: 800, fontSize: 20,

components/VoiceOverlay.tsx

@@ -191,6 +191,7 @@ export default function VoiceOverlay() {
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
           transition={{ duration: 0.35 }}
+          data-swipe-ignore
           style={{
             position: 'fixed', inset: 0, zIndex: 300,
             background: 'rgba(5, 5, 15, 0.82)',