refactor: migrate to eslint flat config and format codebase with prettier

- Remove legacy .eslintrc.cjs and .eslintignore
- Add eslint.config.js with flat config, security rules (no-eval, no-implied-eval, no-new-func, no-script-url)
- Add .prettierrc and .prettierignore
- Format entire codebase with prettier

src/pages/AdminServers.tsx

@@ -1,80 +1,113 @@
-import { useState } from 'react'
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
-import { useTranslation } from 'react-i18next'
-import { Link } from 'react-router-dom'
-import {
-  serversApi,
-  ServerListItem,
-  ServerDetail,
-  ServerUpdateRequest
-} from '../api/servers'
+import { useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { serversApi, ServerListItem, ServerDetail, ServerUpdateRequest } from '../api/servers';
 
 // Icons
 const BackIcon = () => (
-  <svg className="w-5 h-5 text-dark-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+  <svg
+    className="h-5 w-5 text-dark-400"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth={2}
+  >
     <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
   </svg>
-)
+);
 
 const SyncIcon = () => (
-  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-    <path strokeLinecap="round" strokeLinejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
+  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+    />
   </svg>
-)
+);
 
 const EditIcon = () => (
-  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-    <path strokeLinecap="round" strokeLinejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
+  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
+    />
   </svg>
-)
+);
 
 const CheckIcon = () => (
-  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
     <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
   </svg>
-)
+);
 
 const XIcon = () => (
-  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
     <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
   </svg>
-)
+);
 
 const UsersIcon = () => (
-  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-    <path strokeLinecap="round" strokeLinejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
+  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"
+    />
   </svg>
-)
+);
 
 // Country flags (simple emoji mapping)
 const getCountryFlag = (code: string | null): string => {
-  if (!code) return ''
+  if (!code) return '';
   const codeMap: Record<string, string> = {
-    'RU': '🇷🇺', 'US': '🇺🇸', 'DE': '🇩🇪', 'NL': '🇳🇱', 'GB': '🇬🇧',
-    'FR': '🇫🇷', 'FI': '🇫🇮', 'SE': '🇸🇪', 'PL': '🇵🇱', 'CZ': '🇨🇿',
-    'AT': '🇦🇹', 'CH': '🇨🇭', 'UA': '🇺🇦', 'KZ': '🇰🇿', 'JP': '🇯🇵',
-    'KR': '🇰🇷', 'SG': '🇸🇬', 'HK': '🇭🇰', 'CA': '🇨🇦', 'AU': '🇦🇺',
-    'BR': '🇧🇷', 'IN': '🇮🇳', 'TR': '🇹🇷', 'IL': '🇮🇱', 'AE': '🇦🇪',
-  }
-  return codeMap[code.toUpperCase()] || code
-}
+    RU: '🇷🇺',
+    US: '🇺🇸',
+    DE: '🇩🇪',
+    NL: '🇳🇱',
+    GB: '🇬🇧',
+    FR: '🇫🇷',
+    FI: '🇫🇮',
+    SE: '🇸🇪',
+    PL: '🇵🇱',
+    CZ: '🇨🇿',
+    AT: '🇦🇹',
+    CH: '🇨🇭',
+    UA: '🇺🇦',
+    KZ: '🇰🇿',
+    JP: '🇯🇵',
+    KR: '🇰🇷',
+    SG: '🇸🇬',
+    HK: '🇭🇰',
+    CA: '🇨🇦',
+    AU: '🇦🇺',
+    BR: '🇧🇷',
+    IN: '🇮🇳',
+    TR: '🇹🇷',
+    IL: '🇮🇱',
+    AE: '🇦🇪',
+  };
+  return codeMap[code.toUpperCase()] || code;
+};
 
 interface ServerModalProps {
-  server: ServerDetail
-  onSave: (data: ServerUpdateRequest) => void
-  onClose: () => void
-  isLoading?: boolean
+  server: ServerDetail;
+  onSave: (data: ServerUpdateRequest) => void;
+  onClose: () => void;
+  isLoading?: boolean;
 }
 
 function ServerModal({ server, onSave, onClose, isLoading }: ServerModalProps) {
-  const { t } = useTranslation()
+  const { t } = useTranslation();
 
-  const [displayName, setDisplayName] = useState(server.display_name)
-  const [description, setDescription] = useState(server.description || '')
-  const [countryCode, setCountryCode] = useState(server.country_code || '')
-  const [priceKopeks, setPriceKopeks] = useState(server.price_kopeks)
-  const [maxUsers, setMaxUsers] = useState<number | null>(server.max_users)
-  const [sortOrder, setSortOrder] = useState(server.sort_order)
+  const [displayName, setDisplayName] = useState(server.display_name);
+  const [description, setDescription] = useState(server.description || '');
+  const [countryCode, setCountryCode] = useState(server.country_code || '');
+  const [priceKopeks, setPriceKopeks] = useState(server.price_kopeks);
+  const [maxUsers, setMaxUsers] = useState<number | null>(server.max_users);
+  const [sortOrder, setSortOrder] = useState(server.sort_order);
 
   const handleSubmit = () => {
     const data: ServerUpdateRequest = {
@@ -84,55 +117,59 @@ function ServerModal({ server, onSave, onClose, isLoading }: ServerModalProps) {
       price_kopeks: priceKopeks,
       max_users: maxUsers || undefined,
       sort_order: sortOrder,
-    }
-    onSave(data)
-  }
+    };
+    onSave(data);
+  };
 
   return (
-    <div className="fixed inset-0 flex items-center justify-center z-50 p-4">
-      <div className="bg-dark-800 rounded-xl w-full max-w-lg max-h-[90vh] overflow-hidden flex flex-col">
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <div className="flex max-h-[90vh] w-full max-w-lg flex-col overflow-hidden rounded-xl bg-dark-800">
         {/* Header */}
-        <div className="flex items-center justify-between p-4 border-b border-dark-700">
+        <div className="flex items-center justify-between border-b border-dark-700 p-4">
           <div className="flex items-center gap-2">
             <span className="text-xl">{getCountryFlag(server.country_code)}</span>
-            <h2 className="text-lg font-semibold text-dark-100">
-              {t('admin.servers.edit')}
-            </h2>
+            <h2 className="text-lg font-semibold text-dark-100">{t('admin.servers.edit')}</h2>
           </div>
-          <button onClick={onClose} className="p-1 hover:bg-dark-700 rounded-lg transition-colors">
+          <button onClick={onClose} className="rounded-lg p-1 transition-colors hover:bg-dark-700">
             <XIcon />
           </button>
         </div>
 
         {/* Content */}
-        <div className="flex-1 overflow-y-auto p-4 space-y-4">
+        <div className="flex-1 space-y-4 overflow-y-auto p-4">
           {/* Original Name (readonly) */}
           <div>
-            <label className="block text-sm text-dark-300 mb-1">{t('admin.servers.originalName')}</label>
-            <div className="px-3 py-2 bg-dark-700/50 border border-dark-600 rounded-lg text-dark-400">
+            <label className="mb-1 block text-sm text-dark-300">
+              {t('admin.servers.originalName')}
+            </label>
+            <div className="rounded-lg border border-dark-600 bg-dark-700/50 px-3 py-2 text-dark-400">
               {server.original_name || server.squad_uuid}
             </div>
           </div>
 
           {/* Display Name */}
           <div>
-            <label className="block text-sm text-dark-300 mb-1">{t('admin.servers.displayName')}</label>
+            <label className="mb-1 block text-sm text-dark-300">
+              {t('admin.servers.displayName')}
+            </label>
             <input
               type="text"
               value={displayName}
-              onChange={e => setDisplayName(e.target.value)}
-              className="w-full px-3 py-2 bg-dark-700 border border-dark-600 rounded-lg text-dark-100 focus:outline-none focus:border-accent-500"
+              onChange={(e) => setDisplayName(e.target.value)}
+              className="w-full rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
               placeholder={t('admin.servers.displayNamePlaceholder')}
             />
           </div>
 
           {/* Description */}
           <div>
-            <label className="block text-sm text-dark-300 mb-1">{t('admin.servers.description')}</label>
+            <label className="mb-1 block text-sm text-dark-300">
+              {t('admin.servers.description')}
+            </label>
             <textarea
               value={description}
-              onChange={e => setDescription(e.target.value)}
-              className="w-full px-3 py-2 bg-dark-700 border border-dark-600 rounded-lg text-dark-100 focus:outline-none focus:border-accent-500 resize-none"
+              onChange={(e) => setDescription(e.target.value)}
+              className="w-full resize-none rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
               rows={2}
               placeholder={t('admin.servers.descriptionPlaceholder')}
             />
@@ -140,46 +177,50 @@ function ServerModal({ server, onSave, onClose, isLoading }: ServerModalProps) {
 
           {/* Country Code */}
           <div>
-            <label className="block text-sm text-dark-300 mb-1">{t('admin.servers.countryCode')}</label>
+            <label className="mb-1 block text-sm text-dark-300">
+              {t('admin.servers.countryCode')}
+            </label>
             <input
               type="text"
               value={countryCode}
-              onChange={e => setCountryCode(e.target.value.toUpperCase().slice(0, 2))}
-              className="w-32 px-3 py-2 bg-dark-700 border border-dark-600 rounded-lg text-dark-100 focus:outline-none focus:border-accent-500"
+              onChange={(e) => setCountryCode(e.target.value.toUpperCase().slice(0, 2))}
+              className="w-32 rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
               placeholder="RU"
               maxLength={2}
             />
-            {countryCode && (
-              <span className="ml-2 text-xl">{getCountryFlag(countryCode)}</span>
-            )}
+            {countryCode && <span className="ml-2 text-xl">{getCountryFlag(countryCode)}</span>}
           </div>
 
           {/* Price */}
           <div>
-            <label className="block text-sm text-dark-300 mb-1">{t('admin.servers.price')}</label>
+            <label className="mb-1 block text-sm text-dark-300">{t('admin.servers.price')}</label>
             <div className="flex items-center gap-2">
               <input
                 type="number"
                 value={priceKopeks / 100}
-                onChange={e => setPriceKopeks(Math.max(0, parseFloat(e.target.value) || 0) * 100)}
-                className="w-32 px-3 py-2 bg-dark-700 border border-dark-600 rounded-lg text-dark-100 focus:outline-none focus:border-accent-500"
+                onChange={(e) => setPriceKopeks(Math.max(0, parseFloat(e.target.value) || 0) * 100)}
+                className="w-32 rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
                 min={0}
                 step={1}
               />
               <span className="text-dark-400">₽</span>
             </div>
-            <p className="text-xs text-dark-500 mt-1">{t('admin.servers.priceHint')}</p>
+            <p className="mt-1 text-xs text-dark-500">{t('admin.servers.priceHint')}</p>
           </div>
 
           {/* Max Users */}
           <div>
-            <label className="block text-sm text-dark-300 mb-1">{t('admin.servers.maxUsers')}</label>
+            <label className="mb-1 block text-sm text-dark-300">
+              {t('admin.servers.maxUsers')}
+            </label>
             <div className="flex items-center gap-2">
               <input
                 type="number"
                 value={maxUsers || ''}
-                onChange={e => setMaxUsers(e.target.value ? Math.max(0, parseInt(e.target.value)) : null)}
-                className="w-32 px-3 py-2 bg-dark-700 border border-dark-600 rounded-lg text-dark-100 focus:outline-none focus:border-accent-500"
+                onChange={(e) =>
+                  setMaxUsers(e.target.value ? Math.max(0, parseInt(e.target.value)) : null)
+                }
+                className="w-32 rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
                 min={0}
                 placeholder={t('admin.servers.unlimited')}
               />
@@ -191,34 +232,39 @@ function ServerModal({ server, onSave, onClose, isLoading }: ServerModalProps) {
 
           {/* Sort Order */}
           <div>
-            <label className="block text-sm text-dark-300 mb-1">{t('admin.servers.sortOrder')}</label>
+            <label className="mb-1 block text-sm text-dark-300">
+              {t('admin.servers.sortOrder')}
+            </label>
             <input
               type="number"
               value={sortOrder}
-              onChange={e => setSortOrder(parseInt(e.target.value) || 0)}
-              className="w-32 px-3 py-2 bg-dark-700 border border-dark-600 rounded-lg text-dark-100 focus:outline-none focus:border-accent-500"
+              onChange={(e) => setSortOrder(parseInt(e.target.value) || 0)}
+              className="w-32 rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
             />
           </div>
 
           {/* Stats */}
-          <div className="pt-4 border-t border-dark-700">
-            <h4 className="text-sm font-medium text-dark-300 mb-2">{t('admin.servers.stats')}</h4>
+          <div className="border-t border-dark-700 pt-4">
+            <h4 className="mb-2 text-sm font-medium text-dark-300">{t('admin.servers.stats')}</h4>
             <div className="grid grid-cols-2 gap-2 text-sm">
-              <div className="p-2 bg-dark-700/50 rounded-lg">
+              <div className="rounded-lg bg-dark-700/50 p-2">
                 <span className="text-dark-400">{t('admin.servers.currentUsers')}:</span>
                 <span className="ml-2 text-dark-200">{server.current_users}</span>
               </div>
-              <div className="p-2 bg-dark-700/50 rounded-lg">
+              <div className="rounded-lg bg-dark-700/50 p-2">
                 <span className="text-dark-400">{t('admin.servers.activeSubscriptions')}:</span>
                 <span className="ml-2 text-dark-200">{server.active_subscriptions}</span>
               </div>
             </div>
             {server.tariffs_using.length > 0 && (
-              <div className="mt-2 p-2 bg-dark-700/50 rounded-lg">
-                <span className="text-dark-400 text-sm">{t('admin.servers.usedByTariffs')}:</span>
-                <div className="flex flex-wrap gap-1 mt-1">
-                  {server.tariffs_using.map(tariff => (
-                    <span key={tariff} className="px-2 py-0.5 bg-dark-600 text-dark-300 text-xs rounded">
+              <div className="mt-2 rounded-lg bg-dark-700/50 p-2">
+                <span className="text-sm text-dark-400">{t('admin.servers.usedByTariffs')}:</span>
+                <div className="mt-1 flex flex-wrap gap-1">
+                  {server.tariffs_using.map((tariff) => (
+                    <span
+                      key={tariff}
+                      className="rounded bg-dark-600 px-2 py-0.5 text-xs text-dark-300"
+                    >
                       {tariff}
                     </span>
                   ))}
@@ -229,103 +275,103 @@ function ServerModal({ server, onSave, onClose, isLoading }: ServerModalProps) {
         </div>
 
         {/* Footer */}
-        <div className="flex justify-end gap-3 p-4 border-t border-dark-700">
+        <div className="flex justify-end gap-3 border-t border-dark-700 p-4">
           <button
             onClick={onClose}
-            className="px-4 py-2 text-dark-300 hover:text-dark-100 transition-colors"
+            className="px-4 py-2 text-dark-300 transition-colors hover:text-dark-100"
           >
             {t('common.cancel')}
           </button>
           <button
             onClick={handleSubmit}
             disabled={!displayName || isLoading}
-            className="px-4 py-2 bg-accent-500 text-white rounded-lg hover:bg-accent-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            className="rounded-lg bg-accent-500 px-4 py-2 text-white transition-colors hover:bg-accent-600 disabled:cursor-not-allowed disabled:opacity-50"
           >
             {isLoading ? t('common.loading') : t('common.save')}
           </button>
         </div>
       </div>
     </div>
-  )
+  );
 }
 
 export default function AdminServers() {
-  const { t } = useTranslation()
-  const queryClient = useQueryClient()
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
 
-  const [editingServer, setEditingServer] = useState<ServerDetail | null>(null)
-  const [loadingServerId, setLoadingServerId] = useState<number | null>(null)
-  const [loadError, setLoadError] = useState<string | null>(null)
+  const [editingServer, setEditingServer] = useState<ServerDetail | null>(null);
+  const [loadingServerId, setLoadingServerId] = useState<number | null>(null);
+  const [loadError, setLoadError] = useState<string | null>(null);
 
   // Queries
   const { data: serversData, isLoading } = useQuery({
     queryKey: ['admin-servers'],
     queryFn: () => serversApi.getServers(true),
-  })
+  });
 
   // Mutations
   const updateMutation = useMutation({
     mutationFn: ({ id, data }: { id: number; data: ServerUpdateRequest }) =>
       serversApi.updateServer(id, data),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['admin-servers'] })
-      setEditingServer(null)
+      queryClient.invalidateQueries({ queryKey: ['admin-servers'] });
+      setEditingServer(null);
     },
-  })
+  });
 
   const toggleMutation = useMutation({
     mutationFn: serversApi.toggleServer,
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['admin-servers'] })
+      queryClient.invalidateQueries({ queryKey: ['admin-servers'] });
     },
