Новые стили, починил фокус formulabar

src/page/ProtocolCreation/Page.tsx

@@ -280,8 +280,8 @@ const ProtocolForm: FC<ProtocolFormProps> = ({ template, onSave, onBack }) => {
   const canSave = true
 
   return (
-    <div className="flex h-screen flex-col bg-gray-50">
-      <div className="flex-shrink-0 border-b bg-card px-4 py-2">
+    <div className="flex h-screen flex-col bg-background">
+      <div className="flex-shrink-0 bg-card px-4 py-2">
         <div className="relative flex items-center">
           {/* Левая часть: кнопка назад и заголовок */}
           <div className="flex items-center gap-2">
@@ -297,6 +297,23 @@ const ProtocolForm: FC<ProtocolFormProps> = ({ template, onSave, onBack }) => {
               </span>
             </div>
           </div>
+          {/* Центрированные кнопки */}
+          <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 gap-2">
+            <Button
+              variant={showSpreadsheet ? 'default' : 'outline'}
+              size="icon"
+              onClick={() => setShowSpreadsheet(!showSpreadsheet)}
+              aria-label={
+                showSpreadsheet ? 'Скрыть таблицы' : 'Показать таблицы'
+              }
+            >
+              <Grid className="h-4 w-4" />
+            </Button>
+            <Button variant="outline" onClick={handleSave} disabled={!canSave}>
+              <Save className="h-4 w-4" />
+              Сохранить протокол
+            </Button>
+          </div>
           {/* Кнопки справа */}
           <div className="absolute right-0 flex gap-2">
             <Button
@@ -318,23 +335,6 @@ const ProtocolForm: FC<ProtocolFormProps> = ({ template, onSave, onBack }) => {
               <span className="text-sm">Редактор интерфейса</span>
             </Button>
           </div>
-          {/* Центрированные кнопки */}
-          <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 gap-2">
-            <Button
-              variant={showSpreadsheet ? 'default' : 'outline'}
-              size="icon"
-              onClick={() => setShowSpreadsheet(!showSpreadsheet)}
-              aria-label={
-                showSpreadsheet ? 'Скрыть таблицы' : 'Показать таблицы'
-              }
-            >
-              <Grid className="h-4 w-4" />
-            </Button>
-            <Button variant="outline" onClick={handleSave} disabled={!canSave}>
-              <Save className="h-4 w-4" />
-              Сохранить протокол
-            </Button>
-          </div>
         </div>
       </div>