frontend/src/styles/design-tokens.scss

@@ -106,19 +106,18 @@ $sp-7: 28px; $sp-8: 32px;
 }
 
 // ---- Готовые миксины ----
+// Светлая карточка заголовка страницы — сознательно НЕ грд-header (тёмный,
+// как TopNav): два одинаковых тёмно-синих блока подряд читаются как один
+// тяжёлый слипшийся элемент. Золотая полоса сверху — единственный акцент,
+// вместо заливки всей карточки.
 @mixin page-header {
-  background: $grad-header;
+  background: #fff;
+  border: 1px solid $gray-200;
+  border-top: 3px solid $gold-500;
   border-radius: $r-lg;
   padding: 26px 30px;
   position: relative;
   overflow: hidden;
-  &::before {
-    content: '';
-    position: absolute;
-    left: 0; right: 0; bottom: 0;
-    height: 2px;
-    background: linear-gradient(90deg, $gold-500, transparent 60%);
-  }
 }
 
 @mixin card-hover-gold {

frontend/src/webparts/approvalAdmin/components/app/TopNav.module.scss

@@ -23,20 +23,6 @@
   flex-shrink: 0;
 }
 
-.mark {
-  width: 30px;
-  height: 30px;
-  border-radius: 7px;
-  background: $grad-gold-v;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: $navy-950;
-  font-weight: 800;
-  font-size: 13px;
-  font-family: $font-serif;
-}
-
 .brandText {
   color: #fff;
   font-weight: 600;

frontend/src/webparts/approvalAdmin/components/app/TopNav.tsx

@@ -72,7 +72,6 @@ export const TopNav: React.FC<ITopNavProps> = ({ active, onSelect }) => {
   return (
     <nav className={styles.topnav}>
       <div className={styles.brand}>
-        <div className={styles.mark}>{texts.nav.markLetter}</div>
         <div className={styles.brandText}>{texts.nav.title}</div>
       </div>
       <div className={styles.tabs} ref={tabsRef}>

frontend/src/webparts/approvalAdmin/components/screens/RouteStepsScreen.tsx

@@ -110,7 +110,7 @@ export const RouteStepsScreen: React.FC<IRouteStepsScreenProps> = ({ api, route,
             key: 'status',
             header: texts.routeSteps.columnStatus,
             render: r => (
-              <Badge variant={r.status === RouteStepStatus.Approval ? 'gold' : 'blue'}>
+              <Badge variant={r.status === RouteStepStatus.Approval ? 'neutral' : 'blue'}>
                 {routeStepStatusLabels[r.status]}
               </Badge>
             )

frontend/src/webparts/approvalAdmin/components/ui/PageChrome.module.scss

@@ -29,21 +29,10 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  box-shadow: $sh-2;
+  box-shadow: $sh-1;
   margin-bottom: 24px;
   flex-wrap: wrap;
   gap: 14px;
-
-  &::after {
-    content: '';
-    position: absolute;
-    right: -60px;
-    top: -60px;
-    width: 220px;
-    height: 220px;
-    border-radius: 50%;
-    background: radial-gradient(circle, rgba(212,160,30,.14), transparent 65%);
-  }
 }
 
 .phLeft { display: flex; align-items: center; gap: 18px; position: relative; z-index: 1; }
@@ -52,9 +41,9 @@
   width: 46px;
   height: 46px;
   border-radius: $r-md;
-  background: rgba(212,160,30,.14);
-  border: 1px solid rgba(212,160,30,.3);
-  color: $gold-300;
+  background: $gold-100;
+  border: 1px solid $gold-300;
+  color: $gold-600;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -63,7 +52,7 @@
 
 .phSub {
   font-size: 10.5px;
-  color: rgba(255,255,255,.55);
+  color: $gray-500;
   text-transform: uppercase;
   letter-spacing: 1.8px;
   font-weight: 500;
@@ -73,7 +62,7 @@
   font-family: $font-serif;
   font-size: $fs-page-title;
   font-weight: 600;
-  color: #fff;
+  color: $navy-900;
   margin-top: 3px;
   letter-spacing: .2px;
 }

frontend/src/webparts/approvalAdmin/texts.ts

@@ -63,8 +63,6 @@ export const texts = {
   },
 
   nav: {
-    /** Буква в золотом квадрате логотипа — не зависит от заголовка панели. */
-    markLetter: 'T',
     title: 'Панель настройки маршрутов',
     dashboard: 'Дашборд',
     requestTypes: 'Типы заявок',