-  })
+  });
 
   const toggleTrialMutation = useMutation({
     mutationFn: serversApi.toggleTrial,
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['admin-servers'] })
+      queryClient.invalidateQueries({ queryKey: ['admin-servers'] });
     },
-  })
+  });
 
   const syncMutation = useMutation({
     mutationFn: serversApi.syncServers,
     onSuccess: (result) => {
-      queryClient.invalidateQueries({ queryKey: ['admin-servers'] })
-      alert(result.message)
+      queryClient.invalidateQueries({ queryKey: ['admin-servers'] });
+      alert(result.message);
     },
-  })
+  });
 
   const handleEdit = async (serverId: number) => {
-    setLoadingServerId(serverId)
-    setLoadError(null)
+    setLoadingServerId(serverId);
+    setLoadError(null);
     try {
-      const detail = await serversApi.getServer(serverId)
-      setEditingServer(detail)
+      const detail = await serversApi.getServer(serverId);
+      setEditingServer(detail);
     } catch (error: unknown) {
-      console.error('Failed to load server:', error)
-      const errorMessage = error instanceof Error ? error.message : t('admin.servers.loadError')
-      setLoadError(errorMessage)
+      console.error('Failed to load server:', error);
+      const errorMessage = error instanceof Error ? error.message : t('admin.servers.loadError');
+      setLoadError(errorMessage);
     } finally {
-      setLoadingServerId(null)
+      setLoadingServerId(null);
     }
-  }
+  };
 
   const handleSave = (data: ServerUpdateRequest) => {
     if (editingServer) {
-      updateMutation.mutate({ id: editingServer.id, data })
+      updateMutation.mutate({ id: editingServer.id, data });
     }
-  }
+  };
 
