chore(release): v0.7.0

CHANGELOG.md

@@ -6,6 +6,24 @@
 
 ## [Unreleased]
 
+## [0.7.0] — 2026-06-08
+
+### Added
+
+- Текущая версия `v0.6.6` сохранена отдельным тегом `последнее-удачное`
+  как точка отката перед большим редизайном.
+
+### Changed
+
+- Интерфейс приложения пересобран в новом desktop-направлении: темный сайдбар,
+  плотный рабочий контент, нейтральная палитра, чёткие панели и радиусы 8–10px.
+- Главный экран стал операционным overview: верхняя панель состояния, компактные
+  status tiles, план ближайшего шага, цели, питание, режим и игровые долги.
+- Страницы упражнений, питания, игр, челленджей и настроек получили единый
+  desktop-контейнер, более плотные списки и менее декоративные summary-блоки.
+- Редакторы, модальные окна, кнопки, переключатели, heatmap, достижения и окно
+  напоминания приведены к новой desktop-системе.
+
 ## [0.6.6] — 2026-06-08
 
 ### Added
@@ -170,7 +188,7 @@ clearHistory/import`, Dashboard на него подписан.
 ### Fixed (P1 — UX просадки)
 
 - **Удаление упражнения теперь спрашивает подтверждение.** Раньше
-  один клик в menu «Удалить» сразу удалял. Сейчас iOS-style ConfirmModal
+  один клик в menu «Удалить» сразу удалял. Сейчас ConfirmModal
   с destructive-кнопкой.
 - **Daily goal закрыт — больше не «25 часов 13 минут».** Когда дневная
   цель достигнута, ExerciseCard показывает «Цель закрыта · 100/100»
@@ -179,7 +197,7 @@ clearHistory/import`, Dashboard на него подписан.
   молча — пользователь не понимал почему через 12 мин ничего не пришло.
   Сейчас info-баннер активной встречи с указанием закрыть
   Zoom/Teams/etc.
-- **Native `window.confirm()` → iOS-style ConfirmModal** в restore-операции.
+- **Native `window.confirm()` → ConfirmModal** в restore-операции.
   Раньше всплывал серый системный диалог.
 
 ### Fixed (P2 — полировка)
@@ -205,7 +223,7 @@ clearHistory/import`, Dashboard на него подписан.
 ### Added
 
 - `src/renderer/src/components/ui/ConfirmModal.tsx` — переиспользуемый
-  iOS-style confirm с focus-trap'ом через Modal.
+  confirm с focus-trap'ом через Modal.
 - IPC `markChallengeDone(challengeId, reps)` — handler в main, метод в
   preload (раньше канал был в IPC enum, handler не зарегистрирован).
 - IPC `getMeetingActive` + event `evtMeetingChanged` — meeting-detect
@@ -532,9 +550,9 @@ days=[Mon..Fri]` теперь правильно проверяется день
 
 ## [0.3.x] — 2026-05-17
 
-Серия мелких релизов с дизайн-итерациями (Apple iOS / macOS aesthetic):
+Серия мелких релизов с ранними дизайн-итерациями:
 шрифты Plus Jakarta Sans + Bricolage Grotesque, светлая/тёмная/системная
-тема, vibrancy sidebar, iOS-grouped lists, spring-анимации.
+тема, полупрозрачный сайдбар, grouped lists, spring-анимации.
 
 ## [0.2.0] — 2026-05-16
 
@@ -550,7 +568,8 @@ days=[Mon..Fri]` теперь правильно проверяется день
 иконки), системный трей, автозапуск с Windows, native-уведомления,
 NSIS-инсталлятор, auto-update через electron-updater.
 
-[Unreleased]: https://git.xn--90adajar8af4h.xn--p1ai/AnRil/laude/compare/v0.6.6...HEAD
+[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
 [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

README.md

@@ -2,7 +2,7 @@
 
 Windows desktop приложение, которое помогает делать короткие перерывы без потери фокуса: держит план дня, напоминает размяться, ведёт недельные челленджи и превращает Dota 2 статистику после матча в игровые долги.
 
-[![release](https://img.shields.io/badge/release-v0.6.6-orange)](https://git.xn--90adajar8af4h.xn--p1ai/AnRil/laude/releases/latest)
+[![release](https://img.shields.io/badge/release-v0.7.0-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 приседаний`).
-- **Apple-style интерфейс** — Plus Jakarta Sans + Bricolage Grotesque, iOS-палитра, vibrancy sidebar, spring-анимации, светлая/тёмная/системная тема.
+- **Desktop-интерфейс** — темный сайдбар, плотные рабочие панели, чёткие строки списков, светлая/тёмная/системная тема.
 - **Два языка** — русский и английский, переключение мгновенное.
 - **Auto-update** — приложение само скачивает новые версии из фиксированного `update-channel` (проверка каждый час, силент-ретрай при сетевых сбоях).
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "laude",
-  "version": "0.6.6",
+  "version": "0.7.0",
   "description": "Разомнись — Windows desktop break and exercise reminder",
   "main": "out/main/index.js",
   "author": "AnRil",

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 bg-bg">
+        <div className="h-screen w-screen flex flex-col app-shell 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">
+            <main className="flex-1 overflow-hidden min-w-0 app-main-surface">
               {hydrated ? (
                 <ErrorBoundary>
                   <RoutedPages onNav={() => setCompactNavOpen(false)} />

src/renderer/src/ReminderApp.tsx

@@ -226,8 +226,7 @@ export default function ReminderApp(): JSX.Element {
           void window.api.markChallengeDone(id, result.reps)
         }
         // 2) Functional update: rapid-click race-safe.
-        setMode((m) =>
+        setMode((m) => {
-          {
           if (m.kind !== 'match') return m
           const nextMode: Mode = {
             kind: 'match',
@@ -236,8 +235,7 @@ export default function ReminderApp(): JSX.Element {
           }
           modeRef.current = nextMode
           return nextMode
-          }
+        })
-        )
       }}
       onClose={close}
     />
@@ -330,7 +328,7 @@ function ExerciseReminder({
           transition={{ type: 'spring', stiffness: 300, damping: 24 }}
           className="relative mb-6"
         >
-          <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)]">
+          <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)]">
             <Icon name={exercise.icon} size={44} strokeWidth={2} />
           </div>
         </motion.div>
@@ -338,7 +336,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-serif text-[30px] leading-tight tracking-tight mt-2 mb-3 font-bold">
+        <h1 className="font-display text-[30px] leading-tight mt-2 mb-3 font-bold">
           {exercise.name}
         </h1>
 
@@ -346,7 +344,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-full bg-surface-2 text-text/65 hover:text-text hover:bg-hairline/25 active:scale-90 transition-all"
+            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"
             aria-label={t('reminder.aria.decrement')}
           >
             <Minus size={16} strokeWidth={2.5} />
