From ead041856424663ebe4112f111da74bbe4ea257d Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Sat, 6 Jan 2024 03:15:02 +0300
Subject: [PATCH] Minor UI improvements and CSS refactoring

---
 .vscode/settings.json                         |   1 +
 .../src/app/Navigation/Navigation.tsx         |  11 +-
 .../app/Navigation/ToggleNavigationButton.tsx |   2 +-
 .../frontend/src/components/AnimateFadeIn.tsx |  22 ++
 .../src/components/ConstituentaBadge.tsx      |   4 +-
 .../src/components/ConstituentaPicker.tsx     |   5 +-
 .../{Help => }/ConstituentaTooltip.tsx        |   0
 .../src/components/DataTable/DataTable.tsx    |   3 +-
 .../src/components/DataTable/TableBody.tsx    |   4 +-
 .../src/components/DataTable/TableHeader.tsx  |   4 +-
 .../frontend/src/components/GrammemeBadge.tsx |   2 +-
 .../src/components/Help/HelpButton.tsx        |   5 +-
 .../src/components/Help/HelpExteor.tsx        |   2 +-
 .../src/components/Help/HelpLibrary.tsx       |   2 +-
 .../frontend/src/components/Help/HelpMain.tsx |   2 +-
 .../src/components/Help/HelpRSTemplates.tsx   |   2 +-
 .../Help/HelpTerminologyControl.tsx           |   2 +-
 .../src/components/InfoConstituenta.tsx       |   4 +-
 .../frontend/src/components/InfoCstClass.tsx  |   2 +-
 .../frontend/src/components/InfoCstStatus.tsx |   2 +-
 .../src/components/{Help => }/InfoTopic.tsx   |  24 +-
 .../src/components/PDFViewer/PDFViewer.tsx    |   2 +-
 .../src/components/RSInput/bracketMatching.ts |   2 +-
 .../src/components/RefsInput/tooltip.ts       |   2 +-
 rsconcept/frontend/src/components/props.d.ts  |   1 +
 .../frontend/src/components/ui/Checkbox.tsx   |  20 +-
 .../src/components/ui/CheckboxTristate.tsx    |  19 +-
 .../frontend/src/components/ui/Dropdown.tsx   |   2 +-
 .../src/components/ui/DropdownButton.tsx      |   2 +-
 .../src/components/ui/DropdownCheckbox.tsx    |   2 +-
 .../frontend/src/components/ui/Modal.tsx      |   2 +-
 .../src/components/ui/SelectMulti.tsx         |   2 +-
 .../src/components/ui/SelectSingle.tsx        |   2 +-
 .../frontend/src/components/ui/Tooltip.tsx    |   2 +
 .../frontend/src/context/ThemeContext.tsx     |   4 +-
 rsconcept/frontend/src/dialogs/DlgShowAST.tsx |   4 +-
 rsconcept/frontend/src/index.css              | 365 +-----------------
 .../frontend/src/pages/CreateRSFormPage.tsx   | 101 ++---
 rsconcept/frontend/src/pages/HomePage.tsx     |   8 +-
 .../src/pages/LibraryPage/LibraryPage.tsx     |   5 +-
 .../src/pages/LibraryPage/ViewLibrary.tsx     |   9 +-
 rsconcept/frontend/src/pages/LoginPage.tsx    |  67 ++--
 .../src/pages/ManualsPage/TopicsList.tsx      |   1 -
 .../src/pages/ManualsPage/ViewTopic.tsx       |   7 +-
 .../EditorRSExpression/ParsingResult.tsx      |   2 +-
 .../EditorRSExpression/RSEditControls.tsx     |   2 +-
 .../EditorRSExpression/StatusBar.tsx          |   2 +-
 .../RSFormPage/EditorRSList/EditorRSList.tsx  |   7 +-
 .../pages/RSFormPage/EditorRSList/RSTable.tsx |   5 +-
 .../EditorTermGraph/EditorTermGraph.tsx       |   2 +-
 .../RSFormPage/EditorTermGraph/TermGraph.tsx  |   2 +-
 .../RSFormPage/EditorTermGraph/ViewHidden.tsx |   4 +-
 .../frontend/src/pages/RSFormPage/RSTabs.tsx  |  87 +++--
 .../ViewConstituents/ConstituentsTable.tsx    |   2 +-
 .../ViewConstituents/ViewConstituents.tsx     |   2 +-
 rsconcept/frontend/src/pages/RegisterPage.tsx | 153 ++++----
 .../src/pages/RestorePasswordPage.tsx         |   5 +-
 .../src/pages/UserProfilePage/UserTabs.tsx    |   5 +-
 .../UserProfilePage/ViewSubscriptions.tsx     |   2 +-
 .../src/{utils => styling}/animations.ts      |  22 ++
 .../frontend/src/{utils => styling}/color.ts  |   0
 rsconcept/frontend/src/styling/constants.css  |  54 +++
 rsconcept/frontend/src/styling/imports.css    |   5 +
 rsconcept/frontend/src/styling/layers.css     |  40 ++
 rsconcept/frontend/src/styling/overrides.css  |  38 ++
 rsconcept/frontend/src/styling/setup.css      | 113 ++++++
 rsconcept/frontend/src/styling/styles.css     | 177 +++++++++
 rsconcept/frontend/src/utils/codemirror.ts    |   2 +-
 68 files changed, 816 insertions(+), 653 deletions(-)
 create mode 100644 rsconcept/frontend/src/components/AnimateFadeIn.tsx
 rename rsconcept/frontend/src/components/{Help => }/ConstituentaTooltip.tsx (100%)
 rename rsconcept/frontend/src/components/{Help => }/InfoTopic.tsx (61%)
 rename rsconcept/frontend/src/{utils => styling}/animations.ts (91%)
 rename rsconcept/frontend/src/{utils => styling}/color.ts (100%)
 create mode 100644 rsconcept/frontend/src/styling/constants.css
 create mode 100644 rsconcept/frontend/src/styling/imports.css
 create mode 100644 rsconcept/frontend/src/styling/layers.css
 create mode 100644 rsconcept/frontend/src/styling/overrides.css
 create mode 100644 rsconcept/frontend/src/styling/setup.css
 create mode 100644 rsconcept/frontend/src/styling/styles.css

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 911e1207..8ef7cfe8 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -108,6 +108,7 @@
     "signup",
     "Slng",
     "SMALLPR",
+    "Stylesheet",
     "tagset",
     "tailwindcss",
     "tanstack",
diff --git a/rsconcept/frontend/src/app/Navigation/Navigation.tsx b/rsconcept/frontend/src/app/Navigation/Navigation.tsx
index e92fad90..35f59cc3 100644
--- a/rsconcept/frontend/src/app/Navigation/Navigation.tsx
+++ b/rsconcept/frontend/src/app/Navigation/Navigation.tsx
@@ -6,7 +6,7 @@ import { IoLibrary } from 'react-icons/io5';
 import { EducationIcon } from '@/components/Icons';
 import { useConceptNavigation } from '@/context/NavigationContext';
 import { useConceptTheme } from '@/context/ThemeContext';
-import { animateNavigation } from '@/utils/animations';
+import { animateNavigation } from '@/styling/animations';
 
 import Logo from './Logo';
 import NavigationButton from './NavigationButton';
