chore(release): v0.7.1

docs(release): note rollback to last good design
Revert "feat(ui): redesign desktop experience"
2026-06-09 01:00:35 +07:00 · 2026-06-09 00:58:59 +07:00 · 2026-06-09 00:56:40 +07:00
28 changed files with 461 additions and 468 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,23 +6,15 @@

 ## [Unreleased]

-## [0.7.0] — 2026-06-08
-
-### Added
-
- Текущая версия `v0.6.6` сохранена отдельным тегом `последнее-удачное`
-  как точка отката перед большим редизайном.
+## [0.7.1] — 2026-06-09

 ### Changed

- Интерфейс приложения пересобран в новом desktop-направлении: темный сайдбар,
-  плотный рабочий контент, нейтральная палитра, чёткие панели и радиусы 8–10px.
- Главный экран стал операционным overview: верхняя панель состояния, компактные
-  status tiles, план ближайшего шага, цели, питание, режим и игровые долги.
- Страницы упражнений, питания, игр, челленджей и настроек получили единый
-  desktop-контейнер, более плотные списки и менее декоративные summary-блоки.
- Редакторы, модальные окна, кнопки, переключатели, heatmap, достижения и окно
-  напоминания приведены к новой desktop-системе.
+- Полный редизайн `v0.7.0` откачен: интерфейс возвращен к сохраненной
+  версии `последнее-удачное` / `v0.6.6`, потому что новое направление не
+  подошло.
+- `v0.7.1` публикуется как обычное обновление, чтобы пользователи на `v0.7.0`
+  автоматически получили возврат к последнему удачному внешнему виду.

 ## [0.6.6] — 2026-06-08

@@ -188,7 +180,7 @@ clearHistory/import`, Dashboard на него подписан.
 ### Fixed (P1 — UX просадки)

 - **Удаление упражнения теперь спрашивает подтверждение.** Раньше
-  один клик в menu «Удалить» сразу удалял. Сейчас ConfirmModal
+  один клик в menu «Удалить» сразу удалял. Сейчас iOS-style ConfirmModal
  с destructive-кнопкой.
 - **Daily goal закрыт — больше не «25 часов 13 минут».** Когда дневная
  цель достигнута, ExerciseCard показывает «Цель закрыта · 100/100»
@@ -197,7 +189,7 @@ clearHistory/import`, Dashboard на него подписан.
  молча — пользователь не понимал почему через 12 мин ничего не пришло.
  Сейчас info-баннер активной встречи с указанием закрыть
  Zoom/Teams/etc.
- **Native `window.confirm()` → ConfirmModal** в restore-операции.
+- **Native `window.confirm()` → iOS-style ConfirmModal** в restore-операции.
  Раньше всплывал серый системный диалог.

 ### Fixed (P2 — полировка)
@@ -223,7 +215,7 @@ clearHistory/import`, Dashboard на него подписан.
 ### Added

 - `src/renderer/src/components/ui/ConfirmModal.tsx` — переиспользуемый
-  confirm с focus-trap'ом через Modal.
+  iOS-style confirm с focus-trap'ом через Modal.
 - IPC `markChallengeDone(challengeId, reps)` — handler в main, метод в
  preload (раньше канал был в IPC enum, handler не зарегистрирован).
 - IPC `getMeetingActive` + event `evtMeetingChanged` — meeting-detect
@@ -550,9 +542,9 @@ days=[Mon..Fri]` теперь правильно проверяется день

 ## [0.3.x] — 2026-05-17

-Серия мелких релизов с ранними дизайн-итерациями:
+Серия мелких релизов с дизайн-итерациями (Apple iOS / macOS aesthetic):
 шрифты Plus Jakarta Sans + Bricolage Grotesque, светлая/тёмная/системная
-тема, полупрозрачный сайдбар, grouped lists, spring-анимации.
+тема, vibrancy sidebar, iOS-grouped lists, spring-анимации.

 ## [0.2.0] — 2026-05-16

