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>

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