From ec62a0591ea1c5c79741ed20b8db7355b6e2c9fd Mon Sep 17 00:00:00 2001
From: Anton <vakabunga@proton.me>
Date: Wed, 22 Apr 2026 11:40:15 +0300
Subject: [PATCH] feat(frontend): refresh UI with warm fintech redesign

---
 frontend/package.json                         |    2 +-
 frontend/src/App.tsx                          |    2 +-
 frontend/src/components/AccountsList.tsx      |   14 +-
 frontend/src/components/CategoriesList.tsx    |    8 +-
 frontend/src/components/CategoryChart.tsx     |   24 +-
 frontend/src/components/ClearHistoryModal.tsx |   22 +-
 frontend/src/components/DataSection.tsx       |   18 +-
 frontend/src/components/DeleteImportModal.tsx |   18 +-
 .../src/components/EditTransactionModal.tsx   |   46 +-
 frontend/src/components/ImportModal.tsx       |   32 +-
 frontend/src/components/Layout.tsx            |   38 +-
 frontend/src/components/Pagination.tsx        |   15 +-
 frontend/src/components/PeriodSelector.tsx    |   26 +-
 frontend/src/components/RulesList.tsx         |   31 +-
 frontend/src/components/SummaryCards.tsx      |   44 +-
 frontend/src/components/TimeseriesChart.tsx   |   24 +-
 .../src/components/TransactionFilters.tsx     |   53 +-
 frontend/src/components/TransactionTable.tsx  |   70 +-
 frontend/src/pages/AnalyticsPage.tsx          |   19 +-
 frontend/src/pages/HistoryPage.tsx            |   14 +-
 frontend/src/pages/LoginPage.tsx              |   18 +-
 frontend/src/pages/SettingsPage.tsx           |   17 +-
 frontend/src/styles/index.css                 | 2337 ++++++++---------
 package-lock.json                             |    2 +-
 24 files changed, 1422 insertions(+), 1472 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index c8ea786..0c09d1a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@family-budget/frontend",