@@ -354,7 +352,7 @@ function ExerciseReminder({
           <div className="inline-flex items-baseline gap-2 font-mono-num min-w-[120px] justify-center">
             <span
               className={[
-                'text-[56px] font-semibold tracking-tight leading-none',
+                'text-[54px] font-semibold leading-none',
                 adjusted ? 'text-accent' : 'text-text'
               ].join(' ')}
             >
@@ -366,7 +364,7 @@ function ExerciseReminder({
           </div>
           <button
             onClick={inc}
-            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"
+            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"
             aria-label={t('reminder.aria.increment')}
           >
             <Plus size={16} strokeWidth={2.5} />
@@ -392,21 +390,21 @@ function ExerciseReminder({
       <div className="px-4 pb-4 space-y-2">
         <button
           onClick={done}
-          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"
+          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"
         >
           <Check size={17} strokeWidth={2.5} /> {t('reminder.btn.done')}
         </button>
         <div className="grid grid-cols-2 gap-2">
           <button
             onClick={snooze}
-            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"
+            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"
           >
             <Clock size={15} strokeWidth={2.5} />{' '}
             {t('btn.snooze_min', { n: snoozeMinutes })}
           </button>
           <button
             onClick={skip}
-            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"
+            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"
           >
             {t('btn.skip')}
           </button>
@@ -452,7 +450,10 @@ 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()
       }
@@ -481,7 +482,7 @@ function MealReminder({
           transition={{ type: 'spring', stiffness: 300, damping: 24 }}
           className="relative mb-6"
         >
-          <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)]">
+          <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)]">
             <Icon name={meal.icon} size={44} strokeWidth={2} />
           </div>
         </motion.div>
@@ -489,7 +490,7 @@ function MealReminder({
         <div className="text-[13px] uppercase tracking-[0.18em] text-success font-bold">
           {t('meal.cta')}
         </div>
-        <h1 className="font-serif text-[30px] leading-tight tracking-tight mt-2 mb-3 font-bold">
+        <h1 className="font-display text-[30px] leading-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">
@@ -500,13 +501,13 @@ function MealReminder({
       <div className="px-4 pb-4 space-y-2">
         <button
           onClick={done}
-          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"
+          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"
         >
           <Check size={17} strokeWidth={2.5} /> {t('meal.btn.ate')}
         </button>
         <button
           onClick={snooze}
-          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"
+          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"
         >
           <Clock size={15} strokeWidth={2.5} />{' '}
           {t('btn.snooze_min', { n: snoozeMinutes })}
@@ -567,7 +568,7 @@ function MatchSummaryView({
           animate={{ scale: 1, opacity: 1 }}
           transition={{ type: 'spring', stiffness: 280, damping: 22 }}
           className={[
-            'inline-flex items-center justify-center w-14 h-14 rounded-2xl mb-3 text-white',
+            'inline-flex items-center justify-center w-12 h-12 rounded-xl mb-3 text-white',
             won ? 'bg-success' : lost ? 'bg-destructive' : 'bg-accent'
           ].join(' ')}
         >
@@ -579,7 +580,7 @@ function MatchSummaryView({
             <Gamepad2 size={26} strokeWidth={2} />
           )}
         </motion.div>
-        <h1 className="font-serif text-[26px] tracking-tight font-bold">
+        <h1 className="font-display text-[25px] font-bold">
           {won
             ? t('match.title.won')
             : lost
@@ -626,7 +627,7 @@ function MatchSummaryView({
         <button
           onClick={onClose}
           className={[
-            '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',
+            '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',
             allDone ? 'bg-success' : 'bg-accent'
           ].join(' ')}
         >
@@ -661,13 +662,13 @@ function ChallengeRow({
       initial={{ opacity: 0, x: -8 }}
       animate={{ opacity: 1, x: 0 }}
       className={[
-        'flex items-center gap-3 rounded-2xl p-3 transition-colors',
+        'flex items-center gap-3 rounded-lg p-3 transition-colors',
         done ? 'bg-success/10' : 'bg-surface-2'
       ].join(' ')}
     >
       <div
         className={[
-          'w-10 h-10 rounded-xl grid place-items-center shrink-0',
+          'w-9 h-9 rounded-lg grid place-items-center shrink-0',
           done ? 'bg-success text-white' : 'bg-accent text-white'
         ].join(' ')}
       >
@@ -691,7 +692,7 @@ function ChallengeRow({
       </div>
       <div
         className={[
-          'font-mono-num text-[20px] font-semibold tracking-tight',
+          'font-mono-num text-[20px] font-semibold',
           done ? 'text-success' : 'text-accent'
         ].join(' ')}
       >
@@ -701,7 +702,7 @@ function ChallengeRow({
         onClick={onMarkDone}
         disabled={done}
         className={[
-          'h-9 w-9 grid place-items-center rounded-full transition-all',
+          'h-9 w-9 grid place-items-center rounded-lg transition-all',
           done
             ? 'bg-success text-white cursor-default'
             : 'bg-accent text-white active:scale-90'

src/renderer/src/components/AchievementsCard.tsx

@@ -1,6 +1,13 @@
 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,
@@ -106,7 +113,7 @@ export function AchievementsCard({ history, exercises }: Props): JSX.Element {
   if (visible.length === 0) return <></>
 
   return (
-    <div className="bg-surface rounded-2xl p-5 shadow-card dark:ring-0.5 dark:ring-hairline/30">
+    <div className="bg-surface rounded-xl p-4 shadow-card border border-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">
@@ -125,11 +132,7 @@ 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
+          <Badge key={a.def.id} a={a} fresh={freshlyUnlocked.has(a.def.id)} />
-            key={a.def.id}
-            a={a}
-            fresh={freshlyUnlocked.has(a.def.id)}
-          />
         ))}
       </div>
     </div>
@@ -177,7 +180,7 @@ function Badge({
           : {}
       }
       className={[
-        'rounded-xl p-2.5 transition-opacity',
+        'rounded-lg p-2.5 transition-opacity',
         a.unlocked ? 'bg-surface-2' : 'bg-surface-2 opacity-55'
       ].join(' ')}
       title={t(a.def.descKey, { target: a.target })}
@@ -185,7 +188,7 @@ function Badge({
       <div className="flex items-center gap-2 mb-1.5">
         <div
           className={[
-            'w-7 h-7 rounded-lg grid place-items-center text-white shrink-0',
+            'w-7 h-7 rounded-md grid place-items-center text-white shrink-0',
             a.unlocked ? toneBg : 'bg-text/30'
           ].join(' ')}
         >

src/renderer/src/components/ExerciseCard.tsx

@@ -19,11 +19,6 @@ 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,
@@ -115,32 +110,31 @@ 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-3xl p-5 shadow-card dark:ring-0.5 dark:ring-hairline/30"
+      className="relative bg-surface rounded-xl p-4 shadow-card border border-hairline/30"
     >
-      <div className="flex items-start gap-4">
+      <div className="flex items-start gap-3">
-        {/* Icon + progress ring */}
+        <div className="relative w-12 h-12 shrink-0">
-        <div className="relative w-14 h-14 shrink-0">
           <svg
             className="absolute inset-0 -rotate-90"
-            viewBox="0 0 56 56"
+            viewBox="0 0 48 48"
-            width="56"
+            width="48"
-            height="56"
+            height="48"
           >
             <circle
-              cx="28"
+              cx="24"
-              cy="28"
+              cy="24"
               r={R}
               fill="none"
-              strokeWidth="2.5"
+              strokeWidth="2"
               className="stroke-hairline/15 dark:stroke-hairline/30"
             />
             {exercise.enabled && (
               <circle
-                cx="28"
+                cx="24"
-                cy="28"
+                cy="24"
                 r={R}
                 fill="none"
-                strokeWidth="2.5"
+                strokeWidth="2"
                 strokeLinecap="round"
                 strokeDasharray={C}
                 strokeDashoffset={dashOffset}
@@ -151,7 +145,7 @@ export function ExerciseCard({
           </svg>
           <div
             className={[
-              'absolute inset-[8px] rounded-full grid place-items-center',
+              'absolute inset-[7px] rounded-lg grid place-items-center',
               exercise.enabled
                 ? 'bg-accent/10 text-accent'
                 : 'bg-surface-2 text-text/40'
@@ -163,14 +157,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-[18px] font-bold leading-tight truncate">
+            <h3 className="font-display text-[17px] 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-full text-text/45 hover:bg-surface-2 active:scale-90 transition-all"
+                className="w-7 h-7 grid place-items-center rounded-md text-text/45 hover:bg-surface-2 active:scale-95 transition-all"
                 aria-label={t('titlebar.menu_aria')}
                 aria-haspopup="menu"
                 aria-expanded={menuOpen}
@@ -188,7 +182,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-xl shadow-sheet ring-0.5 ring-hairline/30 py-1 overflow-hidden"
+                    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"
                   >
                     <button
                       role="menuitem"
@@ -215,17 +209,16 @@ export function ExerciseCard({
               )}
             </div>
           </div>
-          <div className="text-[14px] text-text/65 mt-1 font-medium">
+          <div className="text-[13px] text-text/60 mt-1 font-medium">
             {t('editor.exercise.preview.meta', {
               reps: exercise.reps,
               min: exercise.intervalMinutes
             })}
           </div>
 
-          {/* Countdown + switch */}
+          <div className="flex items-end justify-between mt-3">
-          <div className="flex items-end justify-between mt-3.5">
             <div>
-              <div className="text-[12px] text-text/60 uppercase tracking-wider font-semibold inline-flex items-center gap-1">
+              <div className="text-[12px] text-text/60 font-semibold inline-flex items-center gap-1">
                 {goalReached ? (
                   <>
                     <CheckCircle2
@@ -251,7 +244,7 @@ export function ExerciseCard({
               </div>
               <div
                 className={[
-                  'font-mono-num text-[24px] font-bold leading-none mt-1 tracking-tight',
+                  'font-mono-num text-[22px] font-bold leading-none mt-1',
                   goalReached
                     ? 'text-success'
                     : isDue
@@ -283,7 +276,7 @@ export function ExerciseCard({
           initial={{ opacity: 0, y: 4 }}
           animate={{ opacity: 1, y: 0 }}
           onClick={handleMarkDone}
-          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"
+          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"
         >
           <Check size={15} strokeWidth={2.5} /> {t('btn.done')}
         </motion.button>

src/renderer/src/components/ExerciseEditor.tsx

@@ -85,12 +85,12 @@ export function ExerciseEditor({
       }
     >
       <div className="space-y-5">
-        <div className="rounded-2xl bg-surface-2 p-4 flex items-center gap-4">
+        <div className="rounded-lg bg-surface-2 p-4 flex items-center gap-4 border border-hairline/25">
-          <div className="w-14 h-14 rounded-2xl bg-accent text-white grid place-items-center shrink-0">
+          <div className="w-12 h-12 rounded-lg 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 tracking-tight truncate">
+            <div className="font-display text-[18px] font-semibold 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-10 px-2 rounded-xl text-[13px] font-semibold transition-all active:scale-95 truncate',
+                  'h-9 px-2 rounded-lg text-[13px] font-semibold transition-colors active:translate-y-px 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-xl bg-surface-2 text-text/65 text-[13px] font-semibold hover:text-text"
+                className="h-9 px-3 rounded-lg bg-surface-2 text-text/65 text-[13px] font-semibold hover:text-text"
               >
                 {t('editor.field.daily_goal.clear')}
               </button>
@@ -200,9 +200,7 @@ export function ExerciseEditor({
           <input
             type="checkbox"
             checked={draft.adaptive ?? false}
-            onChange={(e) =>
+            onChange={(e) => setDraft({ ...draft, adaptive: e.target.checked })}
-              setDraft({ ...draft, adaptive: e.target.checked })
-            }
             className="mt-0.5 w-4 h-4 accent-accent"
           />
           <div>
@@ -216,14 +214,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-2xl bg-surface-2">
+          <div className="grid grid-cols-8 gap-2 max-h-44 overflow-y-auto p-2 rounded-lg 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-xl transition-all active:scale-90',
+                  'h-10 w-10 grid place-items-center rounded-lg transition-colors active:translate-y-px',
                   draft.icon === name
                     ? 'bg-accent text-white'
                     : 'bg-surface text-text/65 hover:text-text'
@@ -241,9 +239,9 @@ export function ExerciseEditor({
           width: 100%;
           height: 44px;
           padding: 0 14px;
-          border-radius: 12px;
+          border-radius: 8px;
-          border: 0;
+          border: 1px solid rgb(var(--hairline) / 0.35);
-          background: rgb(var(--surface-2));
+          background: rgb(var(--surface));
           color: rgb(var(--text));
           font-size: 15px;
           outline: none;

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-2xl p-5 shadow-card dark:ring-0.5 dark:ring-hairline/30">
+    <div className="bg-surface rounded-xl p-4 shadow-card border border-hairline/30">
       <div className="flex items-center gap-2 mb-3">
         <div className="text-[14px] text-text/75 font-semibold">
           {t('heatmap.title')}

src/renderer/src/components/MealEditor.tsx

@@ -84,12 +84,12 @@ export function MealEditor({
       }
     >
       <div className="space-y-5">
-        <div className="rounded-2xl bg-surface-2 p-4 flex items-center gap-4">
+        <div className="rounded-lg bg-surface-2 p-4 flex items-center gap-4 border border-hairline/25">
-          <div className="w-14 h-14 rounded-2xl bg-accent text-white grid place-items-center shrink-0">
+          <div className="w-12 h-12 rounded-lg 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 tracking-tight truncate">
+            <div className="font-display text-[18px] font-semibold 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-10 rounded-xl text-[13px] font-semibold transition-all active:scale-95',
+                    'h-9 rounded-lg text-[13px] font-semibold transition-colors active:translate-y-px',
                     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-2xl bg-surface-2">
+          <div className="grid grid-cols-8 gap-2 max-h-44 overflow-y-auto p-2 rounded-lg 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-xl transition-all active:scale-90',
+                  'h-10 w-10 grid place-items-center rounded-lg transition-colors active:translate-y-px',
                   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: 12px;
+          border-radius: 8px;
-          border: 0;
+          border: 1px solid rgb(var(--hairline) / 0.35);
-          background: rgb(var(--surface-2));
+          background: rgb(var(--surface));
           color: rgb(var(--text));
           font-size: 15px;
           outline: none;

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-[14px] text-text/65 font-semibold">{kicker}</div>
+        <div className="text-[13px] text-text/60 font-bold">{kicker}</div>
-        <h1 className="font-serif text-[34px] sm:text-[40px] leading-[1.02] tracking-tight mt-1 font-bold">
+        <h1 className="font-display text-[28px] sm:text-[32px] leading-tight mt-1 font-bold">
           {title}
         </h1>
         {subtitle && (
-          <p className="text-[15px] text-text/65 mt-2 font-medium leading-relaxed max-w-2xl">
+          <p className="text-[14px] text-text/60 mt-1.5 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 lg:grid-cols-3 gap-3 mb-8',
+        'grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-3 mb-6',
         className
       ].join(' ')}
     >
@@ -75,21 +75,21 @@ export function InsightCard({
             : 'bg-text/12 text-text/55'
 
   return (
-    <div className="bg-surface rounded-2xl p-4 shadow-card dark:ring-0.5 dark:ring-hairline/30 min-w-0">
+    <div className="bg-surface rounded-xl p-4 shadow-card border border-hairline/30 min-w-0">
       <div className="flex items-start gap-3">
         <div
           className={[
-            'w-9 h-9 rounded-xl grid place-items-center shrink-0',
+            'w-8 h-8 rounded-lg grid place-items-center shrink-0',
             iconClass
           ].join(' ')}
         >
           {icon}
         </div>
         <div className="min-w-0">
-          <div className="text-[12px] uppercase tracking-[0.06em] text-text/50 font-bold leading-tight">
+          <div className="text-[12px] text-text/50 font-bold leading-tight">
             {label}
           </div>
-          <div className="font-display text-[22px] font-bold leading-tight mt-1 break-words">
+          <div className="font-display text-[20px] font-bold leading-tight mt-1 break-words">
             {value}
           </div>
           {hint && (

src/renderer/src/components/Sidebar.tsx

@@ -46,7 +46,7 @@ const items: Item[] = [
     to: '/settings',
     labelKey: 'nav.settings',
     icon: Settings2,
-    tint: 'bg-text/70'
+    tint: 'bg-sidebar-muted'
   }
 ]
 
@@ -63,8 +63,6 @@ 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
@@ -90,18 +88,14 @@ export function Sidebar({
           e.preventDefault()
           last.focus()
         }
-      } else {
+      } else if (active === last || !root.contains(active)) {
-        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()
     }
@@ -109,7 +103,7 @@ export function Sidebar({
 
   return (
     <>
-      <aside className="hidden md:flex w-64 shrink-0 vibrancy hairline-b border-r-0 flex-col">
+      <aside className="hidden md:flex w-[276px] shrink-0 bg-sidebar text-sidebar-text flex-col border-r border-black/25">
         <SidebarContent />
       </aside>
 
@@ -123,7 +117,7 @@ export function Sidebar({
             transition={{ duration: 0.18 }}
           >
             <motion.div
-              className="absolute inset-0 bg-black/30 backdrop-blur-md"
+              className="absolute inset-0 bg-black/35"
               onClick={onCompactClose}
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
@@ -135,7 +129,7 @@ export function Sidebar({
               role="dialog"
               aria-modal="true"
               aria-label={t('sidebar.aria.nav')}
-              className="relative w-72 max-w-[85vw] h-full vibrancy flex flex-col"
+              className="relative w-72 max-w-[85vw] h-full bg-sidebar text-sidebar-text flex flex-col"
               initial={{ x: '-100%' }}
               animate={{ x: 0 }}
               exit={{ x: '-100%' }}
@@ -143,7 +137,7 @@ export function Sidebar({
             >
               <button
                 onClick={onCompactClose}
-                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"
+                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"
                 aria-label={t('btn.close')}
               >
                 <X size={14} strokeWidth={2.5} />
@@ -162,16 +156,23 @@ function SidebarContent({ onNav }: { onNav?: () => void }): JSX.Element {
   const running = useAppStore((s) => s.state?.settings.globalEnabled ?? true)
   return (
     <>
-      <div className="px-5 pt-7 pb-6">
+      <div className="px-4 pt-5 pb-4">
-        <div className="font-serif text-[36px] leading-none tracking-tight font-bold">
+        <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-[13px] text-text/55 mt-2 font-medium">
+            <div className="text-[12px] text-sidebar-muted font-medium">
               {t('sidebar.slogan')}
             </div>
           </div>
+        </div>
+      </div>
 
-      <nav className="px-2.5 flex flex-col gap-1">
+      <nav className="px-3 flex flex-col gap-1">
         {items.map(({ to, labelKey, icon: Icon, end, tint }) => (
           <NavLink
             key={to}
@@ -180,31 +181,32 @@ function SidebarContent({ onNav }: { onNav?: () => void }): JSX.Element {
             onClick={onNav}
             className={({ isActive }) =>
               [
-                'flex items-center gap-3 px-2.5 py-2 rounded-xl transition-colors duration-150',
+                'group relative flex items-center gap-3 px-3 py-2 rounded-lg transition-colors duration-150',
                 isActive
-                  ? 'bg-text/[0.06] dark:bg-white/[0.08]'
+                  ? 'bg-white/10 text-sidebar-text'
-                  : 'hover:bg-text/[0.04] dark:hover:bg-white/[0.04]'
+                  : 'text-sidebar-muted hover:bg-white/[0.06] hover:text-sidebar-text'
               ].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-[9px] grid place-items-center text-white shrink-0',
+                    'w-8 h-8 rounded-md grid place-items-center shrink-0',
-                    tint ?? 'bg-text/70'
+                    isActive
+                      ? `${tint ?? 'bg-accent'} text-white`
+                      : 'bg-white/[0.06] text-sidebar-muted group-hover:text-sidebar-text'
                   ].join(' ')}
                 >
                   <Icon size={17} strokeWidth={2.2} />
                 </div>
-                <span
+                <span className="text-[14px] truncate font-semibold">
-                  className={[
-                    'text-[15px] truncate',
-                    isActive
-                      ? 'text-text font-semibold'
-                      : 'text-text/85 font-medium'
-                  ].join(' ')}
-                >
                   {t(labelKey)}
                 </span>
               </>
@@ -213,20 +215,26 @@ function SidebarContent({ onNav }: { onNav?: () => void }): JSX.Element {
         ))}
       </nav>
 
-      <div className="mt-auto px-5 pb-5">
+      <div className="mt-auto px-4 pb-4">
-        <div className="flex items-center gap-2 text-[11px] text-text/45">
+        <div className="rounded-lg bg-white/[0.06] px-3 py-2.5">
-          <span className="relative flex h-1.5 w-1.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-1.5 w-1.5',
+                  'relative inline-flex rounded-full h-2 w-2',
                   running ? 'bg-success' : 'bg-warning'
                 ].join(' ')}
               />
             </span>
-          {running ? t('sidebar.status_tracking') : t('sidebar.status_paused')}
+            <span className="font-semibold">
+              {running
+                ? t('sidebar.status_tracking')
+                : t('sidebar.status_paused')}
+            </span>
+          </div>
         </div>
       </div>
     </>

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-10 px-2 sm:px-3 flex items-center justify-between vibrancy hairline-b"
+      className="titlebar-drag relative h-9 px-2 sm:px-3 flex items-center justify-between bg-sidebar text-sidebar-text 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-text/[0.08] text-text/65 hover:text-text transition-colors"
+            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"
             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-medium text-text/55 truncate px-2">
+      <div className="text-[12px] font-semibold text-sidebar-muted truncate px-2">
         {effectiveTitle}
       </div>
 
@@ -63,9 +63,7 @@ export function Titlebar({ title, onMenuClick }: Props): JSX.Element {
         <WinBtn
           onClick={() => window.api.toggleMaximizeMain()}
           label={
-            maximized
+            maximized ? t('titlebar.restore_aria') : t('titlebar.maximize_aria')
-              ? t('titlebar.restore_aria')
-              : t('titlebar.maximize_aria')
           }
         >
           {maximized ? (
@@ -102,10 +100,10 @@ function WinBtn({
       onClick={onClick}
       aria-label={label}
       className={[
-        'titlebar-nodrag w-9 h-7 grid place-items-center rounded-md transition-colors text-text/55',
+        'titlebar-nodrag w-9 h-7 grid place-items-center rounded-md transition-colors text-sidebar-muted',
         danger
           ? 'hover:bg-destructive hover:text-white'
-          : 'hover:bg-text/[0.08] hover:text-text'
+          : 'hover:bg-white/10 hover:text-sidebar-text'
       ].join(' ')}
     >
       {children}

src/renderer/src/components/WhatsNewModal.tsx

@@ -25,11 +25,7 @@ const TAG_META = {
  * (a) автоматически после апдейта (когда `lastSeenVersion` != `currentVersion`)
  * и (b) вручную из Settings.
  */
-export function WhatsNewModal({
+export function WhatsNewModal({ open, versions, onClose }: Props): JSX.Element {
-  open,
-  versions,
-  onClose
-}: Props): JSX.Element {
   const { t, lang } = useT()
   return (
     <Modal
@@ -68,7 +64,7 @@ function VersionSection({
 
   return (
     <div>
-      <div className="text-[12px] uppercase tracking-wider text-text/55 font-bold mb-3 font-mono-num">
+      <div className="text-[12px] text-text/55 font-bold mb-3 font-mono-num">
         v{version}
       </div>
       <div className="space-y-2.5">

src/renderer/src/components/ui/Button.tsx

@@ -1,8 +1,8 @@
 import { ButtonHTMLAttributes, forwardRef } from 'react'
 
 /**
- * iOS-style button. Three primary flavours mirror iOS's filled / tinted / plain.
+ * Desktop button. Three primary flavours cover filled, bordered, and plain actions.
- * Press feedback is a subtle scale, mirroring UIKit's button highlight.
+ * Press feedback stays subtle so dense tool surfaces do not jump around.
  */
 type Variant = 'filled' | 'tinted' | 'plain' | 'destructive' | 'success'
 type Size = 'sm' | 'md' | 'lg'
@@ -24,19 +24,21 @@ const legacyMap: Record<LegacyVariant, Variant> = {
 }
 
 const variantClasses: Record<Variant, string> = {
-  filled: 'bg-accent text-white hover:brightness-105 active:brightness-95',
+  filled:
+    'bg-accent text-white hover:bg-accent/90 active:bg-accent/85 shadow-[0_1px_0_rgb(255_255_255_/_0.18)_inset]',
   tinted:
-    'bg-accent/12 text-accent hover:bg-accent/18 active:bg-accent/22 dark:bg-accent/20 dark:hover:bg-accent/25',
+    'bg-surface border border-hairline/45 text-text hover:border-accent/45 hover:text-accent active:bg-surface-2',
-  plain: 'text-accent hover:bg-accent/10 active:bg-accent/15',
+  plain:
+    'text-text/70 hover:bg-surface-2 hover:text-text active:bg-hairline/20',
   destructive:
-    'bg-destructive/12 text-destructive hover:bg-destructive/18 active:bg-destructive/22 dark:bg-destructive/20',
+    'bg-destructive/10 border border-destructive/20 text-destructive hover:bg-destructive/14 active:bg-destructive/18',
-  success: 'bg-success text-white hover:brightness-105 active:brightness-95'
+  success: 'bg-success text-white hover:bg-success/90 active:bg-success/80'
 }
 
 const sizeClasses: Record<Size, string> = {
-  sm: 'h-8 px-3.5 text-[13px] rounded-xl',
+  sm: 'h-8 px-3 text-[13px] rounded-lg',
-  md: 'h-10 px-4 text-[14px] rounded-2xl',
+  md: 'h-9 px-3.5 text-[14px] rounded-lg',
-  lg: 'h-12 px-6 text-[16px] rounded-2xl'
+  lg: 'h-10 px-4 text-[15px] rounded-lg'
 }
 
 export const Button = forwardRef<HTMLButtonElement, Props>(function Button(
@@ -49,9 +51,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-all duration-150 ease-out',
+        'inline-flex items-center justify-center gap-1.5 font-semibold transition-colors duration-150 ease-out',
         'disabled:opacity-40 disabled:cursor-not-allowed',
-        'active:scale-[0.97]',
+        'active:translate-y-px',
         variantClasses[v],
         sizeClasses[size],
         className

src/renderer/src/components/ui/Card.tsx

@@ -1,9 +1,5 @@
 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 = ''
@@ -14,9 +10,7 @@ export function Card({
   return (
     <div
       className={[
-        'bg-surface rounded-2xl overflow-hidden',
+        'bg-surface rounded-xl overflow-hidden border border-hairline/35 shadow-card',
-        '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(' ')}
     >
@@ -25,10 +19,6 @@ export function Card({
   )
 }
 
-/**
- * Section heading above a Card group — iOS Settings style: tiny uppercase
- * label, generous spacing.
- */
 export function SectionHeader({
   title,
   hint,
@@ -39,13 +29,11 @@ export function SectionHeader({
   action?: ReactNode
 }): JSX.Element {
   return (
-    <div className="flex items-end justify-between px-4 mb-2.5">
+    <div className="flex items-end justify-between mb-2.5">
       <div>
-        <div className="text-[13px] font-semibold uppercase tracking-[0.06em] text-text/60">
+        <div className="text-[13px] font-bold text-text/70">{title}</div>
-          {title}
-        </div>
         {hint && (
-          <div className="text-[13px] text-text/55 mt-0.5 font-medium">
+          <div className="text-[12px] text-text/55 mt-0.5 font-medium">
             {hint}
           </div>
         )}
@@ -55,10 +43,6 @@ 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 = '',
@@ -75,9 +59,9 @@ export function Row({
     <div
       onClick={onClick}
       className={[
-        'flex items-center gap-3 px-4 py-3 relative',
+        'flex items-center gap-3 px-4 py-3 relative min-h-[58px]',
         interactive
-          ? 'cursor-pointer active:bg-surface-2 dark:active:bg-white/5 transition-colors'
+          ? 'cursor-pointer hover:bg-surface-2/65 active:bg-surface-2 transition-colors'
           : '',
         !last ? 'hairline-b' : '',
         className

src/renderer/src/components/ui/ConfirmModal.tsx

@@ -18,10 +18,10 @@ type Props = {
 }
 
 /**
- * iOS-style confirm-диалог. Заменяет `window.confirm()` — нативный prompt
+ * Desktop confirm-диалог. Заменяет `window.confirm()` — нативный prompt
- * выглядит инородно в дизайне приложения, без вибрации accent-цвета и без
+ * выглядит инородно в дизайне приложения и не поддерживает focus-trap.
- * focus-trap'a. Использует наш Modal под капотом, поэтому получаем
+ * Использует наш Modal под капотом, поэтому получаем focus-trap и
- * focus-trap и Esc-to-cancel бесплатно.
+ * Esc-to-cancel бесплатно.
  */
 export function ConfirmModal({
   open,

src/renderer/src/components/ui/Modal.tsx

@@ -27,17 +27,6 @@ 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,
@@ -119,7 +108,7 @@ export function Modal({
     <AnimatePresence>
       {open && (
         <motion.div
-          className="fixed inset-0 z-50 grid place-items-center p-4 bg-black/40 backdrop-blur-md"
+          className="fixed inset-0 z-50 grid place-items-center p-4 bg-black/40"
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
@@ -132,39 +121,36 @@ export function Modal({
             aria-modal="true"
             aria-labelledby={titleId}
             className={[
-              'relative w-full bg-surface rounded-3xl shadow-sheet flex flex-col overflow-hidden',
+              'relative w-full bg-surface rounded-xl shadow-sheet flex flex-col overflow-hidden border border-hairline/45',
               sizeClass[size]
             ].join(' ')}
-            initial={{ scale: 0.94, y: 24, opacity: 0 }}
+            initial={{ scale: 0.98, y: 10, opacity: 0 }}
             animate={{ scale: 1, y: 0, opacity: 1 }}
-            exit={{ scale: 0.96, y: 12, opacity: 0 }}
+            exit={{ scale: 0.98, y: 6, opacity: 0 }}
             transition={{ type: 'spring', stiffness: 400, damping: 32 }}
             onClick={(e) => e.stopPropagation()}
           >
-            {/* Header — iOS large modal title */}
+            <div className="flex items-center justify-between px-5 py-3 hairline-b bg-surface-elevated">
-            <div className="flex items-center justify-between px-5 pt-5 pb-3">
               <h2
                 id={titleId}
-                className="font-display text-[20px] font-semibold tracking-tight"
+                className="font-display text-[18px] font-semibold"
               >
                 {title}
               </h2>
               <button
                 onClick={onClose}
                 data-modal-close=""
-                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"
+                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"
                 aria-label={t('btn.close')}
               >
                 <X size={14} strokeWidth={2.5} />
               </button>
             </div>
 
-            <div className="px-5 pb-5 overflow-y-auto max-h-[70vh]">
+            <div className="p-5 overflow-y-auto max-h-[72vh]">{children}</div>
-              {children}
-            </div>
 
             {footer && (
-              <div className="hairline-t px-5 py-3 flex justify-end gap-2 bg-surface">
+              <div className="hairline-t px-5 py-3 flex justify-end gap-2 bg-surface-elevated">
                 {footer}
               </div>
             )}

src/renderer/src/components/ui/Switch.tsx

@@ -7,9 +7,6 @@ type Props = {
   'aria-label'?: string
 }
 
-/**
- * iOS UISwitch — 51×31 spec, green when on, smooth spring knob.
- */
 export function Switch({
   checked,
   onChange,
@@ -25,17 +22,18 @@ export function Switch({
       onClick={() => !disabled && onChange(!checked)}
       disabled={disabled}
       className={[
-        'relative inline-flex h-[31px] w-[51px] shrink-0 cursor-pointer rounded-full transition-colors duration-200 ease-out',
+        'relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full transition-colors duration-150 ease-out border',
-        checked ? 'bg-success' : 'bg-hairline/25 dark:bg-hairline/50',
+        checked
+          ? 'bg-success border-success'
+          : 'bg-surface-2 border-hairline/55',
         disabled ? 'opacity-40 cursor-not-allowed' : ''
       ].join(' ')}
       style={{ padding: 2 }}
     >
       <motion.span
-        className="block h-[27px] w-[27px] rounded-full bg-white"
+        className="block h-[18px] w-[18px] rounded-full bg-white"
         style={{
-          boxShadow:
+          boxShadow: '0 1px 2px rgba(0,0,0,0.18), 0 0 0 0.5px rgba(0,0,0,0.08)'
-            '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 }}

src/renderer/src/pages/Challenges.tsx

@@ -65,14 +65,14 @@ export default function ChallengesPage(): JSX.Element {
   )
 
   return (
-    <div className="h-full overflow-y-auto">
+    <div className="h-full overflow-y-auto desktop-scroll">
-      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-10 pt-8 pb-12">
+      <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-8">
+        <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-6">
           <div>
             <div className="text-[14px] text-text/65 font-semibold">
               {t('challenges.kicker')}
             </div>
-            <h1 className="font-serif text-[34px] sm:text-[40px] leading-[1.02] tracking-tight mt-1 font-bold">
+            <h1 className="font-display text-[30px] sm:text-[34px] leading-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-6 rounded-2xl bg-warning/12 p-4 flex items-start gap-3">
+          <div className="mb-5 rounded-xl border border-warning/25 bg-warning/10 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-14 h-14 rounded-2xl bg-accent text-white items-center justify-center mb-4">
+              <div className="inline-flex w-12 h-12 rounded-xl 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-2xl bg-surface-2">
+          <div className="grid grid-cols-8 gap-2 max-h-44 overflow-y-auto p-2 rounded-lg bg-surface-2">
             {ICON_CHOICES.map((name) => (
               <button
                 key={name}
@@ -361,8 +361,8 @@ function ChallengeEditor({
           </div>
         </Field>
 
-        <div className="rounded-2xl bg-accent/8 p-4">
+        <div className="rounded-lg bg-accent/[0.08] p-4">
-          <div className="text-[11px] uppercase tracking-wider text-accent font-semibold mb-2">
+          <div className="text-[11px] 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 tracking-tight">
+            <span className="text-[32px] font-display font-semibold text-accent leading-none ml-1">
               {previewReps}
             </span>
             <span className="text-text/55">

src/renderer/src/pages/Dashboard.tsx

@@ -197,27 +197,28 @@ export default function Dashboard(): JSX.Element {
   })
 
   return (
-    <div className="h-full overflow-y-auto">
+    <div className="h-full overflow-y-auto desktop-scroll">
-      <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-10 pt-8 pb-12">
+      <div className="max-w-[1180px] 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">
+        <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-[14px] text-text/65 font-semibold">
+              <div className="text-[13px] text-text/60 font-bold">
                 {t('dashboard.header.date', { date: today })}
               </div>
-            <div className="mt-2 flex flex-wrap items-center gap-3">
+              <div className="mt-1.5 flex flex-wrap items-center gap-3">
-              <h1 className="font-serif text-[34px] sm:text-[40px] leading-[1.02] tracking-tight font-bold">
+                <h1 className="font-display text-[30px] sm:text-[34px] leading-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]',
+                    '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-[15px] text-text/65 mt-2 font-medium leading-relaxed max-w-2xl">
+              <p className="text-[14px] text-text/60 mt-2 font-medium leading-relaxed max-w-3xl">
                 {header.subtitle}
               </p>
             </div>
@@ -238,8 +239,9 @@ export default function Dashboard(): JSX.Element {
               </Button>
             </div>
           </div>
+        </section>
 
-        <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-8">
+        <div className="grid grid-cols-2 xl:grid-cols-4 gap-3 mb-5">
           <HeroStat
             tone="accent"
             label={t('dashboard.stat.today_done')}
@@ -313,7 +315,7 @@ export default function Dashboard(): JSX.Element {
           <motion.div
             initial={{ opacity: 0, y: -4 }}
             animate={{ opacity: 1, y: 0 }}
-            className="mb-6 rounded-2xl bg-warning/12 p-4 flex items-center gap-3"
+            className="mb-4 rounded-xl border border-warning/25 bg-warning/10 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} />
@@ -336,7 +338,7 @@ export default function Dashboard(): JSX.Element {
           <motion.div
             initial={{ opacity: 0, y: -4 }}
             animate={{ opacity: 1, y: 0 }}
-            className="mb-6 rounded-2xl bg-info/12 p-4 flex items-center gap-3"
+            className="mb-4 rounded-xl border border-info/25 bg-info/10 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} />
@@ -376,7 +378,7 @@ export default function Dashboard(): JSX.Element {
           </div>
         )}
 
-        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-2 gap-4">
+        <div className="grid grid-cols-1 xl:grid-cols-2 gap-3">
           <AnimatePresence>
             {exercises.map((ex) => (
               <ExerciseCard
@@ -399,7 +401,7 @@ export default function Dashboard(): JSX.Element {
 
         {exercises.length === 0 && (
           <div className="mt-12 text-center">
-            <div className="inline-flex w-14 h-14 rounded-2xl bg-accent text-white items-center justify-center mb-4">
+            <div className="inline-flex w-12 h-12 rounded-xl 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">
@@ -544,17 +546,17 @@ function MomentumPanel({
       : t('momentum.game.off')
 
   return (
-    <section className="mb-8 grid grid-cols-1 lg:grid-cols-[0.9fr_1.1fr_0.95fr] gap-4">
+    <section className="mb-6 grid grid-cols-1 xl:grid-cols-[0.9fr_1.15fr_0.95fr] gap-3">
-      <div className="bg-surface rounded-3xl p-5 shadow-card dark:ring-0.5 dark:ring-hairline/30 min-w-0">
+      <div className="bg-surface rounded-xl p-4 shadow-card border border-hairline/30 min-w-0">
         <div className="flex items-center gap-3">
-          <div className="w-10 h-10 rounded-2xl bg-warning text-white grid place-items-center shrink-0">
+          <div className="w-9 h-9 rounded-lg 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-[22px] font-bold leading-tight truncate">
+            <div className="font-display text-[20px] font-bold leading-tight truncate">
               {t(momentum.level.key)}
             </div>
           </div>
@@ -582,13 +584,13 @@ function MomentumPanel({
         <ProgressBar pct={momentum.level.progressPct} tone="warning" />
       </div>
 
-      <div className="bg-surface rounded-3xl p-5 shadow-card dark:ring-0.5 dark:ring-hairline/30 min-w-0">
+      <div className="bg-surface rounded-xl p-4 shadow-card border border-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-[22px] font-bold leading-tight">
+            <h2 className="font-display text-[20px] font-bold leading-tight">
               {t('momentum.week.title')}
             </h2>
           </div>
@@ -606,29 +608,29 @@ function MomentumPanel({
         </div>
       </div>
 
-      <div className="bg-surface rounded-3xl p-5 shadow-card dark:ring-0.5 dark:ring-hairline/30 min-w-0">
+      <div className="bg-surface rounded-xl p-4 shadow-card border border-hairline/30 min-w-0">
         <div className="flex items-center gap-3">
-          <div className="w-10 h-10 rounded-2xl bg-accent-2 text-white grid place-items-center shrink-0">
+          <div className="w-9 h-9 rounded-lg 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-[22px] font-bold leading-tight">
+            <h2 className="font-display text-[20px] font-bold leading-tight">
               {t('momentum.game.title')}
             </h2>
           </div>
         </div>
 
-        <div className="mt-4 rounded-2xl bg-surface-2 p-4">
+        <div className="mt-4 rounded-lg bg-surface-2 p-3.5">
           <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.5 py-1 rounded-full font-semibold',
+                'text-[12px] px-2 py-1 rounded-md font-semibold',
                 gamesLive
                   ? 'bg-success/12 text-success'
                   : gamesEnabledButNotLive
@@ -662,7 +664,7 @@ function MomentumPanel({
                   })}
                 />
               </div>
-              <div className="mt-4 text-[13px] text-text/62 leading-relaxed">
+              <div className="mt-4 text-[13px] text-text/60 leading-relaxed">
                 {momentum.gameDebt.lastMatchAt
                   ? t('momentum.game.last', {
                       date: new Date(
@@ -706,7 +708,7 @@ function WeeklyQuestRow({
     <div className="py-3 flex items-center gap-3 min-w-0">
       <div
         className={[
-          'w-9 h-9 rounded-xl grid place-items-center text-white shrink-0',
+          'w-8 h-8 rounded-lg grid place-items-center text-white shrink-0',
           quest.complete
             ? 'bg-success'
             : quest.tone === 'warning'
@@ -784,14 +786,14 @@ function TodayPlanPanel({
   const recovery = recoveryCopy(plan, t)
 
   return (
-    <section className="mb-8 bg-surface rounded-3xl p-5 shadow-card dark:ring-0.5 dark:ring-hairline/30">
+    <section className="mb-6 bg-surface rounded-xl p-4 shadow-card border border-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-10 h-10 rounded-2xl bg-accent/12 text-accent grid place-items-center shrink-0">
+          <div className="w-9 h-9 rounded-lg 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-[22px] font-bold leading-tight">
+            <h2 className="font-display text-[20px] font-bold leading-tight">
               {t('dashboard.plan.title')}
             </h2>
             <div className="text-[14px] text-text/60 mt-0.5">
@@ -801,7 +803,7 @@ function TodayPlanPanel({
         </div>
         <div
           className={[
-            'self-start sm:self-auto h-8 px-3 rounded-full inline-flex items-center text-[13px] font-semibold',
+            'self-start sm:self-auto h-8 px-2.5 rounded-md inline-flex items-center text-[13px] font-semibold',
             plan.dueCount > 0
               ? 'bg-accent/12 text-accent'
               : 'bg-success/12 text-success'
@@ -858,7 +860,7 @@ function TodayPlanPanel({
             </>
           ) : (
             <div className="mt-3 min-w-0">
-              <div className="font-display text-[20px] leading-tight font-bold">
+              <div className="font-display text-[19px] leading-tight font-bold">
                 {t('dashboard.plan.clear.title')}
               </div>
               <div className="text-[14px] text-text/60 mt-1">
@@ -923,7 +925,7 @@ function TodayPlanPanel({
           <div className="mt-3 flex items-start gap-3">
             <div
               className={[
-                'w-9 h-9 rounded-xl grid place-items-center shrink-0',
+                'w-8 h-8 rounded-lg grid place-items-center shrink-0',
                 recovery.tone
               ].join(' ')}
             >
@@ -973,7 +975,7 @@ function PlanItemGlyph({ item }: { item: PlanItem }): JSX.Element {
   return (
     <div
       className={[
-        'w-11 h-11 rounded-2xl grid place-items-center shrink-0',
+        'w-9 h-9 rounded-lg grid place-items-center shrink-0',
         dueClass
       ].join(' ')}
     >
@@ -1004,7 +1006,7 @@ function PlanListRow({
           {planItemMeta(item, t)}
         </div>
       </div>
-      <div className="text-[13px] text-text/62 shrink-0 max-w-[42%] truncate">
+      <div className="text-[13px] text-text/60 shrink-0 max-w-[42%] truncate">
         {planItemTiming(item, paused, lang, t)}
       </div>
     </div>
@@ -1131,23 +1133,25 @@ function HeroStat({
             : 'bg-text/40'
 
   return (
-    <div className="bg-surface rounded-2xl p-5 shadow-card dark:ring-0.5 dark:ring-hairline/30">
+    <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-3">
+      <div className="flex items-center gap-2 mb-2">
         <div
           className={[
-            'w-7 h-7 rounded-lg grid place-items-center text-white',
+            'w-7 h-7 rounded-md grid place-items-center text-white shrink-0',
             toneBg
           ].join(' ')}
         >
           {icon}
         </div>
-        <div className="text-[14px] text-text/75 font-semibold">{label}</div>
+        <div className="text-[13px] text-text/70 font-bold truncate">
+          {label}
         </div>
-      <div className="font-display text-[28px] font-bold tracking-tight leading-none">
+      </div>
+      <div className="font-display text-[24px] font-bold leading-tight truncate">
         {value}
       </div>
       {subvalue && (
-        <div className="text-[13px] text-text/60 mt-2 font-medium">
+        <div className="text-[12px] text-text/58 mt-1 font-medium truncate">
           {subvalue}
         </div>
       )}

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">
+    <div className="h-full overflow-y-auto desktop-scroll">
-      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-10 pt-8 pb-12">
+      <div className="max-w-[980px] mx-auto px-5 lg:px-8 pt-6 pb-10">
         <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-14 h-14 rounded-2xl bg-accent text-white items-center justify-center mb-4">
+              <div className="inline-flex w-12 h-12 rounded-xl 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">

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">
+    <div className="h-full overflow-y-auto desktop-scroll">
-      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-10 pt-8 pb-12">
+      <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-8">
+        <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-6">
           <div>
             <div className="text-[14px] text-text/65 font-semibold">
               {t('games.kicker')}
             </div>
-            <h1 className="font-serif text-[34px] sm:text-[40px] leading-[1.02] tracking-tight mt-1 font-bold">
+            <h1 className="font-display text-[30px] sm:text-[34px] leading-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-4">
+        <div className="space-y-3">
           {games.map((g, i) => (
             <motion.div
               key={g.id}
@@ -185,12 +185,12 @@ function GameCard({
     game.enabled
 
   return (
-    <div className="bg-surface rounded-3xl p-5 shadow-card dark:ring-0.5 dark:ring-hairline/30">
+    <div className="bg-surface rounded-xl p-4 shadow-card border border-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-12 h-12 rounded-2xl grid place-items-center shrink-0 text-white',
+              'w-10 h-10 rounded-lg 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 tracking-tight">
+              <h3 className="font-display text-[18px] font-bold">
                 {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-2xl bg-warning/12 p-4 text-[14px] leading-relaxed flex items-start gap-2.5 font-medium">
+        <div className="mt-4 rounded-lg bg-warning/12 p-3.5 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-2xl bg-destructive/10 p-4 text-[14px] leading-relaxed flex items-start gap-2.5 font-medium">
+        <div className="mt-4 rounded-lg bg-destructive/10 p-3.5 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] uppercase tracking-wider text-text/40 hover:text-text/70 font-mono-num font-medium transition-colors"
+        className="text-[12px] text-text/40 hover:text-text/70 font-mono-num font-medium transition-colors"
       >
         {open ? '▾' : '▸'} {t('games.dev.toggle')}
       </button>

src/renderer/src/pages/Meals.tsx

@@ -64,8 +64,8 @@ export default function Meals(): JSX.Element {
   }
 
   return (
-    <div className="h-full overflow-y-auto">
+    <div className="h-full overflow-y-auto desktop-scroll">
-      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-10 pt-8 pb-12">
+      <div className="max-w-[980px] mx-auto px-5 lg:px-8 pt-6 pb-10">
         <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-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"
+              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"
             >
               <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-14 h-14 rounded-2xl bg-accent text-white items-center justify-center mb-4">
+              <div className="inline-flex w-12 h-12 rounded-xl 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">

src/renderer/src/pages/Settings.tsx

@@ -36,7 +36,7 @@ export default function SettingsPage(): JSX.Element {
   if (!settings)
     return (
       <div
-        className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-10 pt-8 pb-12 space-y-5"
+        className="max-w-[980px] mx-auto px-5 lg:px-8 pt-6 pb-10 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">
+    <div className="h-full overflow-y-auto desktop-scroll">
-      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-10 pt-8 pb-12">
+      <div className="max-w-[980px] mx-auto px-5 lg:px-8 pt-6 pb-10">
         <div className="mb-6">
           <div className="text-[14px] text-text/65 font-semibold">
             {t('settings.kicker')}
           </div>
-          <h1 className="font-serif text-[34px] sm:text-[40px] leading-[1.02] tracking-tight mt-1 font-bold">
+          <h1 className="font-display text-[30px] sm:text-[34px] leading-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-6 rounded-3xl bg-surface p-5 shadow-card dark:ring-0.5 dark:ring-hairline/30">
+    <section className="mb-5 rounded-xl bg-surface p-4 shadow-card border border-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-11 h-11 rounded-2xl grid place-items-center text-white shrink-0',
+              'w-10 h-10 rounded-lg 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] uppercase tracking-[0.06em] text-text/50 font-bold">
+            <div className="text-[13px] text-text/50 font-bold">
               {t('settings.status.kicker')}
             </div>
-            <h2 className="font-display text-[22px] font-bold leading-tight mt-1">
+            <h2 className="font-display text-[20px] 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/62 mt-1 leading-relaxed max-w-xl break-words">
+            <p className="text-[14px] text-text/60 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-2xl bg-surface-2 px-3.5 py-3 min-w-0">
+    <div className="rounded-lg bg-surface-2 px-3.5 py-3 min-w-0">
       <div className="text-[12px] text-text/50 font-semibold leading-tight">
         {label}
       </div>

src/renderer/src/styles/globals.css

@@ -20,56 +20,59 @@
 @tailwind components;
 @tailwind utilities;
 
-/* ===== Design tokens — Apple HIG with Manrope/Fraunces ===== */
+/* ===== Design tokens: desktop workstation ===== */
 
 :root {
-  /* Brand & semantic colors (iOS system palette) */
+  --accent: 16 118 110;
-  --accent: 255 107 53; /* Apple Fitness Move orange */
+  --accent-2: 225 29 72;
-  --accent-2: 255 45 85; /* systemPink */
+  --success: 22 163 74;
-  --success: 52 199 89; /* systemGreen */
+  --warning: 217 119 6;
-  --warning: 255 159 10; /* systemOrange dark */
+  --destructive: 220 38 38;
-  --destructive: 255 59 48; /* systemRed */
+  --info: 37 99 235;
-  --info: 0 122 255; /* systemBlue */
 
   color-scheme: light dark;
 }
 
-/* Light — polished iOS groupedBackground with warm undertone */
 :root {
-  --bg: 245 245 249; /* slightly warmer than 242,242,247 */
+  --bg: 244 246 247;
   --surface: 255 255 255;
-  --surface-2: 240 240 245; /* subtle separation for inputs/sections */
+  --surface-2: 236 240 242;
-  --text: 17 17 19; /* not pure black — softer */
+  --text: 22 27 29;
-  --text-secondary: 60 60 67;
+  --text-secondary: 72 82 87;
-  --text-tertiary: 60 60 67;
+  --text-tertiary: 103 113 118;
-  --hairline: 60 60 67;
+  --hairline: 174 185 190;
   --vibrancy: 255 255 255;
+  --sidebar: 26 31 33;
+  --sidebar-text: 245 247 248;
+  --sidebar-muted: 156 170 176;
 
-  --accent-soft: 255 107 53;
+  --accent-soft: 16 118 110;
-  --bg-deep: 232 232 238;
+  --bg-deep: 226 231 233;
   --surface-elevated: 255 255 255;
-  --border: 60 60 67;
+  --border: 174 185 190;
-  --muted: 60 60 67;
+  --muted: 72 82 87;
-  --victory: 52 199 89;
+  --victory: 22 163 74;
-  --defeat: 255 59 48;
+  --defeat: 220 38 38;
-  --xp: 255 159 10;
+  --xp: 217 119 6;
 }
 
-/* Dark — true black with grey elevation */
 .dark {
-  --bg: 0 0 0;
+  --bg: 16 18 19;
-  --surface: 28 28 30;
+  --surface: 28 32 34;
-  --surface-2: 44 44 46;
+  --surface-2: 40 46 49;
-  --text: 255 255 255;
+  --text: 245 247 248;
-  --text-secondary: 235 235 245;
+  --text-secondary: 203 211 215;
-  --text-tertiary: 235 235 245;
+  --text-tertiary: 152 164 170;
-  --hairline: 84 84 88;
+  --hairline: 84 96 101;
-  --vibrancy: 28 28 30;
+  --vibrancy: 28 32 34;
+  --sidebar: 17 22 24;
+  --sidebar-text: 248 250 250;
+  --sidebar-muted: 146 161 168;
 
-  --bg-deep: 0 0 0;
+  --bg-deep: 12 14 15;
-  --surface-elevated: 44 44 46;
+  --surface-elevated: 36 42 45;
-  --border: 84 84 88;
+  --border: 84 96 101;
-  --muted: 235 235 245;
+  --muted: 203 211 215;
 }
 
 /* ===== Base ===== */
@@ -85,50 +88,31 @@ body,
 
 body {
   font-family:
-    'Plus Jakarta Sans',
+    -apple-system, 'Segoe UI Variable Text', 'Segoe UI', 'Plus Jakarta Sans',
-    -apple-system,
+    system-ui, sans-serif;
-    '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.005em;
+  letter-spacing: 0;
 }
 
-/* Display — Bricolage Grotesque for headings and brand. Variable opsz axis
-   gives bigger glyphs slightly more character. */
 .font-display {
   font-family:
-    'Bricolage Grotesque',
+    -apple-system, 'Segoe UI Variable Display', 'Segoe UI', 'Plus Jakarta Sans',
-    'Plus Jakarta Sans',
+    system-ui, sans-serif;
-    -apple-system,
-    'SF Pro Display',
-    system-ui,
-    sans-serif;
   font-optical-sizing: auto;
-  font-variation-settings: 'opsz' 24;
+  letter-spacing: 0;
-  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:
-    'Bricolage Grotesque',
+    -apple-system, 'Segoe UI Variable Display', 'Segoe UI', 'Plus Jakarta Sans',
-    'Plus Jakarta Sans',
+    system-ui, sans-serif;
-    -apple-system,
-    'SF Pro Display',
-    system-ui,
-    sans-serif;
   font-optical-sizing: auto;
-  font-variation-settings: 'opsz' 96;
+  letter-spacing: 0;
-  letter-spacing: -0.035em;
 }
 
 .font-mono-num {
@@ -136,7 +120,14 @@ 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.01em;
+  letter-spacing: 0;
+}
+
+.tracking-tight,
+.tracking-wider,
+.tracking-\[0\.06em\],
+.tracking-\[0\.18em\] {
+  letter-spacing: 0 !important;
 }
 
 /* Custom titlebar drag region */
@@ -149,36 +140,47 @@ body {
   app-region: no-drag;
 }
 
-/* iOS 0.5px-style hairlines */
+/* Crisp panel separators for dense desktop surfaces */
 .hairline-b {
-  box-shadow: inset 0 -0.5px 0 rgb(var(--hairline) / 0.18);
+  box-shadow: inset 0 -1px 0 rgb(var(--hairline) / 0.34);
 }
 .hairline-t {
-  box-shadow: inset 0 0.5px 0 rgb(var(--hairline) / 0.18);
+  box-shadow: inset 0 1px 0 rgb(var(--hairline) / 0.34);
-}
-.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.72);
+  background-color: rgb(var(--vibrancy) / 0.96);
-  backdrop-filter: saturate(180%) blur(30px);
+  backdrop-filter: none;
-  -webkit-backdrop-filter: saturate(180%) blur(30px);
+  -webkit-backdrop-filter: none;
 }
 
-/* Soft iOS card shadow with subtle warmth */
 .shadow-card {
   box-shadow:
-    0 0.5px 0 rgb(0 0 0 / 0.03),
+    0 0 0 1px rgb(var(--hairline) / 0.24),
-    0 1px 2px rgb(15 23 42 / 0.04),
+    0 10px 28px -24px rgb(15 23 42 / 0.45);
-    0 6px 14px -4px rgb(15 23 42 / 0.05);
 }
 .dark .shadow-card {
   box-shadow:
-    0 0.5px 0 rgb(255 255 255 / 0.04) inset,
+    0 0 0 1px rgb(var(--hairline) / 0.38),
-    0 1px 2px rgb(0 0 0 / 0.4);
+    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;
 }
 
 /* Scrollbar */
@@ -208,12 +210,12 @@ body {
 
 .reminder-shell {
   position: relative;
-  border: 0.5px solid rgb(var(--hairline) / 0.25);
+  border: 1px solid rgb(var(--hairline) / 0.35);
-  border-radius: 22px;
+  border-radius: 12px;
   background: rgb(var(--surface));
   box-shadow:
-    0 1px 2px rgb(0 0 0 / 0.06),
+    0 1px 2px rgb(0 0 0 / 0.08),
-    0 20px 50px -16px rgb(0 0 0 / 0.4);
+    0 24px 70px -28px rgb(0 0 0 / 0.55);
   overflow: hidden;
   height: 100%;
 }

src/shared/release-notes.ts

@@ -21,6 +21,60 @@ export type ReleaseNoteItem = {
 export type ReleaseNotes = Record<Language, ReleaseNoteItem[]>
 
 export const RELEASE_NOTES: Record<string, ReleaseNotes> = {
+  '0.7.0': {
+    ru: [
+      {
+        title: 'Новый desktop-дизайн',
+        detail:
+          'Приложение стало рабочей панелью: темный сайдбар, четкие панели, меньше декоративности и больше полезной плотности.',
+        tag: 'new'
+      },
+      {
+        title: 'Обзор стал операционным экраном',
+        detail:
+          'Главный экран теперь быстрее показывает ближайший шаг, статус, цели, питание, режим и игровые долги.',
+        tag: 'new'
+      },
+      {
+        title: 'Настройки и списки стали спокойнее',
+        detail:
+          'Упражнения, питание, игры, челленджи и настройки получили единый desktop-контейнер и компактные строки.',
+        tag: 'new'
+      },
+      {
+        title: 'Модалки и напоминания обновлены',
+        detail:
+          'Редакторы, переключатели, кнопки и окно напоминания приведены к новой desktop-системе.',
+        tag: 'new'
+      }
+    ],
+    en: [
+      {
+        title: 'New desktop design',
+        detail:
+          'The app now feels like a focused workstation: dark sidebar, crisp panels, less decoration and better density.',
+        tag: 'new'
+      },
+      {
+        title: 'Overview is more operational',
+        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'
+      }
+    ]
+  },
   '0.6.6': {
     ru: [
       {

tailwind.config.mjs

@@ -5,7 +5,7 @@ export default {
   theme: {
     extend: {
       colors: {
-        // iOS semantic palette
+        // Desktop 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,6 +20,9 @@ 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>)',
@@ -68,15 +71,14 @@ export default {
         ]
       },
       borderRadius: {
-        // iOS-specific radii
+        xl: '8px',
-        xl: '14px',
+        '2xl': '10px',
-        '2xl': '18px',
+        '3xl': '12px'
-        '3xl': '22px'
       },
       boxShadow: {
-        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)',
+        ios: '0 1px 2px rgb(15 23 42 / 0.06), 0 10px 28px -24px rgb(15 23 42 / 0.35)',
         sheet:
-          '0 1px 2px rgb(0 0 0 / 0.06), 0 20px 50px -16px rgb(0 0 0 / 0.4)'
+          '0 1px 2px rgb(15 23 42 / 0.08), 0 24px 60px -28px rgb(15 23 42 / 0.45)'
       }
     }
   },