refactor(MikrotikTools): update UI text and layout for server check functionality, enhancing user experience

frontend/src/MikrotikTools.jsx

@@ -216,25 +216,25 @@ function MikrotikTools() {
         <div className="card-header">
           <div className="row align-items-center g-2">
             <div className="col">
-              <h3 className="card-title mb-1">Сервер для трассировки</h3>
+              <h3 className="card-title mb-1">Сервер для проверки</h3>
               <div className="text-muted small">
                 Доступно Jumphost-серверов: {jumphostServers.length}.{' '}
                 {serverId
                   ? 'Кликните по другой карточке, чтобы сменить сервер.'
-                  : 'Выберите сервер, чтобы выполнять трассировку через него.'}
+                  : 'Выберите сервер, чтобы выполнять проверки через него.'}
               </div>
             </div>
-            <div className="col-auto">
+            <div className="col-auto" style={{ minWidth: 260 }}>
-              <div className="input-icon" style={{ minWidth: 240 }}>
+              <div className="input-group input-group-flat">
                 <input
                   type="text"
-                  className="form-control form-control-sm"
+                  className="form-control"
                   placeholder="Поиск серверов по IP, DNS, провайдеру..."
                   value={serverSearch}
                   onChange={(e) => setServerSearch(e.target.value)}
                 />
-                <span className="input-icon-addon">
+                <span className="input-group-text">
-                  <IconSearch size={16} />
+                  <IconSearch size={16} className="text-muted" />
                 </span>
               </div>
             </div>
@@ -304,19 +304,22 @@ function MikrotikTools() {
         <div className="col-md-4">
           <div className="card">
             <div className="card-header">
-              <div className="d-flex align-items-center justify-content-between">
+              <div className="row align-items-center g-2">
+                <div className="col">
                   <h3 className="card-title mb-0">Параметры проверки</h3>
+                </div>
+                <div className="col-auto">
                   <div className="btn-group btn-group-sm" role="group" aria-label="Тип проверки">
                     <button
                       type="button"
-                    className={`btn ${mode === 'traceroute' ? 'btn-primary' : 'btn-outline-primary'}`}
+                      className={`btn ${mode === 'traceroute' ? 'btn-secondary' : 'btn-outline-secondary'}`}
                       onClick={() => { setMode('traceroute'); setHops([]); setAnalysis([]); setPingResult(null); }}
                     >
                       Traceroute
                     </button>
                     <button
                       type="button"
-                    className={`btn ${mode === 'ping' ? 'btn-primary' : 'btn-outline-primary'}`}
+                      className={`btn ${mode === 'ping' ? 'btn-secondary' : 'btn-outline-secondary'}`}
                       onClick={() => { setMode('ping'); setHops([]); setAnalysis([]); setPingResult(null); }}
                     >
                       Ping
@@ -324,6 +327,7 @@ function MikrotikTools() {
                   </div>
                 </div>
               </div>
+            </div>
             <div className="card-body">
               {loading && !networkConfig ? (
                 <div className="text-muted small">Загрузка сетевых настроек…</div>