-  "version": "0.8.5",
+  "version": "0.8.6",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 135747f..1280539 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -10,7 +10,7 @@ export function App() {
   const { user, loading } = useAuth();
 
   if (loading) {
-    return <div className="app-loading">Загрузка...</div>;
+    return <div className="app-state app-state--loading">Загрузка...</div>;
   }
 
   if (!user) {
diff --git a/frontend/src/components/AccountsList.tsx b/frontend/src/components/AccountsList.tsx
index dbf88e2..1f70a33 100644
--- a/frontend/src/components/AccountsList.tsx
+++ b/frontend/src/components/AccountsList.tsx
@@ -36,7 +36,7 @@ export function AccountsList() {
   };
 
   if (loading) {
-    return <div className="section-loading">Загрузка...</div>;
+    return <div className="state state--loading">Загрузка...</div>;
   }
 
   return (
@@ -72,21 +72,21 @@ export function AccountsList() {
                   />
                 ) : (
                   a.alias || (
-                    <span className="text-muted">не задан</span>
+                    <span className="muted-text">не задан</span>
                   )
                 )}
               </td>
               <td>
                 {editingId === a.id ? (
-                  <div className="btn-group">
+                  <div className="button-group">
                     <button
-                      className="btn btn-sm btn-primary"
+                      className="button button--primary button--small"
                       onClick={() => handleSave(a.id)}
                     >
                       Сохранить
                     </button>
                     <button
-                      className="btn btn-sm btn-secondary"
+                      className="button button--secondary button--small"
                       onClick={() => setEditingId(null)}
                     >
                       Отмена
@@ -94,7 +94,7 @@ export function AccountsList() {
                   </div>
                 ) : (
                   <button
-                    className="btn btn-sm btn-secondary"
+                    className="button button--secondary button--small"
                     onClick={() => handleEdit(a)}
                   >
                     Изменить
@@ -105,7 +105,7 @@ export function AccountsList() {
           ))}
           {accounts.length === 0 && (
             <tr>
-              <td colSpan={5} className="td-center text-muted">
+              <td colSpan={5} className="data-table__cell data-table__cell--center muted-text">
                 Нет счетов. Импортируйте выписку.
               </td>
             </tr>
diff --git a/frontend/src/components/CategoriesList.tsx b/frontend/src/components/CategoriesList.tsx
index ac7c77f..e6a2871 100644
--- a/frontend/src/components/CategoriesList.tsx
+++ b/frontend/src/components/CategoriesList.tsx
@@ -21,7 +21,7 @@ export function CategoriesList() {
   }, []);
 
   if (loading) {
-    return <div className="section-loading">Загрузка...</div>;
+    return <div className="state state--loading">Загрузка...</div>;
   }
 
   return (
@@ -36,9 +36,9 @@ export function CategoriesList() {
         <tbody>
           {categories.map((c) => (
             <tr key={c.id}>
-              <td>{c.name}</td>
-              <td>
-                <span className={`badge badge-${c.type}`}>
+            <td>{c.name}</td>
+            <td>
+                <span className={`badge badge--${c.type}`}>
                   {TYPE_LABELS[c.type] ?? c.type}
                 </span>
               </td>
diff --git a/frontend/src/components/CategoryChart.tsx b/frontend/src/components/CategoryChart.tsx
index 7d532ed..b43fb52 100644
--- a/frontend/src/components/CategoryChart.tsx
+++ b/frontend/src/components/CategoryChart.tsx
@@ -14,9 +14,9 @@ interface Props {
 }
 
 const COLORS = [
-  '#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6',
-  '#ec4899', '#06b6d4', '#84cc16', '#f97316', '#6366f1',
-  '#14b8a6', '#e11d48', '#0ea5e9', '#a855f7', '#22c55e',
+  '#2563eb', '#e85d3f', '#0f9f7f', '#d89b17', '#7c5cdb',
+  '#c8558f', '#1495a3', '#79a92f', '#e06d2f', '#4f6fd7',
+  '#1c9a8a', '#d43d5c', '#277bbd', '#9b59b6', '#2f9f63',
 ];
 
 const rubFormatter = new Intl.NumberFormat('ru-RU', {
@@ -30,7 +30,7 @@ export function CategoryChart({ data }: Props) {
   const chartHeight = isMobile ? 250 : 300;
 
   if (data.length === 0) {
-    return <div className="chart-empty">Нет данных за период</div>;
+    return <div className="state state--empty">Нет данных за период</div>;
   }
 
   const chartData = data.map((item) => ({
@@ -41,7 +41,7 @@ export function CategoryChart({ data }: Props) {
   }));
 
   return (
-    <div className="category-chart-wrapper">
+    <div className="category-chart">
       <ResponsiveContainer width="100%" height={chartHeight}>
         <PieChart>
           <Pie
@@ -58,7 +58,7 @@ export function CategoryChart({ data }: Props) {
           >
             {chartData.map((_, idx) => (
               <Cell
-                key={idx}
+                key={`${idx}-${COLORS[idx % COLORS.length]}`}
                 fill={COLORS[idx % COLORS.length]}
               />
             ))}
@@ -69,13 +69,13 @@ export function CategoryChart({ data }: Props) {
         </PieChart>
       </ResponsiveContainer>
 
-      <table className="category-table">
+      <table className="category-chart__table">
         <thead>
           <tr>
             <th>Категория</th>
             <th>Сумма</th>
-            <th className="th-center">Операций</th>
-            <th className="th-center">Доля</th>
+            <th className="category-chart__cell category-chart__cell--center">Операций</th>
+            <th className="category-chart__cell category-chart__cell--center">Доля</th>
           </tr>
         </thead>
         <tbody>
@@ -83,7 +83,7 @@ export function CategoryChart({ data }: Props) {
             <tr key={item.categoryId}>
               <td>
                 <span
-                  className="color-dot"
+                  className="category-chart__dot"
                   style={{
                     backgroundColor:
                       COLORS[idx % COLORS.length],
@@ -92,8 +92,8 @@ export function CategoryChart({ data }: Props) {
                 {item.categoryName}
               </td>
               <td>{formatAmount(item.amount)}</td>
-              <td className="td-center">{item.txCount}</td>
-              <td className="td-center">
+              <td className="category-chart__cell category-chart__cell--center">{item.txCount}</td>
+              <td className="category-chart__cell category-chart__cell--center">
                 {(item.share * 100).toFixed(1)}%
               </td>
             </tr>
diff --git a/frontend/src/components/ClearHistoryModal.tsx b/frontend/src/components/ClearHistoryModal.tsx
index 39512f2..dcdbd51 100644
--- a/frontend/src/components/ClearHistoryModal.tsx
+++ b/frontend/src/components/ClearHistoryModal.tsx
@@ -32,28 +32,28 @@ export function ClearHistoryModal({ onClose, onDone }: Props) {
 
   return (
     <div
-      className="modal-overlay"
+      className="modal-backdrop"
       onMouseDown={(e) => {
         if (e.target === e.currentTarget) onClose();
       }}
     >
       <div className="modal" onClick={(e) => e.stopPropagation()}>
-        <div className="modal-header">
+        <div className="modal__header">
           <h2>Очистить историю операций</h2>
-          <button className="btn-close" onClick={onClose}>
+          <button className="modal__close-button" onClick={onClose} aria-label="Закрыть">
             &times;
           </button>
         </div>
 
-        <div className="modal-body">
-          <p className="clear-history-warn">
+        <div className="modal__body">
+          <p className="danger-note">
             Все транзакции будут безвозвратно удалены. Счета и категории
             сохранятся.
           </p>
 
-          {error && <div className="alert alert-error">{error}</div>}
+          {error && <div className="alert alert--error">{error}</div>}
 
-          <div className="form-group form-group-checkbox clear-history-check">
+          <div className="field field--checkbox danger-note__check">
             <label>
               <input
                 type="checkbox"
@@ -64,7 +64,7 @@ export function ClearHistoryModal({ onClose, onDone }: Props) {
             </label>
           </div>
 
-          <div className="form-group form-group-checkbox clear-history-check">
+          <div className="field field--checkbox danger-note__check">
             <label>
               <input
                 type="checkbox"
@@ -77,15 +77,15 @@ export function ClearHistoryModal({ onClose, onDone }: Props) {
           </div>
         </div>
 
-        <div className="modal-footer">
+        <div className="modal__footer">
           <button
-            className="btn btn-danger"
+            className="button button--danger"
             onClick={handleConfirm}
             disabled={!canConfirm || loading}
           >
             {loading ? 'Удаление…' : 'Удалить всё'}
           </button>
-          <button className="btn btn-secondary" onClick={onClose}>
+          <button className="button button--secondary" onClick={onClose}>
             Отмена
           </button>
         </div>
diff --git a/frontend/src/components/DataSection.tsx b/frontend/src/components/DataSection.tsx
index 485999d..e7edce6 100644
--- a/frontend/src/components/DataSection.tsx
+++ b/frontend/src/components/DataSection.tsx
@@ -34,16 +34,16 @@ export function DataSection() {
 
   return (
     <div className="data-section">
-      <div className="section-block">
+      <div className="data-section__block">
         <h3>История импортов</h3>
-        <p className="section-desc">
+        <p className="data-section__description">
           Список импортов выписок. Можно удалить операции конкретного импорта.
         </p>
         {imports.length === 0 ? (
-          <p className="muted">Импортов пока нет.</p>
+          <p className="muted-text">Импортов пока нет.</p>
         ) : (
-          <div className="table-responsive">
-            <table className="table">
+          <div className="table-shell">
+            <table className="data-table">
               <thead>
                 <tr>
                   <th>Дата</th>
@@ -67,7 +67,7 @@ export function DataSection() {
                     <td>
                       <button
                         type="button"
-                        className="btn btn-sm btn-danger"
+                        className="button button--danger button--small"
                         onClick={() => setImpToDelete(imp)}
                         disabled={imp.importedCount === 0}
                       >
@@ -82,15 +82,15 @@ export function DataSection() {
         )}
       </div>
 
-      <div className="section-block">
+      <div className="data-section__block">
         <h3>Очистка данных</h3>
-        <p className="section-desc">
+        <p className="data-section__description">
           Очистить историю операций (все транзакции). Счета, категории и
           правила сохранятся.
         </p>
         <button
           type="button"
-          className="btn btn-danger"
+          className="button button--danger"
           onClick={() => setShowClearModal(true)}
         >
           Очистить историю
diff --git a/frontend/src/components/DeleteImportModal.tsx b/frontend/src/components/DeleteImportModal.tsx
index ff91edf..5d88702 100644
--- a/frontend/src/components/DeleteImportModal.tsx
+++ b/frontend/src/components/DeleteImportModal.tsx
@@ -32,40 +32,40 @@ export function DeleteImportModal({ imp, onClose, onDone }: Props) {
 
   return (
     <div
-      className="modal-overlay"
+      className="modal-backdrop"
       onMouseDown={(e) => {
         if (e.target === e.currentTarget) onClose();
       }}
     >
       <div className="modal" onClick={(e) => e.stopPropagation()}>
-        <div className="modal-header">
+        <div className="modal__header">
           <h2>Удалить импорт</h2>
-          <button className="btn-close" onClick={onClose}>
+          <button className="modal__close-button" onClick={onClose} aria-label="Закрыть">
             &times;
           </button>
         </div>
 
-        <div className="modal-body">
-          <p className="clear-history-warn">
+        <div className="modal__body">
+          <p className="danger-note">
             Будут удалены все операции этого импорта ({imp.importedCount}{' '}
             шт.): {imp.bank} / {accountLabel}
           </p>
 
-          {error && <div className="alert alert-error">{error}</div>}
+          {error && <div className="alert alert--error">{error}</div>}
 
           <p>Действие необратимо.</p>
         </div>
 
-        <div className="modal-footer">
+        <div className="modal__footer">
           <button
             type="button"
-            className="btn btn-danger"
+            className="button button--danger"
             onClick={handleConfirm}
             disabled={loading}
           >
             {loading ? 'Удаление…' : 'Удалить'}
           </button>
-          <button type="button" className="btn btn-secondary" onClick={onClose}>
+          <button type="button" className="button button--secondary" onClick={onClose}>
             Отмена
           </button>
         </div>
diff --git a/frontend/src/components/EditTransactionModal.tsx b/frontend/src/components/EditTransactionModal.tsx
index 5ff8c38..9ea7119 100644
--- a/frontend/src/components/EditTransactionModal.tsx
+++ b/frontend/src/components/EditTransactionModal.tsx
@@ -83,47 +83,47 @@ export function EditTransactionModal({
 
   return (
     <div
-      className="modal-overlay"
+      className="modal-backdrop"
       onMouseDown={(e) => {
         if (e.target === e.currentTarget) onClose();
       }}
     >
       <div className="modal" onClick={(e) => e.stopPropagation()}>
-        <div className="modal-header">
+        <div className="modal__header">
           <h2>Редактирование операции</h2>
-          <button className="btn-close" onClick={onClose}>
+          <button className="modal__close-button" onClick={onClose} aria-label="Закрыть">
             &times;
           </button>
         </div>
 
         <form onSubmit={handleSubmit}>
-          <div className="modal-body">
-            {error && <div className="alert alert-error">{error}</div>}
+          <div className="modal__body">
+            {error && <div className="alert alert--error">{error}</div>}
 
-            <div className="modal-tx-info">
-              <div className="modal-tx-row">
-                <span className="modal-tx-label">Дата</span>
+            <div className="transaction-preview">
+              <div className="transaction-preview__row">
+                <span className="transaction-preview__label">Дата</span>
                 <span>{formatDateTime(transaction.operationAt)}</span>
               </div>
-              <div className="modal-tx-row">
-                <span className="modal-tx-label">Сумма</span>
+              <div className="transaction-preview__row">
+                <span className="transaction-preview__label">Сумма</span>
                 <span>{formatAmount(transaction.amountSigned)}</span>
               </div>
               {transaction.commission !== 0 && (
-                <div className="modal-tx-row">
-                  <span className="modal-tx-label">Комиссия</span>
+                <div className="transaction-preview__row">
+                  <span className="transaction-preview__label">Комиссия</span>
                   <span>{formatAmount(getCommissionAmountSigned(transaction))}</span>
                 </div>
               )}
-              <div className="modal-tx-row">
-                <span className="modal-tx-label">Описание</span>
-                <span className="modal-tx-description">
+              <div className="transaction-preview__row">
+                <span className="transaction-preview__label">Описание</span>
+                <span className="transaction-preview__description">
                   {transaction.description}
                 </span>
               </div>
             </div>
 
-            <div className="form-group">
+            <div className="field">
               <label htmlFor="edit-category">Категория</label>
               <select
                 id="edit-category"
@@ -139,7 +139,7 @@ export function EditTransactionModal({
               </select>
             </div>
 
-            <div className="form-group">
+            <div className="field">
               <label htmlFor="edit-comment">Комментарий</label>
               <textarea
                 id="edit-comment"
@@ -152,7 +152,7 @@ export function EditTransactionModal({
 
             <div className="form-divider" />
 
-            <div className="form-group form-group-checkbox">
+            <div className="field field--checkbox">
               <label>
                 <input
                   type="checkbox"
@@ -165,7 +165,7 @@ export function EditTransactionModal({
 
             {createRule && (
               <>
-                <div className="form-group">
+                <div className="field">
                   <label htmlFor="edit-pattern">
                     Шаблон (ключевая строка)
                   </label>
@@ -177,7 +177,7 @@ export function EditTransactionModal({
                     maxLength={200}
                   />
                 </div>
-                <div className="form-group form-group-checkbox">
+                <div className="field field--checkbox">
                   <label>
                     <input
                       type="checkbox"
@@ -193,17 +193,17 @@ export function EditTransactionModal({
             )}
           </div>
 
-          <div className="modal-footer">
+          <div className="modal__footer">
             <button
               type="button"
-              className="btn btn-secondary"
+              className="button button--secondary"
               onClick={onClose}
             >
               Отмена
             </button>
             <button
               type="submit"
-              className="btn btn-primary"
+              className="button button--primary"
               disabled={saving}
             >
               {saving ? 'Сохранение...' : 'Сохранить'}
diff --git a/frontend/src/components/ImportModal.tsx b/frontend/src/components/ImportModal.tsx
index 4af55b9..9b1515a 100644
--- a/frontend/src/components/ImportModal.tsx
+++ b/frontend/src/components/ImportModal.tsx
@@ -60,21 +60,21 @@ export function ImportModal({ onClose, onDone }: Props) {
 
   return (
     <div
-      className="modal-overlay"
+      className="modal-backdrop"
       onMouseDown={(e) => {
         if (e.target === e.currentTarget) onClose();
       }}
     >
       <div className="modal" onClick={(e) => e.stopPropagation()}>
-        <div className="modal-header">
+        <div className="modal__header">
           <h2>Импорт выписки</h2>
-          <button className="btn-close" onClick={onClose}>
+          <button className="modal__close-button" onClick={onClose} aria-label="Закрыть">
             &times;
           </button>
         </div>
 
-        <div className="modal-body">
-          {error && <div className="alert alert-error">{error}</div>}
+        <div className="modal__body">
+          {error && <div className="alert alert--error">{error}</div>}
 
           {!result && (
             <div className="import-upload">
@@ -84,19 +84,19 @@ export function ImportModal({ onClose, onDone }: Props) {
                 type="file"
                 accept=".pdf,.json,application/pdf,application/json"
                 onChange={handleFileChange}
-                className="file-input"
+                className="import-upload__input"
               />
               {loading && (
-                <div className="import-loading">Импорт...</div>
+                <div className="import-upload__loading">Импорт...</div>
               )}
             </div>
           )}
 
           {result && (
             <div className="import-result">
-              <div className="import-result-icon" aria-hidden="true">✓</div>
+              <div className="import-result__icon" aria-hidden="true">✓</div>
               <h3>Импорт завершён</h3>
-              <table className="import-stats">
+              <table className="import-result__stats">
                 <tbody>
                   <tr>
                     <td>Счёт</td>
@@ -122,9 +122,9 @@ export function ImportModal({ onClose, onDone }: Props) {
               </table>
 
               {result.isNewAccount && !aliasSaved && (
-                <div className="import-alias">
+                <div className="import-result__alias">
                   <label>Алиас для нового счёта</label>
-                  <div className="import-alias-row">
+                  <div className="import-result__alias-row">
                     <input
                       type="text"
                       placeholder="Напр.: Текущий, Накопительный"
@@ -133,7 +133,7 @@ export function ImportModal({ onClose, onDone }: Props) {
                       maxLength={50}
                     />
                     <button
-                      className="btn btn-sm btn-primary"
+                      className="button button--primary button--small"
                       onClick={handleSaveAlias}
                       disabled={!alias.trim()}
                     >
@@ -144,7 +144,7 @@ export function ImportModal({ onClose, onDone }: Props) {
               )}
 
               {aliasSaved && (
-                <div className="import-alias-saved">
+                <div className="import-result__alias-saved">
                   Алиас сохранён
                 </div>
               )}
@@ -152,14 +152,14 @@ export function ImportModal({ onClose, onDone }: Props) {
           )}
         </div>
 
-        <div className="modal-footer">
+        <div className="modal__footer">
           {result ? (
-            <button className="btn btn-primary" onClick={onDone}>
+            <button className="button button--primary" onClick={onDone}>
               Готово
             </button>
           ) : (
             <button
-              className="btn btn-secondary"
+              className="button button--secondary"
               onClick={onClose}
               disabled={loading}
             >
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index 12c282b..c4d688e 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -17,10 +17,10 @@ export function Layout({ children }: { children: ReactNode }) {
   }, []);
 
   return (
-    <div className="layout">
+    <div className="app-shell">
       <button
         type="button"
-        className="burger-btn"
+        className="menu-button"
         aria-label="Открыть меню"
         onClick={() => setDrawerOpen(true)}
       >
@@ -33,23 +33,23 @@ export function Layout({ children }: { children: ReactNode }) {
 
       {drawerOpen && (
         <div
-          className="sidebar-overlay"
+          className="app-shell__overlay"
           aria-hidden="true"
           onClick={closeDrawer}
         />
       )}
 
-      <aside className={`sidebar ${drawerOpen ? 'sidebar-open' : ''}`}>
-        <div className="sidebar-brand">
-          <span className="sidebar-brand-icon">₽</span>
-          <span className="sidebar-brand-text">Семейный бюджет</span>
+      <aside className={`sidebar ${drawerOpen ? 'sidebar--open' : ''}`}>
+        <div className="sidebar__brand">
+          <span className="sidebar__brand-icon">₽</span>
+          <span className="sidebar__brand-text">Семейный бюджет</span>
         </div>
 
-        <nav className="sidebar-nav">
+        <nav className="sidebar__nav" aria-label="Основная навигация">
           <NavLink
             to="/history"
             className={({ isActive }) =>
-              `nav-link${isActive ? ' active' : ''}`
+              `sidebar__nav-link${isActive ? ' sidebar__nav-link--active' : ''}`
             }
             onClick={closeDrawer}
           >
@@ -66,7 +66,7 @@ export function Layout({ children }: { children: ReactNode }) {
           <NavLink
             to="/analytics"
             className={({ isActive }) =>
-              `nav-link${isActive ? ' active' : ''}`
+              `sidebar__nav-link${isActive ? ' sidebar__nav-link--active' : ''}`
             }
             onClick={closeDrawer}
           >
@@ -81,7 +81,7 @@ export function Layout({ children }: { children: ReactNode }) {
           <NavLink
             to="/settings"
             className={({ isActive }) =>
-              `nav-link${isActive ? ' active' : ''}`
+              `sidebar__nav-link${isActive ? ' sidebar__nav-link--active' : ''}`
             }
             onClick={closeDrawer}
           >
@@ -93,23 +93,23 @@ export function Layout({ children }: { children: ReactNode }) {
           </NavLink>
         </nav>
 
-        <div className="sidebar-footer">
-          <div className="sidebar-footer-top">
-            <span className="sidebar-user">{user?.login}</span>
-            <button className="btn-logout" onClick={() => logout()}>
+        <div className="sidebar__footer">
+          <div className="sidebar__user-row">
+            <span className="sidebar__user">{user?.login}</span>
+            <button className="sidebar__logout" onClick={() => logout()}>
               Выход
             </button>
           </div>
-          <div className="sidebar-footer-bottom">
-            <span className="sidebar-version">
+          <div className="sidebar__meta">
+            <span className="sidebar__version">
               FE {__FE_VERSION__} · BE {beVersion ?? '…'}
             </span>
-            <span className="sidebar-copyright">© 2025 Семейный бюджет</span>
+            <span className="sidebar__copyright">© 2025 Семейный бюджет</span>
           </div>
         </div>
       </aside>
 
-      <main className="main-content">{children}</main>
+      <main className="app-shell__main">{children}</main>
     </div>
   );
 }
diff --git a/frontend/src/components/Pagination.tsx b/frontend/src/components/Pagination.tsx
index a3feb5f..557c58c 100644
--- a/frontend/src/components/Pagination.tsx
+++ b/frontend/src/components/Pagination.tsx
@@ -20,35 +20,38 @@ export function Pagination({
 
   return (
     <div className="pagination">
-      <div className="pagination-info">
+      <div className="pagination__info">
         {totalItems > 0
           ? `Показано ${from}–${to} из ${totalItems}`
           : 'Нет записей'}
       </div>
-      <div className="pagination-controls">
+      <div className="pagination__controls">
         <select
-          className="pagination-size"
+          className="pagination__size"
           value={pageSize}
           onChange={(e) => onPageSizeChange(Number(e.target.value))}
+          aria-label="Количество операций на странице"
         >
           <option value={10}>10</option>
           <option value={50}>50</option>
           <option value={100}>100</option>
         </select>
         <button
-          className="btn-page"
+          className="icon-button"
           disabled={page <= 1}
           onClick={() => onPageChange(page - 1)}
+          aria-label="Предыдущая страница"
         >
           &larr;
         </button>
-        <span className="pagination-current">
+        <span className="pagination__current">
           {page} / {totalPages || 1}
         </span>
         <button
-          className="btn-page"
+          className="icon-button"
           disabled={page >= totalPages}
           onClick={() => onPageChange(page + 1)}
+          aria-label="Следующая страница"
         >
           &rarr;
         </button>
diff --git a/frontend/src/components/PeriodSelector.tsx b/frontend/src/components/PeriodSelector.tsx
index 42ca42a..0e2a0a1 100644
--- a/frontend/src/components/PeriodSelector.tsx
+++ b/frontend/src/components/PeriodSelector.tsx
@@ -85,13 +85,13 @@ export function PeriodSelector({ period, onChange }: Props) {
   };
 
   return (
-    <div className="period-selector">
-      <div className="period-modes">
+    <div className="period-picker">
+      <div className="segmented-control">
         {(['week', 'month', 'year', 'custom'] as PeriodMode[]).map(
           (m) => (
             <button
               key={m}
-              className={`btn-preset ${period.mode === m ? 'active' : ''}`}
+              className={`segmented-control__button ${period.mode === m ? 'segmented-control__button--active' : ''}`}
               onClick={() => setMode(m)}
             >
               {MODE_LABELS[m]}
@@ -100,13 +100,18 @@ export function PeriodSelector({ period, onChange }: Props) {
         )}
       </div>
 
-      <div className="period-nav">
+      <div className="period-picker__nav">
         {period.mode !== 'custom' && (
-          <button className="btn-page" onClick={() => navigate(-1)}>
+          <button
+            className="icon-button"
+            onClick={() => navigate(-1)}
+            aria-label="Предыдущий период"
+            title="Предыдущий период"
+          >
             &larr;
           </button>
         )}
-        <div className="period-dates">
+        <div className="period-picker__dates">
           <input
             type="date"
             value={period.from}
@@ -114,7 +119,7 @@ export function PeriodSelector({ period, onChange }: Props) {
               onChange({ ...period, mode: 'custom', from: e.target.value })
             }
           />
-          <span className="filter-separator">&mdash;</span>
+          <span className="period-picker__separator">&mdash;</span>
           <input
             type="date"
             value={period.to}
@@ -124,7 +129,12 @@ export function PeriodSelector({ period, onChange }: Props) {
           />
         </div>
         {period.mode !== 'custom' && (
-          <button className="btn-page" onClick={() => navigate(1)}>
+          <button
+            className="icon-button"
+            onClick={() => navigate(1)}
+            aria-label="Следующий период"
+            title="Следующий период"
+          >
             &rarr;
           </button>
         )}
diff --git a/frontend/src/components/RulesList.tsx b/frontend/src/components/RulesList.tsx
index af1142e..a1d9981 100644
--- a/frontend/src/components/RulesList.tsx
+++ b/frontend/src/components/RulesList.tsx
@@ -51,7 +51,7 @@ export function RulesList() {
   };
 
   if (loading) {
-    return <div className="section-loading">Загрузка...</div>;
+    return <div className="state state--loading">Загрузка...</div>;
   }
 
   return (
@@ -61,10 +61,10 @@ export function RulesList() {
           <tr>
             <th>Шаблон</th>
             <th>Категория</th>
-            <th className="th-center">Приоритет</th>
-            <th className="th-center">Подтверждение</th>
+            <th className="data-table__head-cell data-table__head-cell--center">Приоритет</th>
+            <th className="data-table__head-cell data-table__head-cell--center">Подтверждение</th>
             <th>Создано</th>
-            <th className="th-center">Активно</th>
+            <th className="data-table__head-cell data-table__head-cell--center">Активно</th>
             <th></th>
           </tr>
         </thead>
@@ -72,35 +72,38 @@ export function RulesList() {
           {rules.map((r) => (
             <tr
               key={r.id}
-              className={!r.isActive ? 'row-inactive' : ''}
+              className={!r.isActive ? 'data-table__row--inactive' : ''}
             >
               <td>
                 <code>{r.pattern}</code>
               </td>
               <td>{r.categoryName}</td>
-              <td className="td-center">{r.priority}</td>
-              <td className="td-center">
+              <td className="data-table__cell data-table__cell--center">{r.priority}</td>
+              <td className="data-table__cell data-table__cell--center">
                 {r.requiresConfirmation ? 'Да' : 'Нет'}
               </td>
-              <td className="td-nowrap">
+              <td className="data-table__cell data-table__cell--nowrap">
                 {formatDate(r.createdAt)}
               </td>
-              <td className="td-center">
+              <td className="data-table__cell data-table__cell--center">
                 <button
-                  className={`toggle ${r.isActive ? 'toggle-on' : 'toggle-off'}`}
+                  className={`switch-button ${r.isActive ? 'switch-button--on' : 'switch-button--off'}`}
                   onClick={() => handleToggle(r)}
                   title={
                     r.isActive ? 'Деактивировать' : 'Активировать'
                   }
+                  aria-label={
+                    r.isActive ? 'Деактивировать правило' : 'Активировать правило'
+                  }
                 >
                   {r.isActive ? 'Вкл' : 'Выкл'}
                 </button>
               </td>
               <td>
-                <div className="rules-actions">
+                <div className="rules-list__actions">
                   {r.isActive && (
                     <button
-                      className="btn btn-sm btn-secondary"
+                      className="button button--secondary button--small"
                       onClick={() => handleApply(r.id)}
                       disabled={applyingId === r.id}
                     >
@@ -108,7 +111,7 @@ export function RulesList() {
                     </button>
                   )}
                   {applyResult?.id === r.id && (
-                    <span className="apply-result">
+                    <span className="rules-list__result">
                       Применено: {applyResult.count}
                     </span>
                   )}
@@ -118,7 +121,7 @@ export function RulesList() {
           ))}
           {rules.length === 0 && (
             <tr>
-              <td colSpan={7} className="td-center text-muted">
+              <td colSpan={7} className="data-table__cell data-table__cell--center muted-text">
                 Нет правил
               </td>
             </tr>
diff --git a/frontend/src/components/SummaryCards.tsx b/frontend/src/components/SummaryCards.tsx
index db59b36..50ffb81 100644
--- a/frontend/src/components/SummaryCards.tsx
+++ b/frontend/src/components/SummaryCards.tsx
@@ -6,59 +6,61 @@ interface Props {
 }
 
 export function SummaryCards({ summary }: Props) {
+  const balanceModifier = summary.net >= 0 ? 'positive' : 'negative';
+
   return (
-    <div className="summary-cards">
-      <div className="summary-card summary-card-income">
-        <div className="summary-label">Доходы</div>
-        <div className="summary-value">
+    <div className="summary">
+      <div className="summary__card summary__card--income">
+        <div className="summary__label">Доходы</div>
+        <div className="summary__value">
           {formatAmount(summary.totalIncome)}
         </div>
       </div>
 
-      <div className="summary-card summary-card-expense">
-        <div className="summary-label">Расходы</div>
-        <div className="summary-value">
+      <div className="summary__card summary__card--expense">
+        <div className="summary__label">Расходы</div>
+        <div className="summary__value">
           {formatAmount(summary.totalExpense)}
         </div>
       </div>
 
       <div
-        className={`summary-card ${summary.net >= 0 ? 'summary-card-positive' : 'summary-card-negative'}`}
+        className={`summary__card summary__card--${balanceModifier}`}
       >
-        <div className="summary-label">Баланс</div>
-        <div className="summary-value">
+        <div className="summary__label">Баланс</div>
+        <div className="summary__value">
           {formatAmount(summary.net)}
         </div>
       </div>
 
-      <div className="summary-card summary-card-investments">
-        <div className="summary-label">На инвестиции</div>
-        <div className="summary-value">
+      <div className="summary__card summary__card--investments">
+        <div className="summary__label">На инвестиции</div>
+        <div className="summary__value">
           {formatAmount(summary.investmentOutflow)}
         </div>
         {summary.investmentIncomeExcluded > 0 && (
-          <div className="summary-subvalue">
+          <div className="summary__subvalue">
             Исключено из доходов: {formatAmount(summary.investmentIncomeExcluded)}
           </div>
         )}
       </div>
 
       {summary.topCategories.length > 0 && (
-        <div className="summary-card summary-card-top">
-          <div className="summary-label">Топ расходов</div>
-          <div className="summary-top-list">
+        <div className="summary__card summary__card--top">
+          <div className="summary__label">Топ расходов</div>
+          <div className="summary__top-list">
             {summary.topCategories.map((cat) => (
               <div
                 key={cat.categoryId}
-                className="top-category-item"
+                className="summary__top-item"
               >
-                <span className="top-category-name">
+                <span className="summary__top-name">
                   {cat.categoryName}
                 </span>
-                <span className="top-category-amount">
+                <span className="summary__top-amount">
                   {formatAmount(cat.amount)}
                 </span>
-                <span className="top-category-share">
+                <span className="summary__top-share">
                   {(cat.share * 100).toFixed(0)}%
                 </span>
               </div>
diff --git a/frontend/src/components/TimeseriesChart.tsx b/frontend/src/components/TimeseriesChart.tsx
index 088fdea..3fffa32 100644
--- a/frontend/src/components/TimeseriesChart.tsx
+++ b/frontend/src/components/TimeseriesChart.tsx
@@ -26,7 +26,7 @@ export function TimeseriesChart({ data }: Props) {
   const chartHeight = isMobile ? 250 : 300;
 
   if (data.length === 0) {
-    return <div className="chart-empty">Нет данных за период</div>;
+    return <div className="state state--empty">Нет данных за период</div>;
   }
 
   const chartData = data.map((item) => ({
@@ -39,7 +39,7 @@ export function TimeseriesChart({ data }: Props) {
   return (
     <ResponsiveContainer width="100%" height={chartHeight}>
       <BarChart data={chartData}>
-        <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
+        <CartesianGrid strokeDasharray="3 3" stroke="#e7ded2" vertical={false} />
         <XAxis
           dataKey="period"
           tickFormatter={(v: string) => {
@@ -47,32 +47,42 @@ export function TimeseriesChart({ data }: Props) {
             return `${d.getDate()}.${String(d.getMonth() + 1).padStart(2, '0')}`;
           }}
           fontSize={12}
-          stroke="#64748b"
+          stroke="#7d7164"
+          tickLine={false}
+          axisLine={false}
         />
         <YAxis
           tickFormatter={(v: number) =>
             v >= 1000 ? `${(v / 1000).toFixed(0)}к` : String(v)
           }
           fontSize={12}
-          stroke="#64748b"
+          stroke="#7d7164"
+          tickLine={false}
+          axisLine={false}
         />
         <Tooltip
           formatter={(value: number) => rubFormatter.format(value)}
+          cursor={{ fill: 'rgba(129, 93, 58, 0.08)' }}
+          contentStyle={{
+            border: '1px solid #e7ded2',
+            borderRadius: 8,
+            boxShadow: '0 16px 36px rgba(54, 42, 30, 0.14)',
+          }}
         />
         <Legend />
         <Bar
           dataKey="Расходы"
-          fill="#ef4444"
+          fill="#e85d3f"
           radius={[4, 4, 0, 0]}
         />
         <Bar
           dataKey="Доходы"
-          fill="#10b981"
+          fill="#0f9f7f"
           radius={[4, 4, 0, 0]}
         />
         <Bar
           dataKey="Инвестиции"
-          fill="#f59e0b"
+          fill="#d89b17"
           radius={[4, 4, 0, 0]}
         />
       </BarChart>
diff --git a/frontend/src/components/TransactionFilters.tsx b/frontend/src/components/TransactionFilters.tsx
index a87d736..0e6b714 100644
--- a/frontend/src/components/TransactionFilters.tsx
+++ b/frontend/src/components/TransactionFilters.tsx
@@ -115,28 +115,29 @@ export function TransactionFilters({
   };
 
   return (
-    <div className="filters-panel">
-      <div className="filters-row">
-        <div className="filter-group">
+    <div className="filters">
+      <div className="filters__row">
+        <div className="field field--period">
           <label>Период</label>
-          <div className="filter-dates-wrap">
+          <div className="filters__date-control">
             {filters.periodMode !== 'custom' && (
               <button
                 type="button"
-                className="btn-page"
+                className="icon-button"
                 onClick={() => navigate(-1)}
+                aria-label="Предыдущий период"
                 title="Предыдущий период"
               >
                 &larr;
               </button>
             )}
-            <div className="filter-dates">
+            <div className="filters__dates">
               <input
                 type="date"
                 value={filters.from}
                 onChange={(e) => handleDateChange('from', e.target.value)}
               />
-              <span className="filter-separator">&mdash;</span>
+              <span className="filters__separator">&mdash;</span>
               <input
                 type="date"
                 value={filters.to}
@@ -146,29 +147,30 @@ export function TransactionFilters({
             {filters.periodMode !== 'custom' && (
               <button
                 type="button"
-                className="btn-page"
+                className="icon-button"
                 onClick={() => navigate(1)}
+                aria-label="Следующий период"
                 title="Следующий период"
               >
                 &rarr;
               </button>
             )}
           </div>
-          <div className="filter-presets">
+          <div className="segmented-control segmented-control--compact">
             <button
-              className={`btn-preset ${filters.periodMode === 'week' ? 'active' : ''}`}
+              className={`segmented-control__button ${filters.periodMode === 'week' ? 'segmented-control__button--active' : ''}`}
               onClick={() => applyPreset('week')}
             >
               Неделя
             </button>
             <button
-              className={`btn-preset ${filters.periodMode === 'month' ? 'active' : ''}`}
+              className={`segmented-control__button ${filters.periodMode === 'month' ? 'segmented-control__button--active' : ''}`}
               onClick={() => applyPreset('month')}
             >
               Месяц
             </button>
             <button
-              className={`btn-preset ${filters.periodMode === 'year' ? 'active' : ''}`}
+              className={`segmented-control__button ${filters.periodMode === 'year' ? 'segmented-control__button--active' : ''}`}
               onClick={() => applyPreset('year')}
             >
               Год
@@ -176,7 +178,7 @@ export function TransactionFilters({
           </div>
         </div>
 
-        <div className="filter-group">
+        <div className="field">
           <label>Счёт</label>
           <select
             value={filters.accountId}
@@ -191,7 +193,7 @@ export function TransactionFilters({
           </select>
         </div>
 
-        <div className="filter-group">
+        <div className="field">
           <label>Тип</label>
           <select
             value={filters.direction}
@@ -204,7 +206,7 @@ export function TransactionFilters({
           </select>
         </div>
 
-        <div className="filter-group">
+        <div className="field">
           <label>Категория</label>
           <select
             value={filters.categoryId}
@@ -220,8 +222,8 @@ export function TransactionFilters({
         </div>
       </div>
 
-      <div className="filters-row">
-        <div className="filter-group filter-group-wide">
+      <div className="filters__row">
+        <div className="field field--wide">
           <label>Поиск</label>
           <input
             type="text"
@@ -231,7 +233,7 @@ export function TransactionFilters({
           />
         </div>
 
-        <div className="filter-group">
+        <div className="field">
           <label>Сумма от (₽)</label>
           <input
             type="number"
@@ -241,7 +243,7 @@ export function TransactionFilters({
           />
         </div>
 
-        <div className="filter-group">
+        <div className="field">
           <label>Сумма до (₽)</label>
           <input
             type="number"
@@ -251,7 +253,7 @@ export function TransactionFilters({
           />
         </div>
 
-        <div className="filter-group filter-group-checkbox">
+        <div className="field field--checkbox">
           <label>
             <input
               type="checkbox"
@@ -262,9 +264,9 @@ export function TransactionFilters({
           </label>
         </div>
 
-        <div className="filter-group">
+        <div className="field">
           <label>Сортировка</label>
-          <div className="filter-sort">
+          <div className="filters__sort">
             <select
               value={filters.sortBy}
               onChange={(e) =>
@@ -275,7 +277,7 @@ export function TransactionFilters({
               <option value="amount">По сумме</option>
             </select>
             <button
-              className="btn-sort-order"
+              className="icon-button"
               onClick={() =>
                 set(
                   'sortOrder',
@@ -287,6 +289,11 @@ export function TransactionFilters({
                   ? 'По возрастанию'
                   : 'По убыванию'
               }
+              aria-label={
+                filters.sortOrder === 'asc'
+                  ? 'Сортировать по убыванию'
+                  : 'Сортировать по возрастанию'
+              }
             >
               {filters.sortOrder === 'asc' ? '↑' : '↓'}
             </button>
diff --git a/frontend/src/components/TransactionTable.tsx b/frontend/src/components/TransactionTable.tsx
index 6d6e3bf..d789b88 100644
--- a/frontend/src/components/TransactionTable.tsx
+++ b/frontend/src/components/TransactionTable.tsx
@@ -8,9 +8,9 @@ interface Props {
 }
 
 const DIRECTION_CLASSES: Record<string, string> = {
-  income: 'amount-income',
-  expense: 'amount-expense',
-  transfer: 'amount-transfer',
+  income: 'money-amount--income',
+  expense: 'money-amount--expense',
+  transfer: 'money-amount--transfer',
 };
 
 function getCommissionAmountSigned(tx: Transaction): number {
@@ -33,39 +33,39 @@ function TransactionCard({
 
   return (
     <div
-      className={`transaction-card ${isUnconfirmed ? 'row-unconfirmed' : ''}`}
+      className={`transaction-card ${isUnconfirmed ? 'transaction-card--unconfirmed' : ''}`}
     >
-      <div className="transaction-card-header">
-        <span className="transaction-card-date">
+      <div className="transaction-card__header">
+        <span className="transaction-card__date">
           {formatDateTime(tx.operationAt)}
         </span>
-        <span className={`transaction-card-amount ${directionClass}`}>
+        <span className={`money-amount transaction-card__amount ${directionClass}`}>
           {formatAmount(tx.amountSigned)}
         </span>
       </div>
       {tx.commission !== 0 && (
-        <div className="transaction-card-commission">
+        <div className="transaction-card__commission">
           Комиссия: {formatAmount(getCommissionAmountSigned(tx))}
         </div>
       )}
-      <div className="transaction-card-body">
-        <span className="description-text">{tx.description}</span>
+      <div className="transaction-card__body">
+        <span className="transaction-card__description">{tx.description}</span>
         {tx.comment && (
-          <span className="comment-badge" title={tx.comment}>
+          <span className="comment-indicator" title={tx.comment}>
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
               <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
             </svg>
           </span>
         )}
       </div>
-      <div className="transaction-card-footer">
-        <span className="transaction-card-meta">
+      <div className="transaction-card__footer">
+        <span className="transaction-card__meta">
           {tx.accountAlias || '—'} · {tx.categoryName || '—'}
         </span>
-        <div className="transaction-card-actions">
+        <div className="transaction-card__actions">
           {tx.categoryId != null && !tx.isCategoryConfirmed && (
             <span
-              className="badge badge-warning"
+              className="badge badge--warning"
               title="Категория не подтверждена"
             >
               ?
@@ -73,8 +73,9 @@ function TransactionCard({
           )}
           <button
             type="button"
-            className="btn-icon btn-icon-touch"
+            className="icon-button icon-button--touch"
             onClick={() => onEdit(tx)}
+            aria-label="Редактировать операцию"
             title="Редактировать"
           >
             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
@@ -90,16 +91,16 @@ function TransactionCard({
 
 export function TransactionTable({ transactions, loading, onEdit }: Props) {
   if (loading) {
-    return <div className="table-loading">Загрузка операций...</div>;
+    return <div className="state state--loading">Загрузка операций...</div>;
   }
 
   if (transactions.length === 0) {
-    return <div className="table-empty">Операции не найдены</div>;
+    return <div className="state state--empty">Операции не найдены</div>;
   }
 
   return (
     <>
-      <div className="table-wrapper table-desktop">
+      <div className="table-shell table-shell--desktop">
         <table className="data-table">
           <thead>
             <tr>
@@ -108,7 +109,7 @@ export function TransactionTable({ transactions, loading, onEdit }: Props) {
               <th>Сумма</th>
               <th>Описание</th>
               <th>Категория</th>
-              <th className="th-center">Статус</th>
+              <th className="data-table__head-cell data-table__head-cell--center">Статус</th>
               <th></th>
             </tr>
           </thead>
@@ -118,43 +119,43 @@ export function TransactionTable({ transactions, loading, onEdit }: Props) {
                 key={tx.id}
                 className={
                   !tx.isCategoryConfirmed && tx.categoryId
-                    ? 'row-unconfirmed'
+                    ? 'data-table__row--unconfirmed'
                     : ''
                 }
               >
-                <td className="td-nowrap">
+                <td className="data-table__cell data-table__cell--nowrap">
                   {formatDateTime(tx.operationAt)}
                 </td>
-                <td className="td-nowrap">{tx.accountAlias || '—'}</td>
+                <td className="data-table__cell data-table__cell--nowrap">{tx.accountAlias || '—'}</td>
                 <td
-                  className={`td-nowrap td-amount ${DIRECTION_CLASSES[tx.direction] ?? ''}`}
+                  className={`data-table__cell data-table__cell--nowrap money-amount ${DIRECTION_CLASSES[tx.direction] ?? ''}`}
                 >
                   <div>{formatAmount(tx.amountSigned)}</div>
                   {tx.commission !== 0 && (
-                    <div className="td-commission">
+                    <div className="data-table__subtext">
                       Комиссия: {formatAmount(getCommissionAmountSigned(tx))}
                     </div>
                   )}
                 </td>
-                <td className="td-description">
-                  <span className="description-text">{tx.description}</span>
+                <td className="data-table__cell data-table__cell--description">
+                  <span className="data-table__description">{tx.description}</span>
                   {tx.comment && (
-                    <span className="comment-badge" title={tx.comment}>
+                    <span className="comment-indicator" title={tx.comment}>
                       <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                         <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
                       </svg>
                     </span>
                   )}
                 </td>
-                <td className="td-nowrap">
+                <td className="data-table__cell data-table__cell--nowrap">
                   {tx.categoryName || (
-                    <span className="text-muted">—</span>
+                    <span className="muted-text">—</span>
                   )}
                 </td>
-                <td className="td-center">
+                <td className="data-table__cell data-table__cell--center">
                   {tx.categoryId != null && !tx.isCategoryConfirmed && (
                     <span
-                      className="badge badge-warning"
+                      className="badge badge--warning"
                       title="Категория не подтверждена"
                     >
                       ?
@@ -163,8 +164,9 @@ export function TransactionTable({ transactions, loading, onEdit }: Props) {
                 </td>
                 <td>
                   <button
-                    className="btn-icon"
+                    className="icon-button"
                     onClick={() => onEdit(tx)}
+                    aria-label="Редактировать операцию"
                     title="Редактировать"
                   >
                     <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
@@ -179,7 +181,7 @@ export function TransactionTable({ transactions, loading, onEdit }: Props) {
         </table>
       </div>
 
-      <div className="transaction-cards transaction-mobile">
+      <div className="transaction-list transaction-list--mobile">
         {transactions.map((tx) => (
           <TransactionCard key={tx.id} tx={tx} onEdit={onEdit} />
         ))}
diff --git a/frontend/src/pages/AnalyticsPage.tsx b/frontend/src/pages/AnalyticsPage.tsx
index 880e3b9..c8809f7 100644
--- a/frontend/src/pages/AnalyticsPage.tsx
+++ b/frontend/src/pages/AnalyticsPage.tsx
@@ -88,14 +88,17 @@ export function AnalyticsPage() {
 
   return (
     <div className="page">
-      <div className="page-header">
-        <h1>Аналитика</h1>
+      <div className="page__header">
+        <div>
+          <p className="page__eyebrow">Обзор периода</p>
+          <h1 className="page__title">Аналитика</h1>
+        </div>
       </div>
 
-      <div className="analytics-controls">
+      <div className="analytics-panel">
         <PeriodSelector period={period} onChange={setPeriod} />
-        <div className="analytics-filters">
-          <div className="filter-group">
+        <div className="analytics-panel__filters">
+          <div className="field">
             <label>Счёт</label>
             <select
               value={accountId}
@@ -109,7 +112,7 @@ export function AnalyticsPage() {
               ))}
             </select>
           </div>
-          <div className="filter-group filter-group-checkbox">
+          <div className="field field--checkbox">
             <label>
               <input
                 type="checkbox"
@@ -123,11 +126,11 @@ export function AnalyticsPage() {
       </div>
 
       {loading ? (
-        <div className="section-loading">Загрузка данных...</div>
+        <div className="state state--loading">Загрузка данных...</div>
       ) : (
         <>
           {summary && <SummaryCards summary={summary} />}
-          <div className="analytics-charts">
+          <div className="analytics-grid">
             <div className="chart-card">
               <h3>Динамика</h3>
               <TimeseriesChart data={timeseries} />
diff --git a/frontend/src/pages/HistoryPage.tsx b/frontend/src/pages/HistoryPage.tsx
index e1a6c0c..e208be1 100644
--- a/frontend/src/pages/HistoryPage.tsx
+++ b/frontend/src/pages/HistoryPage.tsx
@@ -204,12 +204,20 @@ export function HistoryPage() {
 
   return (
     <div className="page">
-      <div className="page-header">
-        <h1>История операций</h1>
+      <div className="page__header">
+        <div>
+          <p className="page__eyebrow">Операции</p>
+          <h1 className="page__title">История операций</h1>
+        </div>
         <button
-          className="btn btn-primary"
+          className="button button--primary"
           onClick={() => setShowImport(true)}
         >
+          <svg className="button__icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+            <polyline points="7,10 12,15 17,10" />
+            <line x1="12" y1="15" x2="12" y2="3" />
+          </svg>
           Импорт выписки
         </button>
       </div>
diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
index bead729..672b950 100644
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -20,16 +20,16 @@ export function LoginPage() {
   };
 
   return (
-    <div className="login-page">
-      <div className="login-card">
-        <div className="login-header">
-          <span className="login-icon">₽</span>
+    <div className="login">
+      <div className="login__panel">
+        <div className="login__header">
+          <span className="login__icon">₽</span>
           <h1>Семейный бюджет</h1>
           <p>Войдите для продолжения</p>
         </div>
-        <form onSubmit={handleSubmit} className="login-form">
-          {error && <div className="alert alert-error">{error}</div>}
-          <div className="form-group">
+        <form onSubmit={handleSubmit} className="login__form">
+          {error && <div className="alert alert--error">{error}</div>}
+          <div className="field">
             <label htmlFor="login">Логин</label>
             <input
               id="login"
@@ -41,7 +41,7 @@ export function LoginPage() {
               autoFocus
             />
           </div>
-          <div className="form-group">
+          <div className="field">
             <label htmlFor="password">Пароль</label>
             <input
               id="password"
@@ -54,7 +54,7 @@ export function LoginPage() {
           </div>
           <button
             type="submit"
-            className="btn btn-primary btn-block"
+            className="button button--primary button--block"
             disabled={submitting}
           >
             {submitting ? 'Вход...' : 'Войти'}
diff --git a/frontend/src/pages/SettingsPage.tsx b/frontend/src/pages/SettingsPage.tsx
index 7101246..8273a1c 100644
--- a/frontend/src/pages/SettingsPage.tsx
+++ b/frontend/src/pages/SettingsPage.tsx
@@ -11,38 +11,41 @@ export function SettingsPage() {
 
   return (
     <div className="page">
-      <div className="page-header">
-        <h1>Настройки</h1>
+      <div className="page__header">
+        <div>
+          <p className="page__eyebrow">Справочники</p>
+          <h1 className="page__title">Настройки</h1>
+        </div>
       </div>
 
       <div className="tabs">
         <button
-          className={`tab ${tab === 'accounts' ? 'active' : ''}`}
+          className={`tabs__button ${tab === 'accounts' ? 'tabs__button--active' : ''}`}
           onClick={() => setTab('accounts')}
         >
           Счета
         </button>
         <button
-          className={`tab ${tab === 'categories' ? 'active' : ''}`}
+          className={`tabs__button ${tab === 'categories' ? 'tabs__button--active' : ''}`}
           onClick={() => setTab('categories')}
         >
           Категории
         </button>
         <button
-          className={`tab ${tab === 'rules' ? 'active' : ''}`}
+          className={`tabs__button ${tab === 'rules' ? 'tabs__button--active' : ''}`}
           onClick={() => setTab('rules')}
         >
           Правила
         </button>
         <button
-          className={`tab ${tab === 'data' ? 'active' : ''}`}
+          className={`tabs__button ${tab === 'data' ? 'tabs__button--active' : ''}`}
           onClick={() => setTab('data')}
         >
           Данные
         </button>
       </div>
 
-      <div className="tab-content">
+      <div className="tabs__content">
         {tab === 'accounts' && <AccountsList />}
         {tab === 'categories' && <CategoriesList />}
         {tab === 'rules' && <RulesList />}
diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css
index 86b2014..29df322 100644
--- a/frontend/src/styles/index.css
+++ b/frontend/src/styles/index.css
@@ -1,5 +1,5 @@
 /* ================================================================
-   Family Budget — Global Styles
+   Family Budget - Warm fintech design system
    ================================================================ */
 
 *,
@@ -11,37 +11,35 @@
 }
 
 :root {
-  --color-primary: #3b82f6;
-  --color-primary-hover: #2563eb;
-  --color-primary-light: #eff6ff;
-  --color-success: #10b981;
-  --color-success-light: #ecfdf5;
-  --color-danger: #ef4444;
-  --color-danger-light: #fef2f2;
-  --color-warning: #f59e0b;
-  --color-warning-light: #fffbeb;
-  --color-bg: #f1f5f9;
-  --color-surface: #ffffff;
-  --color-sidebar: #0f172a;
-  --color-sidebar-hover: #1e293b;
-  --color-sidebar-text: #94a3b8;
-  --color-sidebar-active: #ffffff;
-  --color-text: #0f172a;
-  --color-text-secondary: #64748b;
-  --color-text-muted: #94a3b8;
-  --color-border: #e2e8f0;
-  --color-border-hover: #cbd5e1;
-  --radius: 8px;
+  --color-bg: #f7f2eb;
+  --color-bg-elevated: #fbf8f3;
+  --color-surface: #fffdf8;
+  --color-surface-strong: #ffffff;
+  --color-text: #28221d;
+  --color-text-secondary: #6f6256;
+  --color-text-muted: #9d8f82;
+  --color-border: #e7ded2;
+  --color-border-strong: #d7cabb;
+  --color-primary: #2563eb;
+  --color-primary-hover: #1d4ed8;
+  --color-primary-soft: #eaf1ff;
+  --color-success: #0f9f7f;
+  --color-success-soft: #e6f7f2;
+  --color-danger: #e85d3f;
+  --color-danger-soft: #fff0eb;
+  --color-warning: #d89b17;
+  --color-warning-soft: #fff6da;
+  --color-transfer: #7c5cdb;
+  --color-transfer-soft: #f0ebff;
+  --color-sidebar: #fff9f0;
   --radius-sm: 4px;
-  --radius-lg: 12px;
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
-  --shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
-  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -4px rgba(0, 0, 0, 0.1);
-  --transition: 150ms ease;
+  --radius: 8px;
+  --shadow-sm: 0 1px 2px rgba(64, 47, 30, 0.06);
+  --shadow: 0 12px 30px rgba(64, 47, 30, 0.08);
+  --shadow-lg: 0 24px 60px rgba(54, 42, 30, 0.16);
+  --transition: 160ms ease;
 
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
-    sans-serif;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   font-size: 14px;
   line-height: 1.5;
   color: var(--color-text);
@@ -52,289 +50,339 @@ body {
   min-height: 100vh;
 }
 
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+button {
+  border: 0;
+}
+
 /* ================================================================
-   Layout
+   App shell
    ================================================================ */
 
-.layout {
+.app-shell {
   display: flex;
   min-height: 100vh;
+  background:
+    linear-gradient(180deg, rgba(255, 253, 248, 0.9), rgba(247, 242, 235, 0)),
+    var(--color-bg);
 }
 
-.sidebar {
-  width: 240px;
-  background: var(--color-sidebar);
-  color: var(--color-sidebar-text);
-  display: flex;
-  flex-direction: column;
+.app-shell__main {
+  flex: 1;
+  min-width: 0;
+  min-height: 100vh;
+  margin-left: 260px;
+  padding: 28px 36px 40px;
+}
+
+.app-shell__overlay {
+  display: none;
   position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  z-index: 100;
+  inset: 0;
+  z-index: 99;
+  background: rgba(35, 27, 21, 0.42);
+  animation: overlay-fade-in 0.2s ease;
 }
 
-.sidebar-brand {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 20px 20px 24px;
-}
-
-.sidebar-brand-icon {
-  width: 36px;
-  height: 36px;
-  background: var(--color-primary);
-  color: #fff;
-  border-radius: var(--radius);
+.app-state,
+.state {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 20px;
-  font-weight: 700;
-}
-
-.sidebar-brand-text {
-  font-size: 15px;
+  min-height: 180px;
+  padding: 32px 20px;
+  color: var(--color-text-secondary);
   font-weight: 600;
-  color: #fff;
+  text-align: center;
 }
 
-.sidebar-nav {
-  flex: 1;
+.app-state--loading {
+  min-height: 100vh;
+}
+
+.state--empty {
+  border: 1px dashed var(--color-border-strong);
+  border-radius: var(--radius);
+  background: rgba(255, 253, 248, 0.7);
+}
+
+/* ================================================================
+   Sidebar and navigation
+   ================================================================ */
+
+.sidebar {
+  position: fixed;
+  inset: 0 auto 0 0;
+  z-index: 100;
   display: flex;
+  width: 260px;
   flex-direction: column;
-  gap: 2px;
-  padding: 0 8px;
+  border-right: 1px solid var(--color-border);
+  background: var(--color-sidebar);
+  box-shadow: 10px 0 30px rgba(64, 47, 30, 0.05);
 }
 
-.nav-link {
+.sidebar__brand {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 12px;
+  padding: 24px 20px 22px;
+}
+
+.sidebar__brand-icon {
+  display: inline-flex;
+  width: 40px;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius);
+  background: linear-gradient(135deg, #f2ba4a, #e85d3f);
+  color: #fff;
+  font-size: 22px;
+  font-weight: 800;
+  box-shadow: 0 12px 28px rgba(232, 93, 63, 0.24);
+}
+
+.sidebar__brand-text {
+  max-width: 145px;
+  color: var(--color-text);
+  font-size: 15px;
+  font-weight: 800;
+  line-height: 1.2;
+}
+
+.sidebar__nav {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 6px;
+  padding: 0 12px;
+}
+
+.sidebar__nav-link {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 11px;
+  min-height: 44px;
   padding: 10px 12px;
   border-radius: var(--radius);
-  color: var(--color-sidebar-text);
+  color: var(--color-text-secondary);
+  font-weight: 700;
   text-decoration: none;
-  font-size: 14px;
-  font-weight: 500;
-  transition: all var(--transition);
+  transition:
+    background var(--transition),
+    color var(--transition),
+    box-shadow var(--transition);
 }
 
-.nav-link:hover {
-  background: var(--color-sidebar-hover);
-  color: #e2e8f0;
+.sidebar__nav-link svg {
+  flex: 0 0 auto;
 }
 
-.nav-link.active {
+.sidebar__nav-link:hover {
+  background: rgba(255, 255, 255, 0.72);
+  color: var(--color-text);
+}
+
+.sidebar__nav-link--active {
+  background: var(--color-surface-strong);
+  color: var(--color-primary);
+  box-shadow: var(--shadow-sm);
+}
+
+.sidebar__nav-link--active::before {
+  position: absolute;
+  left: -4px;
+  width: 3px;
+  height: 22px;
+  border-radius: 99px;
   background: var(--color-primary);
-  color: #fff;
+  content: "";
 }
 
-.nav-link svg {
-  flex-shrink: 0;
-}
-
-.sidebar-footer {
-  padding: 16px 20px;
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
+.sidebar__footer {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 12px;
+  margin: 12px;
+  padding: 14px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  background: rgba(255, 253, 248, 0.78);
 }
 
-.sidebar-footer-bottom {
+.sidebar__user-row,
+.sidebar__meta {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  font-size: 11px;
-  color: var(--color-sidebar-text);
-  opacity: 0.85;
+  gap: 10px;
 }
 
-.sidebar-version {
-  font-family: ui-monospace, monospace;
+.sidebar__user {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--color-text);
+  font-size: 13px;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.sidebar-copyright {
+.sidebar__logout {
+  flex: 0 0 auto;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 700;
+  padding: 5px 8px;
+  transition:
+    background var(--transition),
+    color var(--transition);
+}
+
+.sidebar__logout:hover {
+  background: var(--color-danger-soft);
+  color: var(--color-danger);
+}
+
+.sidebar__version,
+.sidebar__copyright {
+  color: var(--color-text-muted);
   font-size: 10px;
 }
 
-.sidebar-user {
-  font-size: 13px;
-  color: var(--color-sidebar-text);
+.sidebar__version {
+  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
 }
 
-.sidebar-footer-top {
-  display: flex;
+.menu-button {
+  display: none;
+  position: fixed;
+  top: 12px;
+  left: 12px;
+  z-index: 101;
+  width: 44px;
+  height: 44px;
   align-items: center;
-  justify-content: space-between;
-}
-
-.btn-logout {
-  background: none;
-  border: none;
-  color: var(--color-sidebar-text);
+  justify-content: center;
+  border-radius: var(--radius);
+  background: var(--color-text);
+  color: #fff;
   cursor: pointer;
-  font-size: 13px;
-  padding: 4px 8px;
-  border-radius: var(--radius-sm);
-  transition: all var(--transition);
-  font-family: inherit;
-}
-
-.btn-logout:hover {
-  color: #fff;
-  background: rgba(255, 255, 255, 0.1);
-}
-
-.main-content {
-  flex: 1;
-  margin-left: 240px;
-  padding: 24px 32px;
-  min-height: 100vh;
+  box-shadow: var(--shadow);
 }
 
 /* ================================================================
-   App loading
-   ================================================================ */
-
-.app-loading {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 100vh;
-  font-size: 16px;
-  color: var(--color-text-secondary);
-}
-
-/* ================================================================
-   Login
-   ================================================================ */
-
-.login-page {
-  min-height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  padding: 20px;
-}
-
-.login-card {
-  background: var(--color-surface);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-lg);
-  width: 100%;
-  max-width: 400px;
-  padding: 40px;
-}
-
-.login-header {
-  text-align: center;
-  margin-bottom: 32px;
-}
-
-.login-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 56px;
-  height: 56px;
-  background: var(--color-primary);
-  color: #fff;
-  border-radius: var(--radius-lg);
-  font-size: 28px;
-  font-weight: 700;
-  margin-bottom: 16px;
-}
-
-.login-header h1 {
-  font-size: 22px;
-  font-weight: 700;
-  margin-bottom: 4px;
-}
-
-.login-header p {
-  color: var(--color-text-secondary);
-  font-size: 14px;
-}
-
-.login-form {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-/* ================================================================
-   Pages
+   Page primitives
    ================================================================ */
 
 .page {
-  max-width: 1200px;
+  width: min(100%, 1240px);
   margin: 0 auto;
 }
 
-.page-header {
+.page__header {
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   justify-content: space-between;
-  margin-bottom: 24px;
+  gap: 16px;
+  margin-bottom: 22px;
 }
 
-.page-header h1 {
-  font-size: 24px;
-  font-weight: 700;
+.page__eyebrow {
+  margin-bottom: 4px;
+  color: var(--color-text-muted);
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.page__title {
+  color: var(--color-text);
+  font-size: 28px;
+  font-weight: 850;
+  line-height: 1.15;
+}
+
+.muted-text {
+  color: var(--color-text-muted);
 }
 
 /* ================================================================
-   Form elements
+   Forms, buttons, badges
    ================================================================ */
 
-.form-group {
+.field {
   display: flex;
+  min-width: 148px;
   flex-direction: column;
   gap: 6px;
 }
 
-.form-group label {
-  font-size: 13px;
-  font-weight: 500;
+.field--wide {
+  flex: 1 1 260px;
+}
+
+.field--period {
+  min-width: 380px;
+}
+
+.field--checkbox {
+  min-width: auto;
+  justify-content: flex-end;
+  padding-bottom: 4px;
+}
+
+.field label {
   color: var(--color-text-secondary);
+  font-size: 12px;
+  font-weight: 800;
 }
 
-.form-group-checkbox {
-  flex-direction: row;
-  align-items: center;
-}
-
-.form-group-checkbox label {
+.field--checkbox label {
   display: flex;
   align-items: center;
   gap: 8px;
   color: var(--color-text);
   cursor: pointer;
   font-size: 14px;
+  font-weight: 700;
 }
 
-input[type='text'],
-input[type='password'],
-input[type='number'],
-input[type='date'],
-input[type='email'],
+input[type="text"],
+input[type="password"],
+input[type="number"],
+input[type="date"],
+input[type="email"],
 select,
 textarea {
   width: 100%;
-  padding: 8px 12px;
+  min-height: 40px;
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
-  font-size: 14px;
-  font-family: inherit;
+  background: var(--color-surface-strong);
   color: var(--color-text);
-  background: var(--color-surface);
+  padding: 8px 11px;
   transition:
     border-color var(--transition),
-    box-shadow var(--transition);
+    box-shadow var(--transition),
+    background var(--transition);
+}
+
+textarea {
+  min-height: 84px;
+  resize: vertical;
 }
 
 input:focus,
@@ -342,361 +390,506 @@ select:focus,
 textarea:focus {
   outline: none;
   border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
+  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.13);
 }
 
-input[type='checkbox'] {
+input[type="checkbox"] {
   width: 16px;
   height: 16px;
   accent-color: var(--color-primary);
   cursor: pointer;
 }
 
-textarea {
-  resize: vertical;
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 40px;
+  padding: 9px 16px;
+  border: 1px solid transparent;
+  border-radius: var(--radius);
+  cursor: pointer;
+  font-weight: 800;
+  line-height: 1;
+  text-decoration: none;
+  transition:
+    background var(--transition),
+    border-color var(--transition),
+    color var(--transition),
+    box-shadow var(--transition),
+    transform var(--transition);
 }
 
-.form-static {
-  padding: 8px 0;
+.button:hover:not(:disabled) {
+  transform: translateY(-1px);
+}
+
+.button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.button--primary {
+  background: var(--color-primary);
+  color: #fff;
+  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.22);
+}
+
+.button--primary:hover:not(:disabled) {
+  background: var(--color-primary-hover);
+}
+
+.button--secondary {
+  border-color: var(--color-border);
+  background: var(--color-surface-strong);
   color: var(--color-text);
-  font-size: 14px;
-  word-break: break-word;
+}
+
+.button--secondary:hover:not(:disabled) {
+  border-color: var(--color-border-strong);
+  background: var(--color-bg-elevated);
+}
+
+.button--danger {
+  background: var(--color-danger);
+  color: #fff;
+  box-shadow: 0 12px 24px rgba(232, 93, 63, 0.18);
+}
+
+.button--small {
+  min-height: 34px;
+  padding: 7px 11px;
+  font-size: 13px;
+}
+
+.button--block {
+  width: 100%;
+}
+
+.button__icon {
+  flex: 0 0 auto;
+}
+
+.button-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.icon-button {
+  display: inline-flex;
+  width: 40px;
+  height: 40px;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  background: var(--color-surface-strong);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  font-weight: 850;
+  transition:
+    background var(--transition),
+    border-color var(--transition),
+    color var(--transition),
+    box-shadow var(--transition);
+}
+
+.icon-button:hover:not(:disabled) {
+  border-color: var(--color-primary);
+  background: var(--color-primary-soft);
+  color: var(--color-primary);
+}
+
+.icon-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.icon-button--touch {
+  width: 44px;
+  height: 44px;
+}
+
+.segmented-control {
+  display: inline-flex;
+  gap: 4px;
+  padding: 4px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  background: rgba(255, 255, 255, 0.62);
+}
+
+.segmented-control--compact {
+  width: max-content;
+}
+
+.segmented-control__button {
+  min-height: 32px;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 800;
+  padding: 6px 11px;
+  transition:
+    background var(--transition),
+    color var(--transition),
+    box-shadow var(--transition);
+}
+
+.segmented-control__button:hover {
+  color: var(--color-text);
+}
+
+.segmented-control__button--active {
+  background: var(--color-surface-strong);
+  color: var(--color-primary);
+  box-shadow: var(--shadow-sm);
+}
+
+.badge {
+  display: inline-flex;
+  min-height: 24px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 850;
+  padding: 3px 9px;
+}
+
+.badge--warning {
+  background: var(--color-warning-soft);
+  color: #9b6b08;
+}
+
+.badge--expense {
+  background: var(--color-danger-soft);
+  color: var(--color-danger);
+}
+
+.badge--income {
+  background: var(--color-success-soft);
+  color: var(--color-success);
+}
+
+.badge--transfer {
+  background: var(--color-transfer-soft);
+  color: var(--color-transfer);
+}
+
+.alert {
+  border-radius: var(--radius);
+  font-weight: 700;
+  padding: 11px 13px;
+}
+
+.alert--error {
+  border: 1px solid #ffd0c4;
+  background: var(--color-danger-soft);
+  color: #b8321f;
 }
 
 .form-divider {
   height: 1px;
   background: var(--color-border);
-  margin: 8px 0;
+  margin: 4px 0;
 }
 
 /* ================================================================
-   Buttons
+   Login
    ================================================================ */
 
-.btn {
+.login {
+  display: grid;
+  min-height: 100vh;
+  place-items: center;
+  padding: 24px;
+  background:
+    linear-gradient(120deg, rgba(37, 99, 235, 0.08), transparent 42%),
+    linear-gradient(300deg, rgba(232, 93, 63, 0.12), transparent 48%),
+    var(--color-bg);
+}
+
+.login__panel {
+  width: min(100%, 420px);
+  border: 1px solid rgba(231, 222, 210, 0.88);
+  border-radius: var(--radius);
+  background: rgba(255, 253, 248, 0.92);
+  box-shadow: var(--shadow-lg);
+  padding: 38px;
+}
+
+.login__header {
+  margin-bottom: 28px;
+  text-align: center;
+}
+
+.login__icon {
   display: inline-flex;
+  width: 58px;
+  height: 58px;
   align-items: center;
   justify-content: center;
-  gap: 8px;
-  padding: 8px 16px;
-  border: 1px solid transparent;
+  margin-bottom: 14px;
   border-radius: var(--radius);
-  font-size: 14px;
-  font-weight: 500;
-  font-family: inherit;
-  cursor: pointer;
-  transition: all var(--transition);
-  text-decoration: none;
-}
-
-.btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.btn-primary {
-  background: var(--color-primary);
+  background: linear-gradient(135deg, #f2ba4a, #e85d3f);
   color: #fff;
+  font-size: 30px;
+  font-weight: 900;
+  box-shadow: 0 18px 34px rgba(232, 93, 63, 0.22);
 }
 
-.btn-primary:hover:not(:disabled) {
-  background: var(--color-primary-hover);
+.login__header h1 {
+  font-size: 24px;
+  font-weight: 850;
 }
 
-.btn-secondary {
-  background: var(--color-surface);
-  color: var(--color-text);
-  border-color: var(--color-border);
-}
-
-.btn-secondary:hover:not(:disabled) {
-  background: var(--color-bg);
-  border-color: var(--color-border-hover);
-}
-
-.btn-danger {
-  background: var(--color-danger);
-  color: #fff;
-}
-
-.btn-danger:hover:not(:disabled) {
-  background: #dc2626;
-}
-
-.btn-block {
-  width: 100%;
-}
-
-.btn-sm {
-  padding: 4px 10px;
-  font-size: 13px;
-}
-
-.btn-icon {
-  background: none;
-  border: none;
-  padding: 4px;
-  cursor: pointer;
+.login__header p {
   color: var(--color-text-secondary);
-  border-radius: var(--radius-sm);
-  transition: all var(--transition);
-  display: inline-flex;
-  align-items: center;
-}
-
-.btn-icon:hover {
-  color: var(--color-primary);
-  background: var(--color-primary-light);
-}
-
-.btn-group {
-  display: flex;
-  gap: 6px;
-}
-
-/* ================================================================
-   Alerts
-   ================================================================ */
-
-.alert {
-  padding: 10px 14px;
-  border-radius: var(--radius);
-  font-size: 14px;
-}
-
-.alert-error {
-  background: var(--color-danger-light);
-  color: var(--color-danger);
-  border: 1px solid #fecaca;
-}
-
-/* ================================================================
-   Filters panel
-   ================================================================ */
-
-.filters-panel {
-  background: var(--color-surface);
-  border-radius: var(--radius-lg);
-  padding: 16px 20px;
-  margin-bottom: 16px;
-  box-shadow: var(--shadow-sm);
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.filters-row {
-  display: flex;
-  gap: 12px;
-  align-items: flex-end;
-  flex-wrap: wrap;
-}
-
-.filter-group {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  min-width: 140px;
-}
-
-.filter-group label {
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--color-text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.filter-group-wide {
-  flex: 1;
-  min-width: 200px;
-}
-
-.filter-group-checkbox {
-  flex-direction: row;
-  align-items: center;
-  min-width: auto;
-}
-
-.filter-group-checkbox label {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  text-transform: none;
-  letter-spacing: normal;
-  font-size: 14px;
-  color: var(--color-text);
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-.filter-dates-wrap {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.filter-dates-wrap .btn-page {
-  flex-shrink: 0;
-}
-
-.filter-dates {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.filter-dates input {
-  width: 140px;
-}
-
-.filter-separator {
-  color: var(--color-text-muted);
-}
-
-.filter-presets {
-  display: flex;
-  gap: 4px;
   margin-top: 4px;
 }
 
-.btn-preset {
-  background: var(--color-bg);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  padding: 2px 10px;
-  font-size: 12px;
-  cursor: pointer;
-  color: var(--color-text-secondary);
-  transition: all var(--transition);
-  font-family: inherit;
-}
-
-.btn-preset:hover {
-  background: var(--color-primary-light);
-  border-color: var(--color-primary);
-  color: var(--color-primary);
-}
-
-.btn-preset.active {
-  background: var(--color-primary);
-  border-color: var(--color-primary);
-  color: #fff;
-}
-
-.filter-sort {
+.login__form {
   display: flex;
-  gap: 4px;
-}
-
-.filter-sort select {
-  flex: 1;
-}
-
-.btn-sort-order {
-  background: var(--color-bg);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  width: 32px;
-  cursor: pointer;
-  font-size: 16px;
-  transition: all var(--transition);
-  font-family: inherit;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.btn-sort-order:hover {
-  background: var(--color-primary-light);
-  border-color: var(--color-primary);
-  color: var(--color-primary);
+  flex-direction: column;
+  gap: 16px;
 }
 
 /* ================================================================
-   Data table
+   Filters and period picker
    ================================================================ */
 
-.table-wrapper {
-  background: var(--color-surface);
-  border-radius: var(--radius-lg);
+.filters,
+.analytics-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  margin-bottom: 20px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  background: rgba(255, 253, 248, 0.82);
   box-shadow: var(--shadow-sm);
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
+  padding: 16px;
 }
 
-/* Transaction cards (mobile view) */
-.transaction-cards {
-  display: none;
-  flex-direction: column;
+.filters__row,
+.analytics-panel__filters {
+  display: flex;
+  align-items: flex-end;
+  flex-wrap: wrap;
   gap: 12px;
 }
 
-.transaction-card {
-  background: var(--color-surface);
-  border-radius: var(--radius-lg);
-  padding: 14px 16px;
-  box-shadow: var(--shadow-sm);
-  border-left: 4px solid var(--color-border);
-}
-
-.transaction-card.row-unconfirmed {
-  border-left-color: var(--color-warning);
-}
-
-.transaction-card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  margin-bottom: 6px;
-}
-
-.transaction-card-date {
-  font-size: 12px;
-  color: var(--color-text-secondary);
-}
-
-.transaction-card-amount {
-  font-variant-numeric: tabular-nums;
-  font-weight: 600;
-  font-size: 16px;
-}
-
-.transaction-card-body {
-  font-size: 14px;
-  word-break: break-word;
-  margin-bottom: 8px;
-}
-
-.transaction-card-commission {
-  font-size: 12px;
-  color: var(--color-text-secondary);
-  margin-bottom: 6px;
-}
-
-.transaction-card-footer {
+.filters__date-control,
+.filters__dates,
+.filters__sort,
+.period-picker,
+.period-picker__nav,
+.period-picker__dates {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   gap: 8px;
+}
+
+.filters__dates input,
+.period-picker__dates input {
+  width: 142px;
+}
+
+.filters__separator,
+.period-picker__separator {
+  color: var(--color-text-muted);
+  font-weight: 800;
+}
+
+.filters__sort select {
+  min-width: 128px;
+}
+
+.period-picker {
+  justify-content: space-between;
   flex-wrap: wrap;
 }
 
-.transaction-card-meta {
+/* ================================================================
+   Summary and analytics
+   ================================================================ */
+
+.summary {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.summary__card {
+  position: relative;
+  min-height: 116px;
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  background: var(--color-surface-strong);
+  box-shadow: var(--shadow-sm);
+  padding: 18px;
+}
+
+.summary__card::before {
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 5px;
+  background: var(--color-border-strong);
+  content: "";
+}
+
+.summary__card--income::before,
+.summary__card--positive::before {
+  background: var(--color-success);
+}
+
+.summary__card--expense::before,
+.summary__card--negative::before {
+  background: var(--color-danger);
+}
+
+.summary__card--investments::before {
+  background: var(--color-warning);
+}
+
+.summary__card--top::before {
+  background: var(--color-primary);
+}
+
+.summary__label {
+  margin-bottom: 6px;
+  color: var(--color-text-secondary);
   font-size: 12px;
-  color: var(--color-text-muted);
+  font-weight: 850;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
 }
 
-.transaction-card-actions {
+.summary__value {
+  font-size: 24px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 900;
+  letter-spacing: 0;
+}
+
+.summary__subvalue {
+  margin-top: 8px;
+  color: var(--color-text-secondary);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.summary__top-list {
   display: flex;
-  align-items: center;
-  gap: 6px;
+  flex-direction: column;
+  gap: 7px;
 }
 
-.btn-icon-touch {
-  min-width: 44px;
-  min-height: 44px;
-  padding: 10px;
+.summary__top-item {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  gap: 8px;
+  align-items: center;
+  font-size: 13px;
+}
+
+.summary__top-name {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--color-text);
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.summary__top-amount {
+  font-variant-numeric: tabular-nums;
+  font-weight: 850;
+}
+
+.summary__top-share {
+  color: var(--color-text-muted);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.analytics-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+}
+
+.chart-card {
+  min-width: 0;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  background: var(--color-surface-strong);
+  box-shadow: var(--shadow-sm);
+  padding: 20px;
+}
+
+.chart-card h3 {
+  margin-bottom: 14px;
+  font-size: 16px;
+  font-weight: 850;
+}
+
+.category-chart {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.category-chart__table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.category-chart__table th,
+.category-chart__table td {
+  border-bottom: 1px solid var(--color-border);
+  padding: 7px 9px;
+  text-align: left;
+}
+
+.category-chart__table th {
+  color: var(--color-text-secondary);
+  font-size: 12px;
+  font-weight: 850;
+}
+
+.category-chart__cell--center {
+  text-align: center !important;
+}
+
+.category-chart__dot {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  margin-right: 7px;
+  border-radius: 50%;
+  vertical-align: middle;
+}
+
+/* ================================================================
+   Tables and transaction cards
+   ================================================================ */
+
+.table-shell {
+  overflow-x: auto;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  background: var(--color-surface-strong);
+  box-shadow: var(--shadow-sm);
+  -webkit-overflow-scrolling: touch;
 }
 
 .data-table {
@@ -704,138 +897,143 @@ textarea {
   border-collapse: collapse;
 }
 
-.data-table th {
+.data-table th,
+.data-table td {
+  border-bottom: 1px solid var(--color-border);
+  padding: 11px 14px;
   text-align: left;
-  padding: 10px 14px;
-  font-size: 12px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
+  vertical-align: middle;
+}
+
+.data-table th,
+.data-table__head-cell {
   color: var(--color-text-secondary);
-  border-bottom: 2px solid var(--color-border);
+  font-size: 12px;
+  font-weight: 850;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
   white-space: nowrap;
 }
 
-.data-table td {
-  padding: 10px 14px;
-  font-size: 14px;
-  border-bottom: 1px solid var(--color-border);
+.data-table tbody tr {
+  transition: background var(--transition);
 }
 
 .data-table tbody tr:hover {
-  background: var(--color-bg);
+  background: rgba(247, 242, 235, 0.72);
 }
 
 .data-table tbody tr:last-child td {
-  border-bottom: none;
+  border-bottom: 0;
 }
 
-.th-center,
-.td-center {
-  text-align: center;
+.data-table__row--unconfirmed {
+  background: var(--color-warning-soft);
 }
 
-.td-nowrap {
+.data-table__row--inactive {
+  opacity: 0.54;
+}
+
+.data-table__cell--center,
+.data-table__head-cell--center {
+  text-align: center !important;
+}
+
+.data-table__cell--nowrap {
   white-space: nowrap;
 }
 
-.td-amount {
-  font-variant-numeric: tabular-nums;
-  font-weight: 500;
+.data-table__cell--description {
+  max-width: 340px;
 }
 
-.td-commission {
-  font-size: 12px;
-  color: var(--color-text-secondary);
-  font-weight: 400;
-}
-
-.amount-income {
-  color: var(--color-success);
-}
-
-.amount-expense {
-  color: var(--color-danger);
-}
-
-.amount-transfer {
-  color: var(--color-primary);
-}
-
-.td-description {
-  max-width: 320px;
-}
-
-.description-text {
-  display: inline;
+.data-table__description {
   word-break: break-word;
 }
 
-.comment-badge {
+.data-table__subtext {
+  margin-top: 2px;
+  color: var(--color-text-secondary);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.money-amount {
+  font-variant-numeric: tabular-nums;
+  font-weight: 850;
+}
+
+.money-amount--income {
+  color: var(--color-success);
+}
+
+.money-amount--expense {
+  color: var(--color-danger);
+}
+
+.money-amount--transfer {
+  color: var(--color-transfer);
+}
+
+.comment-indicator {
+  display: inline-flex;
   margin-left: 6px;
   color: var(--color-text-muted);
   cursor: help;
   vertical-align: middle;
-  display: inline-flex;
 }
 
-.row-unconfirmed {
-  background: var(--color-warning-light);
+.transaction-list {
+  display: none;
 }
 
-.row-unconfirmed:hover {
-  background: #fef3c7;
+.transaction-card {
+  border: 1px solid var(--color-border);
+  border-left: 5px solid var(--color-border-strong);
+  border-radius: var(--radius);
+  background: var(--color-surface-strong);
+  box-shadow: var(--shadow-sm);
+  padding: 14px;
 }
 
-.row-inactive {
-  opacity: 0.5;
+.transaction-card--unconfirmed {
+  border-left-color: var(--color-warning);
+  background: var(--color-warning-soft);
 }
 
-.text-muted {
-  color: var(--color-text-muted);
-}
-
-.table-loading,
-.table-empty,
-.section-loading {
-  text-align: center;
-  padding: 40px 20px;
-  color: var(--color-text-secondary);
-  font-size: 15px;
-}
-
-/* ================================================================
-   Badges
-   ================================================================ */
-
-.badge {
-  display: inline-flex;
+.transaction-card__header,
+.transaction-card__footer {
+  display: flex;
   align-items: center;
-  justify-content: center;
-  padding: 2px 8px;
-  border-radius: 12px;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.transaction-card__date,
+.transaction-card__meta,
+.transaction-card__commission {
+  color: var(--color-text-secondary);
   font-size: 12px;
-  font-weight: 600;
+  font-weight: 700;
 }
 
-.badge-warning {
-  background: var(--color-warning-light);
-  color: var(--color-warning);
+.transaction-card__amount {
+  flex: 0 0 auto;
+  font-size: 17px;
 }
 
-.badge-expense {
-  background: var(--color-danger-light);
-  color: var(--color-danger);
+.transaction-card__body {
+  margin: 8px 0 10px;
+  color: var(--color-text);
+  font-weight: 700;
+  word-break: break-word;
 }
 
-.badge-income {
-  background: var(--color-success-light);
-  color: var(--color-success);
-}
-
-.badge-transfer {
-  background: var(--color-primary-light);
-  color: var(--color-primary);
+.transaction-card__actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
 }
 
 /* ================================================================
@@ -846,265 +1044,47 @@ textarea {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 12px 0;
-  margin-top: 8px;
-}
-
-.pagination-info {
-  font-size: 13px;
-  color: var(--color-text-secondary);
-}
-
-.pagination-controls {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.pagination-size {
-  width: auto;
-  padding: 8px 12px;
-  font-size: 13px;
-  min-height: 44px;
-}
-
-.btn-page {
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  padding: 4px 10px;
-  cursor: pointer;
-  font-size: 14px;
-  transition: all var(--transition);
-  font-family: inherit;
-  min-width: 44px;
-  min-height: 44px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.btn-page:hover:not(:disabled) {
-  background: var(--color-primary-light);
-  border-color: var(--color-primary);
-  color: var(--color-primary);
-}
-
-.btn-page:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-.pagination-current {
-  font-size: 13px;
-  color: var(--color-text-secondary);
-  min-width: 60px;
-  text-align: center;
-}
-
-/* ================================================================
-   Modal
-   ================================================================ */
-
-.modal-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 200;
-  padding: 20px;
-}
-
-.modal {
-  background: var(--color-surface);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-lg);
-  width: 100%;
-  max-width: 520px;
-  max-height: 90vh;
-  overflow-y: auto;
-}
-
-.modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 20px 24px 16px;
-  border-bottom: 1px solid var(--color-border);
-}
-
-.modal-header h2 {
-  font-size: 18px;
-  font-weight: 600;
-}
-
-.btn-close {
-  background: none;
-  border: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: var(--color-text-secondary);
-  padding: 0;
-  line-height: 1;
-  min-width: 44px;
-  min-height: 44px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: -8px -8px -8px 0;
-}
-
-.btn-close:hover {
-  color: var(--color-text);
-}
-
-.modal-body {
-  padding: 20px 24px;
-  display: flex;
-  flex-direction: column;
   gap: 14px;
-}
-
-.modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  padding: 16px 24px 20px;
-  border-top: 1px solid var(--color-border);
-}
-
-.modal-tx-info {
-  background: var(--color-bg);
-  border-radius: var(--radius);
-  padding: 12px 14px;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.modal-tx-row {
-  display: flex;
-  gap: 12px;
-  font-size: 13px;
-}
-
-.modal-tx-label {
-  color: var(--color-text-secondary);
-  min-width: 72px;
-  flex-shrink: 0;
-}
-
-.modal-tx-description {
-  word-break: break-word;
-}
-
-/* ================================================================
-   Import modal
-   ================================================================ */
-
-.import-upload {
-  text-align: center;
-  padding: 20px 0;
-}
-
-.import-upload p {
-  color: var(--color-text-secondary);
-  margin-bottom: 16px;
-}
-
-.file-input {
-  border: none;
-  padding: 0;
-}
-
-.import-loading {
   margin-top: 12px;
-  color: var(--color-primary);
 }
 
-.import-result {
-  text-align: center;
-  padding: 10px 0;
-}
-
-.import-result-icon {
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  background: var(--color-success-light);
-  color: var(--color-success);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 24px;
+.pagination__info,
+.pagination__current {
+  color: var(--color-text-secondary);
+  font-size: 13px;
   font-weight: 700;
-  margin-bottom: 12px;
 }
 
-.import-result h3 {
-  font-size: 16px;
-  margin-bottom: 16px;
-}
-
-.import-stats {
-  width: 100%;
-  margin: 0 auto;
-  border-collapse: collapse;
-}
-
-.import-stats td {
-  padding: 6px 12px;
-  font-size: 14px;
-  border-bottom: 1px solid var(--color-border);
-}
-
-.import-stats td:first-child {
-  color: var(--color-text-secondary);
-}
-
-.import-stats td:last-child {
-  font-weight: 600;
-  text-align: right;
-}
-
-.import-alias {
-  margin-top: 16px;
-  text-align: left;
-}
-
-.import-alias label {
-  display: block;
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--color-text-secondary);
-  margin-bottom: 6px;
-}
-
-.import-alias-row {
+.pagination__controls {
   display: flex;
+  align-items: center;
   gap: 8px;
 }
 
-.import-alias-saved {
-  margin-top: 12px;
-  color: var(--color-success);
-  font-size: 13px;
-  font-weight: 500;
+.pagination__size {
+  width: auto;
+  min-height: 40px;
+}
+
+.pagination__current {
+  min-width: 64px;
+  text-align: center;
 }
 
 /* ================================================================
-   Tabs
+   Tabs, settings and rules
    ================================================================ */
 
 .tabs {
-  display: flex;
-  gap: 0;
-  border-bottom: 2px solid var(--color-border);
-  margin-bottom: 0;
+  display: inline-flex;
+  max-width: 100%;
+  gap: 4px;
+  margin-bottom: 12px;
   overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
+  padding: 4px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  background: rgba(255, 255, 255, 0.62);
   scrollbar-width: none;
 }
 
@@ -1112,378 +1092,296 @@ textarea {
   display: none;
 }
 
-.tab {
-  background: none;
-  border: none;
-  border-bottom: 2px solid transparent;
-  margin-bottom: -2px;
-  padding: 10px 20px;
-  font-size: 14px;
-  font-weight: 500;
+.tabs__button {
+  min-height: 36px;
+  flex: 0 0 auto;
+  border-radius: var(--radius-sm);
+  background: transparent;
   color: var(--color-text-secondary);
   cursor: pointer;
-  transition: all var(--transition);
-  font-family: inherit;
-  flex-shrink: 0;
-  min-height: 44px;
+  font-weight: 850;
+  padding: 8px 14px;
 }
 
-.tab:hover {
-  color: var(--color-text);
-}
-
-.tab.active {
+.tabs__button--active {
+  background: var(--color-surface-strong);
   color: var(--color-primary);
-  border-bottom-color: var(--color-primary);
+  box-shadow: var(--shadow-sm);
 }
 
-.tab-content {
-  background: var(--color-surface);
-  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+.tabs__content {
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  background: var(--color-surface-strong);
   box-shadow: var(--shadow-sm);
-  overflow-x: auto;
 }
 
 .settings-section {
-  padding: 0;
+  overflow-x: auto;
 }
 
 .data-section {
-  padding: 20px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 22px;
 }
 
-.section-block {
-  margin-bottom: 24px;
-}
-
-.section-block:last-child {
-  margin-bottom: 0;
-}
-
-.section-block h3 {
+.data-section__block h3 {
+  margin-bottom: 6px;
   font-size: 16px;
-  font-weight: 600;
-  margin-bottom: 8px;
+  font-weight: 850;
 }
 
-.section-desc {
+.data-section__description {
+  max-width: 560px;
+  margin-bottom: 14px;
   color: var(--color-text-secondary);
-  font-size: 14px;
-  margin-bottom: 12px;
-  max-width: 480px;
 }
 
-.clear-history-warn {
-  color: var(--color-danger);
-  font-weight: 500;
-  margin-bottom: 16px;
-}
-
-.clear-history-check {
-  margin-bottom: 12px;
-}
-
-.input-error {
-  border-color: var(--color-danger) !important;
-  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
-}
-
-/* ================================================================
-   Toggle button
-   ================================================================ */
-
-.toggle {
-  padding: 3px 10px;
-  border-radius: 12px;
-  border: none;
-  font-size: 12px;
-  font-weight: 600;
+.switch-button {
+  min-height: 28px;
+  border-radius: 999px;
   cursor: pointer;
-  transition: all var(--transition);
-  font-family: inherit;
+  font-size: 12px;
+  font-weight: 850;
+  padding: 5px 11px;
 }
 
-.toggle-on {
-  background: var(--color-success-light);
+.switch-button--on {
+  background: var(--color-success-soft);
   color: var(--color-success);
 }
 
-.toggle-off {
+.switch-button--off {
   background: var(--color-bg);
   color: var(--color-text-muted);
 }
 
-.toggle:hover {
-  opacity: 0.8;
-}
-
-.rules-actions {
+.rules-list__actions {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 8px;
 }
 
-.apply-result {
-  font-size: 12px;
+.rules-list__result {
   color: var(--color-success);
-  font-weight: 500;
+  font-size: 12px;
+  font-weight: 850;
   white-space: nowrap;
 }
 
 /* ================================================================
-   Analytics
+   Modals and import
    ================================================================ */
 
-.analytics-controls {
-  background: var(--color-surface);
-  border-radius: var(--radius-lg);
-  padding: 16px 20px;
-  margin-bottom: 20px;
-  box-shadow: var(--shadow-sm);
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.analytics-filters {
-  display: flex;
-  gap: 16px;
-  align-items: flex-end;
-  flex-wrap: wrap;
-}
-
-/* ================================================================
-   Period selector
-   ================================================================ */
-
-.period-selector {
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
   display: flex;
   align-items: center;
-  gap: 16px;
-  flex-wrap: wrap;
-}
-
-.period-modes {
-  display: flex;
-  gap: 4px;
-}
-
-.period-nav {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.period-dates {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.period-dates input {
-  width: 140px;
-}
-
-/* ================================================================
-   Summary cards
-   ================================================================ */
-
-.summary-cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 16px;
-  margin-bottom: 20px;
-}
-
-.summary-card {
-  background: var(--color-surface);
-  border-radius: var(--radius-lg);
+  justify-content: center;
   padding: 20px;
-  box-shadow: var(--shadow-sm);
-  border-left: 4px solid var(--color-border);
+  background: rgba(35, 27, 21, 0.44);
 }
 
-.summary-card-income {
-  border-left-color: var(--color-success);
+.modal {
+  width: min(100%, 540px);
+  max-height: 90vh;
+  overflow-y: auto;
+  border-radius: var(--radius);
+  background: var(--color-surface-strong);
+  box-shadow: var(--shadow-lg);
 }
 
-.summary-card-expense {
-  border-left-color: var(--color-danger);
-}
-
-.summary-card-positive {
-  border-left-color: var(--color-success);
-}
-
-.summary-card-negative {
-  border-left-color: var(--color-danger);
-}
-
-.summary-card-top {
-  border-left-color: var(--color-primary);
-}
-
-.summary-card-investments {
-  border-left-color: var(--color-warning);
-}
-
-.summary-label {
-  font-size: 12px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: var(--color-text-secondary);
-  margin-bottom: 4px;
-}
-
-.summary-value {
-  font-size: 22px;
-  font-weight: 700;
-  font-variant-numeric: tabular-nums;
-}
-
-.summary-subvalue {
-  margin-top: 8px;
-  font-size: 12px;
-  color: var(--color-text-secondary);
-}
-
-.summary-top-list {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  margin-top: 4px;
-}
-
-.top-category-item {
+.modal__header {
   display: flex;
   align-items: center;
-  gap: 8px;
-  font-size: 13px;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 20px 22px 16px;
+  border-bottom: 1px solid var(--color-border);
 }
 
-.top-category-name {
-  flex: 1;
+.modal__header h2 {
+  font-size: 18px;
+  font-weight: 850;
+}
+
+.modal__close-button {
+  display: flex;
+  width: 44px;
+  height: 44px;
+  align-items: center;
+  justify-content: center;
+  margin: -10px -10px -10px 0;
+  border-radius: var(--radius);
+  background: transparent;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  font-size: 24px;
+  line-height: 1;
+}
+
+.modal__close-button:hover {
+  background: var(--color-bg);
   color: var(--color-text);
 }
 
-.top-category-amount {
-  font-weight: 500;
-  font-variant-numeric: tabular-nums;
+.modal__body {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: 20px 22px;
 }
 
-.top-category-share {
-  color: var(--color-text-muted);
-  font-size: 12px;
-  min-width: 32px;
+.modal__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 16px 22px 20px;
+  border-top: 1px solid var(--color-border);
+}
+
+.transaction-preview {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  background: var(--color-bg-elevated);
+  padding: 12px 14px;
+}
+
+.transaction-preview__row {
+  display: flex;
+  gap: 12px;
+  font-size: 13px;
+}
+
+.transaction-preview__label {
+  width: 84px;
+  flex: 0 0 auto;
+  color: var(--color-text-secondary);
+  font-weight: 800;
+}
+
+.transaction-preview__description {
+  word-break: break-word;
+}
+
+.import-upload {
+  display: grid;
+  gap: 14px;
+  justify-items: center;
+  padding: 18px 0;
+  text-align: center;
+}
+
+.import-upload p {
+  color: var(--color-text-secondary);
+}
+
+.import-upload__input {
+  border: 0;
+  min-height: auto;
+  padding: 0;
+}
+
+.import-upload__loading {
+  color: var(--color-primary);
+  font-weight: 850;
+}
+
+.import-result {
+  text-align: center;
+}
+
+.import-result__icon {
+  display: inline-flex;
+  width: 48px;
+  height: 48px;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 12px;
+  border-radius: 50%;
+  background: var(--color-success-soft);
+  color: var(--color-success);
+  font-size: 24px;
+  font-weight: 900;
+}
+
+.import-result h3 {
+  margin-bottom: 14px;
+  font-size: 17px;
+  font-weight: 850;
+}
+
+.import-result__stats {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: left;
+}
+
+.import-result__stats td {
+  border-bottom: 1px solid var(--color-border);
+  padding: 7px 10px;
+}
+
+.import-result__stats td:first-child {
+  color: var(--color-text-secondary);
+}
+
+.import-result__stats td:last-child {
+  font-variant-numeric: tabular-nums;
+  font-weight: 850;
   text-align: right;
 }
 
-/* ================================================================
-   Charts
-   ================================================================ */
-
-.analytics-charts {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 20px;
-}
-
-.chart-card {
-  background: var(--color-surface);
-  border-radius: var(--radius-lg);
-  padding: 20px;
-  box-shadow: var(--shadow-sm);
-}
-
-.chart-card h3 {
-  font-size: 16px;
-  font-weight: 600;
-  margin-bottom: 16px;
-}
-
-.chart-empty {
-  text-align: center;
-  padding: 40px 20px;
-  color: var(--color-text-muted);
-}
-
-.category-chart-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.category-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.category-table th {
+.import-result__alias {
+  margin-top: 16px;
   text-align: left;
-  padding: 6px 10px;
-  font-size: 12px;
-  font-weight: 600;
+}
+
+.import-result__alias label {
+  display: block;
+  margin-bottom: 6px;
   color: var(--color-text-secondary);
-  border-bottom: 1px solid var(--color-border);
+  font-size: 12px;
+  font-weight: 850;
 }
 
-.category-table td {
-  padding: 6px 10px;
-  font-size: 13px;
-  border-bottom: 1px solid var(--color-border);
+.import-result__alias-row {
+  display: flex;
+  gap: 8px;
 }
 
-.category-table tbody tr:last-child td {
-  border-bottom: none;
+.import-result__alias-saved {
+  margin-top: 12px;
+  color: var(--color-success);
+  font-weight: 850;
 }
 
-.color-dot {
-  display: inline-block;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  margin-right: 6px;
-  vertical-align: middle;
+.danger-note {
+  border: 1px solid #ffd0c4;
+  border-radius: var(--radius);
+  background: var(--color-danger-soft);
+  color: #9f2d1c;
+  font-weight: 800;
+  padding: 12px 14px;
+}
+
+.danger-note__check {
+  padding-bottom: 0;
 }
 
 /* ================================================================
-   Burger button (mobile)
+   Responsive
    ================================================================ */
 
-.burger-btn {
-  display: none;
-  position: fixed;
-  top: 12px;
-  left: 12px;
-  z-index: 101;
-  width: 44px;
-  height: 44px;
-  padding: 0;
-  background: var(--color-sidebar);
-  color: #fff;
-  border: none;
-  border-radius: var(--radius);
-  cursor: pointer;
-  align-items: center;
-  justify-content: center;
-  box-shadow: var(--shadow);
-  transition: all var(--transition);
-}
-
-.burger-btn:hover {
-  background: var(--color-sidebar-hover);
-}
-
-.sidebar-overlay {
-  display: none;
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 99;
-  animation: overlay-fade-in 0.2s ease;
-}
-
 @keyframes overlay-fade-in {
   from {
     opacity: 0;
@@ -1502,161 +1400,162 @@ textarea {
   }
 }
 
-/* ================================================================
-   Responsive
-   ================================================================ */
-
 @media (max-width: 1024px) {
-  .analytics-charts {
+  .analytics-grid {
     grid-template-columns: 1fr;
   }
 }
 
 @media (max-width: 768px) {
-  .burger-btn {
+  .menu-button {
     display: flex;
   }
 
-  .sidebar-overlay {
+  .app-shell__overlay {
     display: block;
   }
 
   .sidebar {
-    width: min(280px, 85vw);
+    width: min(290px, 86vw);
     transform: translateX(-100%);
     transition: transform 0.25s ease;
-    box-shadow: var(--shadow-lg);
   }
 
-  .sidebar.sidebar-open {
+  .sidebar--open {
     transform: translateX(0);
     animation: drawer-slide-in 0.25s ease;
   }
 
-  .main-content {
+  .app-shell__main {
     margin-left: 0;
-    padding: 16px 16px 16px 60px;
+    padding: 18px 16px 28px 64px;
   }
 
-  .filters-row {
+  .page__header {
+    align-items: stretch;
     flex-direction: column;
   }
 
-  .filter-group {
+  .page__header .button {
+    width: 100%;
+  }
+
+  .filters__row,
+  .analytics-panel__filters {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .field,
+  .field--period,
+  .field--wide {
     min-width: 100%;
   }
 
-  .summary-cards {
-    grid-template-columns: 1fr;
-  }
-
-  .page-header {
-    flex-direction: column;
+  .filters__date-control,
+  .period-picker,
+  .period-picker__nav {
     align-items: stretch;
-    gap: 12px;
+    flex-direction: column;
   }
 
-  .page-header .btn {
-    min-height: 44px;
+  .filters__dates,
+  .period-picker__dates {
+    width: 100%;
   }
 
-  .filter-dates-wrap .btn-page {
-    min-width: 44px;
-    min-height: 44px;
-    padding: 8px;
+  .filters__dates input,
+  .period-picker__dates input {
+    width: 100%;
   }
 
-  .filter-presets {
+  .segmented-control {
+    max-width: 100%;
     overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-    flex-wrap: nowrap;
-    padding-bottom: 4px;
   }
 
-  .btn-preset {
-    flex-shrink: 0;
-  }
-
-  .filter-sort .btn-sort-order {
-    min-width: 44px;
-    min-height: 44px;
+  .summary {
+    grid-template-columns: 1fr;
   }
 }
 
 @media (max-width: 600px) {
-  .table-desktop {
-    display: none !important;
+  .table-shell--desktop {
+    display: none;
   }
 
-  .transaction-mobile {
-    display: flex !important;
+  .transaction-list--mobile {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
   }
 }
 
 @media (max-width: 480px) {
-  .modal-overlay {
-    padding: 0;
+  .app-shell__main {
+    padding: 16px 14px 24px 62px;
+  }
+
+  .page__title {
+    font-size: 23px;
+  }
+
+  .login__panel {
+    padding: 28px 22px;
+  }
+
+  .modal-backdrop {
     align-items: stretch;
+    padding: 0;
   }
 
   .modal {
-    max-width: none;
-    max-height: none;
-    height: 100%;
-    min-height: 100dvh;
-    border-radius: 0;
     display: flex;
+    width: 100%;
+    max-height: none;
+    min-height: 100dvh;
     flex-direction: column;
+    border-radius: 0;
   }
 
-  .modal-header {
-    flex-shrink: 0;
-  }
-
-  .modal-body {
-    overflow-y: auto;
+  .modal__body {
     flex: 1;
-    min-height: 0;
-    -webkit-overflow-scrolling: touch;
+    overflow-y: auto;
   }
 
-  .modal-footer {
-    flex-shrink: 0;
+  .modal__footer {
+    flex-wrap: wrap;
   }
 
-  .modal-footer .btn {
-    min-height: 44px;
-    min-width: 44px;
-    padding: 12px 20px;
-  }
-
-  .page-header h1 {
-    font-size: 20px;
+  .modal__footer .button {
+    flex: 1 1 150px;
   }
 
   .pagination {
-    flex-direction: column;
     align-items: stretch;
-    gap: 12px;
+    flex-direction: column;
   }
 
-  .pagination-controls {
+  .pagination__controls {
     justify-content: center;
   }
+
+  .import-result__alias-row {
+    flex-direction: column;
+  }
 }
 
-/* Safe area for devices with notches */
 @supports (padding: env(safe-area-inset-bottom)) {
-  .burger-btn {
+  .menu-button {
     top: calc(12px + env(safe-area-inset-top));
     left: calc(12px + env(safe-area-inset-left));
   }
 
-  .main-content {
-    padding-bottom: calc(16px + env(safe-area-inset-bottom));
+  .app-shell__main {
+    padding-bottom: calc(28px + env(safe-area-inset-bottom));
   }
 
-  .modal-footer {
+  .modal__footer {
     padding-bottom: calc(20px + env(safe-area-inset-bottom));
   }
 }
diff --git a/package-lock.json b/package-lock.json
index 9929661..b2d522d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -64,7 +64,7 @@
     },
     "frontend": {
       "name": "@family-budget/frontend",
-      "version": "0.1.0",
+      "version": "0.8.6",
       "dependencies": {
         "@family-budget/shared": "*",
         "react": "^19.0.0",
-- 
2.49.1