@@ -568,8 +560,8 @@ days=[Mon..Fri]` теперь правильно проверяется день
 иконки), системный трей, автозапуск с Windows, native-уведомления,
 NSIS-инсталлятор, auto-update через electron-updater.

-[Unreleased]: https://git.xn--90adajar8af4h.xn--p1ai/AnRil/laude/compare/v0.7.0...HEAD
-[0.7.0]: https://git.xn--90adajar8af4h.xn--p1ai/AnRil/laude/compare/v0.6.6...v0.7.0
+[Unreleased]: https://git.xn--90adajar8af4h.xn--p1ai/AnRil/laude/compare/v0.7.1...HEAD
+[0.7.1]: https://git.xn--90adajar8af4h.xn--p1ai/AnRil/laude/compare/v0.7.0...v0.7.1
 [0.6.6]: https://git.xn--90adajar8af4h.xn--p1ai/AnRil/laude/compare/v0.6.5...v0.6.6
 [0.6.5]: https://git.xn--90adajar8af4h.xn--p1ai/AnRil/laude/compare/v0.6.4...v0.6.5
 [0.6.4]: https://git.xn--90adajar8af4h.xn--p1ai/AnRil/laude/compare/v0.6.3...v0.6.4
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@

 Windows desktop приложение, которое помогает делать короткие перерывы без потери фокуса: держит план дня, напоминает размяться, ведёт недельные челленджи и превращает Dota 2 статистику после матча в игровые долги.

-[![release](https://img.shields.io/badge/release-v0.7.0-orange)](https://git.xn--90adajar8af4h.xn--p1ai/AnRil/laude/releases/latest)
+[![release](https://img.shields.io/badge/release-v0.7.1-orange)](https://git.xn--90adajar8af4h.xn--p1ai/AnRil/laude/releases/latest)
 [![tests](https://img.shields.io/badge/tests-245%20passing-green)]()
 [![platform](https://img.shields.io/badge/platform-Windows%2010%2F11-blue)]()

@@ -15,7 +15,7 @@ Windows desktop приложение, которое помогает делат
 - **Тихие часы** — окно времени когда напоминания подавляются (например `22:00 → 08:00`), с выбором дней недели.
 - **Сделал частично** — степпер `−/+` в окне напоминания: если ты сделал 5 из 10, в историю запишется честное число.
 - **Игровая интеграция (Dota 2)** — Game State Integration читает статистику матча, после Победа/Поражение показывает экран с «причитающимися» повторениями (например `10 смертей × 3 = 30 приседаний`).
- **Desktop-интерфейс** — темный сайдбар, плотные рабочие панели, чёткие строки списков, светлая/тёмная/системная тема.
+- **Фирменный desktop-интерфейс** — Plus Jakarta Sans + Bricolage Grotesque, мягкая палитра, sidebar, spring-анимации, светлая/тёмная/системная тема.
 - **Два языка** — русский и английский, переключение мгновенное.
 - **Auto-update** — приложение само скачивает новые версии из фиксированного `update-channel` (проверка каждый час, силент-ретрай при сетевых сбоях).

--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "laude",
-  "version": "0.7.0",
+  "version": "0.7.1",
  "description": "Разомнись — Windows desktop break and exercise reminder",
  "main": "out/main/index.js",
  "author": "AnRil",
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -89,14 +89,14 @@ export default function App(): JSX.Element {
  return (
    <ErrorBoundary>
      <HashRouter>
-        <div className="h-screen w-screen flex flex-col app-shell bg-bg">
+        <div className="h-screen w-screen flex flex-col bg-bg">
          <Titlebar onMenuClick={() => setCompactNavOpen(true)} />
          <div className="flex-1 flex overflow-hidden">
            <Sidebar
              compactOpen={compactNavOpen}
              onCompactClose={() => setCompactNavOpen(false)}
            />
-            <main className="flex-1 overflow-hidden min-w-0 app-main-surface">
+            <main className="flex-1 overflow-hidden min-w-0">
              {hydrated ? (
                <ErrorBoundary>
                  <RoutedPages onNav={() => setCompactNavOpen(false)} />
--- a/src/renderer/src/ReminderApp.tsx
+++ b/src/renderer/src/ReminderApp.tsx
@@ -226,16 +226,18 @@ export default function ReminderApp(): JSX.Element {
          void window.api.markChallengeDone(id, result.reps)
        }
        // 2) Functional update: rapid-click race-safe.
-        setMode((m) => {
-          if (m.kind !== 'match') return m
-          const nextMode: Mode = {
-            kind: 'match',
-            summary: m.summary,
-            done: new Set([...m.done, id])
+        setMode((m) =>
+          {
+            if (m.kind !== 'match') return m
+            const nextMode: Mode = {
+                kind: 'match',
+                summary: m.summary,
+                done: new Set([...m.done, id])
+              }
+            modeRef.current = nextMode
+            return nextMode
          }
-          modeRef.current = nextMode
-          return nextMode
-        })
+        )
      }}
      onClose={close}
    />
@@ -328,7 +330,7 @@ function ExerciseReminder({
          transition={{ type: 'spring', stiffness: 300, damping: 24 }}
          className="relative mb-6"
        >
-          <div className="w-20 h-20 rounded-xl bg-accent text-white grid place-items-center shadow-[0_12px_36px_-24px_rgb(var(--accent)/0.75)]">
+          <div className="w-24 h-24 rounded-full bg-accent text-white grid place-items-center shadow-[0_8px_30px_-8px_rgb(var(--accent)/0.5)]">
            <Icon name={exercise.icon} size={44} strokeWidth={2} />
          </div>
        </motion.div>
@@ -336,7 +338,7 @@ function ExerciseReminder({
        <div className="text-[13px] uppercase tracking-[0.18em] text-accent font-bold">
          {t(`category.${exercise.category ?? 'exercise'}.cta`)}
        </div>
-        <h1 className="font-display text-[30px] leading-tight mt-2 mb-3 font-bold">
+        <h1 className="font-serif text-[30px] leading-tight tracking-tight mt-2 mb-3 font-bold">
          {exercise.name}
        </h1>

@@ -344,7 +346,7 @@ function ExerciseReminder({
        <div className="inline-flex items-center gap-3 select-none">
          <button
            onClick={dec}
-            className="w-9 h-9 grid place-items-center rounded-lg bg-surface-2 text-text/65 hover:text-text hover:bg-hairline/25 active:scale-95 transition-all"
+            className="w-9 h-9 grid place-items-center rounded-full bg-surface-2 text-text/65 hover:text-text hover:bg-hairline/25 active:scale-90 transition-all"
            aria-label={t('reminder.aria.decrement')}
          >
            <Minus size={16} strokeWidth={2.5} />
@@ -352,7 +354,7 @@ function ExerciseReminder({
          <div className="inline-flex items-baseline gap-2 font-mono-num min-w-[120px] justify-center">
            <span
              className={[
-                'text-[54px] font-semibold leading-none',
+                'text-[56px] font-semibold tracking-tight leading-none',
                adjusted ? 'text-accent' : 'text-text'
              ].join(' ')}
            >
@@ -364,7 +366,7 @@ function ExerciseReminder({
          </div>
          <button
            onClick={inc}
-            className="w-9 h-9 grid place-items-center rounded-lg bg-surface-2 text-text/65 hover:text-text hover:bg-hairline/25 active:scale-95 transition-all"
+            className="w-9 h-9 grid place-items-center rounded-full bg-surface-2 text-text/65 hover:text-text hover:bg-hairline/25 active:scale-90 transition-all"
            aria-label={t('reminder.aria.increment')}
          >
            <Plus size={16} strokeWidth={2.5} />
@@ -390,21 +392,21 @@ function ExerciseReminder({
      <div className="px-4 pb-4 space-y-2">
        <button
          onClick={done}
-          className="w-full h-11 rounded-lg bg-accent text-white text-[15px] font-bold inline-flex items-center justify-center gap-1.5 active:translate-y-px transition-transform"
+          className="w-full h-12 rounded-2xl bg-accent text-white text-[16px] font-bold inline-flex items-center justify-center gap-1.5 active:scale-[0.98] transition-transform"
        >
          <Check size={17} strokeWidth={2.5} /> {t('reminder.btn.done')}
        </button>
        <div className="grid grid-cols-2 gap-2">
          <button
            onClick={snooze}
-            className="h-10 rounded-lg bg-surface-2 text-text text-[14px] font-semibold inline-flex items-center justify-center gap-1.5 active:translate-y-px transition-transform"
+            className="h-11 rounded-2xl bg-surface-2 text-text text-[15px] font-semibold inline-flex items-center justify-center gap-1.5 active:scale-[0.98] transition-transform"
          >
            <Clock size={15} strokeWidth={2.5} />{' '}
            {t('btn.snooze_min', { n: snoozeMinutes })}
          </button>
          <button
            onClick={skip}
-            className="h-10 rounded-lg bg-surface-2 text-text/65 text-[14px] font-semibold inline-flex items-center justify-center gap-1.5 active:translate-y-px transition-transform"
+            className="h-11 rounded-2xl bg-surface-2 text-text/65 text-[15px] font-semibold inline-flex items-center justify-center gap-1.5 active:scale-[0.98] transition-transform"
          >
            {t('btn.skip')}
          </button>
@@ -450,10 +452,7 @@ function MealReminder({
      } else if (e.key === 'Escape') {
        e.preventDefault()
        onClose()
-      } else if (
-        (e.key === ' ' || e.code === 'Space') &&
-        targetTag !== 'BUTTON'
-      ) {
+      } else if ((e.key === ' ' || e.code === 'Space') && targetTag !== 'BUTTON') {
        e.preventDefault()
        void snooze()
      }
@@ -482,7 +481,7 @@ function MealReminder({
          transition={{ type: 'spring', stiffness: 300, damping: 24 }}
          className="relative mb-6"
        >
-          <div className="w-20 h-20 rounded-xl bg-success text-white grid place-items-center shadow-[0_12px_36px_-24px_rgb(var(--success)/0.75)]">
+          <div className="w-24 h-24 rounded-full bg-success text-white grid place-items-center shadow-[0_8px_30px_-8px_rgb(var(--success)/0.5)]">
            <Icon name={meal.icon} size={44} strokeWidth={2} />
          </div>
        </motion.div>
@@ -490,7 +489,7 @@ function MealReminder({
        <div className="text-[13px] uppercase tracking-[0.18em] text-success font-bold">
          {t('meal.cta')}
        </div>
-        <h1 className="font-display text-[30px] leading-tight mt-2 mb-3 font-bold">
+        <h1 className="font-serif text-[30px] leading-tight tracking-tight mt-2 mb-3 font-bold">
          {meal.name}
        </h1>
        <div className="text-[13px] text-text/65 mt-1 inline-flex items-center gap-1.5 font-medium font-mono-num">
@@ -501,13 +500,13 @@ function MealReminder({
      <div className="px-4 pb-4 space-y-2">
        <button
          onClick={done}
-          className="w-full h-11 rounded-lg bg-success text-white text-[15px] font-bold inline-flex items-center justify-center gap-1.5 active:translate-y-px transition-transform"
+          className="w-full h-12 rounded-2xl bg-success text-white text-[16px] font-bold inline-flex items-center justify-center gap-1.5 active:scale-[0.98] transition-transform"
        >
          <Check size={17} strokeWidth={2.5} /> {t('meal.btn.ate')}
        </button>
        <button
          onClick={snooze}
-          className="w-full h-10 rounded-lg bg-surface-2 text-text text-[14px] font-semibold inline-flex items-center justify-center gap-1.5 active:translate-y-px transition-transform"
+          className="w-full h-11 rounded-2xl bg-surface-2 text-text text-[15px] font-semibold inline-flex items-center justify-center gap-1.5 active:scale-[0.98] transition-transform"
        >
          <Clock size={15} strokeWidth={2.5} />{' '}
          {t('btn.snooze_min', { n: snoozeMinutes })}
@@ -568,7 +567,7 @@ function MatchSummaryView({
          animate={{ scale: 1, opacity: 1 }}
          transition={{ type: 'spring', stiffness: 280, damping: 22 }}
          className={[
-            'inline-flex items-center justify-center w-12 h-12 rounded-xl mb-3 text-white',
+            'inline-flex items-center justify-center w-14 h-14 rounded-2xl mb-3 text-white',
            won ? 'bg-success' : lost ? 'bg-destructive' : 'bg-accent'
          ].join(' ')}
        >
@@ -580,7 +579,7 @@ function MatchSummaryView({
            <Gamepad2 size={26} strokeWidth={2} />
          )}
        </motion.div>
-        <h1 className="font-display text-[25px] font-bold">
+        <h1 className="font-serif text-[26px] tracking-tight font-bold">
          {won
            ? t('match.title.won')
            : lost
@@ -627,7 +626,7 @@ function MatchSummaryView({
        <button
          onClick={onClose}
          className={[
-            'h-10 px-4 rounded-lg text-white text-[14px] font-semibold inline-flex items-center gap-1.5 active:translate-y-px transition-all',
+            'h-11 px-5 rounded-2xl text-white text-[14px] font-semibold inline-flex items-center gap-1.5 active:scale-[0.98] transition-all',
            allDone ? 'bg-success' : 'bg-accent'
          ].join(' ')}
        >
@@ -662,13 +661,13 @@ function ChallengeRow({
      initial={{ opacity: 0, x: -8 }}
      animate={{ opacity: 1, x: 0 }}
      className={[
-        'flex items-center gap-3 rounded-lg p-3 transition-colors',
+        'flex items-center gap-3 rounded-2xl p-3 transition-colors',
        done ? 'bg-success/10' : 'bg-surface-2'
      ].join(' ')}
    >
      <div
        className={[
-          'w-9 h-9 rounded-lg grid place-items-center shrink-0',
+          'w-10 h-10 rounded-xl grid place-items-center shrink-0',
          done ? 'bg-success text-white' : 'bg-accent text-white'
        ].join(' ')}
      >
@@ -692,7 +691,7 @@ function ChallengeRow({
      </div>
      <div
        className={[
-          'font-mono-num text-[20px] font-semibold',
+          'font-mono-num text-[20px] font-semibold tracking-tight',
          done ? 'text-success' : 'text-accent'
        ].join(' ')}
      >
@@ -702,7 +701,7 @@ function ChallengeRow({
        onClick={onMarkDone}
        disabled={done}
        className={[
-          'h-9 w-9 grid place-items-center rounded-lg transition-all',
+          'h-9 w-9 grid place-items-center rounded-full transition-all',
          done
            ? 'bg-success text-white cursor-default'
            : 'bg-accent text-white active:scale-90'
--- a/src/renderer/src/components/AchievementsCard.tsx
+++ b/src/renderer/src/components/AchievementsCard.tsx
@@ -1,13 +1,6 @@
 import { useEffect, useMemo, useState } from 'react'
 import { motion } from 'framer-motion'
-import {
-  Award,
-  Activity,
-  Flame,
-  Sparkles,
-  TrendingUp,
-  Lock
-} from 'lucide-react'
+import { Award, Activity, Flame, Sparkles, TrendingUp, Lock } from 'lucide-react'
 import type { Exercise, HistoryEntry } from '@shared/types'
 import {
  computeAchievements,
@@ -113,7 +106,7 @@ export function AchievementsCard({ history, exercises }: Props): JSX.Element {
  if (visible.length === 0) return <></>

  return (
-    <div className="bg-surface rounded-xl p-4 shadow-card border border-hairline/30">
+    <div className="bg-surface rounded-2xl p-5 shadow-card dark:ring-0.5 dark:ring-hairline/30">
      <div className="flex items-center justify-between mb-3">
        <div className="flex items-center gap-2">
          <div className="w-7 h-7 rounded-lg bg-accent text-white grid place-items-center">
@@ -132,7 +125,11 @@ export function AchievementsCard({ history, exercises }: Props): JSX.Element {
      </div>
      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2">
        {visible.map((a) => (
-          <Badge key={a.def.id} a={a} fresh={freshlyUnlocked.has(a.def.id)} />
+          <Badge
+            key={a.def.id}
+            a={a}
+            fresh={freshlyUnlocked.has(a.def.id)}
+          />
        ))}
      </div>
    </div>
@@ -180,7 +177,7 @@ function Badge({
          : {}
      }
      className={[
-        'rounded-lg p-2.5 transition-opacity',
+        'rounded-xl p-2.5 transition-opacity',
        a.unlocked ? 'bg-surface-2' : 'bg-surface-2 opacity-55'
      ].join(' ')}
      title={t(a.def.descKey, { target: a.target })}
@@ -188,7 +185,7 @@ function Badge({
      <div className="flex items-center gap-2 mb-1.5">
        <div
          className={[
-            'w-7 h-7 rounded-md grid place-items-center text-white shrink-0',
+            'w-7 h-7 rounded-lg grid place-items-center text-white shrink-0',
            a.unlocked ? toneBg : 'bg-text/30'
          ].join(' ')}
        >
--- a/src/renderer/src/components/ExerciseCard.tsx
+++ b/src/renderer/src/components/ExerciseCard.tsx
@@ -19,6 +19,11 @@ type Props = {
  onMarkDone: () => void
 }

+/**
+ * iOS-flavoured exercise card. White surface, soft shadow, big readable
+ * countdown. A subtle ring around the icon shows interval progress —
+ * Apple Fitness ring spirit but minimalist.
+ */
 export function ExerciseCard({
  exercise,
  tick,
@@ -110,31 +115,32 @@ export function ExerciseCard({
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, scale: 0.97 }}
      transition={{ type: 'spring', stiffness: 380, damping: 30 }}
-      className="relative bg-surface rounded-xl p-4 shadow-card border border-hairline/30"
+      className="relative bg-surface rounded-3xl p-5 shadow-card dark:ring-0.5 dark:ring-hairline/30"
    >
-      <div className="flex items-start gap-3">
-        <div className="relative w-12 h-12 shrink-0">
+      <div className="flex items-start gap-4">
+        {/* Icon + progress ring */}
+        <div className="relative w-14 h-14 shrink-0">
          <svg
            className="absolute inset-0 -rotate-90"
-            viewBox="0 0 48 48"
-            width="48"
-            height="48"
+            viewBox="0 0 56 56"
+            width="56"
+            height="56"
          >
            <circle
-              cx="24"
-              cy="24"
+              cx="28"
+              cy="28"
              r={R}
              fill="none"
-              strokeWidth="2"
+              strokeWidth="2.5"
              className="stroke-hairline/15 dark:stroke-hairline/30"
            />
            {exercise.enabled && (
              <circle
-                cx="24"
-                cy="24"
+                cx="28"
+                cy="28"
                r={R}
                fill="none"
-                strokeWidth="2"
+                strokeWidth="2.5"
                strokeLinecap="round"
                strokeDasharray={C}
                strokeDashoffset={dashOffset}
@@ -145,7 +151,7 @@ export function ExerciseCard({
          </svg>
          <div
            className={[
-              'absolute inset-[7px] rounded-lg grid place-items-center',
+              'absolute inset-[8px] rounded-full grid place-items-center',
              exercise.enabled
                ? 'bg-accent/10 text-accent'
                : 'bg-surface-2 text-text/40'
@@ -157,14 +163,14 @@ export function ExerciseCard({

        <div className="flex-1 min-w-0">
          <div className="flex items-center justify-between gap-2">
-            <h3 className="font-display text-[17px] font-bold leading-tight truncate">
+            <h3 className="font-display text-[18px] font-bold leading-tight truncate">
              {exercise.name}
            </h3>
            <div className="relative">
              <button
                ref={triggerRef}
                onClick={() => setMenuOpen((v) => !v)}
-                className="w-7 h-7 grid place-items-center rounded-md text-text/45 hover:bg-surface-2 active:scale-95 transition-all"
+                className="w-7 h-7 grid place-items-center rounded-full text-text/45 hover:bg-surface-2 active:scale-90 transition-all"
                aria-label={t('titlebar.menu_aria')}
                aria-haspopup="menu"
                aria-expanded={menuOpen}
@@ -182,7 +188,7 @@ export function ExerciseCard({
                    role="menu"
                    aria-label={exercise.name}
                    onKeyDown={onMenuKeyDown}
-                    className="absolute right-0 top-8 z-20 min-w-[140px] bg-surface rounded-lg shadow-sheet ring-1 ring-hairline/30 py-1 overflow-hidden"
+                    className="absolute right-0 top-8 z-20 min-w-[140px] bg-surface rounded-xl shadow-sheet ring-0.5 ring-hairline/30 py-1 overflow-hidden"
                  >
                    <button
                      role="menuitem"
@@ -209,16 +215,17 @@ export function ExerciseCard({
              )}
            </div>
          </div>
-          <div className="text-[13px] text-text/60 mt-1 font-medium">
+          <div className="text-[14px] text-text/65 mt-1 font-medium">
            {t('editor.exercise.preview.meta', {
              reps: exercise.reps,
              min: exercise.intervalMinutes
            })}
          </div>

-          <div className="flex items-end justify-between mt-3">
+          {/* Countdown + switch */}
+          <div className="flex items-end justify-between mt-3.5">
            <div>
-              <div className="text-[12px] text-text/60 font-semibold inline-flex items-center gap-1">
+              <div className="text-[12px] text-text/60 uppercase tracking-wider font-semibold inline-flex items-center gap-1">
                {goalReached ? (
                  <>
                    <CheckCircle2
@@ -244,7 +251,7 @@ export function ExerciseCard({
              </div>
              <div
                className={[
-                  'font-mono-num text-[22px] font-bold leading-none mt-1',
+                  'font-mono-num text-[24px] font-bold leading-none mt-1 tracking-tight',
                  goalReached
                    ? 'text-success'
                    : isDue
@@ -276,7 +283,7 @@ export function ExerciseCard({
          initial={{ opacity: 0, y: 4 }}
          animate={{ opacity: 1, y: 0 }}
          onClick={handleMarkDone}
-          className="mt-3 w-full h-10 rounded-lg bg-accent text-white text-[14px] font-bold inline-flex items-center justify-center gap-1.5 active:translate-y-px transition-transform"
+          className="mt-4 w-full h-11 rounded-xl bg-accent text-white text-[15px] font-bold inline-flex items-center justify-center gap-1.5 active:scale-[0.98] transition-transform"
        >
          <Check size={15} strokeWidth={2.5} /> {t('btn.done')}
        </motion.button>
--- a/src/renderer/src/components/ExerciseEditor.tsx
+++ b/src/renderer/src/components/ExerciseEditor.tsx
@@ -85,12 +85,12 @@ export function ExerciseEditor({
      }
    >
      <div className="space-y-5">
-        <div className="rounded-lg bg-surface-2 p-4 flex items-center gap-4 border border-hairline/25">
-          <div className="w-12 h-12 rounded-lg bg-accent text-white grid place-items-center shrink-0">
+        <div className="rounded-2xl bg-surface-2 p-4 flex items-center gap-4">
+          <div className="w-14 h-14 rounded-2xl bg-accent text-white grid place-items-center shrink-0">
            <Icon name={draft.icon} size={26} strokeWidth={2.2} />
          </div>
          <div className="min-w-0">
-            <div className="font-display text-[18px] font-semibold truncate">
+            <div className="font-display text-[18px] font-semibold tracking-tight truncate">
              {draft.name || t('editor.exercise.preview.placeholder')}
            </div>
            <div className="text-[13px] text-text/55 mt-0.5 font-mono-num">
@@ -120,7 +120,7 @@ export function ExerciseEditor({
                type="button"
                onClick={() => setDraft({ ...draft, category: c })}
                className={[
-                  'h-9 px-2 rounded-lg text-[13px] font-semibold transition-colors active:translate-y-px truncate',
+                  'h-10 px-2 rounded-xl text-[13px] font-semibold transition-all active:scale-95 truncate',
                  draft.category === c
                    ? 'bg-accent text-white'
                    : 'bg-surface-2 text-text/65 hover:text-text'
@@ -185,7 +185,7 @@ export function ExerciseEditor({
              <button
                type="button"
                onClick={() => setDraft({ ...draft, dailyGoal: undefined })}
-                className="h-9 px-3 rounded-lg bg-surface-2 text-text/65 text-[13px] font-semibold hover:text-text"
+                className="h-9 px-3 rounded-xl bg-surface-2 text-text/65 text-[13px] font-semibold hover:text-text"
              >
                {t('editor.field.daily_goal.clear')}
              </button>
@@ -200,7 +200,9 @@ export function ExerciseEditor({
          <input
            type="checkbox"
            checked={draft.adaptive ?? false}
-            onChange={(e) => setDraft({ ...draft, adaptive: e.target.checked })}
+            onChange={(e) =>
+              setDraft({ ...draft, adaptive: e.target.checked })
+            }
            className="mt-0.5 w-4 h-4 accent-accent"
          />
          <div>
@@ -214,14 +216,14 @@ export function ExerciseEditor({
        </label>

        <Field label={t('editor.field.icon')}>
-          <div className="grid grid-cols-8 gap-2 max-h-44 overflow-y-auto p-2 rounded-lg bg-surface-2">
+          <div className="grid grid-cols-8 gap-2 max-h-44 overflow-y-auto p-2 rounded-2xl bg-surface-2">
            {ICON_CHOICES.map((name) => (
              <button
                key={name}
                type="button"
                onClick={() => setDraft({ ...draft, icon: name })}
                className={[
-                  'h-10 w-10 grid place-items-center rounded-lg transition-colors active:translate-y-px',
+                  'h-10 w-10 grid place-items-center rounded-xl transition-all active:scale-90',
                  draft.icon === name
                    ? 'bg-accent text-white'
                    : 'bg-surface text-text/65 hover:text-text'
@@ -239,9 +241,9 @@ export function ExerciseEditor({
          width: 100%;
          height: 44px;
          padding: 0 14px;
-          border-radius: 8px;
-          border: 1px solid rgb(var(--hairline) / 0.35);
-          background: rgb(var(--surface));
+          border-radius: 12px;
+          border: 0;
+          background: rgb(var(--surface-2));
          color: rgb(var(--text));
          font-size: 15px;
          outline: none;
--- a/src/renderer/src/components/HistoryHeatmap.tsx
+++ b/src/renderer/src/components/HistoryHeatmap.tsx
@@ -109,7 +109,7 @@ export function HistoryHeatmap({
    translateN(lang, 'heatmap.tooltip.reps', n)

  return (
-    <div className="bg-surface rounded-xl p-4 shadow-card border border-hairline/30">
+    <div className="bg-surface rounded-2xl p-5 shadow-card dark:ring-0.5 dark:ring-hairline/30">
      <div className="flex items-center gap-2 mb-3">
        <div className="text-[14px] text-text/75 font-semibold">
          {t('heatmap.title')}
--- a/src/renderer/src/components/MealEditor.tsx
+++ b/src/renderer/src/components/MealEditor.tsx
@@ -84,12 +84,12 @@ export function MealEditor({
      }
    >
      <div className="space-y-5">
-        <div className="rounded-lg bg-surface-2 p-4 flex items-center gap-4 border border-hairline/25">
-          <div className="w-12 h-12 rounded-lg bg-accent text-white grid place-items-center shrink-0">
+        <div className="rounded-2xl bg-surface-2 p-4 flex items-center gap-4">
+          <div className="w-14 h-14 rounded-2xl bg-accent text-white grid place-items-center shrink-0">
            <Icon name={draft.icon} size={26} strokeWidth={2.2} />
          </div>
          <div className="min-w-0">
-            <div className="font-display text-[18px] font-semibold truncate">
+            <div className="font-display text-[18px] font-semibold tracking-tight truncate">
              {draft.name || t('editor.meal.preview.placeholder')}
            </div>
            <div className="text-[13px] text-text/55 mt-0.5 font-mono-num">
@@ -128,7 +128,7 @@ export function MealEditor({
                  aria-pressed={active}
                  onClick={() => toggleDay(dow)}
                  className={[
-                    'h-9 rounded-lg text-[13px] font-semibold transition-colors active:translate-y-px',
+                    'h-10 rounded-xl text-[13px] font-semibold transition-all active:scale-95',
                    active
                      ? 'bg-accent text-white'
                      : 'bg-surface-2 text-text/65 hover:text-text'
@@ -145,14 +145,14 @@ export function MealEditor({
        </Field>

        <Field label={t('editor.field.icon')}>
-          <div className="grid grid-cols-8 gap-2 max-h-44 overflow-y-auto p-2 rounded-lg bg-surface-2">
+          <div className="grid grid-cols-8 gap-2 max-h-44 overflow-y-auto p-2 rounded-2xl bg-surface-2">
            {ICON_CHOICES.map((name) => (
              <button
                key={name}
                type="button"
                onClick={() => setDraft({ ...draft, icon: name })}
                className={[
-                  'h-10 w-10 grid place-items-center rounded-lg transition-colors active:translate-y-px',
+                  'h-10 w-10 grid place-items-center rounded-xl transition-all active:scale-90',
                  draft.icon === name
                    ? 'bg-accent text-white'
                    : 'bg-surface text-text/65 hover:text-text'
@@ -170,9 +170,9 @@ export function MealEditor({
          width: 100%;
          height: 44px;
          padding: 0 14px;
-          border-radius: 8px;
-          border: 1px solid rgb(var(--hairline) / 0.35);
-          background: rgb(var(--surface));
+          border-radius: 12px;
+          border: 0;
+          background: rgb(var(--surface-2));
          color: rgb(var(--text));
          font-size: 15px;
          outline: none;
--- a/src/renderer/src/components/PageScaffold.tsx
+++ b/src/renderer/src/components/PageScaffold.tsx
@@ -16,12 +16,12 @@ export function PageHeader({
  return (
    <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-6">
      <div className="min-w-0">
-        <div className="text-[13px] text-text/60 font-bold">{kicker}</div>
-        <h1 className="font-display text-[28px] sm:text-[32px] leading-tight mt-1 font-bold">
+        <div className="text-[14px] text-text/65 font-semibold">{kicker}</div>
+        <h1 className="font-serif text-[34px] sm:text-[40px] leading-[1.02] tracking-tight mt-1 font-bold">
          {title}
        </h1>
        {subtitle && (
-          <p className="text-[14px] text-text/60 mt-1.5 font-medium leading-relaxed max-w-2xl">
+          <p className="text-[15px] text-text/65 mt-2 font-medium leading-relaxed max-w-2xl">
            {subtitle}
          </p>
        )}
@@ -41,7 +41,7 @@ export function InsightGrid({
  return (
    <div
      className={[
-        'grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-3 mb-6',
+        'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 mb-8',
        className
      ].join(' ')}
    >
@@ -75,21 +75,21 @@ export function InsightCard({
            : 'bg-text/12 text-text/55'

  return (
-    <div className="bg-surface rounded-xl p-4 shadow-card border border-hairline/30 min-w-0">
+    <div className="bg-surface rounded-2xl p-4 shadow-card dark:ring-0.5 dark:ring-hairline/30 min-w-0">
      <div className="flex items-start gap-3">
        <div
          className={[
-            'w-8 h-8 rounded-lg grid place-items-center shrink-0',
+            'w-9 h-9 rounded-xl grid place-items-center shrink-0',
            iconClass
          ].join(' ')}
        >
          {icon}
        </div>
        <div className="min-w-0">
-          <div className="text-[12px] text-text/50 font-bold leading-tight">
+          <div className="text-[12px] uppercase tracking-[0.06em] text-text/50 font-bold leading-tight">
            {label}
          </div>
-          <div className="font-display text-[20px] font-bold leading-tight mt-1 break-words">
+          <div className="font-display text-[22px] font-bold leading-tight mt-1 break-words">
            {value}
          </div>
          {hint && (
--- a/src/renderer/src/components/Sidebar.tsx
+++ b/src/renderer/src/components/Sidebar.tsx
@@ -46,7 +46,7 @@ const items: Item[] = [
    to: '/settings',
    labelKey: 'nav.settings',
    icon: Settings2,
-    tint: 'bg-sidebar-muted'
+    tint: 'bg-text/70'
  }
 ]

@@ -63,6 +63,8 @@ export function Sidebar({
  const drawerRef = useRef<HTMLElement | null>(null)
  const lastFocusedRef = useRef<HTMLElement | null>(null)

+  // Esc closes + focus trap while the compact drawer is open. Mirrors the
+  // pattern used in Modal.tsx for keyboard users.
  useEffect(() => {
    if (!compactOpen) return undefined
    lastFocusedRef.current = document.activeElement as HTMLElement | null
@@ -88,14 +90,18 @@ export function Sidebar({
          e.preventDefault()
          last.focus()
        }
-      } else if (active === last || !root.contains(active)) {
-        e.preventDefault()
-        first.focus()
+      } else {
+        if (active === last || !root.contains(active)) {
+          e.preventDefault()
+          first.focus()
+        }
      }
    }
    document.addEventListener('keydown', onKeyDown, true)
    return () => {
      document.removeEventListener('keydown', onKeyDown, true)
+      // Return focus to the trigger (Titlebar's hamburger) so keyboard users
+      // pick up where they left off.
      const target = lastFocusedRef.current
      if (target && document.body.contains(target)) target.focus()
    }
@@ -103,7 +109,7 @@ export function Sidebar({

  return (
    <>
-      <aside className="hidden md:flex w-[276px] shrink-0 bg-sidebar text-sidebar-text flex-col border-r border-black/25">
+      <aside className="hidden md:flex w-64 shrink-0 vibrancy hairline-b border-r-0 flex-col">
        <SidebarContent />
      </aside>

@@ -117,7 +123,7 @@ export function Sidebar({
            transition={{ duration: 0.18 }}
          >
            <motion.div
-              className="absolute inset-0 bg-black/35"
+              className="absolute inset-0 bg-black/30 backdrop-blur-md"
              onClick={onCompactClose}
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
@@ -129,7 +135,7 @@ export function Sidebar({
              role="dialog"
              aria-modal="true"
              aria-label={t('sidebar.aria.nav')}
-              className="relative w-72 max-w-[85vw] h-full bg-sidebar text-sidebar-text flex flex-col"
+              className="relative w-72 max-w-[85vw] h-full vibrancy flex flex-col"
              initial={{ x: '-100%' }}
              animate={{ x: 0 }}
              exit={{ x: '-100%' }}
@@ -137,7 +143,7 @@ export function Sidebar({
            >
              <button
                onClick={onCompactClose}
-                className="absolute top-3 right-3 w-8 h-8 grid place-items-center rounded-md bg-white/[0.08] hover:bg-white/[0.14] text-sidebar-muted hover:text-sidebar-text transition-colors active:scale-95"
+                className="absolute top-3 right-3 w-8 h-8 grid place-items-center rounded-full bg-surface-2 hover:bg-hairline/25 text-text/60 transition-colors active:scale-90"
                aria-label={t('btn.close')}
              >
                <X size={14} strokeWidth={2.5} />
@@ -156,23 +162,16 @@ function SidebarContent({ onNav }: { onNav?: () => void }): JSX.Element {
  const running = useAppStore((s) => s.state?.settings.globalEnabled ?? true)
  return (
    <>
-      <div className="px-4 pt-5 pb-4">
-        <div className="h-10 flex items-center gap-3">
-          <div className="h-9 w-9 rounded-lg bg-accent text-white grid place-items-center font-display text-[18px] font-bold">
-            Р
-          </div>
-          <div className="min-w-0">
-            <div className="font-display text-[20px] leading-tight font-bold">
-              Разомнись
-            </div>
-            <div className="text-[12px] text-sidebar-muted font-medium">
-              {t('sidebar.slogan')}
-            </div>
-          </div>
+      <div className="px-5 pt-7 pb-6">
+        <div className="font-serif text-[36px] leading-none tracking-tight font-bold">
+          Разомнись
+        </div>
+        <div className="text-[13px] text-text/55 mt-2 font-medium">
+          {t('sidebar.slogan')}
        </div>
      </div>

-      <nav className="px-3 flex flex-col gap-1">
+      <nav className="px-2.5 flex flex-col gap-1">
        {items.map(({ to, labelKey, icon: Icon, end, tint }) => (
          <NavLink
            key={to}
@@ -181,32 +180,31 @@ function SidebarContent({ onNav }: { onNav?: () => void }): JSX.Element {
            onClick={onNav}
            className={({ isActive }) =>
              [
-                'group relative flex items-center gap-3 px-3 py-2 rounded-lg transition-colors duration-150',
+                'flex items-center gap-3 px-2.5 py-2 rounded-xl transition-colors duration-150',
                isActive
-                  ? 'bg-white/10 text-sidebar-text'
-                  : 'text-sidebar-muted hover:bg-white/[0.06] hover:text-sidebar-text'
+                  ? 'bg-text/[0.06] dark:bg-white/[0.08]'
+                  : 'hover:bg-text/[0.04] dark:hover:bg-white/[0.04]'
              ].join(' ')
            }
          >
            {({ isActive }) => (
              <>
-                <span
-                  className={[
-                    'absolute left-0 top-2 bottom-2 w-[3px] rounded-r-full',
-                    isActive ? 'bg-accent' : 'bg-transparent'
-                  ].join(' ')}
-                />
                <div
                  className={[
-                    'w-8 h-8 rounded-md grid place-items-center shrink-0',
-                    isActive
-                      ? `${tint ?? 'bg-accent'} text-white`
-                      : 'bg-white/[0.06] text-sidebar-muted group-hover:text-sidebar-text'
+                    'w-8 h-8 rounded-[9px] grid place-items-center text-white shrink-0',
+                    tint ?? 'bg-text/70'
                  ].join(' ')}
                >
                  <Icon size={17} strokeWidth={2.2} />
                </div>
-                <span className="text-[14px] truncate font-semibold">
+                <span
+                  className={[
+                    'text-[15px] truncate',
+                    isActive
+                      ? 'text-text font-semibold'
+                      : 'text-text/85 font-medium'
+                  ].join(' ')}
+                >
                  {t(labelKey)}
                </span>
              </>
@@ -215,26 +213,20 @@ function SidebarContent({ onNav }: { onNav?: () => void }): JSX.Element {
        ))}
      </nav>

-      <div className="mt-auto px-4 pb-4">
-        <div className="rounded-lg bg-white/[0.06] px-3 py-2.5">
-          <div className="flex items-center gap-2 text-[12px] text-sidebar-muted">
-            <span className="relative flex h-2 w-2">
-              {running && (
-                <span className="absolute inline-flex h-full w-full rounded-full bg-success opacity-60 animate-ping" />
-              )}
-              <span
-                className={[
-                  'relative inline-flex rounded-full h-2 w-2',
-                  running ? 'bg-success' : 'bg-warning'
-                ].join(' ')}
-              />
-            </span>
-            <span className="font-semibold">
-              {running
-                ? t('sidebar.status_tracking')
-                : t('sidebar.status_paused')}
-            </span>
-          </div>
+      <div className="mt-auto px-5 pb-5">
+        <div className="flex items-center gap-2 text-[11px] text-text/45">
+          <span className="relative flex h-1.5 w-1.5">
+            {running && (
+              <span className="absolute inline-flex h-full w-full rounded-full bg-success opacity-60 animate-ping" />
+            )}
+            <span
+              className={[
+                'relative inline-flex rounded-full h-1.5 w-1.5',
+                running ? 'bg-success' : 'bg-warning'
+              ].join(' ')}
+            />
+          </span>
+          {running ? t('sidebar.status_tracking') : t('sidebar.status_paused')}
        </div>
      </div>
    </>
--- a/src/renderer/src/components/Titlebar.tsx
+++ b/src/renderer/src/components/Titlebar.tsx
@@ -32,13 +32,13 @@ export function Titlebar({ title, onMenuClick }: Props): JSX.Element {
  return (
    <div
      onDoubleClick={onDoubleClick}
-      className="titlebar-drag relative h-9 px-2 sm:px-3 flex items-center justify-between bg-sidebar text-sidebar-text hairline-b"
+      className="titlebar-drag relative h-10 px-2 sm:px-3 flex items-center justify-between vibrancy hairline-b"
    >
      <div className="flex items-center gap-1 min-w-0 flex-1 basis-0">
        {onMenuClick && (
          <button
            onClick={onMenuClick}
-            className="titlebar-nodrag md:hidden w-8 h-7 grid place-items-center rounded-md hover:bg-white/10 text-sidebar-muted hover:text-sidebar-text transition-colors"
+            className="titlebar-nodrag md:hidden w-8 h-7 grid place-items-center rounded-md hover:bg-text/[0.08] text-text/65 hover:text-text transition-colors"
            aria-label={t('titlebar.menu_aria')}
          >
            <Menu size={15} strokeWidth={2} />
@@ -46,7 +46,7 @@ export function Titlebar({ title, onMenuClick }: Props): JSX.Element {
        )}
      </div>

-      <div className="text-[12px] font-semibold text-sidebar-muted truncate px-2">
+      <div className="text-[12px] font-medium text-text/55 truncate px-2">
        {effectiveTitle}
      </div>

@@ -63,7 +63,9 @@ export function Titlebar({ title, onMenuClick }: Props): JSX.Element {
        <WinBtn
          onClick={() => window.api.toggleMaximizeMain()}
          label={
-            maximized ? t('titlebar.restore_aria') : t('titlebar.maximize_aria')
+            maximized
+              ? t('titlebar.restore_aria')
+              : t('titlebar.maximize_aria')
          }
        >
          {maximized ? (
@@ -100,10 +102,10 @@ function WinBtn({
      onClick={onClick}
      aria-label={label}
      className={[
-        'titlebar-nodrag w-9 h-7 grid place-items-center rounded-md transition-colors text-sidebar-muted',
+        'titlebar-nodrag w-9 h-7 grid place-items-center rounded-md transition-colors text-text/55',
        danger
          ? 'hover:bg-destructive hover:text-white'
-          : 'hover:bg-white/10 hover:text-sidebar-text'
+          : 'hover:bg-text/[0.08] hover:text-text'
      ].join(' ')}
    >
      {children}
--- a/src/renderer/src/components/WhatsNewModal.tsx
+++ b/src/renderer/src/components/WhatsNewModal.tsx
@@ -25,7 +25,11 @@ const TAG_META = {
 * (a) автоматически после апдейта (когда `lastSeenVersion` != `currentVersion`)
 * и (b) вручную из Settings.
 */
-export function WhatsNewModal({ open, versions, onClose }: Props): JSX.Element {
+export function WhatsNewModal({
+  open,
+  versions,
+  onClose
+}: Props): JSX.Element {
  const { t, lang } = useT()
  return (
    <Modal
@@ -64,7 +68,7 @@ function VersionSection({

  return (
    <div>
-      <div className="text-[12px] text-text/55 font-bold mb-3 font-mono-num">
+      <div className="text-[12px] uppercase tracking-wider text-text/55 font-bold mb-3 font-mono-num">
        v{version}
      </div>
      <div className="space-y-2.5">
--- a/src/renderer/src/components/ui/Button.tsx
+++ b/src/renderer/src/components/ui/Button.tsx
@@ -1,8 +1,8 @@
 import { ButtonHTMLAttributes, forwardRef } from 'react'

 /**
- * Desktop button. Three primary flavours cover filled, bordered, and plain actions.
- * Press feedback stays subtle so dense tool surfaces do not jump around.
+ * iOS-style button. Three primary flavours mirror iOS's filled / tinted / plain.
+ * Press feedback is a subtle scale, mirroring UIKit's button highlight.
 */
 type Variant = 'filled' | 'tinted' | 'plain' | 'destructive' | 'success'
 type Size = 'sm' | 'md' | 'lg'
@@ -24,21 +24,19 @@ const legacyMap: Record<LegacyVariant, Variant> = {
 }

 const variantClasses: Record<Variant, string> = {
-  filled:
-    'bg-accent text-white hover:bg-accent/90 active:bg-accent/85 shadow-[0_1px_0_rgb(255_255_255_/_0.18)_inset]',
+  filled: 'bg-accent text-white hover:brightness-105 active:brightness-95',
  tinted:
-    'bg-surface border border-hairline/45 text-text hover:border-accent/45 hover:text-accent active:bg-surface-2',
-  plain:
-    'text-text/70 hover:bg-surface-2 hover:text-text active:bg-hairline/20',
+    'bg-accent/12 text-accent hover:bg-accent/18 active:bg-accent/22 dark:bg-accent/20 dark:hover:bg-accent/25',
+  plain: 'text-accent hover:bg-accent/10 active:bg-accent/15',
  destructive:
-    'bg-destructive/10 border border-destructive/20 text-destructive hover:bg-destructive/14 active:bg-destructive/18',
-  success: 'bg-success text-white hover:bg-success/90 active:bg-success/80'
+    'bg-destructive/12 text-destructive hover:bg-destructive/18 active:bg-destructive/22 dark:bg-destructive/20',
+  success: 'bg-success text-white hover:brightness-105 active:brightness-95'
 }

 const sizeClasses: Record<Size, string> = {
-  sm: 'h-8 px-3 text-[13px] rounded-lg',
-  md: 'h-9 px-3.5 text-[14px] rounded-lg',
-  lg: 'h-10 px-4 text-[15px] rounded-lg'
+  sm: 'h-8 px-3.5 text-[13px] rounded-xl',
+  md: 'h-10 px-4 text-[14px] rounded-2xl',
+  lg: 'h-12 px-6 text-[16px] rounded-2xl'
 }

 export const Button = forwardRef<HTMLButtonElement, Props>(function Button(
@@ -51,9 +49,9 @@ export const Button = forwardRef<HTMLButtonElement, Props>(function Button(
    <button
      ref={ref}
      className={[
-        'inline-flex items-center justify-center gap-1.5 font-semibold transition-colors duration-150 ease-out',
+        'inline-flex items-center justify-center gap-1.5 font-semibold transition-all duration-150 ease-out',
        'disabled:opacity-40 disabled:cursor-not-allowed',
-        'active:translate-y-px',
+        'active:scale-[0.97]',
        variantClasses[v],
        sizeClasses[size],
        className
--- a/src/renderer/src/components/ui/Card.tsx
+++ b/src/renderer/src/components/ui/Card.tsx
@@ -1,5 +1,9 @@
 import { ReactNode } from 'react'

+/**
+ * iOS grouped-list card. Wraps rows; first/last row hairline rules handled
+ * by `Row` itself (only top/middle hairline shown).
+ */
 export function Card({
  children,
  className = ''
@@ -10,7 +14,9 @@ export function Card({
  return (
    <div
      className={[
-        'bg-surface rounded-xl overflow-hidden border border-hairline/35 shadow-card',
+        'bg-surface rounded-2xl overflow-hidden',
+        'shadow-[0_0.5px_0_rgb(0_0_0_/_0.04),_0_1px_2px_rgb(0_0_0_/_0.04)]',
+        'dark:shadow-none dark:ring-0.5 dark:ring-hairline/30',
        className
      ].join(' ')}
    >
@@ -19,6 +25,10 @@ export function Card({
  )
 }

+/**
+ * Section heading above a Card group — iOS Settings style: tiny uppercase
+ * label, generous spacing.
+ */
 export function SectionHeader({
  title,
  hint,
@@ -29,11 +39,13 @@ export function SectionHeader({
  action?: ReactNode
 }): JSX.Element {
  return (
-    <div className="flex items-end justify-between mb-2.5">
+    <div className="flex items-end justify-between px-4 mb-2.5">
      <div>
-        <div className="text-[13px] font-bold text-text/70">{title}</div>
+        <div className="text-[13px] font-semibold uppercase tracking-[0.06em] text-text/60">
+          {title}
+        </div>
        {hint && (
-          <div className="text-[12px] text-text/55 mt-0.5 font-medium">
+          <div className="text-[13px] text-text/55 mt-0.5 font-medium">
            {hint}
          </div>
        )}
@@ -43,6 +55,10 @@ export function SectionHeader({
  )
 }

+/**
+ * A single row inside Card — left icon (optional), title + subtitle, right
+ * accessory (switch / chevron / button). Adds bottom hairline unless `last`.
+ */
 export function Row({
  children,
  className = '',
@@ -59,9 +75,9 @@ export function Row({
    <div
      onClick={onClick}
      className={[
-        'flex items-center gap-3 px-4 py-3 relative min-h-[58px]',
+        'flex items-center gap-3 px-4 py-3 relative',
        interactive
-          ? 'cursor-pointer hover:bg-surface-2/65 active:bg-surface-2 transition-colors'
+          ? 'cursor-pointer active:bg-surface-2 dark:active:bg-white/5 transition-colors'
          : '',
        !last ? 'hairline-b' : '',
        className
--- a/src/renderer/src/components/ui/ConfirmModal.tsx
+++ b/src/renderer/src/components/ui/ConfirmModal.tsx
@@ -18,10 +18,10 @@ type Props = {
 }

 /**
- * Desktop confirm-диалог. Заменяет `window.confirm()` — нативный prompt
- * выглядит инородно в дизайне приложения и не поддерживает focus-trap.
- * Использует наш Modal под капотом, поэтому получаем focus-trap и
- * Esc-to-cancel бесплатно.
+ * iOS-style confirm-диалог. Заменяет `window.confirm()` — нативный prompt
+ * выглядит инородно в дизайне приложения, без вибрации accent-цвета и без
+ * focus-trap'a. Использует наш Modal под капотом, поэтому получаем
+ * focus-trap и Esc-to-cancel бесплатно.
 */
 export function ConfirmModal({
  open,
--- a/src/renderer/src/components/ui/Modal.tsx
+++ b/src/renderer/src/components/ui/Modal.tsx
@@ -27,6 +27,17 @@ function getFocusable(root: HTMLElement): HTMLElement[] {
  ).filter((el) => el.offsetParent !== null || el === document.activeElement)
 }

+/**
+ * iOS-style centred sheet. Spring-snap on enter, soft fade-out.
+ *
+ * Accessibility:
+ *  - role="dialog" + aria-modal="true" + aria-labelledby on the title <h2>
+ *  - Focus is trapped inside the dialog while open; Tab/Shift-Tab cycle
+ *    through focusable children and never escape to the underlying page.
+ *  - On open the first focusable element is focused.
+ *  - On close, focus returns to whatever was focused when the modal opened.
+ *  - Esc closes (parent handles confirm-on-dirty if it wants).
+ */
 export function Modal({
  open,
  onClose,
@@ -108,7 +119,7 @@ export function Modal({
    <AnimatePresence>
      {open && (
        <motion.div
-          className="fixed inset-0 z-50 grid place-items-center p-4 bg-black/40"
+          className="fixed inset-0 z-50 grid place-items-center p-4 bg-black/40 backdrop-blur-md"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
@@ -121,36 +132,39 @@ export function Modal({
            aria-modal="true"
            aria-labelledby={titleId}
            className={[
-              'relative w-full bg-surface rounded-xl shadow-sheet flex flex-col overflow-hidden border border-hairline/45',
+              'relative w-full bg-surface rounded-3xl shadow-sheet flex flex-col overflow-hidden',
              sizeClass[size]
            ].join(' ')}
-            initial={{ scale: 0.98, y: 10, opacity: 0 }}
+            initial={{ scale: 0.94, y: 24, opacity: 0 }}
            animate={{ scale: 1, y: 0, opacity: 1 }}
-            exit={{ scale: 0.98, y: 6, opacity: 0 }}
+            exit={{ scale: 0.96, y: 12, opacity: 0 }}
            transition={{ type: 'spring', stiffness: 400, damping: 32 }}
            onClick={(e) => e.stopPropagation()}
          >
-            <div className="flex items-center justify-between px-5 py-3 hairline-b bg-surface-elevated">
+            {/* Header — iOS large modal title */}
+            <div className="flex items-center justify-between px-5 pt-5 pb-3">
              <h2
                id={titleId}
-                className="font-display text-[18px] font-semibold"
+                className="font-display text-[20px] font-semibold tracking-tight"
              >
                {title}
              </h2>
              <button
                onClick={onClose}
                data-modal-close=""
-                className="w-7 h-7 grid place-items-center rounded-md bg-surface-2 hover:bg-hairline/25 text-text/60 hover:text-text transition-colors active:scale-95"
+                className="w-7 h-7 grid place-items-center rounded-full bg-surface-2 hover:bg-hairline/25 text-text/60 hover:text-text transition-colors active:scale-90"
                aria-label={t('btn.close')}
              >
                <X size={14} strokeWidth={2.5} />
              </button>
            </div>

-            <div className="p-5 overflow-y-auto max-h-[72vh]">{children}</div>
+            <div className="px-5 pb-5 overflow-y-auto max-h-[70vh]">
+              {children}
+            </div>

            {footer && (
-              <div className="hairline-t px-5 py-3 flex justify-end gap-2 bg-surface-elevated">
+              <div className="hairline-t px-5 py-3 flex justify-end gap-2 bg-surface">
                {footer}
              </div>
            )}
--- a/src/renderer/src/components/ui/Switch.tsx
+++ b/src/renderer/src/components/ui/Switch.tsx
@@ -7,6 +7,9 @@ type Props = {
  'aria-label'?: string
 }

+/**
+ * iOS UISwitch — 51×31 spec, green when on, smooth spring knob.
+ */
 export function Switch({
  checked,
  onChange,
@@ -22,18 +25,17 @@ export function Switch({
      onClick={() => !disabled && onChange(!checked)}
      disabled={disabled}
      className={[
-        'relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full transition-colors duration-150 ease-out border',
-        checked
-          ? 'bg-success border-success'
-          : 'bg-surface-2 border-hairline/55',
+        'relative inline-flex h-[31px] w-[51px] shrink-0 cursor-pointer rounded-full transition-colors duration-200 ease-out',
+        checked ? 'bg-success' : 'bg-hairline/25 dark:bg-hairline/50',
        disabled ? 'opacity-40 cursor-not-allowed' : ''
      ].join(' ')}
      style={{ padding: 2 }}
    >
      <motion.span
-        className="block h-[18px] w-[18px] rounded-full bg-white"
+        className="block h-[27px] w-[27px] rounded-full bg-white"
        style={{
-          boxShadow: '0 1px 2px rgba(0,0,0,0.18), 0 0 0 0.5px rgba(0,0,0,0.08)'
+          boxShadow:
+            '0 3px 8px rgba(0,0,0,0.15), 0 3px 1px rgba(0,0,0,0.06), 0 0 0 0.5px rgba(0,0,0,0.04)'
        }}
        animate={{ x: checked ? 20 : 0 }}
        transition={{ type: 'spring', stiffness: 700, damping: 35 }}
--- a/src/renderer/src/pages/Challenges.tsx
+++ b/src/renderer/src/pages/Challenges.tsx
@@ -65,14 +65,14 @@ export default function ChallengesPage(): JSX.Element {
  )

  return (
-    <div className="h-full overflow-y-auto desktop-scroll">
-      <div className="max-w-[980px] mx-auto px-5 lg:px-8 pt-6 pb-10">
-        <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-6">
+    <div className="h-full overflow-y-auto">
+      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-10 pt-8 pb-12">
+        <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-8">
          <div>
            <div className="text-[14px] text-text/65 font-semibold">
              {t('challenges.kicker')}
            </div>
-            <h1 className="font-display text-[30px] sm:text-[34px] leading-tight mt-1 font-bold">
+            <h1 className="font-serif text-[34px] sm:text-[40px] leading-[1.02] tracking-tight mt-1 font-bold">
              {t('challenges.title')}
            </h1>
            <p className="text-[15px] text-text/65 mt-2 font-medium">
@@ -92,7 +92,7 @@ export default function ChallengesPage(): JSX.Element {
        </div>

        {noGamesActive && (
-          <div className="mb-5 rounded-xl border border-warning/25 bg-warning/10 p-4 flex items-start gap-3">
+          <div className="mb-6 rounded-2xl bg-warning/12 p-4 flex items-start gap-3">
            <div className="w-10 h-10 rounded-xl bg-warning/18 text-warning grid place-items-center shrink-0">
              <AlertTriangle size={18} strokeWidth={2.5} />
            </div>
@@ -178,7 +178,7 @@ export default function ChallengesPage(): JSX.Element {
        ) : (
          <Card>
            <div className="px-5 py-12 flex flex-col items-center text-center">
-              <div className="inline-flex w-12 h-12 rounded-xl bg-accent text-white items-center justify-center mb-4">
+              <div className="inline-flex w-14 h-14 rounded-2xl bg-accent text-white items-center justify-center mb-4">
                <Gamepad2 size={24} strokeWidth={2.4} />
              </div>
              <div className="text-text/65 text-[15px] font-medium max-w-xs leading-snug">
@@ -342,7 +342,7 @@ function ChallengeEditor({
        </Field>

        <Field label={t('editor.field.icon')}>
-          <div className="grid grid-cols-8 gap-2 max-h-44 overflow-y-auto p-2 rounded-lg bg-surface-2">
+          <div className="grid grid-cols-8 gap-2 max-h-44 overflow-y-auto p-2 rounded-2xl bg-surface-2">
            {ICON_CHOICES.map((name) => (
              <button
                key={name}
@@ -361,8 +361,8 @@ function ChallengeEditor({
          </div>
        </Field>

-        <div className="rounded-lg bg-accent/[0.08] p-4">
-          <div className="text-[11px] text-accent font-semibold mb-2">
+        <div className="rounded-2xl bg-accent/8 p-4">
+          <div className="text-[11px] uppercase tracking-wider text-accent font-semibold mb-2">
            {t('editor.challenge.preview.kicker')}
          </div>
          <div className="font-mono-num text-[14px] text-text/75 flex items-baseline gap-1.5 flex-wrap">
@@ -370,7 +370,7 @@ function ChallengeEditor({
            <span className="text-text/40">×</span>
            <span>{draft.multiplier}</span>
            <span className="text-text/40">=</span>
-            <span className="text-[32px] font-display font-semibold text-accent leading-none ml-1">
+            <span className="text-[32px] font-display font-semibold text-accent leading-none ml-1 tracking-tight">
              {previewReps}
            </span>
            <span className="text-text/55">
--- a/src/renderer/src/pages/Dashboard.tsx
+++ b/src/renderer/src/pages/Dashboard.tsx
@@ -197,51 +197,49 @@ export default function Dashboard(): JSX.Element {
  })

  return (
-    <div className="h-full overflow-y-auto desktop-scroll">
-      <div className="max-w-[1180px] mx-auto px-5 lg:px-8 pt-6 pb-10">
-        <section className="mb-4 rounded-xl border border-hairline/35 bg-surface p-5 shadow-card">
-          <div className="flex flex-col xl:flex-row xl:items-start xl:justify-between gap-4">
-            <div className="min-w-0">
-              <div className="text-[13px] text-text/60 font-bold">
-                {t('dashboard.header.date', { date: today })}
-              </div>
-              <div className="mt-1.5 flex flex-wrap items-center gap-3">
-                <h1 className="font-display text-[30px] sm:text-[34px] leading-tight font-bold">
-                  {header.title}
-                </h1>
-                <span
-                  className={[
-                    'h-7 px-2.5 rounded-md inline-flex items-center text-[12px] font-bold',
-                    dashboardStatusClass(header.tone)
-                  ].join(' ')}
-                >
-                  {header.status}
-                </span>
-              </div>
-              <p className="text-[14px] text-text/60 mt-2 font-medium leading-relaxed max-w-3xl">
-                {header.subtitle}
-              </p>
+    <div className="h-full overflow-y-auto">
+      <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-10 pt-8 pb-12">
+        <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-6">
+          <div className="min-w-0">
+            <div className="text-[14px] text-text/65 font-semibold">
+              {t('dashboard.header.date', { date: today })}
            </div>
-            <div className="flex items-center gap-2">
-              <Button variant="tinted" onClick={togglePause}>
-                {!paused ? (
-                  <>
-                    <Pause size={14} strokeWidth={2.5} /> {t('btn.pause')}
-                  </>
-                ) : (
-                  <>
-                    <Play size={14} strokeWidth={2.5} /> {t('btn.start')}
-                  </>
-                )}
-              </Button>
-              <Button onClick={openCreate}>
-                <Plus size={15} strokeWidth={2.5} /> {t('btn.add')}
-              </Button>
+            <div className="mt-2 flex flex-wrap items-center gap-3">
+              <h1 className="font-serif text-[34px] sm:text-[40px] leading-[1.02] tracking-tight font-bold">
+                {header.title}
+              </h1>
+              <span
+                className={[
+                  'h-7 px-3 rounded-full inline-flex items-center text-[12px] font-bold uppercase tracking-[0.06em]',
+                  dashboardStatusClass(header.tone)
+                ].join(' ')}
+              >
+                {header.status}
+              </span>
            </div>
+            <p className="text-[15px] text-text/65 mt-2 font-medium leading-relaxed max-w-2xl">
+              {header.subtitle}
+            </p>
          </div>
-        </section>
+          <div className="flex items-center gap-2">
+            <Button variant="tinted" onClick={togglePause}>
+              {!paused ? (
+                <>
+                  <Pause size={14} strokeWidth={2.5} /> {t('btn.pause')}
+                </>
+              ) : (
+                <>
+                  <Play size={14} strokeWidth={2.5} /> {t('btn.start')}
+                </>
+              )}
+            </Button>
+            <Button onClick={openCreate}>
+              <Plus size={15} strokeWidth={2.5} /> {t('btn.add')}
+            </Button>
+          </div>
+        </div>

-        <div className="grid grid-cols-2 xl:grid-cols-4 gap-3 mb-5">
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-8">
          <HeroStat
            tone="accent"
            label={t('dashboard.stat.today_done')}
@@ -315,7 +313,7 @@ export default function Dashboard(): JSX.Element {
          <motion.div
            initial={{ opacity: 0, y: -4 }}
            animate={{ opacity: 1, y: 0 }}
-            className="mb-4 rounded-xl border border-warning/25 bg-warning/10 p-4 flex items-center gap-3"
+            className="mb-6 rounded-2xl bg-warning/12 p-4 flex items-center gap-3"
          >
            <div className="w-10 h-10 rounded-xl bg-warning/18 text-warning grid place-items-center shrink-0">
              <Pause size={18} strokeWidth={2.5} />
@@ -338,7 +336,7 @@ export default function Dashboard(): JSX.Element {
          <motion.div
            initial={{ opacity: 0, y: -4 }}
            animate={{ opacity: 1, y: 0 }}
-            className="mb-4 rounded-xl border border-info/25 bg-info/10 p-4 flex items-center gap-3"
+            className="mb-6 rounded-2xl bg-info/12 p-4 flex items-center gap-3"
          >
            <div className="w-10 h-10 rounded-xl bg-info/18 text-info grid place-items-center shrink-0">
              <Video size={18} strokeWidth={2.5} />
@@ -378,7 +376,7 @@ export default function Dashboard(): JSX.Element {
          </div>
        )}

-        <div className="grid grid-cols-1 xl:grid-cols-2 gap-3">
+        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-2 gap-4">
          <AnimatePresence>
            {exercises.map((ex) => (
              <ExerciseCard
@@ -401,7 +399,7 @@ export default function Dashboard(): JSX.Element {

        {exercises.length === 0 && (
          <div className="mt-12 text-center">
-            <div className="inline-flex w-12 h-12 rounded-xl bg-accent text-white items-center justify-center mb-4">
+            <div className="inline-flex w-14 h-14 rounded-2xl bg-accent text-white items-center justify-center mb-4">
              <Plus size={24} strokeWidth={2.5} />
            </div>
            <div className="font-display text-[20px] font-semibold">
@@ -546,17 +544,17 @@ function MomentumPanel({
      : t('momentum.game.off')

  return (
-    <section className="mb-6 grid grid-cols-1 xl:grid-cols-[0.9fr_1.15fr_0.95fr] gap-3">
-      <div className="bg-surface rounded-xl p-4 shadow-card border border-hairline/30 min-w-0">
+    <section className="mb-8 grid grid-cols-1 lg:grid-cols-[0.9fr_1.1fr_0.95fr] gap-4">
+      <div className="bg-surface rounded-3xl p-5 shadow-card dark:ring-0.5 dark:ring-hairline/30 min-w-0">
        <div className="flex items-center gap-3">
-          <div className="w-9 h-9 rounded-lg bg-warning text-white grid place-items-center shrink-0">
+          <div className="w-10 h-10 rounded-2xl bg-warning text-white grid place-items-center shrink-0">
            <Trophy size={19} strokeWidth={2.5} />
          </div>
          <div className="min-w-0">
            <div className="text-[13px] text-text/55 font-semibold">
              {t('momentum.level.title')}
            </div>
-            <div className="font-display text-[20px] font-bold leading-tight truncate">
+            <div className="font-display text-[22px] font-bold leading-tight truncate">
              {t(momentum.level.key)}
            </div>
          </div>
@@ -584,13 +582,13 @@ function MomentumPanel({
        <ProgressBar pct={momentum.level.progressPct} tone="warning" />
      </div>

-      <div className="bg-surface rounded-xl p-4 shadow-card border border-hairline/30 min-w-0">
+      <div className="bg-surface rounded-3xl p-5 shadow-card dark:ring-0.5 dark:ring-hairline/30 min-w-0">
        <div className="flex items-start justify-between gap-3 mb-3">
          <div className="min-w-0">
            <div className="text-[13px] text-text/55 font-semibold">
              {t('momentum.week.kicker')}
            </div>
-            <h2 className="font-display text-[20px] font-bold leading-tight">
+            <h2 className="font-display text-[22px] font-bold leading-tight">
              {t('momentum.week.title')}
            </h2>
          </div>
@@ -608,29 +606,29 @@ function MomentumPanel({
        </div>
      </div>

-      <div className="bg-surface rounded-xl p-4 shadow-card border border-hairline/30 min-w-0">
+      <div className="bg-surface rounded-3xl p-5 shadow-card dark:ring-0.5 dark:ring-hairline/30 min-w-0">
        <div className="flex items-center gap-3">
-          <div className="w-9 h-9 rounded-lg bg-accent-2 text-white grid place-items-center shrink-0">
+          <div className="w-10 h-10 rounded-2xl bg-accent-2 text-white grid place-items-center shrink-0">
            <Swords size={19} strokeWidth={2.5} />
          </div>
          <div className="min-w-0">
            <div className="text-[13px] text-text/55 font-semibold">
              {t('momentum.game.kicker')}
            </div>
-            <h2 className="font-display text-[20px] font-bold leading-tight">
+            <h2 className="font-display text-[22px] font-bold leading-tight">
              {t('momentum.game.title')}
            </h2>
          </div>
        </div>

-        <div className="mt-4 rounded-lg bg-surface-2 p-3.5">
+        <div className="mt-4 rounded-2xl bg-surface-2 p-4">
          <div className="flex items-center justify-between gap-3">
            <div className="text-[13px] text-text/60 font-semibold">
              {t('momentum.game.status')}
            </div>
            <div
              className={[
-                'text-[12px] px-2 py-1 rounded-md font-semibold',
+                'text-[12px] px-2.5 py-1 rounded-full font-semibold',
                gamesLive
                  ? 'bg-success/12 text-success'
                  : gamesEnabledButNotLive
@@ -664,7 +662,7 @@ function MomentumPanel({
                  })}
                />
              </div>
-              <div className="mt-4 text-[13px] text-text/60 leading-relaxed">
+              <div className="mt-4 text-[13px] text-text/62 leading-relaxed">
                {momentum.gameDebt.lastMatchAt
                  ? t('momentum.game.last', {
                      date: new Date(
@@ -708,7 +706,7 @@ function WeeklyQuestRow({
    <div className="py-3 flex items-center gap-3 min-w-0">
      <div
        className={[
-          'w-8 h-8 rounded-lg grid place-items-center text-white shrink-0',
+          'w-9 h-9 rounded-xl grid place-items-center text-white shrink-0',
          quest.complete
            ? 'bg-success'
            : quest.tone === 'warning'
@@ -786,14 +784,14 @@ function TodayPlanPanel({
  const recovery = recoveryCopy(plan, t)

  return (
-    <section className="mb-6 bg-surface rounded-xl p-4 shadow-card border border-hairline/30">
+    <section className="mb-8 bg-surface rounded-3xl p-5 shadow-card dark:ring-0.5 dark:ring-hairline/30">
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div className="flex items-center gap-3 min-w-0">
-          <div className="w-9 h-9 rounded-lg bg-accent/12 text-accent grid place-items-center shrink-0">
+          <div className="w-10 h-10 rounded-2xl bg-accent/12 text-accent grid place-items-center shrink-0">
            <CalendarCheck size={19} strokeWidth={2.5} />
          </div>
          <div className="min-w-0">
-            <h2 className="font-display text-[20px] font-bold leading-tight">
+            <h2 className="font-display text-[22px] font-bold leading-tight">
              {t('dashboard.plan.title')}
            </h2>
            <div className="text-[14px] text-text/60 mt-0.5">
@@ -803,7 +801,7 @@ function TodayPlanPanel({
        </div>
        <div
          className={[
-            'self-start sm:self-auto h-8 px-2.5 rounded-md inline-flex items-center text-[13px] font-semibold',
+            'self-start sm:self-auto h-8 px-3 rounded-full inline-flex items-center text-[13px] font-semibold',
            plan.dueCount > 0
              ? 'bg-accent/12 text-accent'
              : 'bg-success/12 text-success'
@@ -860,7 +858,7 @@ function TodayPlanPanel({
            </>
          ) : (
            <div className="mt-3 min-w-0">
-              <div className="font-display text-[19px] leading-tight font-bold">
+              <div className="font-display text-[20px] leading-tight font-bold">
                {t('dashboard.plan.clear.title')}
              </div>
              <div className="text-[14px] text-text/60 mt-1">
@@ -925,7 +923,7 @@ function TodayPlanPanel({
          <div className="mt-3 flex items-start gap-3">
            <div
              className={[
-                'w-8 h-8 rounded-lg grid place-items-center shrink-0',
+                'w-9 h-9 rounded-xl grid place-items-center shrink-0',
                recovery.tone
              ].join(' ')}
            >
@@ -975,7 +973,7 @@ function PlanItemGlyph({ item }: { item: PlanItem }): JSX.Element {
  return (
    <div
      className={[
-        'w-9 h-9 rounded-lg grid place-items-center shrink-0',
+        'w-11 h-11 rounded-2xl grid place-items-center shrink-0',
        dueClass
      ].join(' ')}
    >
@@ -1006,7 +1004,7 @@ function PlanListRow({
          {planItemMeta(item, t)}
        </div>
      </div>
-      <div className="text-[13px] text-text/60 shrink-0 max-w-[42%] truncate">
+      <div className="text-[13px] text-text/62 shrink-0 max-w-[42%] truncate">
        {planItemTiming(item, paused, lang, t)}
      </div>
    </div>
@@ -1133,25 +1131,23 @@ function HeroStat({
            : 'bg-text/40'

  return (
-    <div className="bg-surface rounded-xl p-4 shadow-card border border-hairline/30 min-w-0">
-      <div className="flex items-center gap-2 mb-2">
+    <div className="bg-surface rounded-2xl p-5 shadow-card dark:ring-0.5 dark:ring-hairline/30">
+      <div className="flex items-center gap-2 mb-3">
        <div
          className={[
-            'w-7 h-7 rounded-md grid place-items-center text-white shrink-0',
+            'w-7 h-7 rounded-lg grid place-items-center text-white',
            toneBg
          ].join(' ')}
        >
          {icon}
        </div>
-        <div className="text-[13px] text-text/70 font-bold truncate">
-          {label}
-        </div>
+        <div className="text-[14px] text-text/75 font-semibold">{label}</div>
      </div>
-      <div className="font-display text-[24px] font-bold leading-tight truncate">
+      <div className="font-display text-[28px] font-bold tracking-tight leading-none">
        {value}
      </div>
      {subvalue && (
-        <div className="text-[12px] text-text/58 mt-1 font-medium truncate">
+        <div className="text-[13px] text-text/60 mt-2 font-medium">
          {subvalue}
        </div>
      )}
--- a/src/renderer/src/pages/Exercises.tsx
+++ b/src/renderer/src/pages/Exercises.tsx
@@ -27,8 +27,8 @@ export default function Exercises(): JSX.Element {
  const totalReps = enabled.reduce((sum, e) => sum + e.reps, 0)

  return (
-    <div className="h-full overflow-y-auto desktop-scroll">
-      <div className="max-w-[980px] mx-auto px-5 lg:px-8 pt-6 pb-10">
+    <div className="h-full overflow-y-auto">
+      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-10 pt-8 pb-12">
        <PageHeader
          kicker={t('exercises.kicker')}
          title={t('exercises.title')}
@@ -122,7 +122,7 @@ export default function Exercises(): JSX.Element {
        {exercises.length === 0 && (
          <Card>
            <div className="px-5 py-12 flex flex-col items-center text-center">
-              <div className="inline-flex w-12 h-12 rounded-xl bg-accent text-white items-center justify-center mb-4">
+              <div className="inline-flex w-14 h-14 rounded-2xl bg-accent text-white items-center justify-center mb-4">
                <Plus size={24} strokeWidth={2.5} />
              </div>
              <div className="text-text/65 text-[15px] font-medium max-w-xs leading-snug">
--- a/src/renderer/src/pages/Games.tsx
+++ b/src/renderer/src/pages/Games.tsx
@@ -66,14 +66,14 @@ export default function GamesPage(): JSX.Element {
  ).length

  return (
-    <div className="h-full overflow-y-auto desktop-scroll">
-      <div className="max-w-[980px] mx-auto px-5 lg:px-8 pt-6 pb-10">
-        <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-6">
+    <div className="h-full overflow-y-auto">
+      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-10 pt-8 pb-12">
+        <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-8">
          <div>
            <div className="text-[14px] text-text/65 font-semibold">
              {t('games.kicker')}
            </div>
-            <h1 className="font-display text-[30px] sm:text-[34px] leading-tight mt-1 font-bold">
+            <h1 className="font-serif text-[34px] sm:text-[40px] leading-[1.02] tracking-tight mt-1 font-bold">
              {t('games.title')}
            </h1>
            <p className="text-[15px] text-text/65 mt-2 font-medium leading-relaxed">
@@ -124,7 +124,7 @@ export default function GamesPage(): JSX.Element {
        </InsightGrid>

        <SectionHeader title={t('games.section.supported')} />
-        <div className="space-y-3">
+        <div className="space-y-4">
          {games.map((g, i) => (
            <motion.div
              key={g.id}
@@ -185,12 +185,12 @@ function GameCard({
    game.enabled

  return (
-    <div className="bg-surface rounded-xl p-4 shadow-card border border-hairline/30">
+    <div className="bg-surface rounded-3xl p-5 shadow-card dark:ring-0.5 dark:ring-hairline/30">
      <div className="flex items-start justify-between gap-4">
        <div className="flex items-start gap-4 min-w-0 flex-1">
          <div
            className={[
-              'w-10 h-10 rounded-lg grid place-items-center shrink-0 text-white',
+              'w-12 h-12 rounded-2xl grid place-items-center shrink-0 text-white',
              isLive
                ? 'bg-success'
                : game.integrationActive
@@ -202,7 +202,7 @@ function GameCard({
          </div>
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2 flex-wrap">
-              <h3 className="font-display text-[18px] font-bold">
+              <h3 className="font-display text-[18px] font-bold tracking-tight">
                {game.name}
              </h3>
              <StatusBadge game={game} isLive={isLive} />
@@ -220,7 +220,7 @@ function GameCard({
      </div>

      {game.integrationActive && game.launchOptionStatus === 'queued' && (
-        <div className="mt-4 rounded-lg bg-warning/12 p-3.5 text-[14px] leading-relaxed flex items-start gap-2.5 font-medium">
+        <div className="mt-4 rounded-2xl bg-warning/12 p-4 text-[14px] leading-relaxed flex items-start gap-2.5 font-medium">
          <Hourglass
            size={17}
            className="text-warning shrink-0 mt-0.5"
@@ -235,7 +235,7 @@ function GameCard({
      )}

      {game.integrationActive && game.launchOptionStatus === 'no_user' && (
-        <div className="mt-4 rounded-lg bg-destructive/10 p-3.5 text-[14px] leading-relaxed flex items-start gap-2.5 font-medium">
+        <div className="mt-4 rounded-2xl bg-destructive/10 p-4 text-[14px] leading-relaxed flex items-start gap-2.5 font-medium">
          <AlertTriangle
            size={17}
            className="text-destructive shrink-0 mt-0.5"
@@ -345,7 +345,7 @@ function DevPanel({ games }: { games: GameStatus[] }): JSX.Element | null {
    <div className="mt-10">
      <button
        onClick={() => setOpen(!open)}
-        className="text-[12px] text-text/40 hover:text-text/70 font-mono-num font-medium transition-colors"
+        className="text-[12px] uppercase tracking-wider text-text/40 hover:text-text/70 font-mono-num font-medium transition-colors"
      >
        {open ? '▾' : '▸'} {t('games.dev.toggle')}
      </button>
--- a/src/renderer/src/pages/Meals.tsx
+++ b/src/renderer/src/pages/Meals.tsx
@@ -64,8 +64,8 @@ export default function Meals(): JSX.Element {
  }

  return (
-    <div className="h-full overflow-y-auto desktop-scroll">
-      <div className="max-w-[980px] mx-auto px-5 lg:px-8 pt-6 pb-10">
+    <div className="h-full overflow-y-auto">
+      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-10 pt-8 pb-12">
        <PageHeader
          kicker={t('meals.kicker')}
          title={t('meals.title')}
@@ -113,7 +113,7 @@ export default function Meals(): JSX.Element {
            <button
              key={p.nameKey}
              onClick={() => addPreset(p)}
-              className="inline-flex items-center gap-2 h-9 px-3 rounded-lg bg-surface border border-hairline/35 hover:border-accent/45 hover:text-accent text-text/80 text-[14px] font-semibold transition-colors active:translate-y-px"
+              className="inline-flex items-center gap-2 h-10 px-3.5 rounded-2xl bg-surface-2 hover:bg-accent/15 hover:text-accent text-text/80 text-[14px] font-semibold transition-colors active:scale-95"
            >
              <Icon name={p.icon} size={16} strokeWidth={2.3} />
              {t(p.nameKey)}
@@ -157,7 +157,7 @@ export default function Meals(): JSX.Element {
        {meals.length === 0 && (
          <Card>
            <div className="px-5 py-12 flex flex-col items-center text-center">
-              <div className="inline-flex w-12 h-12 rounded-xl bg-accent text-white items-center justify-center mb-4">
+              <div className="inline-flex w-14 h-14 rounded-2xl bg-accent text-white items-center justify-center mb-4">
                <UtensilsCrossed size={24} strokeWidth={2.3} />
              </div>
              <div className="text-text/65 text-[15px] font-medium max-w-xs leading-snug">
--- a/src/renderer/src/pages/Settings.tsx
+++ b/src/renderer/src/pages/Settings.tsx
@@ -36,7 +36,7 @@ export default function SettingsPage(): JSX.Element {
  if (!settings)
    return (
      <div
-        className="max-w-[980px] mx-auto px-5 lg:px-8 pt-6 pb-10 space-y-5"
+        className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-10 pt-8 pb-12 space-y-5"
        role="status"
        aria-label={t('settings.loading')}
      >
@@ -52,13 +52,13 @@ export default function SettingsPage(): JSX.Element {
  }

  return (
-    <div className="h-full overflow-y-auto desktop-scroll">
-      <div className="max-w-[980px] mx-auto px-5 lg:px-8 pt-6 pb-10">
+    <div className="h-full overflow-y-auto">
+      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-10 pt-8 pb-12">
        <div className="mb-6">
          <div className="text-[14px] text-text/65 font-semibold">
            {t('settings.kicker')}
          </div>
-          <h1 className="font-display text-[30px] sm:text-[34px] leading-tight mt-1 font-bold">
+          <h1 className="font-serif text-[34px] sm:text-[40px] leading-[1.02] tracking-tight mt-1 font-bold">
            {t('settings.title')}
          </h1>
        </div>
@@ -260,27 +260,27 @@ function SettingsStatusPanel({
 }): JSX.Element {
  const { t } = useT()
  return (
-    <section className="mb-5 rounded-xl bg-surface p-4 shadow-card border border-hairline/30">
+    <section className="mb-6 rounded-3xl bg-surface p-5 shadow-card dark:ring-0.5 dark:ring-hairline/30">
      <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
        <div className="flex items-start gap-3 min-w-0">
          <div
            className={[
-              'w-10 h-10 rounded-lg grid place-items-center text-white shrink-0',
+              'w-11 h-11 rounded-2xl grid place-items-center text-white shrink-0',
              settings.globalEnabled ? 'bg-success' : 'bg-warning'
            ].join(' ')}
          >
            <Power size={20} strokeWidth={2.5} />
          </div>
          <div className="min-w-0 flex-1">
-            <div className="text-[13px] text-text/50 font-bold">
+            <div className="text-[13px] uppercase tracking-[0.06em] text-text/50 font-bold">
              {t('settings.status.kicker')}
            </div>
-            <h2 className="font-display text-[20px] font-bold leading-tight mt-1">
+            <h2 className="font-display text-[22px] font-bold leading-tight mt-1">
              {settings.globalEnabled
                ? t('settings.status.title.on')
                : t('settings.status.title.off')}
            </h2>
-            <p className="text-[14px] text-text/60 mt-1 leading-relaxed max-w-xl break-words">
+            <p className="text-[14px] text-text/62 mt-1 leading-relaxed max-w-xl break-words">
              {settingsStatusHint(settings, t)}
            </p>
          </div>
@@ -352,7 +352,7 @@ function StatusPill({
 }): JSX.Element {
  const activeClass = tone === 'info' ? 'text-info' : 'text-success'
  return (
-    <div className="rounded-lg bg-surface-2 px-3.5 py-3 min-w-0">
+    <div className="rounded-2xl bg-surface-2 px-3.5 py-3 min-w-0">
      <div className="text-[12px] text-text/50 font-semibold leading-tight">
        {label}
      </div>
--- a/src/renderer/src/styles/globals.css
+++ b/src/renderer/src/styles/globals.css
@@ -20,59 +20,56 @@
@tailwind components;
@tailwind utilities;

-/* ===== Design tokens: desktop workstation ===== */
+/* ===== Design tokens — Apple HIG with Manrope/Fraunces ===== */

 :root {
-  --accent: 16 118 110;
-  --accent-2: 225 29 72;
-  --success: 22 163 74;
-  --warning: 217 119 6;
-  --destructive: 220 38 38;
-  --info: 37 99 235;
+  /* Brand & semantic colors (iOS system palette) */
+  --accent: 255 107 53; /* Apple Fitness Move orange */
+  --accent-2: 255 45 85; /* systemPink */
+  --success: 52 199 89; /* systemGreen */
+  --warning: 255 159 10; /* systemOrange dark */
+  --destructive: 255 59 48; /* systemRed */
+  --info: 0 122 255; /* systemBlue */

  color-scheme: light dark;
 }

+/* Light — polished iOS groupedBackground with warm undertone */
 :root {
-  --bg: 244 246 247;
+  --bg: 245 245 249; /* slightly warmer than 242,242,247 */
  --surface: 255 255 255;
-  --surface-2: 236 240 242;
-  --text: 22 27 29;
-  --text-secondary: 72 82 87;
-  --text-tertiary: 103 113 118;
-  --hairline: 174 185 190;
+  --surface-2: 240 240 245; /* subtle separation for inputs/sections */
+  --text: 17 17 19; /* not pure black — softer */
+  --text-secondary: 60 60 67;
+  --text-tertiary: 60 60 67;
+  --hairline: 60 60 67;
  --vibrancy: 255 255 255;
-  --sidebar: 26 31 33;
-  --sidebar-text: 245 247 248;
-  --sidebar-muted: 156 170 176;

-  --accent-soft: 16 118 110;
-  --bg-deep: 226 231 233;
+  --accent-soft: 255 107 53;
+  --bg-deep: 232 232 238;
  --surface-elevated: 255 255 255;
-  --border: 174 185 190;
-  --muted: 72 82 87;
-  --victory: 22 163 74;
-  --defeat: 220 38 38;
-  --xp: 217 119 6;
+  --border: 60 60 67;
+  --muted: 60 60 67;
+  --victory: 52 199 89;
+  --defeat: 255 59 48;
+  --xp: 255 159 10;
 }

+/* Dark — true black with grey elevation */
 .dark {
-  --bg: 16 18 19;
-  --surface: 28 32 34;
-  --surface-2: 40 46 49;
-  --text: 245 247 248;
-  --text-secondary: 203 211 215;
-  --text-tertiary: 152 164 170;
-  --hairline: 84 96 101;
-  --vibrancy: 28 32 34;
-  --sidebar: 17 22 24;
-  --sidebar-text: 248 250 250;
-  --sidebar-muted: 146 161 168;
+  --bg: 0 0 0;
+  --surface: 28 28 30;
+  --surface-2: 44 44 46;
+  --text: 255 255 255;
+  --text-secondary: 235 235 245;
+  --text-tertiary: 235 235 245;
+  --hairline: 84 84 88;
+  --vibrancy: 28 28 30;

-  --bg-deep: 12 14 15;
-  --surface-elevated: 36 42 45;
-  --border: 84 96 101;
-  --muted: 203 211 215;
+  --bg-deep: 0 0 0;
+  --surface-elevated: 44 44 46;
+  --border: 84 84 88;
+  --muted: 235 235 245;
 }

 /* ===== Base ===== */
@@ -88,31 +85,50 @@ body,

 body {
  font-family:
-    -apple-system, 'Segoe UI Variable Text', 'Segoe UI', 'Plus Jakarta Sans',
-    system-ui, sans-serif;
+    'Plus Jakarta Sans',
+    -apple-system,
+    'SF Pro Text',
+    'Segoe UI Variable Text',
+    'Segoe UI',
+    system-ui,
+    sans-serif;
  background-color: rgb(var(--bg));
  color: rgb(var(--text));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  line-height: 1.5;
-  letter-spacing: 0;
+  letter-spacing: -0.005em;
 }

+/* Display — Bricolage Grotesque for headings and brand. Variable opsz axis
+   gives bigger glyphs slightly more character. */
 .font-display {
  font-family:
-    -apple-system, 'Segoe UI Variable Display', 'Segoe UI', 'Plus Jakarta Sans',
-    system-ui, sans-serif;
+    'Bricolage Grotesque',
+    'Plus Jakarta Sans',
+    -apple-system,
+    'SF Pro Display',
+    system-ui,
+    sans-serif;
  font-optical-sizing: auto;
-  letter-spacing: 0;
+  font-variation-settings: 'opsz' 24;
+  letter-spacing: -0.02em;
 }

+/* Serif → repurposed for the "hero" big titles. Same Bricolage but with the
+   opsz axis pushed to 96 for distinctive display feel. */
 .font-serif {
  font-family:
-    -apple-system, 'Segoe UI Variable Display', 'Segoe UI', 'Plus Jakarta Sans',
-    system-ui, sans-serif;
+    'Bricolage Grotesque',
+    'Plus Jakarta Sans',
+    -apple-system,
+    'SF Pro Display',
+    system-ui,
+    sans-serif;
  font-optical-sizing: auto;
-  letter-spacing: 0;
+  font-variation-settings: 'opsz' 96;
+  letter-spacing: -0.035em;
 }

 .font-mono-num {
@@ -120,14 +136,7 @@ body {
    'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'ss02', 'ss19', 'zero';
-  letter-spacing: 0;
-}
-
-.tracking-tight,
-.tracking-wider,
-.tracking-\[0\.06em\],
-.tracking-\[0\.18em\] {
-  letter-spacing: 0 !important;
+  letter-spacing: -0.01em;
 }

 /* Custom titlebar drag region */
@@ -140,47 +149,36 @@ body {
  app-region: no-drag;
 }

-/* Crisp panel separators for dense desktop surfaces */
+/* iOS 0.5px-style hairlines */
 .hairline-b {
-  box-shadow: inset 0 -1px 0 rgb(var(--hairline) / 0.34);
+  box-shadow: inset 0 -0.5px 0 rgb(var(--hairline) / 0.18);
 }
 .hairline-t {
-  box-shadow: inset 0 1px 0 rgb(var(--hairline) / 0.34);
+  box-shadow: inset 0 0.5px 0 rgb(var(--hairline) / 0.18);
+}
+.dark .hairline-b,
+.dark .hairline-t {
+  box-shadow: inset 0 -0.5px 0 rgb(var(--hairline) / 0.4);
 }

+/* macOS vibrancy */
 .vibrancy {
-  background-color: rgb(var(--vibrancy) / 0.96);
-  backdrop-filter: none;
-  -webkit-backdrop-filter: none;
+  background-color: rgb(var(--vibrancy) / 0.72);
+  backdrop-filter: saturate(180%) blur(30px);
+  -webkit-backdrop-filter: saturate(180%) blur(30px);
 }

+/* Soft iOS card shadow with subtle warmth */
 .shadow-card {
  box-shadow:
-    0 0 0 1px rgb(var(--hairline) / 0.24),
-    0 10px 28px -24px rgb(15 23 42 / 0.45);
+    0 0.5px 0 rgb(0 0 0 / 0.03),
+    0 1px 2px rgb(15 23 42 / 0.04),
+    0 6px 14px -4px rgb(15 23 42 / 0.05);
 }
 .dark .shadow-card {
  box-shadow:
-    0 0 0 1px rgb(var(--hairline) / 0.38),
-    0 16px 40px -30px rgb(0 0 0 / 0.9);
-}
-
-.app-shell {
-  background: linear-gradient(
-    180deg,
-    rgb(var(--bg)) 0%,
-    rgb(var(--bg-deep)) 100%
-  );
-}
-
-.app-main-surface {
-  background:
-    linear-gradient(180deg, rgb(var(--surface) / 0.78), transparent 220px),
-    rgb(var(--bg));
-}
-
-.desktop-scroll {
-  scrollbar-gutter: stable;
+    0 0.5px 0 rgb(255 255 255 / 0.04) inset,
+    0 1px 2px rgb(0 0 0 / 0.4);
 }

 /* Scrollbar */
@@ -210,12 +208,12 @@ body {

 .reminder-shell {
  position: relative;
-  border: 1px solid rgb(var(--hairline) / 0.35);
-  border-radius: 12px;
+  border: 0.5px solid rgb(var(--hairline) / 0.25);
+  border-radius: 22px;
  background: rgb(var(--surface));
  box-shadow:
-    0 1px 2px rgb(0 0 0 / 0.08),
-    0 24px 70px -28px rgb(0 0 0 / 0.55);
+    0 1px 2px rgb(0 0 0 / 0.06),
+    0 20px 50px -16px rgb(0 0 0 / 0.4);
  overflow: hidden;
  height: 100%;
 }
--- a/src/shared/release-notes.ts
+++ b/src/shared/release-notes.ts
@@ -21,57 +21,33 @@ export type ReleaseNoteItem = {
 export type ReleaseNotes = Record<Language, ReleaseNoteItem[]>

 export const RELEASE_NOTES: Record<string, ReleaseNotes> = {
-  '0.7.0': {
+  '0.7.1': {
    ru: [
      {
-        title: 'Новый desktop-дизайн',
+        title: 'Вернули последний удачный дизайн',
        detail:
-          'Приложение стало рабочей панелью: темный сайдбар, четкие панели, меньше декоративности и больше полезной плотности.',
-        tag: 'new'
+          'Редизайн 0.7.0 откатан: интерфейс снова выглядит как сохраненная версия “последнее-удачное”.',
+        tag: 'fix'
      },
      {
-        title: 'Обзор стал операционным экраном',
+        title: 'Откат придет через автообновление',
        detail:
-          'Главный экран теперь быстрее показывает ближайший шаг, статус, цели, питание, режим и игровые долги.',
-        tag: 'new'
-      },
-      {
-        title: 'Настройки и списки стали спокойнее',
-        detail:
-          'Упражнения, питание, игры, челленджи и настройки получили единый desktop-контейнер и компактные строки.',
-        tag: 'new'
-      },
-      {
-        title: 'Модалки и напоминания обновлены',
-        detail:
-          'Редакторы, переключатели, кнопки и окно напоминания приведены к новой desktop-системе.',
-        tag: 'new'
+          'Версия 0.7.1 опубликована как обычный релиз, чтобы установленная 0.7.0 сама вернулась к старому виду.',
+        tag: 'fix'
      }
    ],
    en: [
      {
-        title: 'New desktop design',
+        title: 'Restored the last good design',
        detail:
-          'The app now feels like a focused workstation: dark sidebar, crisp panels, less decoration and better density.',
-        tag: 'new'
+          'The 0.7.0 redesign was rolled back: the UI is back to the saved last-good version.',
+        tag: 'fix'
      },
      {
-        title: 'Overview is more operational',
+        title: 'Rollback ships through auto-update',
        detail:
-          'The main screen surfaces the next action, status, goals, meals, mode and game debt faster.',
-        tag: 'new'
-      },
-      {
-        title: 'Settings and lists are calmer',
-        detail:
-          'Exercises, meals, games, challenges and settings now share a tighter desktop container and compact rows.',
-        tag: 'new'
-      },
-      {
-        title: 'Dialogs and reminders were refreshed',
-        detail:
-          'Editors, switches, buttons and the reminder window now follow the new desktop system.',
-        tag: 'new'
+          'Version 0.7.1 is a normal release so installed 0.7.0 copies can return to the old look automatically.',
+        tag: 'fix'
      }
    ]
  },
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -5,7 +5,7 @@ export default {
  theme: {
    extend: {
      colors: {
-        // Desktop semantic palette
+        // iOS semantic palette
        accent: 'rgb(var(--accent) / <alpha-value>)',
        'accent-soft': 'rgb(var(--accent-soft) / <alpha-value>)',
        'accent-2': 'rgb(var(--accent-2) / <alpha-value>)',
@@ -20,9 +20,6 @@ export default {
        surface: 'rgb(var(--surface) / <alpha-value>)',
        'surface-2': 'rgb(var(--surface-2) / <alpha-value>)',
        'surface-elevated': 'rgb(var(--surface-elevated) / <alpha-value>)',
-        sidebar: 'rgb(var(--sidebar) / <alpha-value>)',
-        'sidebar-text': 'rgb(var(--sidebar-text) / <alpha-value>)',
-        'sidebar-muted': 'rgb(var(--sidebar-muted) / <alpha-value>)',

        // Text & lines
        text: 'rgb(var(--text) / <alpha-value>)',
@@ -71,14 +68,15 @@ export default {
        ]
      },
      borderRadius: {
-        xl: '8px',
-        '2xl': '10px',
-        '3xl': '12px'
+        // iOS-specific radii
+        xl: '14px',
+        '2xl': '18px',
+        '3xl': '22px'
      },
      boxShadow: {
-        ios: '0 1px 2px rgb(15 23 42 / 0.06), 0 10px 28px -24px rgb(15 23 42 / 0.35)',
+        ios: '0 0.5px 0 rgb(0 0 0 / 0.04), 0 1px 2px rgb(0 0 0 / 0.05), 0 4px 12px rgb(0 0 0 / 0.04)',
        sheet:
-          '0 1px 2px rgb(15 23 42 / 0.08), 0 24px 60px -28px rgb(15 23 42 / 0.45)'
+          '0 1px 2px rgb(0 0 0 / 0.06), 0 20px 50px -16px rgb(0 0 0 / 0.4)'
      }
    }
  },
Author	SHA1	Message	Date
Codex	a92f642a3e	chore(release): v0.7.1	2026-06-09 01:00:35 +07:00
Codex	8176df3ca2	docs(release): note rollback to last good design	2026-06-09 00:58:59 +07:00
Codex	20a260d0cc	Revert "feat(ui): redesign desktop experience" This reverts commit `f61e076e46`.	2026-06-09 00:56:40 +07:00