fix(BulkActions): новые читаемые стили кнопок с кастомным CSS

frontend/src/components/server/ServerBulkActions.jsx

@@ -21,19 +21,30 @@ export default function ServerBulkActions({
 
   return (
     <div
-      className="server-bulk-actions position-sticky bg-dark text-white rounded-3 shadow-lg mx-auto px-3 py-2"
+      className="server-bulk-actions position-sticky rounded-3 shadow-lg mx-auto px-3 py-2"
       style={{
         bottom: '20px',
         zIndex: 1050,
-        maxWidth: '700px',
+        maxWidth: '720px',
-        animation: 'slideUp 0.2s ease'
+        animation: 'slideUp 0.2s ease',
+        background: 'linear-gradient(135deg, #1e293b 0%, #334155 100%)',
+        border: '1px solid rgba(255,255,255,0.1)'
       }}
     >
       <div className="d-flex align-items-center justify-content-between gap-3">
         {/* Счётчик выбранных */}
         <div className="d-flex align-items-center gap-2">
-          <span className="badge bg-blue fs-6">{selectedCount}</span>
+          <span 
-          <span className="text-white fw-normal">серверов выбрано</span>
+            className="badge fs-6"
+            style={{ 
+              background: '#3b82f6',
+              color: '#fff',
+              padding: '6px 10px'
+            }}
+          >
+            {selectedCount}
+          </span>
+          <span style={{ color: '#e2e8f0', fontWeight: 500 }}>выбрано</span>
         </div>
 
         {/* Действия */}
@@ -41,12 +52,12 @@ export default function ServerBulkActions({
           {/* Смена типа туннеля */}
           <div className="dropdown">
             <button
-              className="btn btn-ghost-light btn-sm dropdown-toggle d-flex align-items-center"
+              className="bulk-btn dropdown-toggle"
               type="button"
               data-bs-toggle="dropdown"
             >
-              <IconNetwork size={16} className="me-1" />
+              <IconNetwork size={15} />
-              Туннель
+              <span>Туннель</span>
             </button>
             <div className="dropdown-menu dropdown-menu-dark">
               <div className="dropdown-header">Сменить тип туннеля</div>
@@ -64,37 +75,39 @@ export default function ServerBulkActions({
 
           {/* Копировать ссылки */}
           <button
-            className="btn btn-ghost-light btn-sm d-flex align-items-center"
+            className="bulk-btn"
             onClick={onBulkCopyLinks}
-            title="Скопировать ссылки для выбранных серверов"
+            title="Скопировать ссылки"
           >
-            <IconCopy size={16} className="me-1" />
+            <IconCopy size={15} />
-            Копировать ссылки
+            <span>Ссылки</span>
           </button>
 
           {/* Экспорт */}
           <button
-            className="btn btn-ghost-light btn-sm d-flex align-items-center"
+            className="bulk-btn"
             onClick={onBulkExport}
-            title="Экспортировать выбранные серверы"
+            title="Экспорт"
           >
-            <IconDownload size={16} className="me-1" />
+            <IconDownload size={15} />
-            Экспорт
+            <span>Экспорт</span>
           </button>
 
+          <div style={{ width: '1px', height: '20px', background: 'rgba(255,255,255,0.2)', margin: '0 4px' }} />
+
           {/* Удалить */}
           <button
-            className="btn btn-ghost-danger btn-sm d-flex align-items-center"
+            className="bulk-btn bulk-btn-danger"
             onClick={onBulkDelete}
-            title="Удалить выбранные серверы"
+            title="Удалить"
           >
-            <IconTrash size={16} className="me-1" />
+            <IconTrash size={15} />
-            Удалить
+            <span>Удалить</span>
           </button>
 
           {/* Отменить выделение */}
           <button
-            className="btn btn-ghost-secondary btn-sm btn-icon"
+            className="bulk-btn-close"
             onClick={onClearSelection}
             title="Снять выделение"
           >
@@ -114,6 +127,56 @@ export default function ServerBulkActions({
             transform: translateY(0);
           }
         }
+        
+        .bulk-btn {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          padding: 6px 12px;
+          border: none;
+          border-radius: 6px;
+          background: rgba(255, 255, 255, 0.1);
+          color: #e2e8f0;
+          font-size: 13px;
+          font-weight: 500;
+          cursor: pointer;
+          transition: all 0.15s ease;
+        }
+        
+        .bulk-btn:hover {
+          background: rgba(255, 255, 255, 0.2);
+          color: #fff;
+        }
+        
+        .bulk-btn-danger {
+          background: rgba(239, 68, 68, 0.2);
+          color: #fca5a5;
+        }
+        
+        .bulk-btn-danger:hover {
+          background: rgba(239, 68, 68, 0.4);
+          color: #fef2f2;
+        }
+        
+        .bulk-btn-close {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 28px;
+          height: 28px;
+          padding: 0;
+          border: none;
+          border-radius: 6px;
+          background: rgba(255, 255, 255, 0.05);
+          color: #94a3b8;
+          cursor: pointer;
+          transition: all 0.15s ease;
+        }
+        
+        .bulk-btn-close:hover {
+          background: rgba(255, 255, 255, 0.15);
+          color: #fff;
+        }
       `}</style>
     </div>
   );