-  const servers = serversData?.servers || []
+  const servers = serversData?.servers || [];
 
   return (
     <div className="animate-fade-in">
       {/* Header */}
-      <div className="flex items-center justify-between mb-6">
+      <div className="mb-6 flex items-center justify-between">
         <div className="flex items-center gap-3">
           <Link
             to="/admin"
-            className="w-10 h-10 flex items-center justify-center rounded-xl bg-dark-800 border border-dark-700 hover:border-dark-600 transition-colors"
+            className="flex h-10 w-10 items-center justify-center rounded-xl border border-dark-700 bg-dark-800 transition-colors hover:border-dark-600"
           >
             <BackIcon />
           </Link>
@@ -337,7 +383,7 @@ export default function AdminServers() {
         <button
           onClick={() => syncMutation.mutate()}
           disabled={syncMutation.isPending}
-          className="flex items-center gap-2 px-4 py-2 bg-accent-500 text-white rounded-lg hover:bg-accent-600 transition-colors disabled:opacity-50"
+          className="flex items-center gap-2 rounded-lg bg-accent-500 px-4 py-2 text-white transition-colors hover:bg-accent-600 disabled:opacity-50"
         >
           <SyncIcon />
           {syncMutation.isPending ? t('admin.servers.syncing') : t('admin.servers.sync')}
@@ -347,10 +393,10 @@ export default function AdminServers() {
       {/* Servers List */}
       {isLoading ? (
         <div className="flex items-center justify-center py-12">
-          <div className="w-8 h-8 border-2 border-accent-500 border-t-transparent rounded-full animate-spin" />
+          <div className="h-8 w-8 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
         </div>
       ) : servers.length === 0 ? (
-        <div className="text-center py-12">
+        <div className="py-12 text-center">
           <p className="text-dark-400">{t('admin.servers.noServers')}</p>
           <button
             onClick={() => syncMutation.mutate()}
@@ -364,27 +410,27 @@ export default function AdminServers() {
           {servers.map((server: ServerListItem) => (
             <div
               key={server.id}
-              className={`p-4 bg-dark-800 rounded-xl border transition-colors ${
+              className={`rounded-xl border bg-dark-800 p-4 transition-colors ${
                 server.is_available ? 'border-dark-700' : 'border-dark-700/50 opacity-60'
               }`}
             >
               <div className="flex items-start justify-between gap-4">
-                <div className="flex-1 min-w-0">
-                  <div className="flex items-center gap-2 mb-1">
+                <div className="min-w-0 flex-1">
+                  <div className="mb-1 flex items-center gap-2">
                     <span className="text-lg">{getCountryFlag(server.country_code)}</span>
-                    <h3 className="font-medium text-dark-100 truncate">{server.display_name}</h3>
+                    <h3 className="truncate font-medium text-dark-100">{server.display_name}</h3>
                     {server.is_trial_eligible && (
-                      <span className="px-2 py-0.5 text-xs bg-success-500/20 text-success-400 rounded">
+                      <span className="rounded bg-success-500/20 px-2 py-0.5 text-xs text-success-400">
                         {t('admin.servers.trial')}
                       </span>
                     )}
                     {!server.is_available && (
-                      <span className="px-2 py-0.5 text-xs bg-dark-600 text-dark-400 rounded">
+                      <span className="rounded bg-dark-600 px-2 py-0.5 text-xs text-dark-400">
                         {t('admin.servers.unavailable')}
                       </span>
                     )}
                     {server.is_full && (
-                      <span className="px-2 py-0.5 text-xs bg-warning-500/20 text-warning-400 rounded">
+                      <span className="rounded bg-warning-500/20 px-2 py-0.5 text-xs text-warning-400">
                         {t('admin.servers.full')}
                       </span>
                     )}
@@ -396,7 +442,9 @@ export default function AdminServers() {
                       {server.max_users ? ` / ${server.max_users}` : ''}
                     </span>
                     <span>{server.price_rubles} ₽</span>
-                    <span className="text-dark-500 text-xs font-mono truncate max-w-[200px]">{server.squad_uuid}</span>
+                    <span className="max-w-[200px] truncate font-mono text-xs text-dark-500">
+                      {server.squad_uuid}
+                    </span>
                   </div>
                 </div>
 
@@ -404,12 +452,14 @@ export default function AdminServers() {
                   {/* Toggle Available */}
                   <button
                     onClick={() => toggleMutation.mutate(server.id)}
-                    className={`p-2 rounded-lg transition-colors ${
+                    className={`rounded-lg p-2 transition-colors ${
                       server.is_available
                         ? 'bg-success-500/20 text-success-400 hover:bg-success-500/30'
                         : 'bg-dark-700 text-dark-400 hover:bg-dark-600'
                     }`}
-                    title={server.is_available ? t('admin.servers.disable') : t('admin.servers.enable')}
+                    title={
+                      server.is_available ? t('admin.servers.disable') : t('admin.servers.enable')
+                    }
                   >
                     {server.is_available ? <CheckIcon /> : <XIcon />}
                   </button>
@@ -417,7 +467,7 @@ export default function AdminServers() {
                   {/* Toggle Trial */}
                   <button
                     onClick={() => toggleTrialMutation.mutate(server.id)}
-                    className={`p-2 rounded-lg transition-colors ${
+                    className={`rounded-lg p-2 transition-colors ${
                       server.is_trial_eligible
                         ? 'bg-accent-500/20 text-accent-400 hover:bg-accent-500/30'
                         : 'bg-dark-700 text-dark-400 hover:bg-dark-600'
@@ -431,11 +481,11 @@ export default function AdminServers() {
                   <button
                     onClick={() => handleEdit(server.id)}
                     disabled={loadingServerId === server.id}
-                    className="p-2 bg-dark-700 text-dark-300 rounded-lg hover:bg-dark-600 hover:text-dark-100 transition-colors disabled:opacity-50"
+                    className="rounded-lg bg-dark-700 p-2 text-dark-300 transition-colors hover:bg-dark-600 hover:text-dark-100 disabled:opacity-50"
                     title={t('admin.servers.edit')}
                   >
                     {loadingServerId === server.id ? (
-                      <div className="w-4 h-4 border-2 border-dark-300 border-t-transparent rounded-full animate-spin" />
+                      <div className="h-4 w-4 animate-spin rounded-full border-2 border-dark-300 border-t-transparent" />
                     ) : (
                       <EditIcon />
                     )}
@@ -449,12 +499,9 @@ export default function AdminServers() {
 
       {/* Error Toast */}
       {loadError && (
-        <div className="fixed bottom-4 right-4 bg-error-500/90 text-white px-4 py-3 rounded-lg shadow-lg flex items-center gap-3 z-50">
+        <div className="fixed bottom-4 right-4 z-50 flex items-center gap-3 rounded-lg bg-error-500/90 px-4 py-3 text-white shadow-lg">
           <span>{loadError}</span>
-          <button
-            onClick={() => setLoadError(null)}
-            className="p-1 hover:bg-white/20 rounded"
-          >
+          <button onClick={() => setLoadError(null)} className="rounded p-1 hover:bg-white/20">
             <XIcon />
           </button>
         </div>
@@ -470,5 +517,5 @@ export default function AdminServers() {
         />
       )}
     </div>
-  )
+  );
 }