@@ -23,7 +23,14 @@ function Navigation() {
   const navigateCreateNew = () => router.push('/library/create');
 
   return (
-    <nav className={clsx('z-navigation', 'sticky top-0 left-0 right-0', 'clr-app', 'select-none')}>
+    <nav
+      className={clsx(
+        'z-navigation', // prettier: split lines
+        'sticky top-0 left-0 right-0',
+        'clr-app',
+        'select-none'
+      )}
+    >
       <ToggleNavigationButton />
       <motion.div
         className={clsx('pl-2 pr-[0.9rem] h-[3rem]', 'flex justify-between', 'shadow-border')}
diff --git a/rsconcept/frontend/src/app/Navigation/ToggleNavigationButton.tsx b/rsconcept/frontend/src/app/Navigation/ToggleNavigationButton.tsx
index 78795208..afaae8a0 100644
--- a/rsconcept/frontend/src/app/Navigation/ToggleNavigationButton.tsx
+++ b/rsconcept/frontend/src/app/Navigation/ToggleNavigationButton.tsx
@@ -3,7 +3,7 @@ import { motion } from 'framer-motion';
 import { RiPushpinFill, RiUnpinLine } from 'react-icons/ri';
 
 import { useConceptTheme } from '@/context/ThemeContext';
-import { animateNavigationToggle } from '@/utils/animations';
+import { animateNavigationToggle } from '@/styling/animations';
 
 function ToggleNavigationButton() {
   const { noNavigationAnimation, toggleNoNavigation } = useConceptTheme();
diff --git a/rsconcept/frontend/src/components/AnimateFadeIn.tsx b/rsconcept/frontend/src/components/AnimateFadeIn.tsx
new file mode 100644
index 00000000..a8abc058
--- /dev/null
+++ b/rsconcept/frontend/src/components/AnimateFadeIn.tsx
@@ -0,0 +1,22 @@
+import { motion } from 'framer-motion';
+
+import { animateFadeIn } from '@/styling/animations';
+
+import { CProps } from './props';
+
+interface AnimateFadeInProps extends CProps.AnimatedDiv {}
+
+function AnimateFadeIn({ children, ...restProps }: AnimateFadeInProps) {
+  return (
+    <motion.div
+      initial={{ ...animateFadeIn.initial }}
+      animate={{ ...animateFadeIn.animate }}
+      exit={{ ...animateFadeIn.exit }}
+      {...restProps}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+export default AnimateFadeIn;
diff --git a/rsconcept/frontend/src/components/ConstituentaBadge.tsx b/rsconcept/frontend/src/components/ConstituentaBadge.tsx
index f6bcf090..46ac807d 100644
--- a/rsconcept/frontend/src/components/ConstituentaBadge.tsx
+++ b/rsconcept/frontend/src/components/ConstituentaBadge.tsx
@@ -1,9 +1,9 @@
 import clsx from 'clsx';
 
-import ConstituentaTooltip from '@/components/Help/ConstituentaTooltip';
+import ConstituentaTooltip from '@/components/ConstituentaTooltip';
 import { IConstituenta } from '@/models/rsform';
 import { isMockCst } from '@/models/rsformAPI';
-import { colorFgCstStatus, IColorTheme } from '@/utils/color';
+import { colorFgCstStatus, IColorTheme } from '@/styling/color';
 
 interface ConstituentaBadgeProps {
   prefixID?: string;
diff --git a/rsconcept/frontend/src/components/ConstituentaPicker.tsx b/rsconcept/frontend/src/components/ConstituentaPicker.tsx
index 4d4421a1..d98ceb5d 100644
--- a/rsconcept/frontend/src/components/ConstituentaPicker.tsx
+++ b/rsconcept/frontend/src/components/ConstituentaPicker.tsx
@@ -10,6 +10,7 @@ import { prefixes } from '@/utils/constants';
 import { describeConstituenta } from '@/utils/labels';
 
 import ConstituentaBadge from './ConstituentaBadge';
+import FlexColumn from './ui/FlexColumn';
 
 interface ConstituentaPickerProps {
   prefixID?: string;
@@ -94,10 +95,10 @@ function ConstituentaPicker({
         columns={columns}
         conditionalRowStyles={conditionalRowStyles}
         noDataComponent={
-          <span className='p-2 min-h-[5rem] flex flex-col justify-center text-center'>
+          <FlexColumn className='p-3 items-center min-h-[6rem]'>
             <p>Список конституент пуст</p>
             <p>Измените параметры фильтра</p>
-          </span>
+          </FlexColumn>
         }
         onRowClicked={onSelectValue}
       />
diff --git a/rsconcept/frontend/src/components/Help/ConstituentaTooltip.tsx b/rsconcept/frontend/src/components/ConstituentaTooltip.tsx
similarity index 100%
rename from rsconcept/frontend/src/components/Help/ConstituentaTooltip.tsx
rename to rsconcept/frontend/src/components/ConstituentaTooltip.tsx
diff --git a/rsconcept/frontend/src/components/DataTable/DataTable.tsx b/rsconcept/frontend/src/components/DataTable/DataTable.tsx
index 29aca532..0d3fd336 100644
--- a/rsconcept/frontend/src/components/DataTable/DataTable.tsx
+++ b/rsconcept/frontend/src/components/DataTable/DataTable.tsx
@@ -14,7 +14,6 @@ import {
   useReactTable,
   type VisibilityState
 } from '@tanstack/react-table';
-import clsx from 'clsx';
 import { useState } from 'react';
 
 import { CProps } from '../props';
@@ -122,7 +121,7 @@ function DataTable<TData extends RowData>({
   const isEmpty = tableImpl.getRowModel().rows.length === 0;
 
   return (
-    <div className={clsx(className)} style={style}>
+    <div className={className} style={style}>
       <table className='w-full'>
         {!noHeader ? (
           <TableHeader
diff --git a/rsconcept/frontend/src/components/DataTable/TableBody.tsx b/rsconcept/frontend/src/components/DataTable/TableBody.tsx
index 32edc640..2f16f710 100644
--- a/rsconcept/frontend/src/components/DataTable/TableBody.tsx
+++ b/rsconcept/frontend/src/components/DataTable/TableBody.tsx
@@ -52,14 +52,14 @@ function TableBody<TData>({
           style={conditionalRowStyles && getRowStyles(row)}
         >
           {enableRowSelection ? (
-            <td key={`select-${row.id}`} className='pl-3 pr-1 border-y'>
+            <td key={`select-${row.id}`} className='pl-3 pr-1 border-y align-middle'>
               <SelectRow row={row} />
             </td>
           ) : null}
           {row.getVisibleCells().map((cell: Cell<TData, unknown>) => (
             <td
               key={cell.id}
-              className='px-2 border-y'
+              className='px-2 border-y align-middle'
               style={{
                 cursor: onRowClicked || onRowDoubleClicked ? 'pointer' : 'auto',
                 paddingBottom: dense ? '0.25rem' : '0.5rem',
diff --git a/rsconcept/frontend/src/components/DataTable/TableHeader.tsx b/rsconcept/frontend/src/components/DataTable/TableHeader.tsx
index 0aad932c..200725bd 100644
--- a/rsconcept/frontend/src/components/DataTable/TableHeader.tsx
+++ b/rsconcept/frontend/src/components/DataTable/TableHeader.tsx
@@ -13,7 +13,7 @@ interface TableHeaderProps<TData> {
 function TableHeader<TData>({ table, headPosition, enableRowSelection, enableSorting }: TableHeaderProps<TData>) {
   return (
     <thead
-      className={`clr-app shadow-border`}
+      className='clr-app shadow-border'
       style={{
         top: headPosition,
         position: 'sticky'
@@ -22,7 +22,7 @@ function TableHeader<TData>({ table, headPosition, enableRowSelection, enableSor
       {table.getHeaderGroups().map((headerGroup: HeaderGroup<TData>) => (
         <tr key={headerGroup.id}>
           {enableRowSelection ? (
-            <th className='pl-3 pr-1'>
+            <th className='pl-3 pr-1 align-middle'>
               <SelectAll table={table} />
             </th>
           ) : null}
diff --git a/rsconcept/frontend/src/components/GrammemeBadge.tsx b/rsconcept/frontend/src/components/GrammemeBadge.tsx
index 3f68acf4..2ae861c2 100644
--- a/rsconcept/frontend/src/components/GrammemeBadge.tsx
+++ b/rsconcept/frontend/src/components/GrammemeBadge.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx';
 
 import { useConceptTheme } from '@/context/ThemeContext';
 import { GramData } from '@/models/language';
-import { colorFgGrammeme } from '@/utils/color';
+import { colorFgGrammeme } from '@/styling/color';
 import { labelGrammeme } from '@/utils/labels';
 
 interface GrammemeBadgeProps {
diff --git a/rsconcept/frontend/src/components/Help/HelpButton.tsx b/rsconcept/frontend/src/components/Help/HelpButton.tsx
index 55cdc7e5..5e06036d 100644
--- a/rsconcept/frontend/src/components/Help/HelpButton.tsx
+++ b/rsconcept/frontend/src/components/Help/HelpButton.tsx
@@ -1,15 +1,16 @@
 import { BiInfoCircle } from 'react-icons/bi';
 
 import TextURL from '@/components/ui/TextURL';
-import Tooltip from '@/components/ui/Tooltip';
+import Tooltip, { PlacesType } from '@/components/ui/Tooltip';
 import { HelpTopic } from '@/models/miscellaneous';
 
+import InfoTopic from '../InfoTopic';
 import { CProps } from '../props';
-import InfoTopic from './InfoTopic';
 
 interface HelpButtonProps extends CProps.Styling {
   topic: HelpTopic;
   offset?: number;
+  place?: PlacesType;
 }
 
 function HelpButton({ topic, ...restProps }: HelpButtonProps) {
diff --git a/rsconcept/frontend/src/components/Help/HelpExteor.tsx b/rsconcept/frontend/src/components/Help/HelpExteor.tsx
index 4ea218b0..c9ec58d7 100644
--- a/rsconcept/frontend/src/components/Help/HelpExteor.tsx
+++ b/rsconcept/frontend/src/components/Help/HelpExteor.tsx
@@ -4,7 +4,7 @@ import { urls } from '@/utils/constants';
 function HelpExteor() {
   // prettier-ignore
   return (
-  <div>
+  <div className='flex flex-col gap-2'>
     <h1>Экстеор</h1>
     <p>Экстеор 4.9 — редактор текстов систем понятий эксплицированных в родах структур, используемых для создания проектов систем организационного управления. Экстеор является идейным предком Портала.</p>
     <p>Портал превосходит Экстеор в части редактирования экспликаций, но функции синтеза и вычисления интерпретации пока доступны только в Экстеоре. Также следует использовать Экстеор для выгрузки экспликаций в Word для последующей печати.</p>
diff --git a/rsconcept/frontend/src/components/Help/HelpLibrary.tsx b/rsconcept/frontend/src/components/Help/HelpLibrary.tsx
index 1846e387..ed7939d0 100644
--- a/rsconcept/frontend/src/components/Help/HelpLibrary.tsx
+++ b/rsconcept/frontend/src/components/Help/HelpLibrary.tsx
@@ -4,7 +4,7 @@ import { FiBell } from 'react-icons/fi';
 function HelpLibrary() {
   // prettier-ignore
   return (
-  <div className='max-w-[80rem]'>
+  <div>
     <h1>Библиотека концептуальных схем</h1>
     <p>В библиотеки собраны различные концептуальные схемы.</p>
     <p>Группировка и классификации схем на данный момент не проводится.</p>
diff --git a/rsconcept/frontend/src/components/Help/HelpMain.tsx b/rsconcept/frontend/src/components/Help/HelpMain.tsx
index 9a13b282..7f7947b8 100644
--- a/rsconcept/frontend/src/components/Help/HelpMain.tsx
+++ b/rsconcept/frontend/src/components/Help/HelpMain.tsx
@@ -4,7 +4,7 @@ import { urls } from '@/utils/constants';
 function HelpMain() {
   // prettier-ignore
   return (
-  <div className='max-w-[60rem]'>
+  <div>
     <h1>Портал</h1>
     <p className=''>Портал позволяет анализировать предметные области, формально записывать системы определений (концептуальные схемы) и синтезировать их с помощью математического аппарата родов структур.</p>
     <p className='mt-4 mb-1 text-center'><b>Основные разделы</b></p>
diff --git a/rsconcept/frontend/src/components/Help/HelpRSTemplates.tsx b/rsconcept/frontend/src/components/Help/HelpRSTemplates.tsx
index 8822bb98..c6d550cc 100644
--- a/rsconcept/frontend/src/components/Help/HelpRSTemplates.tsx
+++ b/rsconcept/frontend/src/components/Help/HelpRSTemplates.tsx
@@ -1,7 +1,7 @@
 function HelpRSTemplates() {
   // prettier-ignore
   return (
-  <div className='flex flex-col gap-2 pb-2 max-w-[80rem]'>
+  <div className='flex flex-col gap-2 pb-2'>
     <h1>Банк выражений</h1>
     <p>Портал предоставляет быстрый доступ к часто используемым выражениям с помощью функции создания конституенты из шаблона.</p>
     <p>Источником шаблонов является <b>Банк выражений</b>, содержащий параметризованные понятия и утверждения, сгруппированные по разделам.</p>
diff --git a/rsconcept/frontend/src/components/Help/HelpTerminologyControl.tsx b/rsconcept/frontend/src/components/Help/HelpTerminologyControl.tsx
index 2d0d8c2c..d56cf2c7 100644
--- a/rsconcept/frontend/src/components/Help/HelpTerminologyControl.tsx
+++ b/rsconcept/frontend/src/components/Help/HelpTerminologyControl.tsx
@@ -1,7 +1,7 @@
 function HelpTerminologyControl() {
   // prettier-ignore
   return (
-  <div className='flex flex-col gap-1 max-w-[80rem]'>
+  <div className='flex flex-col gap-2'>
     <h1>Терминологизация</h1>
     <p>Портал позволяет контролировать употребление терминов, привязанных к сущностям в концептуальных схемах.</p>
     <p>Для этого используется механизм текстовых отсылок: <i>использование термина</i> и <i>связывание слов.</i></p>
diff --git a/rsconcept/frontend/src/components/InfoConstituenta.tsx b/rsconcept/frontend/src/components/InfoConstituenta.tsx
index 30cd7416..9178f2ea 100644
--- a/rsconcept/frontend/src/components/InfoConstituenta.tsx
+++ b/rsconcept/frontend/src/components/InfoConstituenta.tsx
@@ -1,7 +1,9 @@
 import { IConstituenta } from '@/models/rsform';
 import { labelCstTypification } from '@/utils/labels';
 
-interface InfoConstituentaProps extends React.HTMLAttributes<HTMLDivElement> {
+import { CProps } from './props';
+
+interface InfoConstituentaProps extends CProps.Div {
   data: IConstituenta;
 }
 
diff --git a/rsconcept/frontend/src/components/InfoCstClass.tsx b/rsconcept/frontend/src/components/InfoCstClass.tsx
index 48e8d533..94fce698 100644
--- a/rsconcept/frontend/src/components/InfoCstClass.tsx
+++ b/rsconcept/frontend/src/components/InfoCstClass.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx';
 
 import { useConceptTheme } from '@/context/ThemeContext';
 import { CstClass } from '@/models/rsform';
-import { colorBgCstClass } from '@/utils/color';
+import { colorBgCstClass } from '@/styling/color';
 import { prefixes } from '@/utils/constants';
 import { describeCstClass, labelCstClass } from '@/utils/labels';
 
diff --git a/rsconcept/frontend/src/components/InfoCstStatus.tsx b/rsconcept/frontend/src/components/InfoCstStatus.tsx
index f8e91824..9fd9872a 100644
--- a/rsconcept/frontend/src/components/InfoCstStatus.tsx
+++ b/rsconcept/frontend/src/components/InfoCstStatus.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx';
 
 import { useConceptTheme } from '@/context/ThemeContext';
 import { ExpressionStatus } from '@/models/rsform';
-import { colorBgCstStatus } from '@/utils/color';
+import { colorBgCstStatus } from '@/styling/color';
 import { prefixes } from '@/utils/constants';
 import { describeExpressionStatus, labelExpressionStatus } from '@/utils/labels';
 
diff --git a/rsconcept/frontend/src/components/Help/InfoTopic.tsx b/rsconcept/frontend/src/components/InfoTopic.tsx
similarity index 61%
rename from rsconcept/frontend/src/components/Help/InfoTopic.tsx
rename to rsconcept/frontend/src/components/InfoTopic.tsx
index af28e922..8bfc360c 100644
--- a/rsconcept/frontend/src/components/Help/InfoTopic.tsx
+++ b/rsconcept/frontend/src/components/InfoTopic.tsx
@@ -1,17 +1,17 @@
 import { HelpTopic } from '@/models/miscellaneous';
 
-import HelpAPI from './HelpAPI';
-import HelpConstituenta from './HelpConstituenta';
-import HelpExteor from './HelpExteor';
-import HelpLibrary from './HelpLibrary';
-import HelpMain from './HelpMain';
-import HelpPrivacy from './HelpPrivacy';
-import HelpRSFormItems from './HelpRSFormItems';
-import HelpRSFormMeta from './HelpRSFormMeta';
-import HelpRSLang from './HelpRSLang';
-import HelpRSTemplates from './HelpRSTemplates';
-import HelpTermGraph from './HelpTermGraph';
-import HelpTerminologyControl from './HelpTerminologyControl';
+import HelpAPI from './Help/HelpAPI';
+import HelpConstituenta from './Help/HelpConstituenta';
+import HelpExteor from './Help/HelpExteor';
+import HelpLibrary from './Help/HelpLibrary';
+import HelpMain from './Help/HelpMain';
+import HelpPrivacy from './Help/HelpPrivacy';
+import HelpRSFormItems from './Help/HelpRSFormItems';
+import HelpRSFormMeta from './Help/HelpRSFormMeta';
+import HelpRSLang from './Help/HelpRSLang';
+import HelpRSTemplates from './Help/HelpRSTemplates';
+import HelpTermGraph from './Help/HelpTermGraph';
+import HelpTerminologyControl from './Help/HelpTerminologyControl';
 
 interface InfoTopicProps {
   topic: HelpTopic;
diff --git a/rsconcept/frontend/src/components/PDFViewer/PDFViewer.tsx b/rsconcept/frontend/src/components/PDFViewer/PDFViewer.tsx
index 7838c5e3..2621fa6f 100644
--- a/rsconcept/frontend/src/components/PDFViewer/PDFViewer.tsx
+++ b/rsconcept/frontend/src/components/PDFViewer/PDFViewer.tsx
@@ -5,7 +5,7 @@ import { useMemo, useState } from 'react';
 import { Document, Page } from 'react-pdf';
 
 import useWindowSize from '@/hooks/useWindowSize';
-import { graphLightT } from '@/utils/color';
+import { graphLightT } from '@/styling/color';
 
 import Overlay from '../ui/Overlay';
 import PageControls from './PageControls';
diff --git a/rsconcept/frontend/src/components/RSInput/bracketMatching.ts b/rsconcept/frontend/src/components/RSInput/bracketMatching.ts
index da7e3c7b..a1955f40 100644
--- a/rsconcept/frontend/src/components/RSInput/bracketMatching.ts
+++ b/rsconcept/frontend/src/components/RSInput/bracketMatching.ts
@@ -1,7 +1,7 @@
 import { bracketMatching, MatchResult } from '@codemirror/language';
 import { Decoration, EditorView } from '@codemirror/view';
 
-import { bracketsDarkT, bracketsLightT } from '@/utils/color';
+import { bracketsDarkT, bracketsLightT } from '@/styling/color';
 
 const matchingMark = Decoration.mark({ class: 'cc-matchingBracket' });
 const nonMatchingMark = Decoration.mark({ class: 'cc-nonmatchingBracket' });
diff --git a/rsconcept/frontend/src/components/RefsInput/tooltip.ts b/rsconcept/frontend/src/components/RefsInput/tooltip.ts
index c9b57292..c3127fe0 100644
--- a/rsconcept/frontend/src/components/RefsInput/tooltip.ts
+++ b/rsconcept/frontend/src/components/RefsInput/tooltip.ts
@@ -10,7 +10,7 @@ import {
   findContainedNodes,
   findEnvelopingNodes
 } from '@/utils/codemirror';
-import { IColorTheme } from '@/utils/color';
+import { IColorTheme } from '@/styling/color';
 
 import { ReferenceTokens } from './parse';
 import { RefEntity, RefSyntactic } from './parse/parser.terms';
diff --git a/rsconcept/frontend/src/components/props.d.ts b/rsconcept/frontend/src/components/props.d.ts
index cd304092..00b5186d 100644
--- a/rsconcept/frontend/src/components/props.d.ts
+++ b/rsconcept/frontend/src/components/props.d.ts
@@ -38,4 +38,5 @@ export namespace CProps {
   export type Input = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
 
   export type AnimatedButton = Omit<HTMLMotionProps<'button'>, 'type'>;
+  export type AnimatedDiv = HTMLMotionProps<'div'>;
 }
diff --git a/rsconcept/frontend/src/components/ui/Checkbox.tsx b/rsconcept/frontend/src/components/ui/Checkbox.tsx
index d10fb2f6..31cfb6d3 100644
--- a/rsconcept/frontend/src/components/ui/Checkbox.tsx
+++ b/rsconcept/frontend/src/components/ui/Checkbox.tsx
@@ -37,7 +37,13 @@ function Checkbox({ id, disabled, label, title, className, value, setValue, ...r
     <button
       type='button'
       id={id}
-      className={clsx('flex items-center gap-2', 'outline-none', 'text-start', cursor, className)}
+      className={clsx(
+        'flex items-center gap-2', // prettier: split lines
+        'outline-none',
+        'text-start',
+        cursor,
+        className
+      )}
       disabled={disabled}
       onClick={handleClick}
       data-tooltip-id={title ? globalIDs.tooltip : undefined}
@@ -45,10 +51,14 @@ function Checkbox({ id, disabled, label, title, className, value, setValue, ...r
       {...restProps}
     >
       <div
-        className={clsx('max-w-[1rem] min-w-[1rem] h-4', 'border rounded-sm', {
-          'clr-primary': value !== false,
-          'clr-app': value === false
-        })}
+        className={clsx(
+          'max-w-[1rem] min-w-[1rem] h-4', // prettier: split lines
+          'border rounded-sm',
+          {
+            'clr-primary': value !== false,
+            'clr-app': value === false
+          }
+        )}
       >
         {value ? (
           <div className='mt-[1px] ml-[1px]'>
diff --git a/rsconcept/frontend/src/components/ui/CheckboxTristate.tsx b/rsconcept/frontend/src/components/ui/CheckboxTristate.tsx
index 2715666c..2956eab1 100644
--- a/rsconcept/frontend/src/components/ui/CheckboxTristate.tsx
+++ b/rsconcept/frontend/src/components/ui/CheckboxTristate.tsx
@@ -49,7 +49,12 @@ function CheckboxTristate({
     <button
       type='button'
       id={id}
-      className={clsx('flex items-center gap-2 text-start', 'outline-none', cursor, className)}
+      className={clsx(
+        'flex items-center gap-2 text-start', // prettier: split lines
+        'outline-none',
+        cursor,
+        className
+      )}
       disabled={disabled}
       onClick={handleClick}
       data-tooltip-id={title ? globalIDs.tooltip : undefined}
@@ -57,10 +62,14 @@ function CheckboxTristate({
       {...restProps}
     >
       <div
-        className={clsx('w-4 h-4', 'border rounded-sm', {
-          'clr-primary': value !== false,
-          'clr-app': value === false
-        })}
+        className={clsx(
+          'w-4 h-4', // prettier: split lines
+          'border rounded-sm',
+          {
+            'clr-primary': value !== false,
+            'clr-app': value === false
+          }
+        )}
       >
         {value ? (
           <div className='mt-[1px] ml-[1px]'>
diff --git a/rsconcept/frontend/src/components/ui/Dropdown.tsx b/rsconcept/frontend/src/components/ui/Dropdown.tsx
index 258c3488..86ca5c95 100644
--- a/rsconcept/frontend/src/components/ui/Dropdown.tsx
+++ b/rsconcept/frontend/src/components/ui/Dropdown.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { motion } from 'framer-motion';
 
-import { animateDropdown } from '@/utils/animations';
+import { animateDropdown } from '@/styling/animations';
 
 import { CProps } from '../props';
 
diff --git a/rsconcept/frontend/src/components/ui/DropdownButton.tsx b/rsconcept/frontend/src/components/ui/DropdownButton.tsx
index fa5dc6dd..46ef7e89 100644
--- a/rsconcept/frontend/src/components/ui/DropdownButton.tsx
+++ b/rsconcept/frontend/src/components/ui/DropdownButton.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { motion } from 'framer-motion';
 
-import { animateDropdownItem } from '@/utils/animations';
+import { animateDropdownItem } from '@/styling/animations';
 import { globalIDs } from '@/utils/constants';
 
 import { CProps } from '../props';
diff --git a/rsconcept/frontend/src/components/ui/DropdownCheckbox.tsx b/rsconcept/frontend/src/components/ui/DropdownCheckbox.tsx
index 1bd59e6d..bffb5bbb 100644
--- a/rsconcept/frontend/src/components/ui/DropdownCheckbox.tsx
+++ b/rsconcept/frontend/src/components/ui/DropdownCheckbox.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { motion } from 'framer-motion';
 
-import { animateDropdownItem } from '@/utils/animations';
+import { animateDropdownItem } from '@/styling/animations';
 
 import Checkbox from './Checkbox';
 
diff --git a/rsconcept/frontend/src/components/ui/Modal.tsx b/rsconcept/frontend/src/components/ui/Modal.tsx
index 87033b92..a768aed7 100644
--- a/rsconcept/frontend/src/components/ui/Modal.tsx
+++ b/rsconcept/frontend/src/components/ui/Modal.tsx
@@ -6,7 +6,7 @@ import { useRef } from 'react';
 import { BiX } from 'react-icons/bi';
 
 import useEscapeKey from '@/hooks/useEscapeKey';
-import { animateModal } from '@/utils/animations';
+import { animateModal } from '@/styling/animations';
 
 import { CProps } from '../props';
 import Button from './Button';
diff --git a/rsconcept/frontend/src/components/ui/SelectMulti.tsx b/rsconcept/frontend/src/components/ui/SelectMulti.tsx
index ed21a6d3..4d5b2a43 100644
--- a/rsconcept/frontend/src/components/ui/SelectMulti.tsx
+++ b/rsconcept/frontend/src/components/ui/SelectMulti.tsx
@@ -4,7 +4,7 @@ import { useMemo } from 'react';
 import Select, { GroupBase, Props, StylesConfig } from 'react-select';
 
 import { useConceptTheme } from '@/context/ThemeContext';
-import { selectDarkT, selectLightT } from '@/utils/color';
+import { selectDarkT, selectLightT } from '@/styling/color';
 
 export interface SelectMultiProps<Option, Group extends GroupBase<Option> = GroupBase<Option>>
   extends Omit<Props<Option, true, Group>, 'theme' | 'menuPortalTarget'> {
diff --git a/rsconcept/frontend/src/components/ui/SelectSingle.tsx b/rsconcept/frontend/src/components/ui/SelectSingle.tsx
index b12187e0..27552196 100644
--- a/rsconcept/frontend/src/components/ui/SelectSingle.tsx
+++ b/rsconcept/frontend/src/components/ui/SelectSingle.tsx
@@ -4,7 +4,7 @@ import { useMemo } from 'react';
 import Select, { GroupBase, Props, StylesConfig } from 'react-select';
 
 import { useConceptTheme } from '@/context/ThemeContext';
-import { selectDarkT, selectLightT } from '@/utils/color';
+import { selectDarkT, selectLightT } from '@/styling/color';
 
 interface SelectSingleProps<Option, Group extends GroupBase<Option> = GroupBase<Option>>
   extends Omit<Props<Option, false, Group>, 'theme' | 'menuPortalTarget'> {
diff --git a/rsconcept/frontend/src/components/ui/Tooltip.tsx b/rsconcept/frontend/src/components/ui/Tooltip.tsx
index f8ff4a80..c583918c 100644
--- a/rsconcept/frontend/src/components/ui/Tooltip.tsx
+++ b/rsconcept/frontend/src/components/ui/Tooltip.tsx
@@ -7,6 +7,8 @@ import { ITooltip, Tooltip as TooltipImpl } from 'react-tooltip';
 
 import { useConceptTheme } from '@/context/ThemeContext';
 
+export type { PlacesType } from 'react-tooltip';
+
 interface TooltipProps extends Omit<ITooltip, 'variant'> {
   layer?: string;
   text?: string;
diff --git a/rsconcept/frontend/src/context/ThemeContext.tsx b/rsconcept/frontend/src/context/ThemeContext.tsx
index d9667b67..40883d2b 100644
--- a/rsconcept/frontend/src/context/ThemeContext.tsx
+++ b/rsconcept/frontend/src/context/ThemeContext.tsx
@@ -5,8 +5,8 @@ import { createContext, useCallback, useContext, useLayoutEffect, useMemo, useSt
 
 import Tooltip from '@/components/ui/Tooltip';
 import useLocalStorage from '@/hooks/useLocalStorage';
-import { animationDuration } from '@/utils/animations';
-import { darkT, IColorTheme, lightT } from '@/utils/color';
+import { animationDuration } from '@/styling/animations';
+import { darkT, IColorTheme, lightT } from '@/styling/color';
 import { globalIDs } from '@/utils/constants';
 
 interface IThemeContext {
diff --git a/rsconcept/frontend/src/dialogs/DlgShowAST.tsx b/rsconcept/frontend/src/dialogs/DlgShowAST.tsx
index 56193646..06739dd0 100644
--- a/rsconcept/frontend/src/dialogs/DlgShowAST.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgShowAST.tsx
@@ -6,8 +6,8 @@ import GraphUI, { GraphEdge, GraphNode } from '@/components/GraphUI';
 import Modal, { ModalProps } from '@/components/ui/Modal';
 import { useConceptTheme } from '@/context/ThemeContext';
 import { SyntaxTree } from '@/models/rslang';
-import { graphDarkT, graphLightT } from '@/utils/color';
-import { colorBgSyntaxTree } from '@/utils/color';
+import { graphDarkT, graphLightT } from '@/styling/color';
+import { colorBgSyntaxTree } from '@/styling/color';
 import { resources } from '@/utils/constants';
 import { labelSyntaxTree } from '@/utils/labels';
 
diff --git a/rsconcept/frontend/src/index.css b/rsconcept/frontend/src/index.css
index 66adc85b..94dd8900 100644
--- a/rsconcept/frontend/src/index.css
+++ b/rsconcept/frontend/src/index.css
@@ -1,361 +1,4 @@
-@import 'react-toastify/dist/ReactToastify.css';
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* prettier-ignore */
-:root {
-  --font-ui:  'Geologica', sans-serif;
-  --font-main: 'Rubik', 'Noto Sans Math', 'Noto Sans Symbols 2', 'Segoe UI Symbol', sans-serif;
-  --font-math: 'Noto Sans Math', 'Noto Sans Symbols 2', 'Segoe UI Symbol', sans-serif;
-
-  /* Light Theme */
-  --cl-bg-120:      hsl(000, 000%, 100%);
-  --cl-bg-100:      hsl(000, 000%, 098%);
-  --cl-bg-80:       hsl(000, 000%, 094%);
-  --cl-bg-60:       hsl(000, 000%, 091%);
-  --cl-bg-40:       hsl(000, 000%, 080%);
-
-  --cl-fg-60:       hsl(000, 000%, 065%);
-  --cl-fg-80:       hsl(000, 000%, 047%);
-  --cl-fg-100:      hsl(000, 000%, 000%);
-
-  --cl-prim-bg-100: hsl(220, 100%, 060%);
-  --cl-prim-bg-80:  hsl(220, 080%, 092%);
-  --cl-prim-bg-60:  hsl(190, 080%, 094%);
-
-  --cl-prim-fg-80:  hsl(220, 100%, 050%);
-  --cl-prim-fg-100: hsl(000, 000%, 100%);
-
-  --cl-red-bg-100:  hsl(000, 100%, 095%);
-  --cl-red-fg-100:  hsl(000, 072%, 051%);
-  --cl-green-fg-100: hsl(120, 080%, 37%);
-
-  /* Dark Theme */
-  --cd-bg-120:      hsl(000, 000%, 005%);
-  --cd-bg-100:      hsl(000, 000%, 009%);
-  --cd-bg-80:       hsl(000, 000%, 015%);
-  --cd-bg-60:       hsl(000, 000%, 022%);
-  --cd-bg-40:       hsl(000, 000%, 035%);
-
-  --cd-fg-60:       hsl(000, 000%, 055%);
-  --cd-fg-80:       hsl(000, 000%, 080%);
-  --cd-fg-100:      hsl(000, 000%, 093%);
-
-  --cd-prim-bg-100: hsl(267, 050%, 050%);
-  --cd-prim-bg-80: hsl(267, 050%, 032%);
-  --cd-prim-bg-60: hsl(269, 030%, 028%);
-
-  --cd-prim-fg-80: hsl(267, 070%, 070%);
-  --cd-prim-fg-100: hsl(000, 000%, 100%);
-
-  --cd-red-bg-100: hsl(000, 100%, 015%);
-  --cd-red-fg-100: hsl(000, 080%, 055%);
-  --cd-green-fg-100: hsl(120, 080%, 042%);
-
-  /* Import overrides */
-  --toastify-color-dark: var(--cd-bg-60);
-}
-
-/* Depth layers */
-.z-bottom {
-  z-index: 0;
-}
-.z-pop {
-  z-index: 10;
-}
-:is(.z-sticky, .sticky) {
-  z-index: 20;
-}
-.z-tooltip {
-  z-index: 30;
-}
-.z-navigation {
-  z-index: 50;
-}
-.z-modal {
-  z-index: 60;
-}
-.z-modal-controls {
-  z-index: 70;
-}
-.z-modal-top {
-  z-index: 80;
-}
-.z-modal-tooltip {
-  z-index: 90;
-}
-.z-topmost {
-  z-index: 99;
-}
-
-:root {
-  font-family: var(--font-main);
-
-  color: var(--cl-fg-100);
-  border-color: var(--cl-bg-40);
-  background-color: var(--cl-bg-100);
-
-  &.dark {
-    color: var(--cd-fg-100);
-    border-color: var(--cd-bg-40);
-    background-color: var(--cd-bg-100);
-  }
-}
-
-:focus {
-  outline-width: 2px;
-  outline-style: solid;
-  outline-color: transparent;
-  .dark & {
-    outline-color: transparent;
-  }
-}
-
-::selection {
-  background: var(--cl-prim-bg-60);
-  .dark & {
-    background: var(--cd-prim-bg-60);
-  }
-  tr :hover& {
-    background: var(--cl-red-bg-100);
-    .dark & {
-      background: var(--cd-red-bg-100);
-    }
-  }
-}
-
-::placeholder {
-  color: var(--cl-fg-60);
-  .dark & {
-    color: var(--cd-fg-60);
-  }
-}
-
-[data-color-scheme='dark'] {
-  color-scheme: dark;
-}
-
-[data-color-scheme='light'] {
-  color-scheme: light;
-}
-
-@layer utilities {
-  .font-controls {
-    font-family: var(--font-ui);
-    font-weight: 600;
-    font-variant: small-caps;
-  }
-  .font-math {
-    font-family: var(--font-math);
-  }
-}
-
-@layer components {
-  h1 {
-    @apply text-lg font-semibold text-center;
-  }
-
-  h2 {
-    @apply font-semibold text-center;
-  }
-
-  b {
-    @apply font-semibold;
-  }
-
-  .border {
-    @apply rounded;
-  }
-
-  .shadow-border {
-    @apply shadow-sm shadow-[var(--cl-bg-40)] dark:shadow-[var(--cd-bg-40)];
-  }
-
-  .clr-modal-backdrop {
-    opacity: 0.75;
-  }
-
-  :is(
-      .clr-border,
-      .border,
-      .border-x,
-      .border-y,
-      .border-b,
-      .border-t,
-      .border-l,
-      .border-r,
-      .border-2,
-      .border-x-2,
-      .border-y-2,
-      .border-b-2,
-      .border-t-2,
-      .border-l-2,
-      .border-r-2,
-      .divide-x,
-      .divide-y,
-      .divide-x-2,
-      .divide-y-2
-    ) {
-    border-color: var(--cl-bg-40);
-    @apply divide-inherit;
-    .dark & {
-      border-color: var(--cd-bg-40);
-    }
-  }
-
-  :is(.clr-app, .clr-footer, .clr-modal-backdrop, .clr-btn-nav, .clr-input:disabled) {
-    background-color: var(--cl-bg-100);
-    .dark & {
-      background-color: var(--cd-bg-100);
-    }
-  }
-
-  :is(.clr-input) {
-    background-color: var(--cl-bg-120);
-    .dark & {
-      background-color: var(--cd-bg-120);
-    }
-  }
-
-  :is(.clr-controls, .clr-tab, .clr-btn-default) {
-    background-color: var(--cl-bg-80);
-    .dark & {
-      background-color: var(--cd-bg-80);
-    }
-  }
-
-  :is(.clr-primary, .clr-btn-primary:hover, .clr-btn-primary:focus) {
-    @apply transition;
-    color: var(--cl-prim-fg-100);
-    background-color: var(--cl-prim-bg-100);
-    .dark & {
-      color: var(--cd-prim-fg-100);
-      background-color: var(--cd-prim-bg-100);
-    }
-  }
-
-  :is(.clr-selected, .clr-btn-primary) {
-    color: var(--cl-fg-100);
-    background-color: var(--cl-prim-bg-80);
-    .dark & {
-      color: var(--cd-fg-100);
-      background-color: var(--cd-prim-bg-80);
-    }
-  }
-
-  :is(.clr-disabled, .clr-btn-default, .clr-btn-primary):disabled {
-    @apply transition;
-    color: var(--cl-fg-80);
-    background-color: var(--cl-bg-60);
-    .dark & {
-      color: var(--cd-fg-80);
-      background-color: var(--cd-bg-60);
-    }
-  }
-
-  :is(.clr-hover, .clr-tab, .clr-btn-nav, .clr-btn-default):hover:not(:disabled) {
-    @apply transition;
-    color: var(--cl-fg-100);
-    background-color: var(--cl-prim-bg-60);
-    .dark & {
-      color: var(--cd-fg-100);
-      background-color: var(--cd-prim-bg-60);
-    }
-  }
-
-  :is(.clr-outline, .clr-btn-primary):focus {
-    outline-width: 2px;
-    outline-style: solid;
-    outline-color: var(--cl-prim-bg-100);
-    .dark & {
-      outline-color: var(--cd-prim-bg-100);
-    }
-  }
-
-  :is(.clr-text-primary, .clr-text-url) {
-    color: var(--cl-prim-fg-80);
-    .dark & {
-      color: var(--cd-prim-fg-80);
-    }
-  }
-
-  .clr-footer {
-    color: var(--cl-fg-60);
-    .dark & {
-      color: var(--cd-fg-60);
-    }
-  }
-
-  :is(.clr-text-controls, .clr-btn-nav, .clr-btn-clear) {
-    color: var(--cl-fg-80);
-    &:disabled {
-      color: var(--cl-fg-60);
-    }
-    .dark & {
-      color: var(--cd-fg-80);
-      &:disabled {
-        color: var(--cd-fg-60);
-      }
-    }
-  }
-
-  .clr-warning {
-    background-color: var(--cl-red-bg-100);
-    .dark & {
-      background-color: var(--cd-red-bg-100);
-    }
-  }
-
-  .clr-text-default {
-    color: var(--cl-fg-100);
-    .dark & {
-      color: var(--cd-fg-100);
-    }
-  }
-
-  .clr-text-warning {
-    color: var(--cl-red-fg-100);
-    .dark & {
-      color: var(--cd-red-fg-100);
-    }
-  }
-
-  .clr-text-success {
-    color: var(--cl-green-fg-100);
-    .dark & {
-      color: var(--cd-green-fg-100);
-    }
-  }
-}
-
-.cm-editor {
-  resize: vertical;
-  overflow-y: auto;
-  border-color: var(--cl-bg-40);
-  .dark & {
-    border-color: var(--cd-bg-40);
-  }
-  @apply border rounded px-[0.375rem] py-[0.15rem];
-}
-.cm-editor.cm-focused {
-  border-color: var(--cl-bg-40);
-  outline-color: var(--cl-prim-bg-100);
-  .dark & {
-    border-color: var(--cd-bg-40);
-    outline-color: var(--cd-prim-bg-100);
-  }
-  @apply outline-2 outline;
-}
-
-.cm-editor .cm-placeholder {
-  color: var(--cl-fg-60);
-  .dark & {
-    color: var(--cd-fg-60);
-  }
-}
-
-.rdt_TableCell {
-  font-size: 0.875rem;
-}
+@import 'styling/setup.css';
+@import 'styling/styles.css';
+@import 'styling/imports.css';
+@import 'styling/overrides.css';
diff --git a/rsconcept/frontend/src/pages/CreateRSFormPage.tsx b/rsconcept/frontend/src/pages/CreateRSFormPage.tsx
index cf5c3601..3245f569 100644
--- a/rsconcept/frontend/src/pages/CreateRSFormPage.tsx
+++ b/rsconcept/frontend/src/pages/CreateRSFormPage.tsx
@@ -5,6 +5,7 @@ import { useEffect, useRef, useState } from 'react';
 import { BiDownload } from 'react-icons/bi';
 import { toast } from 'react-toastify';
 
+import AnimateFadeIn from '@/components/AnimateFadeIn';
 import InfoError from '@/components/InfoError';
 import RequireAuth from '@/components/RequireAuth';
 import Button from '@/components/ui/Button';
@@ -78,56 +79,58 @@ function CreateRSFormPage() {
   }
 
   return (
-    <RequireAuth>
-      <form className={clsx('px-6 py-3', classnames.flex_col)} onSubmit={handleSubmit}>
-        <h1>Создание концептуальной схемы</h1>
-        <Overlay position='top-[-2.4rem] right-[-1rem]'>
-          <input
-            ref={inputRef}
-            type='file'
-            style={{ display: 'none' }}
-            accept={EXTEOR_TRS_FILE}
-            onChange={handleFileChange}
-          />
-          <MiniButton
-            title='Загрузить из Экстеор'
-            icon={<BiDownload size='1.25rem' className='clr-text-primary' />}
-            onClick={() => inputRef.current?.click()}
-          />
-        </Overlay>
-        {fileName ? <Label text={`Загружен файл: ${fileName}`} /> : null}
+    <AnimateFadeIn>
+      <RequireAuth>
+        <form className={clsx('px-6 py-3', classnames.flex_col)} onSubmit={handleSubmit}>
+          <h1>Создание концептуальной схемы</h1>
+          <Overlay position='top-[-2.4rem] right-[-1rem]'>
+            <input
+              ref={inputRef}
+              type='file'
+              style={{ display: 'none' }}
+              accept={EXTEOR_TRS_FILE}
+              onChange={handleFileChange}
+            />
+            <MiniButton
+              title='Загрузить из Экстеор'
+              icon={<BiDownload size='1.25rem' className='clr-text-primary' />}
+              onClick={() => inputRef.current?.click()}
+            />
+          </Overlay>
+          {fileName ? <Label text={`Загружен файл: ${fileName}`} /> : null}
 
-        <TextInput
-          required={!file}
-          label='Полное название'
-          placeholder={file && 'Загрузить из файла'}
-          value={title}
-          onChange={event => setTitle(event.target.value)}
-        />
-        <TextInput
-          required={!file}
-          label='Сокращение'
-          placeholder={file && 'Загрузить из файла'}
-          className='w-[14rem]'
-          pattern={patterns.library_alias}
-          title={`не более ${limits.library_alias_len} символов`}
-          value={alias}
-          onChange={event => setAlias(event.target.value)}
-        />
-        <TextArea
-          label='Комментарий'
-          placeholder={file && 'Загрузить из файла'}
-          value={comment}
-          onChange={event => setComment(event.target.value)}
-        />
-        <Checkbox label='Общедоступная схема' value={common} setValue={value => setCommon(value ?? false)} />
-        <div className='flex justify-around gap-6 py-3'>
-          <SubmitButton text='Создать схему' loading={processing} className='min-w-[10rem]' />
-          <Button text='Отмена' className='min-w-[10rem]' onClick={() => handleCancel()} />
-        </div>
-        {error ? <InfoError error={error} /> : null}
-      </form>
-    </RequireAuth>
+          <TextInput
+            required={!file}
+            label='Полное название'
+            placeholder={file && 'Загрузить из файла'}
+            value={title}
+            onChange={event => setTitle(event.target.value)}
+          />
+          <TextInput
+            required={!file}
+            label='Сокращение'
+            placeholder={file && 'Загрузить из файла'}
+            className='w-[14rem]'
+            pattern={patterns.library_alias}
+            title={`не более ${limits.library_alias_len} символов`}
+            value={alias}
+            onChange={event => setAlias(event.target.value)}
+          />
+          <TextArea
+            label='Комментарий'
+            placeholder={file && 'Загрузить из файла'}
+            value={comment}
+            onChange={event => setComment(event.target.value)}
+          />
+          <Checkbox label='Общедоступная схема' value={common} setValue={value => setCommon(value ?? false)} />
+          <div className='flex justify-around gap-6 py-3'>
+            <SubmitButton text='Создать схему' loading={processing} className='min-w-[10rem]' />
+            <Button text='Отмена' className='min-w-[10rem]' onClick={() => handleCancel()} />
+          </div>
+          {error ? <InfoError error={error} /> : null}
+        </form>
+      </RequireAuth>
+    </AnimateFadeIn>
   );
 }
 
diff --git a/rsconcept/frontend/src/pages/HomePage.tsx b/rsconcept/frontend/src/pages/HomePage.tsx
index 52d3c37b..b996e5fc 100644
--- a/rsconcept/frontend/src/pages/HomePage.tsx
+++ b/rsconcept/frontend/src/pages/HomePage.tsx
@@ -20,13 +20,7 @@ function HomePage() {
     }
   }, [router, user]);
 
-  return (
-    <div className='flex flex-col items-center justify-center px-4 py-2'>
-      {user?.is_staff ? (
-        <p>Лендинг находится в разработке. Данная страница видна только пользователям с правами администратора.</p>
-      ) : null}
-    </div>
-  );
+  return <div />;
 }
 
 export default HomePage;
diff --git a/rsconcept/frontend/src/pages/LibraryPage/LibraryPage.tsx b/rsconcept/frontend/src/pages/LibraryPage/LibraryPage.tsx
index 5773d896..2bc09bb7 100644
--- a/rsconcept/frontend/src/pages/LibraryPage/LibraryPage.tsx
+++ b/rsconcept/frontend/src/pages/LibraryPage/LibraryPage.tsx
@@ -2,6 +2,7 @@
 
 import { useCallback, useLayoutEffect, useState } from 'react';
 
+import AnimateFadeIn from '@/components/AnimateFadeIn';
 import InfoError from '@/components/InfoError';
 import { Loader } from '@/components/ui/Loader';
 import { useAuth } from '@/context/AuthContext';
@@ -68,7 +69,7 @@ function LibraryPage() {
       {library.loading ? <Loader /> : null}
       {library.error ? <InfoError error={library.error} /> : null}
       {!library.loading && library.items ? (
-        <>
+        <AnimateFadeIn>
           <SearchPanel
             query={query}
             setQuery={setQuery}
@@ -78,7 +79,7 @@ function LibraryPage() {
             setFilter={setFilter}
           />
           <ViewLibrary resetQuery={resetQuery} items={items} />
-        </>
+        </AnimateFadeIn>
       ) : null}
     </>
   );
diff --git a/rsconcept/frontend/src/pages/LibraryPage/ViewLibrary.tsx b/rsconcept/frontend/src/pages/LibraryPage/ViewLibrary.tsx
index b6854502..ae091989 100644
--- a/rsconcept/frontend/src/pages/LibraryPage/ViewLibrary.tsx
+++ b/rsconcept/frontend/src/pages/LibraryPage/ViewLibrary.tsx
@@ -6,6 +6,7 @@ import { useIntl } from 'react-intl';
 
 import DataTable, { createColumnHelper } from '@/components/DataTable';
 import HelpButton from '@/components/Help/HelpButton';
+import FlexColumn from '@/components/ui/FlexColumn';
 import TextURL from '@/components/ui/TextURL';
 import { useAuth } from '@/context/AuthContext';
 import { useConceptNavigation } from '@/context/NavigationContext';
@@ -95,7 +96,7 @@ function ViewLibrary({ items, resetQuery: cleanQuery }: ViewLibraryProps) {
             'flex gap-1'
           )}
         >
-          <HelpButton topic={HelpTopic.LIBRARY} className='max-w-[35rem]' offset={0} />
+          <HelpButton topic={HelpTopic.LIBRARY} className='max-w-[35rem]' offset={5} place='right-start' />
         </div>
       </div>
       <DataTable
@@ -103,13 +104,13 @@ function ViewLibrary({ items, resetQuery: cleanQuery }: ViewLibraryProps) {
         data={items}
         headPosition='2.3rem'
         noDataComponent={
-          <div className='p-3 text-center min-h-[6rem]'>
+          <FlexColumn className='p-3 items-center min-h-[6rem]'>
             <p>Список схем пуст</p>
-            <p className='flex justify-center gap-6 mt-3'>
+            <p className='flex gap-6'>
               <TextURL text='Создать схему' href='/library/create' />
               <TextURL text='Очистить фильтр' onClick={cleanQuery} />
             </p>
-          </div>
+          </FlexColumn>
         }
         onRowClicked={handleOpenItem}
         enableSorting
diff --git a/rsconcept/frontend/src/pages/LoginPage.tsx b/rsconcept/frontend/src/pages/LoginPage.tsx
index a30b506d..e3a44c76 100644
--- a/rsconcept/frontend/src/pages/LoginPage.tsx
+++ b/rsconcept/frontend/src/pages/LoginPage.tsx
@@ -4,6 +4,7 @@ import axios from 'axios';
 import clsx from 'clsx';
 import { useEffect, useState } from 'react';
 
+import AnimateFadeIn from '@/components/AnimateFadeIn';
 import ExpectedAnonymous from '@/components/ExpectedAnonymous';
 import InfoError, { ErrorData } from '@/components/InfoError';
 import SubmitButton from '@/components/ui/SubmitButton';
@@ -62,39 +63,41 @@ function LoginPage() {
     return <ExpectedAnonymous />;
   }
   return (
-    <form className={clsx('w-[24rem]', 'pt-12 pb-6 px-6', classnames.flex_col)} onSubmit={handleSubmit}>
-      <img alt='Концепт Портал' src={resources.logo} className='max-h-[2.5rem] min-w-[2.5rem] mb-3' />
-      <TextInput
-        id='username'
-        autoFocus
-        required
-        allowEnter
-        label='Имя пользователя'
-        value={username}
-        onChange={event => setUsername(event.target.value)}
-      />
-      <TextInput
-        id='password'
-        type='password'
-        required
-        allowEnter
-        label='Пароль'
-        value={password}
-        onChange={event => setPassword(event.target.value)}
-      />
+    <AnimateFadeIn>
+      <form className={clsx('w-[24rem]', 'pt-12 pb-6 px-6', classnames.flex_col)} onSubmit={handleSubmit}>
+        <img alt='Концепт Портал' src={resources.logo} className='max-h-[2.5rem] min-w-[2.5rem] mb-3' />
+        <TextInput
+          id='username'
+          autoFocus
+          required
+          allowEnter
+          label='Имя пользователя'
+          value={username}
+          onChange={event => setUsername(event.target.value)}
+        />
+        <TextInput
+          id='password'
+          type='password'
+          required
+          allowEnter
+          label='Пароль'
+          value={password}
+          onChange={event => setPassword(event.target.value)}
+        />
 
-      <SubmitButton
-        text='Войти'
-        className='self-center w-[12rem] mt-3'
-        loading={loading}
-        disabled={!username || !password}
-      />
-      <div className='flex flex-col text-sm'>
-        <TextURL text='Восстановить пароль...' href='/restore-password' />
-        <TextURL text='Нет аккаунта? Зарегистрируйтесь...' href='/signup' />
-      </div>
-      {error ? <ProcessError error={error} /> : null}
-    </form>
+        <SubmitButton
+          text='Войти'
+          className='self-center w-[12rem] mt-3'
+          loading={loading}
+          disabled={!username || !password}
+        />
+        <div className='flex flex-col text-sm'>
+          <TextURL text='Восстановить пароль...' href='/restore-password' />
+          <TextURL text='Нет аккаунта? Зарегистрируйтесь...' href='/signup' />
+        </div>
+        {error ? <ProcessError error={error} /> : null}
+      </form>
+    </AnimateFadeIn>
   );
 }
 
diff --git a/rsconcept/frontend/src/pages/ManualsPage/TopicsList.tsx b/rsconcept/frontend/src/pages/ManualsPage/TopicsList.tsx
index a83f11bd..207b8f21 100644
--- a/rsconcept/frontend/src/pages/ManualsPage/TopicsList.tsx
+++ b/rsconcept/frontend/src/pages/ManualsPage/TopicsList.tsx
@@ -14,7 +14,6 @@ function TopicsList({ activeTopic, onChangeTopic }: TopicsListProps) {
     <div
       className={clsx('sticky top-0 left-0', 'min-w-[13rem] self-start', 'border-x', 'clr-controls', '', 'select-none')}
     >
-      <h1 className='my-1'>Справка</h1>
       {Object.values(HelpTopic).map((topic, index) => (
         <div
           key={`${prefixes.topic_list}${index}`}
diff --git a/rsconcept/frontend/src/pages/ManualsPage/ViewTopic.tsx b/rsconcept/frontend/src/pages/ManualsPage/ViewTopic.tsx
index 047fa074..294bc429 100644
--- a/rsconcept/frontend/src/pages/ManualsPage/ViewTopic.tsx
+++ b/rsconcept/frontend/src/pages/ManualsPage/ViewTopic.tsx
@@ -1,4 +1,5 @@
-import InfoTopic from '@/components/Help/InfoTopic';
+import AnimateFadeIn from '@/components/AnimateFadeIn';
+import InfoTopic from '@/components/InfoTopic';
 import { HelpTopic } from '@/models/miscellaneous';
 
 interface ViewTopicProps {
@@ -7,9 +8,9 @@ interface ViewTopicProps {
 
 function ViewTopic({ topic }: ViewTopicProps) {
   return (
-    <div className='px-2 py-2 mx-auto'>
+    <AnimateFadeIn key={topic} className='px-2 py-2 mx-auto'>
       <InfoTopic topic={topic} />
-    </div>
+    </AnimateFadeIn>
   );
 }
 
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/ParsingResult.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/ParsingResult.tsx
index 7078b3a9..b960c09b 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/ParsingResult.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/ParsingResult.tsx
@@ -5,7 +5,7 @@ import { motion } from 'framer-motion';
 
 import { IExpressionParse, IRSErrorDescription } from '@/models/rslang';
 import { getRSErrorPrefix } from '@/models/rslangAPI';
-import { animateParseResults } from '@/utils/animations';
+import { animateParseResults } from '@/styling/animations';
 import { describeRSError } from '@/utils/labels';
 
 interface ParsingResultProps {
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSEditControls.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSEditControls.tsx
index 5bef2df5..662fa45c 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSEditControls.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSEditControls.tsx
@@ -1,7 +1,7 @@
 import { motion } from 'framer-motion';
 
 import { TokenID } from '@/models/rslang';
-import { animateRSControl } from '@/utils/animations';
+import { animateRSControl } from '@/styling/animations';
 import { prefixes } from '@/utils/constants';
 
 import RSLocalButton from './RSLocalButton';
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/StatusBar.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/StatusBar.tsx
index 4bd70cdf..2fb90bc8 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/StatusBar.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/StatusBar.tsx
@@ -9,7 +9,7 @@ import { ExpressionStatus } from '@/models/rsform';
 import { type IConstituenta } from '@/models/rsform';
 import { inferStatus } from '@/models/rsformAPI';
 import { IExpressionParse, ParsingStatus } from '@/models/rslang';
-import { colorBgCstStatus } from '@/utils/color';
+import { colorBgCstStatus } from '@/styling/color';
 import { globalIDs } from '@/utils/constants';
 import { labelExpressionStatus } from '@/utils/labels';
 
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/EditorRSList.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/EditorRSList.tsx
index 240cc91f..322d5dc0 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/EditorRSList.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/EditorRSList.tsx
@@ -195,6 +195,12 @@ function EditorRSList({ isMutable, onOpenEdit, onCreateCst, onDeleteCst }: Edito
 
   return (
     <div tabIndex={-1} className='outline-none' onKeyDown={handleTableKey}>
+      <SelectedCounter
+        total={schema?.stats?.count_all ?? 0}
+        selected={selected.length}
+        position='top-[0.3rem] left-2'
+      />
+
       <RSListToolbar
         selectedCount={selected.length}
         isMutable={isMutable}
@@ -204,7 +210,6 @@ function EditorRSList({ isMutable, onOpenEdit, onCreateCst, onDeleteCst }: Edito
         onCreate={handleCreateCst}
         onDelete={handleDelete}
       />
-      <SelectedCounter total={schema?.stats?.count_all ?? 0} selected={selected.length} position='left-1 top-2' />
 
       <div className='pt-[2.3rem] border-b' />
 
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/RSTable.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/RSTable.tsx
index e2f04687..9e404025 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/RSTable.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/RSTable.tsx
@@ -5,6 +5,7 @@ import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
 
 import ConstituentaBadge from '@/components/ConstituentaBadge';
 import DataTable, { createColumnHelper, RowSelectionState, VisibilityState } from '@/components/DataTable';
+import FlexColumn from '@/components/ui/FlexColumn';
 import { useConceptTheme } from '@/context/ThemeContext';
 import useWindowSize from '@/hooks/useWindowSize';
 import { IConstituenta } from '@/models/rsform';
@@ -135,12 +136,12 @@ function RSTable({ items, selected, setSelected, onEdit, onCreateNew }: RSTableP
       rowSelection={selected}
       onRowSelectionChange={setSelected}
       noDataComponent={
-        <span className='flex flex-col justify-center p-2 text-center'>
+        <FlexColumn className='p-3 items-center'>
           <p>Список пуст</p>
           <p className='cursor-pointer clr-text-primary hover:underline' onClick={() => onCreateNew()}>
             Создать новую конституенту
           </p>
-        </span>
+        </FlexColumn>
       }
     />
   );
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/EditorTermGraph.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/EditorTermGraph.tsx
index fe34fd40..273c15cf 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/EditorTermGraph.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/EditorTermGraph.tsx
@@ -14,7 +14,7 @@ import DlgGraphParams from '@/dialogs/DlgGraphParams';
 import useLocalStorage from '@/hooks/useLocalStorage';
 import { GraphColoringScheme, GraphFilterParams } from '@/models/miscellaneous';
 import { CstType, ICstCreateData } from '@/models/rsform';
-import { colorBgGraphNode } from '@/utils/color';
+import { colorBgGraphNode } from '@/styling/color';
 import { classnames, TIMEOUT_GRAPH_REFRESH } from '@/utils/constants';
 
 import GraphSidebar from './GraphSidebar';
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/TermGraph.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/TermGraph.tsx
index c6221b99..b75bc93a 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/TermGraph.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/TermGraph.tsx
@@ -4,7 +4,7 @@ import { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
 
 import GraphUI, { GraphCanvasRef, GraphEdge, GraphNode, LayoutTypes, Sphere, useSelection } from '@/components/GraphUI';
 import { useConceptTheme } from '@/context/ThemeContext';
-import { graphDarkT, graphLightT } from '@/utils/color';
+import { graphDarkT, graphLightT } from '@/styling/color';
 import { resources } from '@/utils/constants';
 
 interface TermGraphProps {
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx
index 92ca8735..e972dd43 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx
@@ -2,11 +2,11 @@
 
 import { useCallback, useMemo } from 'react';
 
-import ConstituentaTooltip from '@/components/Help/ConstituentaTooltip';
+import ConstituentaTooltip from '@/components/ConstituentaTooltip';
 import { useConceptTheme } from '@/context/ThemeContext';
 import { GraphColoringScheme } from '@/models/miscellaneous';
 import { IRSForm } from '@/models/rsform';
-import { colorBgGraphNode } from '@/utils/color';
+import { colorBgGraphNode } from '@/styling/color';
 import { prefixes } from '@/utils/constants';
 
 interface ViewHiddenProps {
diff --git a/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx b/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
index a8653e66..df773cca 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
@@ -8,6 +8,7 @@ import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
 import { TabList, TabPanel, Tabs } from 'react-tabs';
 import { toast } from 'react-toastify';
 
+import AnimateFadeIn from '@/components/AnimateFadeIn';
 import InfoError, { ErrorData } from '@/components/InfoError';
 import { Loader } from '@/components/ui/Loader';
 import TabLabel from '@/components/ui/TabLabel';
@@ -434,51 +435,53 @@ function RSTabs() {
             <TabLabel label='Граф термов' />
           </TabList>
 
-          <TabPanel forceRender style={{ display: activeTab === RSTabID.CARD ? '' : 'none' }}>
-            <EditorRSForm
-              isMutable={isMutable}
-              isModified={isModified}
-              setIsModified={setIsModified}
-              onToggleSubscribe={handleToggleSubscribe}
-              onDownload={onDownloadSchema}
-              onDestroy={onDestroySchema}
-              onClaim={onClaimSchema}
-              onShare={onShareSchema}
-            />
-          </TabPanel>
+          <AnimateFadeIn>
+            <TabPanel forceRender style={{ display: activeTab === RSTabID.CARD ? '' : 'none' }}>
+              <EditorRSForm
+                isMutable={isMutable}
+                isModified={isModified}
+                setIsModified={setIsModified}
+                onToggleSubscribe={handleToggleSubscribe}
+                onDownload={onDownloadSchema}
+                onDestroy={onDestroySchema}
+                onClaim={onClaimSchema}
+                onShare={onShareSchema}
+              />
+            </TabPanel>
 
-          <TabPanel forceRender style={{ display: activeTab === RSTabID.CST_LIST ? '' : 'none' }}>
-            <EditorRSList
-              isMutable={isMutable}
-              onOpenEdit={onOpenCst}
-              onCreateCst={promptCreateCst}
-              onDeleteCst={promptDeleteCst}
-            />
-          </TabPanel>
+            <TabPanel forceRender style={{ display: activeTab === RSTabID.CST_LIST ? '' : 'none' }}>
+              <EditorRSList
+                isMutable={isMutable}
+                onOpenEdit={onOpenCst}
+                onCreateCst={promptCreateCst}
+                onDeleteCst={promptDeleteCst}
+              />
+            </TabPanel>
 
-          <TabPanel forceRender style={{ display: activeTab === RSTabID.CST_EDIT ? '' : 'none' }}>
-            <EditorConstituenta
-              isMutable={isMutable}
-              isModified={isModified}
-              setIsModified={setIsModified}
-              activeID={activeID}
-              activeCst={activeCst}
-              onOpenEdit={onOpenCst}
-              onCreateCst={promptCreateCst}
-              onDeleteCst={promptDeleteCst}
-              onRenameCst={promptRenameCst}
-              onEditTerm={promptShowEditTerm}
-            />
-          </TabPanel>
+            <TabPanel forceRender style={{ display: activeTab === RSTabID.CST_EDIT ? '' : 'none' }}>
+              <EditorConstituenta
+                isMutable={isMutable}
+                isModified={isModified}
+                setIsModified={setIsModified}
+                activeID={activeID}
+                activeCst={activeCst}
+                onOpenEdit={onOpenCst}
+                onCreateCst={promptCreateCst}
+                onDeleteCst={promptDeleteCst}
+                onRenameCst={promptRenameCst}
+                onEditTerm={promptShowEditTerm}
+              />
+            </TabPanel>
 
-          <TabPanel style={{ display: activeTab === RSTabID.TERM_GRAPH ? '' : 'none' }}>
-            <EditorTermGraph
-              isMutable={isMutable}
-              onOpenEdit={onOpenCst}
-              onCreateCst={promptCreateCst}
-              onDeleteCst={promptDeleteCst}
-            />
-          </TabPanel>
+            <TabPanel style={{ display: activeTab === RSTabID.TERM_GRAPH ? '' : 'none' }}>
+              <EditorTermGraph
+                isMutable={isMutable}
+                onOpenEdit={onOpenCst}
+                onCreateCst={promptCreateCst}
+                onDeleteCst={promptDeleteCst}
+              />
+            </TabPanel>
+          </AnimateFadeIn>
         </Tabs>
       ) : null}
     </>
diff --git a/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ConstituentsTable.tsx b/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ConstituentsTable.tsx
index e3fd7599..dce9dc30 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ConstituentsTable.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ConstituentsTable.tsx
@@ -125,7 +125,7 @@ function ConstituentsTable({ items, activeID, onOpenEdit, maxHeight, denseThresh
       columnVisibility={columnVisibility}
       onColumnVisibilityChange={setColumnVisibility}
       noDataComponent={
-        <div className={clsx('min-h-[5rem]', 'p-2', 'text-center', 'select-none')}>
+        <div className={clsx('min-h-[5rem]', 'p-3', 'text-center', 'select-none')}>
           <p>Список конституент пуст</p>
           <p>Измените параметры фильтра</p>
         </div>
diff --git a/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ViewConstituents.tsx b/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ViewConstituents.tsx
index 9357360a..67e6a529 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ViewConstituents.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ViewConstituents.tsx
@@ -5,7 +5,7 @@ import { useMemo, useState } from 'react';
 
 import { useConceptTheme } from '@/context/ThemeContext';
 import { IConstituenta, IRSForm } from '@/models/rsform';
-import { animateSideView } from '@/utils/animations';
+import { animateSideView } from '@/styling/animations';
 
 import ConstituentsSearch from './ConstituentsSearch';
 import ConstituentsTable from './ConstituentsTable';
diff --git a/rsconcept/frontend/src/pages/RegisterPage.tsx b/rsconcept/frontend/src/pages/RegisterPage.tsx
index a8823d66..fe2a2fa6 100644
--- a/rsconcept/frontend/src/pages/RegisterPage.tsx
+++ b/rsconcept/frontend/src/pages/RegisterPage.tsx
@@ -5,6 +5,7 @@ import { useEffect, useState } from 'react';
 import { BiInfoCircle } from 'react-icons/bi';
 import { toast } from 'react-toastify';
 
+import AnimateFadeIn from '@/components/AnimateFadeIn';
 import ExpectedAnonymous from '@/components/ExpectedAnonymous';
 import InfoError from '@/components/InfoError';
 import Button from '@/components/ui/Button';
@@ -67,85 +68,87 @@ function RegisterPage() {
     return <ExpectedAnonymous />;
   }
   return (
-    <form className={clsx('px-6 py-3', classnames.flex_col)} onSubmit={handleSubmit}>
-      <h1>Новый пользователь</h1>
-      <div className='flex gap-12'>
-        <FlexColumn>
-          <div className='absolute'>
-            <Overlay id={globalIDs.password_tooltip} position='top-[4.8rem] left-[3.4rem] absolute'>
-              <BiInfoCircle size='1.25rem' className='clr-text-primary' />
-            </Overlay>
-            <Tooltip anchorSelect={`#${globalIDs.password_tooltip}`} offset={6}>
-              <p>- используйте уникальный пароль</p>
-              <p>- портал функционирует в тестовом режиме</p>
-            </Tooltip>
-          </div>
+    <AnimateFadeIn>
+      <form className={clsx('px-6 py-3', classnames.flex_col)} onSubmit={handleSubmit}>
+        <h1>Новый пользователь</h1>
+        <div className='flex gap-12'>
+          <FlexColumn>
+            <div className='absolute'>
+              <Overlay id={globalIDs.password_tooltip} position='top-[4.8rem] left-[3.4rem] absolute'>
+                <BiInfoCircle size='1.25rem' className='clr-text-primary' />
+              </Overlay>
+              <Tooltip anchorSelect={`#${globalIDs.password_tooltip}`} offset={6}>
+                <p>- используйте уникальный пароль</p>
+                <p>- портал функционирует в тестовом режиме</p>
+              </Tooltip>
+            </div>
 
-          <TextInput
-            id='username'
-            required
-            label='Имя пользователя (логин)'
-            pattern={patterns.login}
-            title='Минимум 3 знака. Латинские буквы и цифры. Не может начинаться с цифры'
-            value={username}
-            className='w-[15rem]'
-            onChange={event => setUsername(event.target.value)}
-          />
-          <TextInput
-            id='password'
-            type='password'
-            required
-            label='Пароль'
-            className='w-[15rem]'
-            value={password}
-            onChange={event => setPassword(event.target.value)}
-          />
-          <TextInput
-            id='password2'
-            required
-            type='password'
-            label='Повторите пароль'
-            className='w-[15rem]'
-            value={password2}
-            onChange={event => setPassword2(event.target.value)}
-          />
-        </FlexColumn>
+            <TextInput
+              id='username'
+              required
+              label='Имя пользователя (логин)'
+              pattern={patterns.login}
+              title='Минимум 3 знака. Латинские буквы и цифры. Не может начинаться с цифры'
+              value={username}
+              className='w-[15rem]'
+              onChange={event => setUsername(event.target.value)}
+            />
+            <TextInput
+              id='password'
+              type='password'
+              required
+              label='Пароль'
+              className='w-[15rem]'
+              value={password}
+              onChange={event => setPassword(event.target.value)}
+            />
+            <TextInput
+              id='password2'
+              required
+              type='password'
+              label='Повторите пароль'
+              className='w-[15rem]'
+              value={password2}
+              onChange={event => setPassword2(event.target.value)}
+            />
+          </FlexColumn>
 
-        <FlexColumn className='w-[15rem]'>
-          <TextInput
-            id='email'
-            required
-            label='Электронная почта (email)'
-            title='электронная почта в корректном формате, например: i.petrov@mycompany.ru.com'
-            value={email}
-            onChange={event => setEmail(event.target.value)}
-          />
-          <TextInput
-            id='first_name'
-            label='Отображаемое имя'
-            value={firstName}
-            onChange={event => setFirstName(event.target.value)}
-          />
-          <TextInput
-            id='last_name'
-            label='Отображаемая фамилия'
-            value={lastName}
-            onChange={event => setLastName(event.target.value)}
-          />
-        </FlexColumn>
-      </div>
+          <FlexColumn className='w-[15rem]'>
+            <TextInput
+              id='email'
+              required
+              label='Электронная почта (email)'
+              title='электронная почта в корректном формате, например: i.petrov@mycompany.ru.com'
+              value={email}
+              onChange={event => setEmail(event.target.value)}
+            />
+            <TextInput
+              id='first_name'
+              label='Отображаемое имя'
+              value={firstName}
+              onChange={event => setFirstName(event.target.value)}
+            />
+            <TextInput
+              id='last_name'
+              label='Отображаемая фамилия'
+              value={lastName}
+              onChange={event => setLastName(event.target.value)}
+            />
+          </FlexColumn>
+        </div>
 
-      <div className='flex gap-1 text-sm'>
-        <Checkbox label='Принимаю условия' value={acceptPrivacy} setValue={setAcceptPrivacy} />
-        <TextURL text='обработки персональных данных...' href={'/manuals?topic=privacy'} />
-      </div>
+        <div className='flex gap-1 text-sm'>
+          <Checkbox label='Принимаю условия' value={acceptPrivacy} setValue={setAcceptPrivacy} />
+          <TextURL text='обработки персональных данных...' href={'/manuals?topic=privacy'} />
+        </div>
 
-      <div className='flex justify-around my-3'>
-        <SubmitButton text='Регистрировать' className='min-w-[10rem]' loading={loading} disabled={!acceptPrivacy} />
-        <Button text='Назад' className='min-w-[10rem]' onClick={() => handleCancel()} />
-      </div>
-      {error ? <InfoError error={error} /> : null}
-    </form>
+        <div className='flex justify-around my-3'>
+          <SubmitButton text='Регистрировать' className='min-w-[10rem]' loading={loading} disabled={!acceptPrivacy} />
+          <Button text='Назад' className='min-w-[10rem]' onClick={() => handleCancel()} />
+        </div>
+        {error ? <InfoError error={error} /> : null}
+      </form>
+    </AnimateFadeIn>
   );
 }
 
diff --git a/rsconcept/frontend/src/pages/RestorePasswordPage.tsx b/rsconcept/frontend/src/pages/RestorePasswordPage.tsx
index 67480f66..e5da9dba 100644
--- a/rsconcept/frontend/src/pages/RestorePasswordPage.tsx
+++ b/rsconcept/frontend/src/pages/RestorePasswordPage.tsx
@@ -1,14 +1,15 @@
+import AnimateFadeIn from '@/components/AnimateFadeIn';
 import TextURL from '@/components/ui/TextURL';
 import { urls } from '@/utils/constants';
 
 function RestorePasswordPage() {
   return (
-    <div className='py-3'>
+    <AnimateFadeIn className='py-3'>
       <p>Автоматическое восстановление пароля не доступно.</p>
       <p>
         Возможно восстановление пароля через обращение на <TextURL href={urls.mail_portal} text='portal@acconcept.ru' />
       </p>
-    </div>
+    </AnimateFadeIn>
   );
 }
 
diff --git a/rsconcept/frontend/src/pages/UserProfilePage/UserTabs.tsx b/rsconcept/frontend/src/pages/UserProfilePage/UserTabs.tsx
index c5aa4606..895f7302 100644
--- a/rsconcept/frontend/src/pages/UserProfilePage/UserTabs.tsx
+++ b/rsconcept/frontend/src/pages/UserProfilePage/UserTabs.tsx
@@ -4,6 +4,7 @@ import { AnimatePresence } from 'framer-motion';
 import { useMemo, useState } from 'react';
 import { FiBell, FiBellOff } from 'react-icons/fi';
 
+import AnimateFadeIn from '@/components/AnimateFadeIn';
 import InfoError from '@/components/InfoError';
 import { Loader } from '@/components/ui/Loader';
 import MiniButton from '@/components/ui/MiniButton';
@@ -32,7 +33,7 @@ function UserTabs() {
       {loading ? <Loader /> : null}
       {error ? <InfoError error={error} /> : null}
       {user ? (
-        <div className='flex gap-6 py-2'>
+        <AnimateFadeIn className='flex gap-6 py-2'>
           <div>
             <Overlay position='top-0 right-0'>
               <MiniButton
@@ -56,7 +57,7 @@ function UserTabs() {
           <AnimatePresence>
             {subscriptions.length > 0 && showSubs ? <ViewSubscriptions items={subscriptions} /> : null}
           </AnimatePresence>
-        </div>
+        </AnimateFadeIn>
       ) : null}
     </>
   );
diff --git a/rsconcept/frontend/src/pages/UserProfilePage/ViewSubscriptions.tsx b/rsconcept/frontend/src/pages/UserProfilePage/ViewSubscriptions.tsx
index b67b1a6d..379d5de8 100644
--- a/rsconcept/frontend/src/pages/UserProfilePage/ViewSubscriptions.tsx
+++ b/rsconcept/frontend/src/pages/UserProfilePage/ViewSubscriptions.tsx
@@ -7,7 +7,7 @@ import { useIntl } from 'react-intl';
 import DataTable, { createColumnHelper } from '@/components/DataTable';
 import { useConceptNavigation } from '@/context/NavigationContext';
 import { ILibraryItem } from '@/models/library';
-import { animateSideView } from '@/utils/animations';
+import { animateSideView } from '@/styling/animations';
 
 interface ViewSubscriptionsProps {
   items: ILibraryItem[];
diff --git a/rsconcept/frontend/src/utils/animations.ts b/rsconcept/frontend/src/styling/animations.ts
similarity index 91%
rename from rsconcept/frontend/src/utils/animations.ts
rename to rsconcept/frontend/src/styling/animations.ts
index 60a7733b..a9b8a3ff 100644
--- a/rsconcept/frontend/src/utils/animations.ts
+++ b/rsconcept/frontend/src/styling/animations.ts
@@ -190,3 +190,25 @@ export const animateModal = {
     }
   }
 };
+
+export const animateFadeIn = {
+  initial: {
+    opacity: 0
+  },
+  animate: {
+    opacity: 1,
+    transition: {
+      type: 'tween',
+      ease: 'linear',
+      duration: 0.3
+    }
+  },
+  exit: {
+    opacity: 0,
+    transition: {
+      type: 'tween',
+      ease: 'linear',
+      duration: 2
+    }
+  }
+};
diff --git a/rsconcept/frontend/src/utils/color.ts b/rsconcept/frontend/src/styling/color.ts
similarity index 100%
rename from rsconcept/frontend/src/utils/color.ts
rename to rsconcept/frontend/src/styling/color.ts
diff --git a/rsconcept/frontend/src/styling/constants.css b/rsconcept/frontend/src/styling/constants.css
new file mode 100644
index 00000000..f48dbb55
--- /dev/null
+++ b/rsconcept/frontend/src/styling/constants.css
@@ -0,0 +1,54 @@
+/**
+ * Module: Define CSS variables.
+ */
+
+/* prettier-ignore */
+:root {
+  --font-ui:  'Geologica', sans-serif;
+  --font-main: 'Rubik', 'Noto Sans Math', 'Noto Sans Symbols 2', 'Segoe UI Symbol', sans-serif;
+  --font-math: 'Noto Sans Math', 'Noto Sans Symbols 2', 'Segoe UI Symbol', sans-serif;
+
+  /* Light Theme */
+  --cl-bg-120:      hsl(000, 000%, 100%);
+  --cl-bg-100:      hsl(000, 000%, 098%);
+  --cl-bg-80:       hsl(000, 000%, 094%);
+  --cl-bg-60:       hsl(000, 000%, 091%);
+  --cl-bg-40:       hsl(000, 000%, 080%);
+
+  --cl-fg-60:       hsl(000, 000%, 065%);
+  --cl-fg-80:       hsl(000, 000%, 047%);
+  --cl-fg-100:      hsl(000, 000%, 000%);
+
+  --cl-prim-bg-100: hsl(220, 100%, 060%);
+  --cl-prim-bg-80:  hsl(220, 080%, 092%);
+  --cl-prim-bg-60:  hsl(190, 080%, 094%);
+
+  --cl-prim-fg-80:  hsl(220, 100%, 050%);
+  --cl-prim-fg-100: hsl(000, 000%, 100%);
+
+  --cl-red-bg-100:  hsl(000, 100%, 095%);
+  --cl-red-fg-100:  hsl(000, 072%, 051%);
+  --cl-green-fg-100: hsl(120, 080%, 37%);
+
+  /* Dark Theme */
+  --cd-bg-120:      hsl(000, 000%, 005%);
+  --cd-bg-100:      hsl(000, 000%, 009%);
+  --cd-bg-80:       hsl(000, 000%, 015%);
+  --cd-bg-60:       hsl(000, 000%, 022%);
+  --cd-bg-40:       hsl(000, 000%, 035%);
+
+  --cd-fg-60:       hsl(000, 000%, 055%);
+  --cd-fg-80:       hsl(000, 000%, 080%);
+  --cd-fg-100:      hsl(000, 000%, 093%);
+
+  --cd-prim-bg-100: hsl(267, 050%, 050%);
+  --cd-prim-bg-80: hsl(267, 050%, 032%);
+  --cd-prim-bg-60: hsl(269, 030%, 028%);
+
+  --cd-prim-fg-80: hsl(267, 070%, 070%);
+  --cd-prim-fg-100: hsl(000, 000%, 100%);
+
+  --cd-red-bg-100: hsl(000, 100%, 015%);
+  --cd-red-fg-100: hsl(000, 080%, 055%);
+  --cd-green-fg-100: hsl(120, 080%, 042%);
+}
diff --git a/rsconcept/frontend/src/styling/imports.css b/rsconcept/frontend/src/styling/imports.css
new file mode 100644
index 00000000..89dda133
--- /dev/null
+++ b/rsconcept/frontend/src/styling/imports.css
@@ -0,0 +1,5 @@
+/**
+ * Module: List external styling imports.
+ */
+
+@import 'react-toastify/dist/ReactToastify.css';
diff --git a/rsconcept/frontend/src/styling/layers.css b/rsconcept/frontend/src/styling/layers.css
new file mode 100644
index 00000000..fc196385
--- /dev/null
+++ b/rsconcept/frontend/src/styling/layers.css
@@ -0,0 +1,40 @@
+/* Depth layers */
+.z-bottom {
+  z-index: 0;
+}
+
+.z-pop {
+  z-index: 10;
+}
+
+:is(.z-sticky, .sticky) {
+  z-index: 20;
+}
+
+.z-tooltip {
+  z-index: 30;
+}
+
+.z-navigation {
+  z-index: 50;
+}
+
+.z-modal {
+  z-index: 60;
+}
+
+.z-modal-controls {
+  z-index: 70;
+}
+
+.z-modal-top {
+  z-index: 80;
+}
+
+.z-modal-tooltip {
+  z-index: 90;
+}
+
+.z-topmost {
+  z-index: 99;
+}
diff --git a/rsconcept/frontend/src/styling/overrides.css b/rsconcept/frontend/src/styling/overrides.css
new file mode 100644
index 00000000..ee03cdfe
--- /dev/null
+++ b/rsconcept/frontend/src/styling/overrides.css
@@ -0,0 +1,38 @@
+/**
+ * Module: Override imported components CSS styling.
+ */
+
+:root {
+  /* Import overrides */
+  --toastify-color-dark: var(--cd-bg-60);
+}
+
+.cm-editor {
+  resize: vertical;
+  overflow-y: auto;
+  border-color: var(--cl-bg-40);
+  .dark & {
+    border-color: var(--cd-bg-40);
+  }
+  @apply border rounded px-[0.375rem] py-[0.15rem];
+}
+.cm-editor.cm-focused {
+  border-color: var(--cl-bg-40);
+  outline-color: var(--cl-prim-bg-100);
+  .dark & {
+    border-color: var(--cd-bg-40);
+    outline-color: var(--cd-prim-bg-100);
+  }
+  @apply outline-2 outline;
+}
+
+.cm-editor .cm-placeholder {
+  color: var(--cl-fg-60);
+  .dark & {
+    color: var(--cd-fg-60);
+  }
+}
+
+.rdt_TableCell {
+  font-size: 0.875rem;
+}
diff --git a/rsconcept/frontend/src/styling/setup.css b/rsconcept/frontend/src/styling/setup.css
new file mode 100644
index 00000000..3fdef0ef
--- /dev/null
+++ b/rsconcept/frontend/src/styling/setup.css
@@ -0,0 +1,113 @@
+/**
+ * Module: Basic styling setup.
+ */
+
+@import './constants.css';
+@import './layers.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html {
+  hanging-punctuation: first last;
+  color-scheme: dark light;
+}
+
+[data-color-scheme='dark'] {
+  color-scheme: dark;
+}
+
+[data-color-scheme='light'] {
+  color-scheme: light;
+}
+
+/* Default scroll behavior */
+@media (prefers-reduced-motion: no-preference) {
+  :has(:target) {
+    scroll-behavior: smooth;
+    scroll-padding-top: 3rem;
+  }
+}
+
+:root {
+  font-family: var(--font-main);
+
+  color: var(--cl-fg-100);
+  border-color: var(--cl-bg-40);
+  background-color: var(--cl-bg-100);
+
+  &.dark {
+    color: var(--cd-fg-100);
+    border-color: var(--cd-bg-40);
+    background-color: var(--cd-bg-100);
+  }
+}
+
+:focus {
+  outline-width: 2px;
+  outline-style: solid;
+  outline-color: transparent;
+  .dark & {
+    outline-color: transparent;
+  }
+}
+
+::selection {
+  background: var(--cl-prim-bg-60);
+  .dark & {
+    background: var(--cd-prim-bg-60);
+  }
+  tr :hover& {
+    background: var(--cl-red-bg-100);
+    .dark & {
+      background: var(--cd-red-bg-100);
+    }
+  }
+}
+
+::placeholder {
+  color: var(--cl-fg-60);
+  .dark & {
+    color: var(--cd-fg-60);
+  }
+}
+
+/* Wrapping headers */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  text-wrap: balance;
+}
+
+/* Limit text lines and setup wrapping */
+p,
+li {
+  max-width: 90ch;
+  text-wrap: pretty;
+}
+
+@layer components {
+  h1 {
+    @apply text-lg font-semibold text-center;
+  }
+
+  h2 {
+    @apply font-semibold text-center;
+  }
+
+  b {
+    @apply font-semibold;
+  }
+
+  .border {
+    @apply rounded;
+  }
+
+  .shadow-border {
+    @apply shadow-sm shadow-[var(--cl-bg-40)] dark:shadow-[var(--cd-bg-40)];
+  }
+}
diff --git a/rsconcept/frontend/src/styling/styles.css b/rsconcept/frontend/src/styling/styles.css
new file mode 100644
index 00000000..0c76b4f0
--- /dev/null
+++ b/rsconcept/frontend/src/styling/styles.css
@@ -0,0 +1,177 @@
+/**
+ * Module: Custom styling.
+ */
+@import './constants.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+  .font-controls {
+    font-family: var(--font-ui);
+    font-weight: 600;
+    font-variant: small-caps;
+  }
+  .font-math {
+    font-family: var(--font-math);
+  }
+}
+
+@layer components {
+  .clr-modal-backdrop {
+    opacity: 0.75;
+  }
+
+  :is(
+      .clr-border,
+      .border,
+      .border-x,
+      .border-y,
+      .border-b,
+      .border-t,
+      .border-l,
+      .border-r,
+      .border-2,
+      .border-x-2,
+      .border-y-2,
+      .border-b-2,
+      .border-t-2,
+      .border-l-2,
+      .border-r-2,
+      .divide-x,
+      .divide-y,
+      .divide-x-2,
+      .divide-y-2
+    ) {
+    border-color: var(--cl-bg-40);
+    @apply divide-inherit;
+    .dark & {
+      border-color: var(--cd-bg-40);
+    }
+  }
+
+  :is(.clr-app, .clr-footer, .clr-modal-backdrop, .clr-btn-nav, .clr-input:disabled) {
+    background-color: var(--cl-bg-100);
+    .dark & {
+      background-color: var(--cd-bg-100);
+    }
+  }
+
+  :is(.clr-input) {
+    background-color: var(--cl-bg-120);
+    .dark & {
+      background-color: var(--cd-bg-120);
+    }
+  }
+
+  :is(.clr-controls, .clr-tab, .clr-btn-default) {
+    background-color: var(--cl-bg-80);
+    .dark & {
+      background-color: var(--cd-bg-80);
+    }
+  }
+
+  :is(.clr-primary, .clr-btn-primary:hover, .clr-btn-primary:focus) {
+    @apply transition;
+    color: var(--cl-prim-fg-100);
+    background-color: var(--cl-prim-bg-100);
+    .dark & {
+      color: var(--cd-prim-fg-100);
+      background-color: var(--cd-prim-bg-100);
+    }
+  }
+
+  :is(.clr-selected, .clr-btn-primary) {
+    color: var(--cl-fg-100);
+    background-color: var(--cl-prim-bg-80);
+    .dark & {
+      color: var(--cd-fg-100);
+      background-color: var(--cd-prim-bg-80);
+    }
+  }
+
+  :is(.clr-disabled, .clr-btn-default, .clr-btn-primary):disabled {
+    @apply transition;
+    color: var(--cl-fg-80);
+    background-color: var(--cl-bg-60);
+    .dark & {
+      color: var(--cd-fg-80);
+      background-color: var(--cd-bg-60);
+    }
+  }
+
+  :is(.clr-hover, .clr-tab, .clr-btn-nav, .clr-btn-default):hover:not(:disabled) {
+    @apply transition;
+    color: var(--cl-fg-100);
+    background-color: var(--cl-prim-bg-60);
+    .dark & {
+      color: var(--cd-fg-100);
+      background-color: var(--cd-prim-bg-60);
+    }
+  }
+
+  :is(.clr-outline, .clr-btn-primary):focus {
+    outline-width: 2px;
+    outline-style: solid;
+    outline-color: var(--cl-prim-bg-100);
+    .dark & {
+      outline-color: var(--cd-prim-bg-100);
+    }
+  }
+
+  :is(.clr-text-primary, .clr-text-url) {
+    color: var(--cl-prim-fg-80);
+    .dark & {
+      color: var(--cd-prim-fg-80);
+    }
+  }
+
+  .clr-footer {
+    color: var(--cl-fg-60);
+    .dark & {
+      color: var(--cd-fg-60);
+    }
+  }
+
+  :is(.clr-text-controls, .clr-btn-nav, .clr-btn-clear) {
+    color: var(--cl-fg-80);
+    &:disabled {
+      color: var(--cl-fg-60);
+    }
+    .dark & {
+      color: var(--cd-fg-80);
+      &:disabled {
+        color: var(--cd-fg-60);
+      }
+    }
+  }
+
+  .clr-warning {
+    background-color: var(--cl-red-bg-100);
+    .dark & {
+      background-color: var(--cd-red-bg-100);
+    }
+  }
+
+  .clr-text-default {
+    color: var(--cl-fg-100);
+    .dark & {
+      color: var(--cd-fg-100);
+    }
+  }
+
+  .clr-text-warning {
+    color: var(--cl-red-fg-100);
+    .dark & {
+      color: var(--cd-red-fg-100);
+    }
+  }
+
+  .clr-text-success {
+    color: var(--cl-green-fg-100);
+    .dark & {
+      color: var(--cd-green-fg-100);
+    }
+  }
+}
diff --git a/rsconcept/frontend/src/utils/codemirror.ts b/rsconcept/frontend/src/utils/codemirror.ts
index b5efea7e..f3e7878d 100644
--- a/rsconcept/frontend/src/utils/codemirror.ts
+++ b/rsconcept/frontend/src/utils/codemirror.ts
@@ -10,7 +10,7 @@ import { IEntityReference, ISyntacticReference } from '@/models/language';
 import { parseGrammemes } from '@/models/languageAPI';
 import { IConstituenta } from '@/models/rsform';
 
-import { colorFgGrammeme, IColorTheme } from './color';
+import { colorFgGrammeme, IColorTheme } from '../styling/color';
 import { describeConstituentaTerm, labelCstTypification, labelGrammeme } from './labels';
 
 /**