diff --git a/src/App.tsx b/src/App.tsx
index b030a73..096c55c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -123,6 +123,7 @@ const AdminRemnawave = lazyWithRetry(() => import('./pages/AdminRemnawave'));
 const AdminRemnawaveSquadDetail = lazyWithRetry(() => import('./pages/AdminRemnawaveSquadDetail'));
 const AdminEmailTemplates = lazyWithRetry(() => import('./pages/AdminEmailTemplates'));
 const AdminTrafficUsage = lazyWithRetry(() => import('./pages/AdminTrafficUsage'));
+const AdminBulkActions = lazyWithRetry(() => import('./pages/AdminBulkActions'));
 const AdminSalesStats = lazyWithRetry(() => import('./pages/AdminSalesStats'));
 const AdminUpdates = lazyWithRetry(() => import('./pages/AdminUpdates'));
 const AdminUserDetail = lazyWithRetry(() => import('./pages/AdminUserDetail'));
@@ -147,6 +148,11 @@ const NewsArticlePage = lazyWithRetry(() => import('./pages/NewsArticle'));
 const AdminNews = lazyWithRetry(() => import('./pages/AdminNews'));
 const AdminNewsCreate = lazyWithRetry(() => import('./pages/AdminNewsCreate'));
 
+// Info pages
+const InfoPageView = lazyWithRetry(() => import('./pages/InfoPageView'));
+const AdminInfoPages = lazyWithRetry(() => import('./pages/AdminInfoPages'));
+const AdminInfoPageEditor = lazyWithRetry(() => import('./pages/AdminInfoPageEditor'));
+
 function ProtectedRoute({
   children,
   withLayout = true,
@@ -554,6 +560,16 @@ function App() {
             </ProtectedRoute>
           }
         />
+        <Route
+          path="/info/:slug"
+          element={
+            <ProtectedRoute>
+              <LazyPage>
+                <InfoPageView />
+              </LazyPage>
+            </ProtectedRoute>
+          }
+        />
 
         {/* Admin routes */}
         <Route
@@ -966,6 +982,16 @@ function App() {
             </PermissionRoute>
           }
         />
+        <Route
+          path="/admin/bulk-actions"
+          element={
+            <PermissionRoute permission="users:read">
+              <LazyPage>
+                <AdminBulkActions />
+              </LazyPage>
+            </PermissionRoute>
+          }
+        />
         <Route
           path="/admin/payments"
           element={
@@ -1270,6 +1296,38 @@ function App() {
           }
         />
 
+        {/* Info pages admin routes */}
+        <Route
+          path="/admin/info-pages"
+          element={
+            <PermissionRoute permission="settings:read">
+              <LazyPage>
+                <AdminInfoPages />
+              </LazyPage>
+            </PermissionRoute>
+          }
+        />
+        <Route
+          path="/admin/info-pages/create"
+          element={
+            <PermissionRoute permission="settings:edit">
+              <LazyPage>
+                <AdminInfoPageEditor />
+              </LazyPage>
+            </PermissionRoute>
+          }
+        />
+        <Route
+          path="/admin/info-pages/:id/edit"
+          element={
+            <PermissionRoute permission="settings:edit">
+              <LazyPage>
+                <AdminInfoPageEditor />
+              </LazyPage>
+            </PermissionRoute>
+          }
+        />
+
         <Route
           path="/admin/audit-log"
           element={
diff --git a/src/api/adminBulkActions.ts b/src/api/adminBulkActions.ts
new file mode 100644
index 0000000..43bb19f
--- /dev/null
+++ b/src/api/adminBulkActions.ts
@@ -0,0 +1,167 @@
+import apiClient from './client';
+import { tokenStorage } from '../utils/token';
+
+export type BulkActionType =
+  | 'extend_subscription'
+  | 'add_days'
+  | 'cancel_subscription'
+  | 'activate_subscription'
+  | 'change_tariff'
+  | 'add_traffic'
+  | 'add_balance'
+  | 'assign_promo_group'
+  | 'grant_subscription'
+  | 'set_devices'
+  | 'delete_subscription'
+  | 'delete_user';
+
+export interface BulkActionRequest {
+  action: BulkActionType;
+  user_ids?: number[];
+  subscription_ids?: number[];
+  params: BulkActionParams;
+  dry_run?: boolean;
+}
+
+export interface BulkActionParams {
+  days?: number;
+  tariff_id?: number;
+  traffic_gb?: number;
+  amount_kopeks?: number;
+  balance_description?: string;
+  promo_group_id?: number | null;
+  device_limit?: number;
+  delete_from_panel?: boolean;
+}
+
+export interface BulkActionErrorItem {
+  user_id: number;
+  username?: string;
+  error: string;
+}
+
+export interface BulkActionResult {
+  success: boolean;
+  total: number;
+  success_count: number;
+  error_count: number;
+  skipped_count: number;
+  errors: BulkActionErrorItem[];
+}
+
+export interface BulkProgressEvent {
+  type: 'progress';
+  current: number;
+  total: number;
+  user_id: number;
+  subscription_id?: number;
+  username?: string;
+  success: boolean;
+  message?: string;
+  error?: string;
+}
+
+export interface BulkCompleteEvent {
+  type: 'complete';
+  total: number;
+  success_count: number;
+  error_count: number;
+  skipped_count: number;
+}
+
+export type BulkSSEEvent = BulkProgressEvent | BulkCompleteEvent;
+
+const API_BASE_URL = import.meta.env.VITE_API_URL || '/api';
+
+export const adminBulkActionsApi = {
+  execute: async (data: BulkActionRequest): Promise<BulkActionResult> => {
+    const response = await apiClient.post('/cabinet/admin/bulk/execute', data);
+    const raw = response.data;
+    // Transform backend results[] to frontend errors[]
+    const errors: BulkActionErrorItem[] = (raw.results || [])
+      .filter((r: { success: boolean }) => !r.success)
+      .map((r: { user_id: number; username?: string; message?: string }) => ({
+        user_id: r.user_id,
+        username: r.username,
+        error: r.message || 'Unknown error',
+      }));
+    return {
+      success: raw.error_count === 0,
+      total: raw.total,
+      success_count: raw.success_count,
+      error_count: raw.error_count,
+      skipped_count: raw.skipped_count || 0,
+      errors,
+    };
+  },
+
+  executeWithStream: async (
+    data: BulkActionRequest,
+    onEvent: (event: BulkSSEEvent) => void,
+    signal?: AbortSignal,
+  ): Promise<void> => {
+    const token = tokenStorage.getAccessToken();
+    const response = await fetch(`${API_BASE_URL}/cabinet/admin/bulk/execute?stream=true`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        ...(token ? { Authorization: `Bearer ${token}` } : {}),
+      },
+      body: JSON.stringify(data),
+      signal,
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}`);
+    }
+
+    const contentType = response.headers.get('content-type') || '';
+
+    if (contentType.includes('text/event-stream') && response.body) {
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = '';
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split('\n');
+        buffer = lines.pop() || '';
+
+        for (const line of lines) {
+          const trimmed = line.trim();
+          if (trimmed.startsWith('data: ')) {
+            try {
+              const event = JSON.parse(trimmed.slice(6)) as BulkSSEEvent;
+              onEvent(event);
+            } catch {
+              // skip malformed SSE lines
+            }
+          }
+        }
+      }
+
+      // process remaining buffer
+      if (buffer.trim().startsWith('data: ')) {
+        try {
+          const event = JSON.parse(buffer.trim().slice(6)) as BulkSSEEvent;
+          onEvent(event);
+        } catch {
+          // skip
+        }
+      }
+    } else {
+      // Fallback: non-streaming JSON response
+      const raw = await response.json();
+      onEvent({
+        type: 'complete',
+        total: raw.total,
+        success_count: raw.success_count,
+        error_count: raw.error_count,
+        skipped_count: raw.skipped_count || 0,
+      });
+    }
+  },
+};
diff --git a/src/api/adminUsers.ts b/src/api/adminUsers.ts
index 3a0a23a..8697196 100644
--- a/src/api/adminUsers.ts
+++ b/src/api/adminUsers.ts
@@ -33,6 +33,18 @@ export interface UserPromoGroupInfo {
   is_default: boolean;
 }
 
+export interface UserListItemSubscription {
+  id: number;
+  tariff_id: number | null;
+  tariff_name: string | null;
+  status: string;
+  end_date: string | null;
+  days_remaining: number;
+  traffic_used_gb: number;
+  traffic_limit_gb: number;
+  device_limit: number;
+}
+
 export interface UserListItem {
   id: number;
   telegram_id: number;
@@ -49,6 +61,12 @@ export interface UserListItem {
   subscription_status: string | null;
   subscription_is_trial: boolean;
   subscription_end_date: string | null;
+  tariff_id: number | null;
+  tariff_name: string | null;
+  traffic_used_gb: number;
+  traffic_limit_gb: number;
+  device_limit: number;
+  days_remaining: number;
   promo_group_id: number | null;
   promo_group_name: string | null;
   total_spent_kopeks: number;
@@ -56,6 +74,7 @@ export interface UserListItem {
   has_restrictions: boolean;
   restriction_topup: boolean;
   restriction_subscription: boolean;
+  subscriptions?: UserListItemSubscription[];
 }
 
 export interface UsersListResponse {
@@ -392,6 +411,11 @@ export const adminUsersApi = {
       search?: string;
       email?: string;
       status?: 'active' | 'blocked' | 'deleted';
+      subscription_status?: string;
+      tariff_id?: string;
+      promo_group_id?: number;
+      campaign_id?: number;
+      partner_id?: number;
       sort_by?:
         | 'created_at'
         | 'balance'
diff --git a/src/api/infoPages.ts b/src/api/infoPages.ts
new file mode 100644
index 0000000..39a39a4
--- /dev/null
+++ b/src/api/infoPages.ts
@@ -0,0 +1,125 @@
+import apiClient from './client';
+
+export type InfoPageType = 'page' | 'faq';
+
+export type ReplacesTab = 'faq' | 'rules' | 'privacy' | 'offer';
+
+export interface InfoPage {
+  id: number;
+  slug: string;
+  title: Record<string, string>;
+  content: Record<string, string>;
+  page_type: InfoPageType;
+  is_active: boolean;
+  sort_order: number;
+  icon: string | null;
+  replaces_tab: ReplacesTab | null;
+  created_at: string;
+  updated_at: string | null;
+}
+
+export interface InfoPageListItem {
+  id: number;
+  slug: string;
+  title: Record<string, string>;
+  page_type: InfoPageType;
+  is_active: boolean;
+  sort_order: number;
+  icon: string | null;
+  replaces_tab: ReplacesTab | null;
+  updated_at: string | null;
+}
+
+export interface InfoPageCreateRequest {
+  slug: string;
+  title: Record<string, string>;
+  content: Record<string, string>;
+  page_type: InfoPageType;
+  is_active: boolean;
+  sort_order: number;
+  icon: string | null;
+  replaces_tab: ReplacesTab | null;
+}
+
+export interface InfoPageUpdateRequest {
+  slug?: string;
+  title?: Record<string, string>;
+  content?: Record<string, string>;
+  page_type?: InfoPageType;
+  is_active?: boolean;
+  sort_order?: number;
+  icon?: string | null;
+  replaces_tab?: ReplacesTab | null;
+}
+
+export type TabReplacements = Record<ReplacesTab, string | null>;
+
+/** Single FAQ Q&A item stored in content JSONB. */
+export interface FaqItem {
+  q: string;
+  a: string;
+}
+
+export interface InfoPageReorderRequest {
+  items: Array<{ id: number; sort_order: number }>;
+}
+
+export const infoPagesApi = {
+  // Public endpoints
+  getTabReplacements: async (): Promise<TabReplacements> => {
+    const response = await apiClient.get<TabReplacements>('/cabinet/info-pages/tab-replacements');
+    return response.data;
+  },
+
+  getPages: async (pageType?: InfoPageType): Promise<InfoPageListItem[]> => {
+    const params = pageType ? { page_type: pageType } : undefined;
+    const response = await apiClient.get<InfoPageListItem[]>('/cabinet/info-pages', { params });
+    return response.data;
+  },
+
+  getPageBySlug: async (slug: string): Promise<InfoPage> => {
+    const response = await apiClient.get<InfoPage>(
+      `/cabinet/info-pages/${encodeURIComponent(slug)}`,
+    );
+    return response.data;
+  },
+
+  // Admin endpoints
+  getAdminPages: async (pageType?: InfoPageType): Promise<InfoPageListItem[]> => {
+    const params = pageType ? { page_type: pageType } : undefined;
+    const response = await apiClient.get<InfoPageListItem[]>('/cabinet/admin/info-pages', {
+      params,
+    });
+    return response.data;
+  },
+
+  getAdminPage: async (id: number): Promise<InfoPage> => {
+    const response = await apiClient.get<InfoPage>(`/cabinet/admin/info-pages/${id}`);
+    return response.data;
+  },
+
+  createPage: async (data: InfoPageCreateRequest): Promise<InfoPage> => {
+    const response = await apiClient.post<InfoPage>('/cabinet/admin/info-pages', data);
+    return response.data;
+  },
+
+  updatePage: async (id: number, data: InfoPageUpdateRequest): Promise<InfoPage> => {
+    const response = await apiClient.put<InfoPage>(`/cabinet/admin/info-pages/${id}`, data);
+    return response.data;
+  },
+
+  deletePage: async (id: number): Promise<void> => {
+    await apiClient.delete(`/cabinet/admin/info-pages/${id}`);
+  },
+
+  toggleActive: async (id: number): Promise<InfoPage> => {
+    const response = await apiClient.post<InfoPage>(
+      `/cabinet/admin/info-pages/${id}/toggle-active`,
+    );
+    return response.data;
+  },
+
+  reorder: async (data: InfoPageReorderRequest): Promise<void> => {
+    await apiClient.post('/cabinet/admin/info-pages/reorder', data);
+  },
+};
diff --git a/src/locales/en.json b/src/locales/en.json
index 9fb58e4..4263969 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1125,7 +1125,9 @@
       "salesStats": "Sales Statistics",
       "landings": "Landings",
       "referralNetwork": "Referral Network",
-      "news": "News"
+      "news": "News",
+      "bulkActions": "Bulk Actions",
+      "infoPages": "Info Pages"
     },
     "panel": {
       "title": "Admin Panel",
@@ -2021,6 +2023,113 @@
         "telegramOidcClientSecret": "Client Secret"
       }
     },
+    "bulkActions": {
+      "title": "Bulk Actions",
+      "subtitle": "User management",
+      "selectedCount": "Selected: {{count}}",
+      "selectAll": "Select all",
+      "deselectAll": "Deselect all",
+      "selectUser": "Select user {{name}}",
+      "deselectUser": "Deselect user {{name}}",
+      "noResults": "No users found",
+      "perPage": "Per page",
+      "actions": {
+        "extend": "Extend subscription",
+        "cancel": "Deactivate subscriptions",
+        "activate": "Activate subscriptions",
+        "changeTariff": "Change tariff",
+        "addTraffic": "Add traffic",
+        "addBalance": "Add balance",
+        "assignPromoGroup": "Assign promo group",
+        "grantSubscription": "Grant subscription",
+        "setDevices": "Set devices",
+        "deleteSubscription": "Delete subscriptions",
+        "deleteUser": "Delete users"
+      },
+      "deleteSubscription": {
+        "warning": "Selected subscriptions will be permanently deleted from the bot and RemnaWave panel!",
+        "hint": "Users will lose VPN access for deleted subscriptions. This action cannot be undone."
+      },
+      "deleteUser": {
+        "warning": "Selected users will be permanently deleted from the bot! All their subscriptions, balance, and data will be lost!",
+        "hint": "This action cannot be undone. Users will need to restart the bot to create a new account.",
+        "deleteFromPanel": "Also delete from RemnaWave panel"
+      },
+      "params": {
+        "days": "Number of days",
+        "tariff": "Select tariff",
+        "trafficGb": "Traffic amount (GB)",
+        "balanceRub": "Amount (RUB)",
+        "promoGroup": "Promo group",
+        "removePromoGroup": "Remove promo group",
+        "deviceLimit": "Device count"
+      },
+      "grantSubscription": {
+        "warning": "Users who already have a subscription on the selected tariff will be skipped"
+      },
+      "confirm": "Apply",
+      "cancel": "Cancel",
+      "executing": "Executing...",
+      "complete": "Complete",
+      "successCount": "Succeeded: {{count}}",
+      "errorCount": "Errors: {{count}}",
+      "progress": {
+        "processed": "Processed: {{current}} / {{total}}",
+        "succeeded": "succeeded",
+        "failed": "failed",
+        "ok": "OK",
+        "errorGeneric": "Error",
+        "doNotClose": "Please do not close this window while the operation is in progress",
+        "summarySuccess": "{{count}} succeeded",
+        "summaryErrors": "{{count}} errors"
+      },
+      "errors": {
+        "title": "{{count}} errors — show details"
+      },
+      "filters": {
+        "search": "Search by ID, username, email",
+        "status": "Subscription status",
+        "tariff": "Tariff",
+        "promoGroup": "Promo group",
+        "allStatuses": "All statuses",
+        "allTariffs": "All tariffs",
+        "allGroups": "All groups",
+        "allCampaigns": "All campaigns",
+        "allPartners": "All partners",
+        "trialOnly": "Trial only",
+        "tariffsSelected": "{{count}} tariffs",
+        "selectAll": "Select all",
+        "deselectAll": "Deselect all"
+      },
+      "statuses": {
+        "active": "Active",
+        "expired": "Expired",
+        "trial": "Trial",
+        "limited": "Limited",
+        "disabled": "Disabled"
+      },
+      "columns": {
+        "user": "User",
+        "status": "Status",
+        "tariff": "Tariff",
+        "balance": "Balance",
+        "daysRemaining": "Days",
+        "promoGroup": "Group",
+        "spent": "Spent"
+      },
+      "subscriptionsSelected": "{{count}} subscriptions selected",
+      "usersSelected": "{{count}} users selected",
+      "expandSubscriptions": "Show subscriptions",
+      "collapseSubscriptions": "Hide subscriptions",
+      "noSubscriptions": "No subscriptions",
+      "subscriptionTarget": "Target: subscriptions",
+      "userTarget": "Target: users",
+      "daysUnit": "d",
+      "trafficOf": "of",
+      "trafficGbUnit": "GB",
+      "selectAllSubs": "Select all subscriptions",
+      "deselectAllSubs": "Deselect all subscriptions"
+    },
     "theme": {
       "accentColor": "Accent color",
       "customizeColors": "Customize colors",
@@ -3698,6 +3807,76 @@
         "prev": "Previous",
         "next": "Next"
       }
+    },
+    "infoPages": {
+      "title": "Information Pages",
+      "subtitle": "Manage static information pages",
+      "create": "Create Page",
+      "createFaq": "Create FAQ",
+      "edit": "Edit",
+      "save": "Save",
+      "saving": "Saving...",
+      "saved": "Page saved",
+      "delete": "Delete",
+      "confirmDelete": "Delete this page?",
+      "saveError": "Failed to save page. Please try again.",
+      "noPages": "No information pages yet",
+      "notFound": "Page not found",
+      "active": "Active",
+      "inactive": "Inactive",
+      "typePage": "Page",
+      "localeLabel": "Content Language",
+      "fields": {
+        "slug": "URL Slug",
+        "title": "Title",
+        "content": "Content",
+        "isActive": "Active",
+        "sortOrder": "Sort Order",
+        "icon": "Icon (emoji)",
+        "pageType": "Page Type",
+        "replacesTab": "Replaces Tab"
+      },
+      "replacesTabNone": "None",
+      "replacesTabOptions": {
+        "faq": "FAQ",
+        "rules": "Rules",
+        "privacy": "Privacy",
+        "offer": "Offer"
+      },
+      "replacesTabConflict": "already assigned",
+      "replacesTabWarning": "Another page already replaces this tab. It will be unassigned on save.",
+      "filter": {
+        "all": "All",
+        "page": "Pages",
+        "faq": "FAQ"
+      },
+      "pageTypes": {
+        "page": "Page",
+        "faq": "FAQ"
+      },
+      "faq": {
+        "questions": "Questions & Answers",
+        "questionsCount": "questions",
+        "noQuestions": "No questions yet. Click the button below to add one.",
+        "questionNumber": "Question #{{n}}",
+        "question": "Question",
+        "answer": "Answer",
+        "questionPlaceholder": "Enter question...",
+        "answerPlaceholder": "Enter answer (HTML supported)...",
+        "htmlHint": "HTML markup is supported",
+        "addQuestion": "Add Question",
+        "removeQuestion": "Remove question",
+        "moveUp": "Move up",
+        "moveDown": "Move down",
+        "searchPlaceholder": "Search questions...",
+        "noResults": "No results found"
+      },
+      "locales": {
+        "ru": "Russian",
+        "en": "English",
+        "zh": "Chinese",
+        "fa": "Persian"
+      }
     }
   },
   "adminUpdates": {
diff --git a/src/locales/fa.json b/src/locales/fa.json
index fbe1cde..3c29a4a 100644
--- a/src/locales/fa.json
+++ b/src/locales/fa.json
@@ -949,7 +949,8 @@
       "salesStats": "آمار فروش",
       "landings": "صفحات فرود",
       "referralNetwork": "شبکه ارجاع",
-      "news": "اخبار"
+      "news": "اخبار",
+      "infoPages": "صفحات اطلاعات"
     },
     "panel": {
       "title": "پنل مدیریت",
@@ -3366,6 +3367,183 @@
       "periodDaySuffix": "روز",
       "localeTab": "زبان",
       "localeHint": "زبان را تغییر دهید تا متن را به آن زبان ویرایش کنید"
+    },
+    "infoPages": {
+      "title": "صفحات اطلاعات",
+      "subtitle": "مدیریت صفحات اطلاعات ثابت",
+      "create": "ایجاد صفحه",
+      "createFaq": "ایجاد FAQ",
+      "edit": "ویرایش",
+      "save": "ذخیره",
+      "saving": "در حال ذخیره...",
+      "saved": "صفحه ذخیره شد",
+      "delete": "حذف",
+      "confirmDelete": "این صفحه حذف شود؟",
+      "saveError": "ذخیره صفحه ناموفق بود. لطفاً دوباره تلاش کنید.",
+      "noPages": "هنوز صفحه اطلاعاتی وجود ندارد",
+      "notFound": "صفحه پیدا نشد",
+      "active": "فعال",
+      "inactive": "غیرفعال",
+      "typePage": "صفحه",
+      "localeLabel": "زبان محتوا",
+      "fields": {
+        "slug": "شناسه URL",
+        "title": "عنوان",
+        "content": "محتوا",
+        "isActive": "فعال",
+        "sortOrder": "ترتیب",
+        "icon": "آیکون (ایموجی)",
+        "pageType": "نوع صفحه",
+        "replacesTab": "جایگزینی تب"
+      },
+      "replacesTabNone": "بدون جایگزینی",
+      "replacesTabOptions": {
+        "faq": "FAQ",
+        "rules": "قوانین",
+        "privacy": "حریم خصوصی",
+        "offer": "پیشنهاد"
+      },
+      "replacesTabConflict": "قبلا اختصاص داده شده",
+      "replacesTabWarning": "صفحه دیگری قبلا این تب را جایگزین کرده است. با ذخیره، آن صفحه حذف خواهد شد.",
+      "filter": {
+        "all": "همه",
+        "page": "صفحات",
+        "faq": "FAQ"
+      },
+      "pageTypes": {
+        "page": "صفحه",
+        "faq": "FAQ"
+      },
+      "faq": {
+        "questions": "سوالات و پاسخ‌ها",
+        "questionsCount": "سوال",
+        "noQuestions": "هنوز سوالی وجود ندارد. روی دکمه زیر کلیک کنید.",
+        "questionNumber": "سوال #{{n}}",
+        "question": "سوال",
+        "answer": "پاسخ",
+        "questionPlaceholder": "سوال را وارد کنید...",
+        "answerPlaceholder": "پاسخ را وارد کنید (HTML پشتیبانی می‌شود)...",
+        "htmlHint": "نشانه‌گذاری HTML پشتیبانی می‌شود",
+        "addQuestion": "افزودن سوال",
+        "removeQuestion": "حذف سوال",
+        "moveUp": "انتقال به بالا",
+        "moveDown": "انتقال به پایین",
+        "searchPlaceholder": "جستجو در سوالات...",
+        "noResults": "نتیجه‌ای یافت نشد"
+      },
+      "locales": {
+        "ru": "روسی",
+        "en": "انگلیسی",
+        "zh": "چینی",
+        "fa": "فارسی"
+      }
+    },
+    "bulkActions": {
+      "title": "عملیات دسته‌ای",
+      "subtitle": "مدیریت کاربران",
+      "selectedCount": "انتخاب شده: {{count}}",
+      "selectAll": "انتخاب همه",
+      "deselectAll": "لغو انتخاب همه",
+      "selectUser": "انتخاب کاربر {{name}}",
+      "deselectUser": "لغو انتخاب کاربر {{name}}",
+      "noResults": "کاربری یافت نشد",
+      "perPage": "در هر صفحه",
+      "actions": {
+        "extend": "تمدید اشتراک",
+        "cancel": "غیرفعال‌سازی اشتراک‌ها",
+        "activate": "فعال‌سازی اشتراک‌ها",
+        "changeTariff": "تغییر تعرفه",
+        "addTraffic": "افزودن ترافیک",
+        "addBalance": "افزودن موجودی",
+        "assignPromoGroup": "اختصاص گروه تبلیغاتی",
+        "grantSubscription": "اعطای اشتراک",
+        "setDevices": "تنظیم دستگاه‌ها",
+        "deleteSubscription": "حذف اشتراک‌ها",
+        "deleteUser": "حذف کاربران"
+      },
+      "deleteSubscription": {
+        "warning": "اشتراک‌های انتخاب شده برای همیشه از ربات و پنل RemnaWave حذف خواهند شد!",
+        "hint": "کاربران دسترسی VPN اشتراک‌های حذف شده را از دست خواهند داد. این عملیات قابل بازگشت نیست."
+      },
+      "deleteUser": {
+        "warning": "کاربران انتخاب شده برای همیشه از ربات حذف خواهند شد! تمام اشتراک‌ها، موجودی و داده‌های آن‌ها از بین خواهد رفت!",
+        "hint": "این عملیات قابل بازگشت نیست. کاربران باید ربات را دوباره راه‌اندازی کنند تا حساب جدید بسازند.",
+        "deleteFromPanel": "همچنین از پنل RemnaWave حذف شود"
+      },
+      "params": {
+        "days": "تعداد روز",
+        "tariff": "انتخاب تعرفه",
+        "trafficGb": "حجم ترافیک (GB)",
+        "balanceRub": "مبلغ (روبل)",
+        "promoGroup": "گروه تبلیغاتی",
+        "removePromoGroup": "حذف گروه تبلیغاتی",
+        "deviceLimit": "تعداد دستگاه"
+      },
+      "grantSubscription": {
+        "warning": "کاربرانی که قبلا اشتراک تعرفه انتخاب شده را دارند رد خواهند شد"
+      },
+      "confirm": "اعمال",
+      "cancel": "انصراف",
+      "executing": "در حال اجرا...",
+      "complete": "انجام شد",
+      "successCount": "موفق: {{count}}",
+      "errorCount": "خطا: {{count}}",
+      "progress": {
+        "processed": "پردازش شده: {{current}} / {{total}}",
+        "succeeded": "موفق",
+        "failed": "ناموفق",
+        "ok": "OK",
+        "errorGeneric": "خطا",
+        "doNotClose": "لطفا تا پایان عملیات این پنجره را نبندید",
+        "summarySuccess": "{{count}} موفق",
+        "summaryErrors": "{{count}} خطا"
+      },
+      "errors": {
+        "title": "{{count}} خطا — نمایش جزئیات"
+      },
+      "filters": {
+        "search": "جستجو بر اساس شناسه، نام کاربری، ایمیل",
+        "status": "وضعیت اشتراک",
+        "tariff": "تعرفه",
+        "promoGroup": "گروه تبلیغاتی",
+        "allStatuses": "همه وضعیت‌ها",
+        "allTariffs": "همه تعرفه‌ها",
+        "allGroups": "همه گروه‌ها",
+        "allCampaigns": "همه کمپین‌ها",
+        "allPartners": "همه شرکا",
+        "trialOnly": "فقط آزمایشی",
+        "tariffsSelected": "{{count}} تعرفه",
+        "selectAll": "انتخاب همه",
+        "deselectAll": "لغو انتخاب همه"
+      },
+      "statuses": {
+        "active": "فعال",
+        "expired": "منقضی",
+        "trial": "آزمایشی",
+        "limited": "محدود",
+        "disabled": "غیرفعال"
+      },
+      "columns": {
+        "user": "کاربر",
+        "status": "وضعیت",
+        "tariff": "تعرفه",
+        "balance": "موجودی",
+        "daysRemaining": "روز",
+        "promoGroup": "گروه",
+        "spent": "خرج شده"
+      },
+      "subscriptionsSelected": "{{count}} اشتراک انتخاب شده",
+      "usersSelected": "{{count}} کاربر انتخاب شده",
+      "expandSubscriptions": "نمایش اشتراک‌ها",
+      "collapseSubscriptions": "پنهان کردن اشتراک‌ها",
+      "noSubscriptions": "بدون اشتراک",
+      "subscriptionTarget": "هدف: اشتراک‌ها",
+      "userTarget": "هدف: کاربران",
+      "daysUnit": "روز",
+      "trafficOf": "از",
+      "trafficGbUnit": "GB",
+      "selectAllSubs": "انتخاب همه اشتراک‌ها",
+      "deselectAllSubs": "لغو انتخاب همه اشتراک‌ها"
     }
   },
   "adminUpdates": {
diff --git a/src/locales/ru.json b/src/locales/ru.json
index 2c69a25..6de3b43 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -1146,7 +1146,9 @@
       "salesStats": "Статистика продаж",
       "landings": "Лендинги",
       "referralNetwork": "Реферальная сеть",
-      "news": "Новости"
+      "news": "Новости",
+      "bulkActions": "Массовые действия",
+      "infoPages": "Инфо-страницы"
     },
     "panel": {
       "title": "Панель администратора",
@@ -3769,6 +3771,113 @@
       "users": "Пользователи",
       "security": "Безопасность"
     },
+    "bulkActions": {
+      "title": "Массовые действия",
+      "subtitle": "Управление пользователями",
+      "selectedCount": "Выбрано: {{count}}",
+      "selectAll": "Выбрать всех",
+      "deselectAll": "Снять выделение",
+      "selectUser": "Выбрать пользователя {{name}}",
+      "deselectUser": "Снять выбор пользователя {{name}}",
+      "noResults": "Пользователи не найдены",
+      "perPage": "На странице",
+      "actions": {
+        "extend": "Продлить подписку",
+        "cancel": "Деактивировать подписки",
+        "activate": "Активировать подписки",
+        "changeTariff": "Сменить тариф",
+        "addTraffic": "Начислить трафик",
+        "addBalance": "Начислить баланс",
+        "assignPromoGroup": "Назначить промогруппу",
+        "grantSubscription": "Выдать подписку",
+        "setDevices": "Изменить устройства",
+        "deleteSubscription": "Удалить подписки",
+        "deleteUser": "Удалить пользователей"
+      },
+      "deleteSubscription": {
+        "warning": "Выбранные подписки будут безвозвратно удалены из бота и панели RemnaWave!",
+        "hint": "Пользователи потеряют доступ к VPN по удалённым подпискам. Это действие нельзя отменить."
+      },
+      "deleteUser": {
+        "warning": "Выбранные пользователи будут безвозвратно удалены из бота! Все их подписки, баланс и данные будут потеряны!",
+        "hint": "Это действие нельзя отменить. Пользователям придётся заново запустить бота для создания нового аккаунта.",
+        "deleteFromPanel": "Также удалить из панели RemnaWave"
+      },
+      "params": {
+        "days": "Количество дней",
+        "tariff": "Выберите тариф",
+        "trafficGb": "Объём трафика (ГБ)",
+        "balanceRub": "Сумма (руб.)",
+        "promoGroup": "Промогруппа",
+        "removePromoGroup": "Убрать промогруппу",
+        "deviceLimit": "Кол-во устройств"
+      },
+      "grantSubscription": {
+        "warning": "Пользователи, у которых уже есть подписка на выбранный тариф, будут пропущены"
+      },
+      "confirm": "Применить",
+      "cancel": "Отмена",
+      "executing": "Выполнение...",
+      "complete": "Выполнено",
+      "successCount": "Успешно: {{count}}",
+      "errorCount": "Ошибок: {{count}}",
+      "progress": {
+        "processed": "Обработано: {{current}} / {{total}}",
+        "succeeded": "успешно",
+        "failed": "ошибок",
+        "ok": "ОК",
+        "errorGeneric": "Ошибка",
+        "doNotClose": "Не закрывайте это окно, пока операция выполняется",
+        "summarySuccess": "{{count}} успешно",
+        "summaryErrors": "{{count}} ошибок"
+      },
+      "errors": {
+        "title": "{{count}} ошибок — показать детали"
+      },
+      "filters": {
+        "search": "Поиск по ID, нику, email",
+        "status": "Статус подписки",
+        "tariff": "Тариф",
+        "promoGroup": "Промогруппа",
+        "allStatuses": "Все статусы",
+        "allTariffs": "Все тарифы",
+        "allGroups": "Все группы",
+        "allCampaigns": "Все кампании",
+        "allPartners": "Все партнёры",
+        "trialOnly": "Только триал",
+        "tariffsSelected": "{{count}} тарифов",
+        "selectAll": "Выбрать все",
+        "deselectAll": "Снять все"
+      },
+      "statuses": {
+        "active": "Активна",
+        "expired": "Истекла",
+        "trial": "Триал",
+        "limited": "Ограничена",
+        "disabled": "Отключена"
+      },
+      "columns": {
+        "user": "Пользователь",
+        "status": "Статус",
+        "tariff": "Тариф",
+        "balance": "Баланс",
+        "daysRemaining": "Дни",
+        "promoGroup": "Группа",
+        "spent": "Потрачено"
+      },
+      "subscriptionsSelected": "{{count}} подписок выбрано",
+      "usersSelected": "{{count}} пользователей выбрано",
+      "expandSubscriptions": "Показать подписки",
+      "collapseSubscriptions": "Скрыть подписки",
+      "noSubscriptions": "Нет подписок",
+      "subscriptionTarget": "Цель: подписки",
+      "userTarget": "Цель: пользователи",
+      "daysUnit": "дн.",
+      "trafficOf": "из",
+      "trafficGbUnit": "ГБ",
+      "selectAllSubs": "Выбрать все подписки",
+      "deselectAllSubs": "Снять все подписки"
+    },
     "theme": {
       "accentColor": "Акцентный цвет",
       "customizeColors": "Настроить цвета",
@@ -4242,6 +4351,76 @@
         "prev": "Назад",
         "next": "Далее"
       }
+    },
+    "infoPages": {
+      "title": "Информационные страницы",
+      "subtitle": "Управление статическими информационными страницами",
+      "create": "Создать страницу",
+      "createFaq": "Создать FAQ",
+      "edit": "Редактировать",
+      "save": "Сохранить",
+      "saving": "Сохранение...",
+      "saved": "Страница сохранена",
+      "delete": "Удалить",
+      "confirmDelete": "Удалить эту страницу?",
+      "saveError": "Не удалось сохранить страницу. Попробуйте ещё раз.",
+      "noPages": "Информационных страниц пока нет",
+      "notFound": "Страница не найдена",
+      "active": "Активна",
+      "inactive": "Неактивна",
+      "typePage": "Страница",
+      "localeLabel": "Язык контента",
+      "fields": {
+        "slug": "URL-адрес",
+        "title": "Заголовок",
+        "content": "Содержание",
+        "isActive": "Активна",
+        "sortOrder": "Порядок сортировки",
+        "icon": "Иконка (эмодзи)",
+        "pageType": "Тип страницы",
+        "replacesTab": "Заменяет таб"
+      },
+      "replacesTabNone": "Не заменяет",
+      "replacesTabOptions": {
+        "faq": "FAQ",
+        "rules": "Правила",
+        "privacy": "Конфиденциальность",
+        "offer": "Оферта"
+      },
+      "replacesTabConflict": "уже занят",
+      "replacesTabWarning": "Другая страница уже заменяет этот таб. При сохранении она будет снята.",
+      "filter": {
+        "all": "Все",
+        "page": "Страницы",
+        "faq": "FAQ"
+      },
+      "pageTypes": {
+        "page": "Страница",
+        "faq": "FAQ"
+      },
+      "faq": {
+        "questions": "Вопросы и ответы",
+        "questionsCount": "вопросов",
+        "noQuestions": "Вопросов пока нет. Нажмите кнопку ниже, чтобы добавить.",
+        "questionNumber": "Вопрос #{{n}}",
+        "question": "Вопрос",
+        "answer": "Ответ",
+        "questionPlaceholder": "Введите вопрос...",
+        "answerPlaceholder": "Введите ответ (поддерживается HTML)...",
+        "htmlHint": "Поддерживается HTML-разметка",
+        "addQuestion": "Добавить вопрос",
+        "removeQuestion": "Удалить вопрос",
+        "moveUp": "Переместить вверх",
+        "moveDown": "Переместить вниз",
+        "searchPlaceholder": "Поиск по вопросам...",
+        "noResults": "Ничего не найдено"
+      },
+      "locales": {
+        "ru": "Русский",
+        "en": "Английский",
+        "zh": "Китайский",
+        "fa": "Персидский"
+      }
     }
   },
   "adminUpdates": {
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 5d775b2..8661527 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -949,7 +949,8 @@
       "salesStats": "销售统计",
       "landings": "落地页",
       "referralNetwork": "推荐网络",
-      "news": "新闻"
+      "news": "新闻",
+      "infoPages": "信息页面"
     },
     "panel": {
       "title": "管理面板",
@@ -3365,6 +3366,183 @@
       "periodDaySuffix": "天",
       "localeTab": "语言",
       "localeHint": "切换语言以编辑该语言的文本"
+    },
+    "infoPages": {
+      "title": "信息页面",
+      "subtitle": "管理静态信息页面",
+      "create": "创建页面",
+      "createFaq": "创建FAQ",
+      "edit": "编辑",
+      "save": "保存",
+      "saving": "保存中...",
+      "saved": "页面已保存",
+      "delete": "删除",
+      "confirmDelete": "确定删除此页面？",
+      "saveError": "保存页面失败，请重试。",
+      "noPages": "暂无信息页面",
+      "notFound": "页面未找到",
+      "active": "已激活",
+      "inactive": "未激活",
+      "typePage": "页面",
+      "localeLabel": "内容语言",
+      "fields": {
+        "slug": "URL标识",
+        "title": "标题",
+        "content": "内容",
+        "isActive": "已激活",
+        "sortOrder": "排序",
+        "icon": "图标（表情）",
+        "pageType": "页面类型",
+        "replacesTab": "替换标签"
+      },
+      "replacesTabNone": "不替换",
+      "replacesTabOptions": {
+        "faq": "FAQ",
+        "rules": "规则",
+        "privacy": "隐私",
+        "offer": "条款"
+      },
+      "replacesTabConflict": "已被占用",
+      "replacesTabWarning": "另一个页面已替换此标签。保存后该页面将被取消替换。",
+      "filter": {
+        "all": "全部",
+        "page": "页面",
+        "faq": "FAQ"
+      },
+      "pageTypes": {
+        "page": "页面",
+        "faq": "FAQ"
+      },
+      "faq": {
+        "questions": "问答",
+        "questionsCount": "个问题",
+        "noQuestions": "暂无问题。点击下方按钮添加。",
+        "questionNumber": "问题 #{{n}}",
+        "question": "问题",
+        "answer": "答案",
+        "questionPlaceholder": "输入问题...",
+        "answerPlaceholder": "输入答案（支持HTML）...",
+        "htmlHint": "支持HTML标记",
+        "addQuestion": "添加问题",
+        "removeQuestion": "删除问题",
+        "moveUp": "上移",
+        "moveDown": "下移",
+        "searchPlaceholder": "搜索问题...",
+        "noResults": "未找到结果"
+      },
+      "locales": {
+        "ru": "俄语",
+        "en": "英语",
+        "zh": "中文",
+        "fa": "波斯语"
+      }
+    },
+    "bulkActions": {
+      "title": "批量操作",
+      "subtitle": "用户管理",
+      "selectedCount": "已选择: {{count}}",
+      "selectAll": "全选",
+      "deselectAll": "取消全选",
+      "selectUser": "选择用户 {{name}}",
+      "deselectUser": "取消选择用户 {{name}}",
+      "noResults": "未找到用户",
+      "perPage": "每页",
+      "actions": {
+        "extend": "延长订阅",
+        "cancel": "停用订阅",
+        "activate": "激活订阅",
+        "changeTariff": "更改套餐",
+        "addTraffic": "添加流量",
+        "addBalance": "添加余额",
+        "assignPromoGroup": "分配促销组",
+        "grantSubscription": "授予订阅",
+        "setDevices": "设置设备数",
+        "deleteSubscription": "删除订阅",
+        "deleteUser": "删除用户"
+      },
+      "deleteSubscription": {
+        "warning": "选中的订阅将从机器人和RemnaWave面板中永久删除！",
+        "hint": "用户将失去已删除订阅的VPN访问权限。此操作无法撤销。"
+      },
+      "deleteUser": {
+        "warning": "选中的用户将从机器人中永久删除！他们的所有订阅、余额和数据将丢失！",
+        "hint": "此操作无法撤销。用户需要重新启动机器人以创建新账户。",
+        "deleteFromPanel": "同时从RemnaWave面板删除"
+      },
+      "params": {
+        "days": "天数",
+        "tariff": "选择套餐",
+        "trafficGb": "流量 (GB)",
+        "balanceRub": "金额 (卢布)",
+        "promoGroup": "促销组",
+        "removePromoGroup": "移除促销组",
+        "deviceLimit": "设备数量"
+      },
+      "grantSubscription": {
+        "warning": "已拥有所选套餐订阅的用户将被跳过"
+      },
+      "confirm": "应用",
+      "cancel": "取消",
+      "executing": "执行中...",
+      "complete": "完成",
+      "successCount": "成功: {{count}}",
+      "errorCount": "错误: {{count}}",
+      "progress": {
+        "processed": "已处理: {{current}} / {{total}}",
+        "succeeded": "成功",
+        "failed": "失败",
+        "ok": "OK",
+        "errorGeneric": "错误",
+        "doNotClose": "操作进行中请勿关闭此窗口",
+        "summarySuccess": "{{count}} 成功",
+        "summaryErrors": "{{count}} 错误"
+      },
+      "errors": {
+        "title": "{{count}} 个错误 — 显示详情"
+      },
+      "filters": {
+        "search": "按ID、用户名、邮箱搜索",
+        "status": "订阅状态",
+        "tariff": "套餐",
+        "promoGroup": "促销组",
+        "allStatuses": "所有状态",
+        "allTariffs": "所有套餐",
+        "allGroups": "所有组",
+        "allCampaigns": "所有活动",
+        "allPartners": "所有合作伙伴",
+        "trialOnly": "仅试用",
+        "tariffsSelected": "{{count}} 个套餐",
+        "selectAll": "全选",
+        "deselectAll": "取消全选"
+      },
+      "statuses": {
+        "active": "活跃",
+        "expired": "已过期",
+        "trial": "试用",
+        "limited": "受限",
+        "disabled": "已禁用"
+      },
+      "columns": {
+        "user": "用户",
+        "status": "状态",
+        "tariff": "套餐",
+        "balance": "余额",
+        "daysRemaining": "天数",
+        "promoGroup": "组",
+        "spent": "已消费"
+      },
+      "subscriptionsSelected": "已选择 {{count}} 个订阅",
+      "usersSelected": "已选择 {{count}} 个用户",
+      "expandSubscriptions": "显示订阅",
+      "collapseSubscriptions": "隐藏订阅",
+      "noSubscriptions": "无订阅",
+      "subscriptionTarget": "目标: 订阅",
+      "userTarget": "目标: 用户",
+      "daysUnit": "天",
+      "trafficOf": "/",
+      "trafficGbUnit": "GB",
+      "selectAllSubs": "选择所有订阅",
+      "deselectAllSubs": "取消选择所有订阅"
     }
   },
   "adminUpdates": {
diff --git a/src/pages/AdminBulkActions.tsx b/src/pages/AdminBulkActions.tsx
new file mode 100644
index 0000000..0a9c286
--- /dev/null
+++ b/src/pages/AdminBulkActions.tsx
@@ -0,0 +1,2425 @@
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { useNavigate } from 'react-router';
+import { useTranslation } from 'react-i18next';
+import {
+  useReactTable,
+  getCoreRowModel,
+  flexRender,
+  type ColumnDef,
+  type RowSelectionState,
+} from '@tanstack/react-table';
+import { adminUsersApi, type UserListItem, type UserListItemSubscription } from '../api/adminUsers';
+import { tariffsApi, type TariffListItem } from '../api/tariffs';
+import { promocodesApi, type PromoGroup } from '../api/promocodes';
+import { campaignsApi, type CampaignListItem } from '../api/campaigns';
+import { partnerApi, type AdminPartnerItem } from '../api/partners';
+import {
+  adminBulkActionsApi,
+  type BulkActionType,
+  type BulkActionParams,
+  type BulkActionResult,
+  type BulkProgressEvent,
+} from '../api/adminBulkActions';
+import { usePlatform } from '../platform/hooks/usePlatform';
+import { useCurrency } from '../hooks/useCurrency';
+import { cn } from '@/lib/utils';
+
+// ============ Types ============
+
+type SubscriptionStatusFilter = '' | 'active' | 'expired' | 'trial' | 'limited' | 'disabled';
+
+interface ActionConfig {
+  type: BulkActionType;
+  labelKey: string;
+  icon: React.ReactNode;
+  colorClass: string;
+}
+
+interface ProgressState {
+  current: number;
+  total: number;
+  successCount: number;
+  errorCount: number;
+  log: BulkProgressEvent[];
+}
+
+interface ModalState {
+  open: boolean;
+  action: BulkActionType | null;
+  loading: boolean;
+  result: BulkActionResult | null;
+  progress: ProgressState | null;
+}
+
+// ============ Icons ============
+
+const BackIcon = () => (
+  <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 SearchIcon = () => (
+  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+    />
+  </svg>
+);
+
+const ChevronLeftIcon = () => (
+  <svg className="h-5 w-5" 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 ChevronRightIcon = () => (
+  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+  </svg>
+);
+
+const RefreshIcon = ({ className = 'w-5 h-5' }: { className?: string }) => (
+  <svg className={className} 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 CheckIcon = () => (
+  <svg
+    className="h-3 w-3 text-white"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth={3}
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+  </svg>
+);
+
+const XCloseIcon = () => (
+  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+  </svg>
+);
+
+const ChevronDownIcon = () => (
+  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+  </svg>
+);
+
+const ChevronExpandIcon = ({ expanded }: { expanded: boolean }) => (
+  <svg
+    className={cn('h-4 w-4 text-white transition-transform duration-200', expanded && 'rotate-180')}
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth={2}
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+  </svg>
+);
+
+// ============ Action target helpers ============
+
+const SUBSCRIPTION_LEVEL_ACTIONS: Set<BulkActionType> = new Set([
+  'extend_subscription',
+  'add_days',
+  'cancel_subscription',
+  'activate_subscription',
+  'change_tariff',
+  'add_traffic',
+  'set_devices',
+  'delete_subscription',
+]);
+
+function isSubscriptionLevelAction(action: BulkActionType): boolean {
+  return SUBSCRIPTION_LEVEL_ACTIONS.has(action);
+}
+
+// ============ Subscription sub-row ============
+
+interface SubscriptionSubRowProps {
+  subscription: UserListItemSubscription;
+  isSelected: boolean;
+  onToggleSelect: () => void;
+  isMultiTariff: boolean;
+}
+
+function SubscriptionSubRow({
+  subscription,
+  isSelected,
+  onToggleSelect,
+  isMultiTariff,
+}: SubscriptionSubRowProps) {
+  const { t } = useTranslation();
+
+  const days = subscription.days_remaining;
+  const daysColor =
+    days === 0 ? 'text-error-400' : days <= 7 ? 'text-amber-400' : 'text-success-400';
+
+  const trafficPercent =
+    subscription.traffic_limit_gb > 0
+      ? Math.min(100, (subscription.traffic_used_gb / subscription.traffic_limit_gb) * 100)
+      : 0;
+  const trafficBarColor =
+    trafficPercent >= 90 ? 'bg-error-400' : trafficPercent >= 70 ? 'bg-amber-400' : 'bg-accent-400';
+
+  return (
+    <tr
+      className={cn(
+        'border-b border-dark-700/30 transition-colors',
+        isSelected ? 'bg-accent-500/8' : 'bg-dark-850/40 hover:bg-dark-800/60',
+      )}
+    >
+      {/* Checkbox cell */}
+      <td className="px-3 py-2">
+        {isMultiTariff && (
+          <div className="flex items-center justify-center">
+            <button
+              onClick={onToggleSelect}
+              className={cn(
+                'flex h-5 w-5 items-center justify-center rounded-md border-2 transition-all duration-150',
+                isSelected
+                  ? 'border-accent-500 bg-accent-500 shadow-[0_0_8px_rgba(var(--color-accent-500),0.4)]'
+                  : 'border-dark-500 bg-dark-700/60 hover:border-accent-500/50 hover:bg-dark-600/60',
+              )}
+              aria-label={
+                isSelected
+                  ? t('admin.bulkActions.deselectUser', { name: subscription.tariff_name || '' })
+                  : t('admin.bulkActions.selectUser', { name: subscription.tariff_name || '' })
+              }
+            >
+              {isSelected && (
+                <svg
+                  className="h-3 w-3 text-white"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={4}
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+                </svg>
+              )}
+            </button>
+          </div>
+        )}
+      </td>
+
+      {/* Subscription info — spans remaining columns */}
+      <td colSpan={7} className="px-3 py-2">
+        <div className="flex items-center gap-3 pl-9">
+          {/* Tariff name */}
+          <div className="flex items-center gap-1.5">
+            <span className="text-[10px] text-dark-500" aria-hidden="true">
+              <svg
+                className="h-3.5 w-3.5"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                strokeWidth={1.5}
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"
+                />
+              </svg>
+            </span>
+            <span className="text-xs font-semibold text-dark-200">
+              {subscription.tariff_name || '—'}
+            </span>
+          </div>
+
+          {/* Status */}
+          <StatusBadge status={subscription.status} />
+
+          {/* Days remaining */}
+          <span className={cn('text-xs font-medium tabular-nums', daysColor)}>
+            {days}
+            <span className="ml-0.5 text-[10px] font-normal text-dark-500">
+              {t('admin.bulkActions.daysUnit')}
+            </span>
+          </span>
+
+          {/* Traffic progress */}
+          <div className="flex items-center gap-1.5">
+            <span className="text-[10px] tabular-nums text-dark-400">
+              {subscription.traffic_used_gb.toFixed(1)} {t('admin.bulkActions.trafficOf')}{' '}
+              {subscription.traffic_limit_gb} {t('admin.bulkActions.trafficGbUnit')}
+            </span>
+            <div className="h-1.5 w-16 overflow-hidden rounded-full bg-dark-700/60">
+              <div
+                className={cn('h-full rounded-full transition-all duration-300', trafficBarColor)}
+                style={{ width: `${trafficPercent}%` }}
+              />
+            </div>
+          </div>
+
+          {/* Devices */}
+          <span className="flex items-center gap-1 text-xs text-dark-400">
+            <svg
+              className="h-3 w-3"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={1.5}
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3"
+              />
+            </svg>
+            {subscription.device_limit}
+          </span>
+        </div>
+      </td>
+    </tr>
+  );
+}
+
+// ============ Status badge ============
+
+function StatusBadge({ status }: { status: string | null }) {
+  const { t } = useTranslation();
+
+  const config: Record<string, { class: string; labelKey: string }> = {
+    active: {
+      class: 'border-success-500/30 bg-success-500/15 text-success-400',
+      labelKey: 'admin.bulkActions.statuses.active',
+    },
+    expired: {
+      class: 'border-error-500/30 bg-error-500/15 text-error-400',
+      labelKey: 'admin.bulkActions.statuses.expired',
+    },
+    trial: {
+      class: 'border-amber-500/30 bg-amber-500/15 text-amber-400',
+      labelKey: 'admin.bulkActions.statuses.trial',
+    },
+    limited: {
+      class: 'border-amber-500/30 bg-amber-500/15 text-amber-400',
+      labelKey: 'admin.bulkActions.statuses.limited',
+    },
+    disabled: {
+      class: 'border-dark-500/30 bg-dark-500/15 text-dark-400',
+      labelKey: 'admin.bulkActions.statuses.disabled',
+    },
+  };
+
+  const c = config[status || ''] || config.disabled;
+
+  return (
+    <span
+      className={cn(
+        'inline-flex rounded-full border px-2 py-0.5 text-[10px] font-medium leading-tight',
+        c.class,
+      )}
+    >
+      {t(c.labelKey, status || '')}
+    </span>
+  );
+}
+
+// ============ Progress Bar ============
+
+function ProgressBar({ loading }: { loading: boolean }) {
+  const [progress, setProgress] = useState(0);
+  const [visible, setVisible] = useState(false);
+  const intervalRef = useRef<ReturnType<typeof setInterval>>(undefined);
+
+  useEffect(() => {
+    if (loading) {
+      setProgress(0);
+      setVisible(true);
+      intervalRef.current = setInterval(() => {
+        setProgress((prev) => {
+          if (prev < 30) return prev + 8;
+          if (prev < 60) return prev + 3;
+          if (prev < 85) return prev + 1;
+          if (prev < 95) return prev + 0.3;
+          return prev;
+        });
+      }, 100);
+    } else {
+      if (visible) {
+        setProgress(100);
+        clearInterval(intervalRef.current);
+        const timer = setTimeout(() => {
+          setVisible(false);
+          setProgress(0);
+        }, 300);
+        return () => clearTimeout(timer);
+      }
+    }
+    return () => clearInterval(intervalRef.current);
+  }, [loading, visible]);
+
+  if (!visible) return null;
+
+  return (
+    <div className="absolute left-0 right-0 top-0 z-50 h-0.5 overflow-hidden rounded-full bg-dark-700/50">
+      <div
+        className="h-full rounded-full bg-gradient-to-r from-accent-500 to-accent-400 transition-all duration-200 ease-out"
+        style={{ width: `${progress}%` }}
+      />
+    </div>
+  );
+}
+
+// ============ Dropdown Select ============
+
+interface DropdownOption {
+  value: string;
+  label: string;
+}
+
+function DropdownSelect({
+  value,
+  options,
+  onChange,
+  className,
+}: {
+  value: string;
+  options: DropdownOption[];
+  onChange: (v: string) => void;
+  className?: string;
+}) {
+  return (
+    <div className={cn('relative', className)}>
+      <select
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className="w-full appearance-none rounded-xl border border-dark-700 bg-dark-800 px-3 py-2.5 pr-8 text-sm text-dark-100 outline-none transition-colors focus:border-accent-500/40 focus:shadow-[0_0_0_3px_rgba(var(--color-accent-500),0.08)]"
+      >
+        {options.map((o) => (
+          <option key={o.value} value={o.value}>
+            {o.label}
+          </option>
+        ))}
+      </select>
+      <div className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-dark-500">
+        <ChevronDownIcon />
+      </div>
+    </div>
+  );
+}
+
+// ============ Multi-Select Dropdown ============
+
+interface MultiSelectOption {
+  value: number;
+  label: string;
+}
+
+interface MultiSelectDropdownProps {
+  options: MultiSelectOption[];
+  selected: number[];
+  onChange: (ids: number[]) => void;
+  placeholder: string;
+  className?: string;
+}
+
+function MultiSelectDropdown({
+  options,
+  selected,
+  onChange,
+  placeholder,
+  className,
+}: MultiSelectDropdownProps) {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [open]);
+
+  const buttonLabel = useMemo(() => {
+    if (selected.length === 0) return placeholder;
+    if (selected.length <= 2) {
+      return selected
+        .map((id) => options.find((o) => o.value === id)?.label)
+        .filter(Boolean)
+        .join(', ');
+    }
+    return t('admin.bulkActions.filters.tariffsSelected', { count: selected.length });
+  }, [selected, options, placeholder, t]);
+
+  const handleToggle = (value: number) => {
+    if (selected.includes(value)) {
+      onChange(selected.filter((id) => id !== value));
+    } else {
+      onChange([...selected, value]);
+    }
+  };
+
+  const handleSelectAll = () => {
+    onChange(options.map((o) => o.value));
+  };
+
+  const handleDeselectAll = () => {
+    onChange([]);
+  };
+
+  return (
+    <div ref={containerRef} className={cn('relative', className)}>
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className={cn(
+          'flex w-full items-center justify-between rounded-xl border bg-dark-800 px-3 py-2.5 text-left text-sm outline-none transition-colors',
+          open
+            ? 'border-accent-500/40 shadow-[0_0_0_3px_rgba(var(--color-accent-500),0.08)]'
+            : 'border-dark-700',
+          selected.length > 0 ? 'text-dark-100' : 'text-dark-500',
+        )}
+        aria-expanded={open}
+        aria-haspopup="listbox"
+      >
+        <span className="truncate">{buttonLabel}</span>
+        <div
+          className={cn('ml-2 shrink-0 text-dark-500 transition-transform', open && 'rotate-180')}
+        >
+          <ChevronDownIcon />
+        </div>
+      </button>
+
+      {open && (
+        <div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-64 overflow-y-auto rounded-xl border border-dark-700 bg-dark-800 py-1 shadow-2xl">
+          {/* Select all / Deselect all */}
+          <div className="flex items-center gap-1 border-b border-dark-700/50 px-3 py-1.5">
+            <button
+              type="button"
+              onClick={handleSelectAll}
+              className="text-xs font-medium text-accent-400 transition-colors hover:text-accent-300"
+            >
+              {t('admin.bulkActions.filters.selectAll')}
+            </button>
+            <span className="text-dark-600">/</span>
+            <button
+              type="button"
+              onClick={handleDeselectAll}
+              className="text-xs font-medium text-dark-400 transition-colors hover:text-dark-300"
+            >
+              {t('admin.bulkActions.filters.deselectAll')}
+            </button>
+          </div>
+
+          {/* Options */}
+          {options.map((option) => {
+            const isChecked = selected.includes(option.value);
+            return (
+              <button
+                key={option.value}
+                type="button"
+                onClick={() => handleToggle(option.value)}
+                className="flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm transition-colors hover:bg-dark-700/50"
+                role="option"
+                aria-selected={isChecked}
+              >
+                <div
+                  className={cn(
+                    'flex h-4 w-4 shrink-0 items-center justify-center rounded border transition-all duration-150',
+                    isChecked
+                      ? 'border-accent-500 bg-accent-500'
+                      : 'border-dark-500 bg-dark-700/60',
+                  )}
+                >
+                  {isChecked && (
+                    <svg
+                      className="h-2.5 w-2.5 text-white"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      strokeWidth={4}
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        d="M4.5 12.75l6 6 9-13.5"
+                      />
+                    </svg>
+                  )}
+                </div>
+                <span className={cn('text-sm', isChecked ? 'text-dark-100' : 'text-dark-300')}>
+                  {option.label}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ============ Progress View ============
+
+function ProgressView({ progress }: { progress: ProgressState }) {
+  const { t } = useTranslation();
+  const logEndRef = useRef<HTMLDivElement>(null);
+  const percentage = progress.total > 0 ? Math.round((progress.current / progress.total) * 100) : 0;
+
+  useEffect(() => {
+    logEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [progress.log.length]);
+
+  return (
+    <div className="space-y-4">
+      {/* Progress bar */}
+      <div>
+        <div className="mb-2 flex items-center justify-between text-sm">
+          <span className="font-medium text-dark-200">
+            {t('admin.bulkActions.progress.processed', {
+              current: progress.current,
+              total: progress.total,
+            })}
+          </span>
+          <span className="font-bold tabular-nums text-accent-400">{percentage}%</span>
+        </div>
+        <div className="h-2.5 overflow-hidden rounded-full bg-dark-700/60">
+          <div
+            className="h-full rounded-full bg-gradient-to-r from-accent-500 to-accent-400 transition-all duration-300 ease-out"
+            style={{ width: `${percentage}%` }}
+          />
+        </div>
+      </div>
+
+      {/* Counters */}
+      <div className="flex gap-4">
+        <div className="flex items-center gap-1.5">
+          <div className="h-2 w-2 rounded-full bg-success-400" />
+          <span className="text-sm tabular-nums text-success-400">{progress.successCount}</span>
+          <span className="text-xs text-dark-500">{t('admin.bulkActions.progress.succeeded')}</span>
+        </div>
+        <div className="flex items-center gap-1.5">
+          <div className="h-2 w-2 rounded-full bg-error-400" />
+          <span className="text-sm tabular-nums text-error-400">{progress.errorCount}</span>
+          <span className="text-xs text-dark-500">{t('admin.bulkActions.progress.failed')}</span>
+        </div>
+      </div>
+
+      {/* Live log */}
+      {progress.log.length > 0 && (
+        <div className="max-h-48 overflow-y-auto rounded-xl border border-dark-700 bg-dark-800/50 p-3">
+          <div className="space-y-1">
+            {progress.log.slice(-10).map((entry, idx) => (
+              <div key={idx} className="flex items-start gap-2 text-xs">
+                {entry.success ? (
+                  <span className="mt-0.5 shrink-0 text-success-400" aria-hidden="true">
+                    <svg
+                      className="h-3 w-3"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      strokeWidth={3}
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        d="M4.5 12.75l6 6 9-13.5"
+                      />
+                    </svg>
+                  </span>
+                ) : (
+                  <span className="mt-0.5 shrink-0 text-error-400" aria-hidden="true">
+                    <svg
+                      className="h-3 w-3"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      strokeWidth={3}
+                    >
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                  </span>
+                )}
+                <span className="font-mono text-dark-400">
+                  {entry.username ? `@${entry.username}` : `#${entry.user_id}`}
+                </span>
+                <span className={entry.success ? 'text-dark-300' : 'text-error-300'}>
+                  {entry.success
+                    ? entry.message || t('admin.bulkActions.progress.ok')
+                    : entry.message || entry.error || t('admin.bulkActions.progress.errorGeneric')}
+                </span>
+              </div>
+            ))}
+            <div ref={logEndRef} />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ============ Error Details ============
+
+function ErrorDetails({ result }: { result: BulkActionResult }) {
+  const { t } = useTranslation();
+  const [expanded, setExpanded] = useState(false);
+
+  if (result.error_count === 0 || result.errors.length === 0) return null;
+
+  return (
+    <div className="rounded-xl border border-error-500/20 bg-error-500/5">
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="flex w-full items-center justify-between px-4 py-3 text-left"
+        aria-expanded={expanded}
+      >
+        <span className="text-sm font-medium text-error-400">
+          {t('admin.bulkActions.errors.title', { count: result.error_count })}
+        </span>
+        <svg
+          className={cn(
+            'h-4 w-4 text-error-400 transition-transform duration-200',
+            expanded && 'rotate-180',
+          )}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2}
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+        </svg>
+      </button>
+      {expanded && (
+        <div className="max-h-48 overflow-y-auto border-t border-error-500/20 px-4 py-3">
+          <div className="space-y-2">
+            {result.errors.map((err, idx) => (
+              <div key={idx} className="flex items-start gap-2 text-xs">
+                <span className="mt-0.5 shrink-0 text-error-400" aria-hidden="true">
+                  <svg
+                    className="h-3 w-3"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    strokeWidth={3}
+                  >
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </span>
+                <span className="shrink-0 font-mono text-dark-400">
+                  {err.username ? `@${err.username}` : `#${err.user_id}`}
+                </span>
+                <span className="text-error-300">{err.error}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ============ Action Modal ============
+
+interface ActionModalProps {
+  modal: ModalState;
+  selectedCount: number;
+  tariffs: TariffListItem[];
+  promoGroups: PromoGroup[];
+  onClose: () => void;
+  onExecute: (params: BulkActionParams) => void;
+}
+
+function ActionModal({
+  modal,
+  selectedCount,
+  tariffs,
+  promoGroups,
+  onClose,
+  onExecute,
+}: ActionModalProps) {
+  const { t } = useTranslation();
+  const [days, setDays] = useState(30);
+  const [tariffId, setTariffId] = useState<number>(tariffs[0]?.id ?? 0);
+  const [trafficGb, setTrafficGb] = useState(10);
+  const [balanceRub, setBalanceRub] = useState(100);
+  const [promoGroupId, setPromoGroupId] = useState<number | null>(promoGroups[0]?.id ?? null);
+  const [grantTariffId, setGrantTariffId] = useState<number>(tariffs[0]?.id ?? 0);
+  const [grantDays, setGrantDays] = useState(30);
+  const [deviceLimit, setDeviceLimit] = useState(1);
+  const [deleteFromPanel, setDeleteFromPanel] = useState(true);
+
+  useEffect(() => {
+    if (tariffs.length > 0 && tariffId === 0) {
+      setTariffId(tariffs[0].id);
+    }
+    if (tariffs.length > 0 && grantTariffId === 0) {
+      setGrantTariffId(tariffs[0].id);
+    }
+  }, [tariffs, tariffId, grantTariffId]);
+
+  useEffect(() => {
+    if (promoGroups.length > 0 && promoGroupId === null) {
+      setPromoGroupId(promoGroups[0].id);
+    }
+  }, [promoGroups, promoGroupId]);
+
+  // Reset deleteFromPanel to default when modal opens
+  useEffect(() => {
+    if (modal.open && modal.action === 'delete_user') {
+      setDeleteFromPanel(true);
+    }
+  }, [modal.open, modal.action]);
+
+  // Escape key handler — only when not loading
+  useEffect(() => {
+    if (!modal.open) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && !modal.loading) {
+        onClose();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [modal.open, modal.loading, onClose]);
+
+  if (!modal.open || !modal.action) return null;
+
+  const actionLabelKeys: Record<BulkActionType, string> = {
+    extend_subscription: 'admin.bulkActions.actions.extend',
+    add_days: 'admin.bulkActions.actions.extend',
+    cancel_subscription: 'admin.bulkActions.actions.cancel',
+    activate_subscription: 'admin.bulkActions.actions.activate',
+    change_tariff: 'admin.bulkActions.actions.changeTariff',
+    add_traffic: 'admin.bulkActions.actions.addTraffic',
+    add_balance: 'admin.bulkActions.actions.addBalance',
+    assign_promo_group: 'admin.bulkActions.actions.assignPromoGroup',
+    grant_subscription: 'admin.bulkActions.actions.grantSubscription',
+    set_devices: 'admin.bulkActions.actions.setDevices',
+    delete_subscription: 'admin.bulkActions.actions.deleteSubscription',
+    delete_user: 'admin.bulkActions.actions.deleteUser',
+  };
+
+  const handleSubmit = () => {
+    const params: BulkActionParams = {};
+    switch (modal.action) {
+      case 'extend_subscription':
+        params.days = days;
+        break;
+      case 'change_tariff':
+        params.tariff_id = tariffId;
+        break;
+      case 'add_traffic':
+        params.traffic_gb = trafficGb;
+        break;
+      case 'add_balance':
+        params.amount_kopeks = Math.round(balanceRub * 100);
+        break;
+      case 'assign_promo_group':
+        params.promo_group_id = promoGroupId;
+        break;
+      case 'grant_subscription':
+        params.tariff_id = grantTariffId;
+        params.days = grantDays;
+        break;
+      case 'set_devices':
+        params.device_limit = deviceLimit;
+        break;
+      case 'delete_user':
+        params.delete_from_panel = deleteFromPanel;
+        break;
+    }
+    onExecute(params);
+  };
+
+  const handleBackdropClick = () => {
+    if (!modal.loading) {
+      onClose();
+    }
+  };
+
+  const renderInputs = () => {
+    switch (modal.action) {
+      case 'extend_subscription':
+        return (
+          <div>
+            <label className="mb-1.5 block text-sm font-medium text-dark-300">
+              {t('admin.bulkActions.params.days')}
+            </label>
+            <input
+              type="number"
+              min={1}
+              max={365}
+              value={days}
+              onChange={(e) => setDays(Number(e.target.value))}
+              className="w-full rounded-xl border border-dark-700 bg-dark-800 px-3 py-2.5 text-sm text-dark-100 outline-none transition-colors focus:border-accent-500/40"
+            />
+          </div>
+        );
+      case 'change_tariff':
+        return (
+          <div>
+            <label className="mb-1.5 block text-sm font-medium text-dark-300">
+              {t('admin.bulkActions.params.tariff')}
+            </label>
+            <DropdownSelect
+              value={String(tariffId)}
+              options={tariffs.map((tt) => ({ value: String(tt.id), label: tt.name }))}
+              onChange={(v) => setTariffId(Number(v))}
+            />
+          </div>
+        );
+      case 'add_traffic':
+        return (
+          <div>
+            <label className="mb-1.5 block text-sm font-medium text-dark-300">
+              {t('admin.bulkActions.params.trafficGb')}
+            </label>
+            <input
+              type="number"
+              min={1}
+              max={10000}
+              value={trafficGb}
+              onChange={(e) => setTrafficGb(Number(e.target.value))}
+              className="w-full rounded-xl border border-dark-700 bg-dark-800 px-3 py-2.5 text-sm text-dark-100 outline-none transition-colors focus:border-accent-500/40"
+            />
+          </div>
+        );
+      case 'add_balance':
+        return (
+          <div>
+            <label className="mb-1.5 block text-sm font-medium text-dark-300">
+              {t('admin.bulkActions.params.balanceRub')}
+            </label>
+            <input
+              type="number"
+              min={1}
+              max={100000}
+              value={balanceRub}
+              onChange={(e) => setBalanceRub(Number(e.target.value))}
+              className="w-full rounded-xl border border-dark-700 bg-dark-800 px-3 py-2.5 text-sm text-dark-100 outline-none transition-colors focus:border-accent-500/40"
+            />
+          </div>
+        );
+      case 'assign_promo_group':
+        return (
+          <div>
+            <label className="mb-1.5 block text-sm font-medium text-dark-300">
+              {t('admin.bulkActions.params.promoGroup')}
+            </label>
+            <DropdownSelect
+              value={promoGroupId !== null ? String(promoGroupId) : 'null'}
+              options={[
+                { value: 'null', label: t('admin.bulkActions.params.removePromoGroup') },
+                ...promoGroups.map((pg) => ({ value: String(pg.id), label: pg.name })),
+              ]}
+              onChange={(v) => setPromoGroupId(v === 'null' ? null : Number(v))}
+            />
+          </div>
+        );
+      case 'set_devices':
+        return (
+          <div>
+            <label className="mb-1.5 block text-sm font-medium text-dark-300">
+              {t('admin.bulkActions.params.deviceLimit')}
+            </label>
+            <input
+              type="number"
+              min={1}
+              max={50}
+              value={deviceLimit}
+              onChange={(e) => setDeviceLimit(Number(e.target.value))}
+              className="w-full rounded-xl border border-dark-700 bg-dark-800 px-3 py-2.5 text-sm text-dark-100 outline-none transition-colors focus:border-accent-500/40"
+            />
+          </div>
+        );
+      case 'grant_subscription':
+        return (
+          <div className="space-y-4">
+            <div>
+              <label className="mb-1.5 block text-sm font-medium text-dark-300">
+                {t('admin.bulkActions.params.tariff')}
+              </label>
+              <DropdownSelect
+                value={String(grantTariffId)}
+                options={tariffs.map((tt) => ({ value: String(tt.id), label: tt.name }))}
+                onChange={(v) => setGrantTariffId(Number(v))}
+              />
+            </div>
+            <div>
+              <label className="mb-1.5 block text-sm font-medium text-dark-300">
+                {t('admin.bulkActions.params.days')}
+              </label>
+              <input
+                type="number"
+                min={1}
+                max={365}
+                value={grantDays}
+                onChange={(e) => setGrantDays(Number(e.target.value))}
+                className="w-full rounded-xl border border-dark-700 bg-dark-800 px-3 py-2.5 text-sm text-dark-100 outline-none transition-colors focus:border-accent-500/40"
+              />
+            </div>
+            {/* Warning about users with existing subscriptions */}
+            <div className="rounded-xl border border-amber-500/20 bg-amber-500/5 px-3 py-2.5">
+              <p className="text-xs text-amber-400">
+                {t('admin.bulkActions.grantSubscription.warning')}
+              </p>
+            </div>
+          </div>
+        );
+      case 'delete_subscription':
+        return (
+          <div className="rounded-xl border border-error-500/20 bg-error-500/5 px-3 py-2.5">
+            <p className="text-sm font-medium text-error-400">
+              {t('admin.bulkActions.deleteSubscription.warning')}
+            </p>
+            <p className="mt-1 text-xs text-error-300/70">
+              {t('admin.bulkActions.deleteSubscription.hint')}
+            </p>
+          </div>
+        );
+      case 'delete_user':
+        return (
+          <div className="space-y-4">
+            <div className="rounded-xl border border-error-500/20 bg-error-500/5 px-3 py-2.5">
+              <p className="text-sm font-medium text-error-400">
+                {t('admin.bulkActions.deleteUser.warning')}
+              </p>
+              <p className="mt-1 text-xs text-error-300/70">
+                {t('admin.bulkActions.deleteUser.hint')}
+              </p>
+            </div>
+            <label className="inline-flex min-h-[44px] cursor-pointer items-center gap-2">
+              <button
+                onClick={() => setDeleteFromPanel((prev) => !prev)}
+                className={cn(
+                  'flex h-6 w-6 items-center justify-center rounded-md border-2 transition-all duration-150',
+                  deleteFromPanel
+                    ? 'border-error-500 bg-error-500 shadow-[0_0_8px_rgba(239,68,68,0.4)]'
+                    : 'border-dark-500 bg-dark-700/60 hover:border-error-500/50 hover:bg-dark-600/60',
+                )}
+                aria-pressed={deleteFromPanel}
+              >
+                {deleteFromPanel && <CheckIcon />}
+              </button>
+              <span
+                className={cn(
+                  'text-sm',
+                  deleteFromPanel ? 'font-medium text-error-400' : 'text-dark-400',
+                )}
+              >
+                {t('admin.bulkActions.deleteUser.deleteFromPanel')}
+              </span>
+            </label>
+          </div>
+        );
+      default:
+        return null;
+    }
+  };
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-[9999] flex items-center justify-center"
+      style={{
+        paddingTop: 'max(1rem, env(safe-area-inset-top))',
+        paddingBottom: 'max(1rem, env(safe-area-inset-bottom))',
+        paddingLeft: 'max(1rem, env(safe-area-inset-left))',
+        paddingRight: 'max(1rem, env(safe-area-inset-right))',
+      }}
+      role="dialog"
+      aria-modal="true"
+    >
+      {/* Backdrop — no close on click during loading */}
+      <div
+        className="absolute inset-0 bg-dark-950/80 backdrop-blur-sm"
+        onClick={handleBackdropClick}
+      />
+
+      {/* Modal */}
+      <div className="relative max-h-[calc(100dvh-2rem)] w-full max-w-md overflow-y-auto rounded-2xl border border-dark-700 bg-dark-900 p-6 shadow-2xl">
+        {/* Header */}
+        <div className="mb-5 flex items-center justify-between">
+          <h3 className="text-lg font-bold text-dark-100">{t(actionLabelKeys[modal.action])}</h3>
+          {!modal.loading && (
+            <button
+              onClick={onClose}
+              className="min-h-[44px] min-w-[44px] rounded-lg p-2.5 text-dark-400 transition-colors hover:bg-dark-800 hover:text-dark-200"
+              aria-label={t('common.close')}
+            >
+              <XCloseIcon />
+            </button>
+          )}
+        </div>
+
+        {/* Progress view during execution */}
+        {modal.loading && modal.progress ? (
+          <div className="space-y-4">
+            <ProgressView progress={modal.progress} />
+            <p className="text-center text-xs text-dark-500">
+              {t('admin.bulkActions.progress.doNotClose')}
+            </p>
+          </div>
+        ) : modal.result ? (
+          /* Result view */
+          <div className="space-y-4">
+            {/* Summary line */}
+            <div className="rounded-xl border border-dark-700 bg-dark-800/50 p-4">
+              <div className="mb-3 text-center text-sm font-semibold text-dark-100">
+                {t('admin.bulkActions.complete')}
+              </div>
+              {/* Colored summary */}
+              <div className="mb-3 text-center text-sm">
+                <span className="font-medium text-success-400">
+                  {t('admin.bulkActions.progress.summarySuccess', {
+                    count: modal.result.success_count,
+                  })}
+                </span>
+                {modal.result.error_count > 0 && (
+                  <>
+                    <span className="mx-1.5 text-dark-600" aria-hidden="true">
+                      /
+                    </span>
+                    <span className="font-medium text-error-400">
+                      {t('admin.bulkActions.progress.summaryErrors', {
+                        count: modal.result.error_count,
+                      })}
+                    </span>
+                  </>
+                )}
+              </div>
+              <div className="flex justify-center gap-6">
+                <div className="text-center">
+                  <div className="text-2xl font-bold text-success-400">
+                    {modal.result.success_count}
+                  </div>
+                  <div className="text-xs text-dark-400">
+                    {t('admin.bulkActions.successCount', { count: modal.result.success_count })}
+                  </div>
+                </div>
+                {modal.result.error_count > 0 && (
+                  <div className="text-center">
+                    <div className="text-2xl font-bold text-error-400">
+                      {modal.result.error_count}
+                    </div>
+                    <div className="text-xs text-dark-400">
+                      {t('admin.bulkActions.errorCount', { count: modal.result.error_count })}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* Collapsible error details */}
+            <ErrorDetails result={modal.result} />
+
+            <button
+              onClick={onClose}
+              className="w-full rounded-xl bg-accent-500 px-4 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-accent-600"
+            >
+              {t('common.close')}
+            </button>
+          </div>
+        ) : (
+          <>
+            {/* Affected count */}
+            <div className="mb-4 rounded-xl border border-accent-500/20 bg-accent-500/5 px-4 py-3">
+              <p className="text-sm text-dark-200">
+                {t('admin.bulkActions.selectedCount', { count: selectedCount })}
+              </p>
+            </div>
+
+            {/* Action-specific inputs */}
+            <div className="mb-6">{renderInputs()}</div>
+
+            {/* Buttons */}
+            <div className="flex gap-3">
+              <button
+                onClick={onClose}
+                disabled={modal.loading}
+                className="min-h-[44px] flex-1 rounded-xl border border-dark-700 bg-dark-800 px-4 py-2.5 text-sm font-medium text-dark-300 transition-colors hover:bg-dark-700 disabled:opacity-50"
+              >
+                {t('admin.bulkActions.cancel')}
+              </button>
+              <button
+                onClick={handleSubmit}
+                disabled={modal.loading}
+                className="flex min-h-[44px] flex-1 items-center justify-center gap-2 rounded-xl bg-accent-500 px-4 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-accent-600 disabled:opacity-50"
+              >
+                {t('admin.bulkActions.confirm')}
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+    </div>,
+    document.body,
+  );
+}
+
+// ============ Floating Action Bar ============
+
+interface FloatingActionBarProps {
+  selectedUserCount: number;
+  selectedSubscriptionCount: number;
+  isMultiTariff: boolean;
+  totalVisibleSubscriptionCount: number;
+  onAction: (type: BulkActionType) => void;
+  onToggleAllSubscriptions: () => void;
+}
+
+function FloatingActionBar({
+  selectedUserCount,
+  selectedSubscriptionCount,
+  isMultiTariff,
+  totalVisibleSubscriptionCount,
+  onAction,
+  onToggleAllSubscriptions,
+}: FloatingActionBarProps) {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, []);
+
+  const hasAnySelection = selectedUserCount > 0 || selectedSubscriptionCount > 0;
+  if (!hasAnySelection) return null;
+
+  const actions: ActionConfig[] = [
+    {
+      type: 'extend_subscription',
+      labelKey: 'admin.bulkActions.actions.extend',
+      icon: <span aria-hidden="true">+</span>,
+      colorClass: 'text-success-400 hover:bg-success-500/10',
+    },
+    {
+      type: 'activate_subscription',
+      labelKey: 'admin.bulkActions.actions.activate',
+      icon: <span aria-hidden="true">+</span>,
+      colorClass: 'text-success-400 hover:bg-success-500/10',
+    },
+    {
+      type: 'cancel_subscription',
+      labelKey: 'admin.bulkActions.actions.cancel',
+      icon: <span aria-hidden="true">-</span>,
+      colorClass: 'text-error-400 hover:bg-error-500/10',
+    },
+    {
+      type: 'change_tariff',
+      labelKey: 'admin.bulkActions.actions.changeTariff',
+      icon: <span aria-hidden="true">~</span>,
+      colorClass: 'text-accent-400 hover:bg-accent-500/10',
+    },
+    {
+      type: 'add_traffic',
+      labelKey: 'admin.bulkActions.actions.addTraffic',
+      icon: <span aria-hidden="true">+</span>,
+      colorClass: 'text-accent-400 hover:bg-accent-500/10',
+    },
+    {
+      type: 'set_devices',
+      labelKey: 'admin.bulkActions.actions.setDevices',
+      icon: (
+        <svg
+          className="h-3.5 w-3.5"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2}
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3"
+          />
+        </svg>
+      ),
+      colorClass: 'text-accent-400 hover:bg-accent-500/10',
+    },
+    {
+      type: 'delete_subscription',
+      labelKey: 'admin.bulkActions.actions.deleteSubscription',
+      icon: (
+        <svg
+          className="h-3.5 w-3.5"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2}
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+          />
+        </svg>
+      ),
+      colorClass: 'text-error-400 hover:bg-error-500/10',
+    },
+    {
+      type: 'add_balance',
+      labelKey: 'admin.bulkActions.actions.addBalance',
+      icon: <span aria-hidden="true">$</span>,
+      colorClass: 'text-warning-400 hover:bg-warning-500/10',
+    },
+    {
+      type: 'grant_subscription',
+      labelKey: 'admin.bulkActions.actions.grantSubscription',
+      icon: <span aria-hidden="true">+</span>,
+      colorClass: 'text-success-400 hover:bg-success-500/10',
+    },
+    {
+      type: 'assign_promo_group',
+      labelKey: 'admin.bulkActions.actions.assignPromoGroup',
+      icon: <span aria-hidden="true">%</span>,
+      colorClass: 'text-accent-300 hover:bg-accent-300/10',
+    },
+    {
+      type: 'delete_user',
+      labelKey: 'admin.bulkActions.actions.deleteUser',
+      icon: (
+        <svg
+          className="h-3.5 w-3.5"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2}
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M22 10.5h-6m-8.25-4.5a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0zM1.5 21a8.25 8.25 0 0115 0"
+          />
+        </svg>
+      ),
+      colorClass: 'text-error-400 hover:bg-error-500/10',
+    },
+  ];
+
+  return (
+    <div className="fixed inset-x-0 bottom-0 z-[9999] flex justify-center px-4 pb-[max(5rem,calc(4.5rem+env(safe-area-inset-bottom)))]">
+      <div
+        ref={menuRef}
+        className="relative flex w-full max-w-2xl items-center gap-3 rounded-2xl border border-dark-700/60 bg-dark-800/80 px-5 py-3 shadow-2xl backdrop-blur-xl"
+      >
+        {/* Selection counts */}
+        <div className="flex items-center gap-2">
+          {selectedUserCount > 0 && (
+            <div className="flex items-center gap-1.5">
+              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-accent-500/20 text-sm font-bold text-accent-400">
+                {selectedUserCount}
+              </div>
+              <span className="hidden text-xs font-medium text-dark-300 sm:inline">
+                {t('admin.bulkActions.usersSelected', { count: selectedUserCount })}
+              </span>
+            </div>
+          )}
+          {isMultiTariff && selectedSubscriptionCount > 0 && (
+            <div className="flex items-center gap-1.5">
+              {selectedUserCount > 0 && <div className="mx-1 h-4 w-px bg-dark-700" />}
+              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-success-500/20 text-sm font-bold text-success-400">
+                {selectedSubscriptionCount}
+              </div>
+              <span className="hidden text-xs font-medium text-dark-300 sm:inline">
+                {t('admin.bulkActions.subscriptionsSelected', {
+                  count: selectedSubscriptionCount,
+                })}
+              </span>
+            </div>
+          )}
+        </div>
+
+        {/* Toggle all subscriptions button */}
+        {isMultiTariff && totalVisibleSubscriptionCount > 0 && (
+          <>
+            <div className="mx-1 h-6 w-px bg-dark-700" />
+            <button
+              onClick={onToggleAllSubscriptions}
+              className="shrink-0 rounded-lg px-2.5 py-1.5 text-[11px] font-medium text-dark-300 transition-colors hover:bg-dark-700 hover:text-dark-200"
+            >
+              {selectedSubscriptionCount === totalVisibleSubscriptionCount &&
+              selectedSubscriptionCount > 0
+                ? t('admin.bulkActions.deselectAllSubs')
+                : t('admin.bulkActions.selectAllSubs')}
+            </button>
+          </>
+        )}
+
+        <div className="mx-2 h-6 w-px bg-dark-700" />
+
+        {/* Actions dropdown */}
+        <div className="relative ml-auto">
+          <button
+            onClick={() => setOpen(!open)}
+            className="flex items-center gap-2 rounded-xl bg-accent-500 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-accent-600"
+          >
+            {t('common.actions')}
+            <ChevronDownIcon />
+          </button>
+
+          {open && (
+            <div className="absolute bottom-full right-0 mb-2 w-64 overflow-hidden rounded-xl border border-dark-700 bg-dark-800 py-1.5 shadow-2xl">
+              {/* Subscription-level actions */}
+              {isMultiTariff && (
+                <div className="border-b border-dark-700/50 px-4 py-1.5">
+                  <span className="text-[10px] font-semibold uppercase tracking-wider text-dark-500">
+                    {t('admin.bulkActions.subscriptionTarget')}
+                  </span>
+                </div>
+              )}
+              {actions
+                .filter((a) => isSubscriptionLevelAction(a.type))
+                .map((a) => {
+                  const count = isMultiTariff ? selectedSubscriptionCount : selectedUserCount;
+                  const disabled = count === 0;
+                  return (
+                    <button
+                      key={a.type}
+                      onClick={() => {
+                        if (disabled) return;
+                        setOpen(false);
+                        onAction(a.type);
+                      }}
+                      disabled={disabled}
+                      className={cn(
+                        'flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm font-medium transition-colors',
+                        disabled ? 'cursor-not-allowed opacity-40' : a.colorClass,
+                      )}
+                    >
+                      <span className="border-current/20 bg-current/5 flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border text-xs font-bold">
+                        {a.icon}
+                      </span>
+                      {t(a.labelKey)}
+                    </button>
+                  );
+                })}
+
+              {/* User-level actions */}
+              {isMultiTariff && (
+                <div className="border-b border-t border-dark-700/50 px-4 py-1.5">
+                  <span className="text-[10px] font-semibold uppercase tracking-wider text-dark-500">
+                    {t('admin.bulkActions.userTarget')}
+                  </span>
+                </div>
+              )}
+              {actions
+                .filter((a) => !isSubscriptionLevelAction(a.type))
+                .map((a) => {
+                  const disabled = selectedUserCount === 0;
+                  return (
+                    <button
+                      key={a.type}
+                      onClick={() => {
+                        if (disabled) return;
+                        setOpen(false);
+                        onAction(a.type);
+                      }}
+                      disabled={disabled}
+                      className={cn(
+                        'flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm font-medium transition-colors',
+                        disabled ? 'cursor-not-allowed opacity-40' : a.colorClass,
+                      )}
+                    >
+                      <span className="border-current/20 bg-current/5 flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border text-xs font-bold">
+                        {a.icon}
+                      </span>
+                      {t(a.labelKey)}
+                    </button>
+                  );
+                })}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ============ Helpers ============
+
+// ============ Main Page ============
+
+export default function AdminBulkActions() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { capabilities } = usePlatform();
+  const { formatWithCurrency } = useCurrency();
+
+  // Data
+  const [users, setUsers] = useState<UserListItem[]>([]);
+  const [total, setTotal] = useState(0);
+  const [tariffs, setTariffs] = useState<TariffListItem[]>([]);
+  const [promoGroups, setPromoGroups] = useState<PromoGroup[]>([]);
+  const [campaigns, setCampaigns] = useState<CampaignListItem[]>([]);
+  const [partners, setPartners] = useState<AdminPartnerItem[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  // Filters
+  const [searchInput, setSearchInput] = useState('');
+  const [committedSearch, setCommittedSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState<SubscriptionStatusFilter>('');
+  const [trialOnly, setTrialOnly] = useState(false);
+  const [tariffFilter, setTariffFilter] = useState<number[]>([]);
+  const [promoGroupFilter, setPromoGroupFilter] = useState('');
+  const [campaignFilter, setCampaignFilter] = useState('');
+  const [partnerFilter, setPartnerFilter] = useState('');
+
+  // Pagination
+  const [offset, setOffset] = useState(0);
+  const [limit, setLimit] = useState(50);
+
+  // Selection
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+  const [subscriptionSelection, setSubscriptionSelection] = useState<Record<number, boolean>>({});
+  const [expandedRows, setExpandedRows] = useState<Record<number, boolean>>({});
+
+  // Modal
+  const [modal, setModal] = useState<ModalState>({
+    open: false,
+    action: null,
+    loading: false,
+    result: null,
+    progress: null,
+  });
+
+  // Debounce timer ref
+  const searchTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  // ---- Multi-tariff detection ----
+  const isMultiTariff = useMemo(
+    () => users.some((u) => (u.subscriptions?.length ?? 0) > 1),
+    [users],
+  );
+
+  // ---- Data loading ----
+
+  const loadUsers = useCallback(async () => {
+    try {
+      setLoading(true);
+      const params: Record<string, unknown> = {
+        offset,
+        limit,
+      };
+      if (committedSearch) params.search = committedSearch;
+      if (statusFilter) params.subscription_status = statusFilter;
+      if (tariffFilter.length > 0) params.tariff_id = tariffFilter.join(',');
+      if (promoGroupFilter) params.promo_group_id = Number(promoGroupFilter);
+      if (campaignFilter) params.campaign_id = Number(campaignFilter);
+      if (partnerFilter) params.partner_id = Number(partnerFilter);
+
+      const data = await adminUsersApi.getUsers(
+        params as Parameters<typeof adminUsersApi.getUsers>[0],
+      );
+      setUsers(data.users);
+      setTotal(data.total);
+      // Auto-expand all users who have subscriptions
+      const autoExpand: Record<number, boolean> = {};
+      for (const u of data.users) {
+        if ((u.subscriptions?.length ?? 0) > 0) {
+          autoExpand[u.id] = true;
+        }
+      }
+      setExpandedRows(autoExpand);
+    } catch {
+      // keep stale data
+    } finally {
+      setLoading(false);
+    }
+  }, [
+    offset,
+    limit,
+    committedSearch,
+    statusFilter,
+    tariffFilter,
+    promoGroupFilter,
+    campaignFilter,
+    partnerFilter,
+  ]);
+
+  useEffect(() => {
+    loadUsers();
+  }, [loadUsers]);
+
+  // Load tariffs, promo groups, campaigns, and partners once (independent — one failure won't block others)
+  useEffect(() => {
+    tariffsApi
+      .getTariffs(true)
+      .then((d) => setTariffs(d.tariffs))
+      .catch(() => {});
+    promocodesApi
+      .getPromoGroups({ limit: 200 })
+      .then((d) => setPromoGroups(d.items))
+      .catch(() => {});
+    campaignsApi
+      .getCampaigns(true, 0, 100)
+      .then((d) => setCampaigns(d.campaigns))
+      .catch(() => {});
+    partnerApi
+      .getPartners({ limit: 100 })
+      .then((d) => setPartners(d.items))
+      .catch(() => {});
+  }, []);
+
+  // ---- Handlers ----
+
+  const clearAllSelections = useCallback(() => {
+    setRowSelection({});
+    setSubscriptionSelection({});
+    setExpandedRows({});
+  }, []);
+
+  const handleSearchChange = (value: string) => {
+    setSearchInput(value);
+    clearTimeout(searchTimerRef.current);
+    searchTimerRef.current = setTimeout(() => {
+      setOffset(0);
+      setCommittedSearch(value);
+    }, 400);
+  };
+
+  // Cleanup debounce on unmount
+  useEffect(() => {
+    return () => clearTimeout(searchTimerRef.current);
+  }, []);
+
+  const handleSearchSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    clearTimeout(searchTimerRef.current);
+    setOffset(0);
+    setCommittedSearch(searchInput);
+  };
+
+  const handleStatusFilterChange = (v: string) => {
+    setStatusFilter(v as SubscriptionStatusFilter);
+    setOffset(0);
+  };
+
+  const handleTariffFilterChange = (ids: number[]) => {
+    setTariffFilter(ids);
+    setOffset(0);
+  };
+
+  const handlePromoGroupFilterChange = (v: string) => {
+    setPromoGroupFilter(v);
+    setOffset(0);
+  };
+
+  const handleCampaignFilterChange = (v: string) => {
+    setCampaignFilter(v);
+    setOffset(0);
+  };
+
+  const handlePartnerFilterChange = (v: string) => {
+    setPartnerFilter(v);
+    setOffset(0);
+  };
+
+  const handleRefresh = () => {
+    loadUsers();
+  };
+
+  const selectedUserIds = useMemo(() => {
+    return Object.keys(rowSelection)
+      .filter((k) => rowSelection[k])
+      .map(Number)
+      .filter((id) => id > 0);
+  }, [rowSelection]);
+
+  const selectedSubscriptionIds = useMemo(() => {
+    return Object.keys(subscriptionSelection)
+      .filter((k) => subscriptionSelection[Number(k)])
+      .map(Number);
+  }, [subscriptionSelection]);
+
+  const toggleExpandRow = useCallback((userId: number) => {
+    setExpandedRows((prev) => ({
+      ...prev,
+      [userId]: !prev[userId],
+    }));
+  }, []);
+
+  const toggleSubscriptionSelection = useCallback((subscriptionId: number) => {
+    setSubscriptionSelection((prev) => ({
+      ...prev,
+      [subscriptionId]: !prev[subscriptionId],
+    }));
+  }, []);
+
+  const getFilteredSubs = useCallback(
+    (subs: UserListItemSubscription[]): UserListItemSubscription[] => {
+      if (tariffFilter.length === 0) return subs;
+      return subs.filter((s) => s.tariff_id !== null && tariffFilter.includes(s.tariff_id));
+    },
+    [tariffFilter],
+  );
+
+  const allVisibleSubscriptionIds = useMemo(() => {
+    const ids: number[] = [];
+    for (const user of users) {
+      const subs = user.subscriptions ?? [];
+      const filtered = getFilteredSubs(subs);
+      for (const sub of filtered) {
+        ids.push(sub.id);
+      }
+    }
+    return ids;
+  }, [users, getFilteredSubs]);
+
+  const toggleAllSubscriptions = useCallback(() => {
+    const allSelected =
+      allVisibleSubscriptionIds.length > 0 &&
+      allVisibleSubscriptionIds.every((id) => subscriptionSelection[id]);
+
+    if (allSelected) {
+      // Deselect all
+      const next: Record<number, boolean> = {};
+      for (const key of Object.keys(subscriptionSelection)) {
+        const id = Number(key);
+        if (!allVisibleSubscriptionIds.includes(id)) {
+          next[id] = subscriptionSelection[id];
+        }
+      }
+      setSubscriptionSelection(next);
+    } else {
+      // Select all visible
+      const next = { ...subscriptionSelection };
+      for (const id of allVisibleSubscriptionIds) {
+        next[id] = true;
+      }
+      setSubscriptionSelection(next);
+    }
+
+    // Auto-expand rows that have filtered subs
+    const expanded: Record<number, boolean> = { ...expandedRows };
+    for (const user of users) {
+      const subs = user.subscriptions ?? [];
+      const filtered = getFilteredSubs(subs);
+      if (filtered.length > 1) {
+        expanded[user.id] = true;
+      }
+    }
+    setExpandedRows(expanded);
+  }, [allVisibleSubscriptionIds, subscriptionSelection, expandedRows, users, getFilteredSubs]);
+
+  const handleOpenAction = (type: BulkActionType) => {
+    setModal({ open: true, action: type, loading: false, result: null, progress: null });
+  };
+
+  const handleExecuteAction = async (params: BulkActionParams) => {
+    if (!modal.action) return;
+
+    const isSubAction = isMultiTariff && isSubscriptionLevelAction(modal.action);
+    const targetIds = isSubAction ? selectedSubscriptionIds : selectedUserIds;
+    if (targetIds.length === 0) return;
+
+    const totalCount = targetIds.length;
+    setModal((prev) => ({
+      ...prev,
+      loading: true,
+      progress: {
+        current: 0,
+        total: totalCount,
+        successCount: 0,
+        errorCount: 0,
+        log: [],
+      },
+    }));
+
+    const requestPayload = isSubAction
+      ? { action: modal.action, subscription_ids: targetIds, params }
+      : { action: modal.action, user_ids: targetIds, params };
+
+    try {
+      await adminBulkActionsApi.executeWithStream(requestPayload, (event) => {
+        if (event.type === 'progress') {
+          setModal((prev) => ({
+            ...prev,
+            progress: prev.progress
+              ? {
+                  current: event.current,
+                  total: event.total,
+                  successCount: prev.progress.successCount + (event.success ? 1 : 0),
+                  errorCount: prev.progress.errorCount + (event.success ? 0 : 1),
+                  log: [...prev.progress.log, event],
+                }
+              : prev.progress,
+          }));
+        } else if (event.type === 'complete') {
+          setModal((prev) => {
+            // Build errors from accumulated progress log
+            const errors = (prev.progress?.log ?? [])
+              .filter((e) => !e.success)
+              .map((e) => ({
+                user_id: e.user_id,
+                username: e.username,
+                error: e.message || e.error || '',
+              }));
+            return {
+              ...prev,
+              loading: false,
+              progress: null,
+              result: {
+                success: event.error_count === 0,
+                total: event.total,
+                success_count: event.success_count,
+                error_count: event.error_count,
+                skipped_count: event.skipped_count || 0,
+                errors,
+              },
+            };
+          });
+          loadUsers();
+        }
+      });
+
+      // If stream ended without a complete event, finalize from progress
+      setModal((prev) => {
+        if (prev.loading && prev.progress) {
+          return {
+            ...prev,
+            loading: false,
+            result: {
+              success: prev.progress.errorCount === 0,
+              total: prev.progress.total,
+              success_count: prev.progress.successCount,
+              error_count: prev.progress.errorCount,
+              skipped_count: 0,
+              errors: prev.progress.log
+                .filter((e) => !e.success)
+                .map((e) => ({
+                  user_id: e.user_id,
+                  username: e.username,
+                  error: e.error || '',
+                })),
+            },
+            progress: null,
+          };
+        }
+        return prev;
+      });
+
+      loadUsers();
+    } catch {
+      setModal((prev) => ({
+        ...prev,
+        loading: false,
+        progress: null,
+        result: {
+          success: false,
+          total: totalCount,
+          success_count: prev.progress?.successCount ?? 0,
+          error_count: totalCount - (prev.progress?.successCount ?? 0),
+          skipped_count: 0,
+          errors: [],
+        },
+      }));
+    }
+  };
+
+  const handleCloseModal = () => {
+    if (modal.loading) return;
+    if (modal.result) {
+      clearAllSelections();
+    }
+    setModal({ open: false, action: null, loading: false, result: null, progress: null });
+  };
+
+  // ---- TanStack Table ----
+
+  const columns = useMemo<ColumnDef<UserListItem>[]>(
+    () => [
+      {
+        id: 'select',
+        size: 56,
+        header: ({ table }) => {
+          const allSubsSelected =
+            allVisibleSubscriptionIds.length > 0 &&
+            allVisibleSubscriptionIds.every((id) => subscriptionSelection[id]);
+          const someSubsSelected =
+            !allSubsSelected && allVisibleSubscriptionIds.some((id) => subscriptionSelection[id]);
+          return (
+            <div className="flex items-center justify-center gap-1.5">
+              {/* Select all users */}
+              <button
+                onClick={table.getToggleAllRowsSelectedHandler()}
+                className={cn(
+                  'flex h-5 w-5 items-center justify-center rounded-md border-2 transition-all duration-150',
+                  table.getIsAllRowsSelected()
+                    ? 'border-accent-500 bg-accent-500 shadow-[0_0_8px_rgba(var(--color-accent-500),0.4)]'
+                    : table.getIsSomeRowsSelected()
+                      ? 'border-accent-500 bg-accent-500/30'
+                      : 'border-dark-500 bg-dark-700/60 hover:border-accent-500/50 hover:bg-dark-600/60',
+                )}
+                aria-label={t('admin.bulkActions.selectAll')}
+                title={t('admin.bulkActions.selectAll')}
+              >
+                {table.getIsAllRowsSelected() && <CheckIcon />}
+                {table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected() && (
+                  <div className="h-0.5 w-2 rounded-full bg-white" />
+                )}
+              </button>
+              {/* Select all subscriptions */}
+              {isMultiTariff && allVisibleSubscriptionIds.length > 0 && (
+                <button
+                  onClick={toggleAllSubscriptions}
+                  className={cn(
+                    'flex h-5 w-5 items-center justify-center rounded-md border-2 transition-all duration-150',
+                    allSubsSelected
+                      ? 'border-success-500 bg-success-500 shadow-[0_0_8px_rgba(34,197,94,0.4)]'
+                      : someSubsSelected
+                        ? 'border-success-500 bg-success-500/30'
+                        : 'border-dark-500 bg-dark-700/60 hover:border-success-500/50 hover:bg-dark-600/60',
+                  )}
+                  aria-label={t('admin.bulkActions.selectAllSubs')}
+                  title={t('admin.bulkActions.selectAllSubs')}
+                >
+                  {allSubsSelected && <CheckIcon />}
+                  {someSubsSelected && <div className="h-0.5 w-2 rounded-full bg-white" />}
+                </button>
+              )}
+            </div>
+          );
+        },
+        cell: ({ row }) => {
+          const userName =
+            row.original.full_name || row.original.username || String(row.original.telegram_id);
+          return (
+            <div className="flex items-center justify-center">
+              <button
+                onClick={row.getToggleSelectedHandler()}
+                className={cn(
+                  'flex h-5 w-5 items-center justify-center rounded-md border-2 transition-all duration-150',
+                  row.getIsSelected()
+                    ? 'border-accent-500 bg-accent-500 shadow-[0_0_8px_rgba(var(--color-accent-500),0.4)]'
+                    : 'border-dark-500 bg-dark-700/60 hover:border-accent-500/50 hover:bg-dark-600/60',
+                )}
+                aria-label={
+                  row.getIsSelected()
+                    ? t('admin.bulkActions.deselectUser', { name: userName })
+                    : t('admin.bulkActions.selectUser', { name: userName })
+                }
+              >
+                {row.getIsSelected() && <CheckIcon />}
+              </button>
+            </div>
+          );
+        },
+        enableSorting: false,
+      },
+      {
+        id: 'user',
+        accessorFn: (row) => row.full_name,
+        header: t('admin.bulkActions.columns.user'),
+        size: 200,
+        cell: ({ row }) => {
+          const user = row.original;
+          const filteredSubs = getFilteredSubs(user.subscriptions ?? []);
+          const subCount = filteredSubs.length;
+          const canExpand = isMultiTariff && subCount > 0;
+          const isExpanded = expandedRows[user.id] ?? false;
+          return (
+            <div className="flex items-center gap-2.5">
+              {canExpand ? (
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    toggleExpandRow(user.id);
+                  }}
+                  className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-accent-500 to-accent-700 transition-transform"
+                  aria-label={
+                    isExpanded
+                      ? t('admin.bulkActions.collapseSubscriptions')
+                      : t('admin.bulkActions.expandSubscriptions')
+                  }
+                  aria-expanded={isExpanded}
+                >
+                  <ChevronExpandIcon expanded={isExpanded} />
+                </button>
+              ) : (
+                <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-accent-500 to-accent-700 text-[10px] font-medium text-white">
+                  {user.first_name?.[0] || user.username?.[0] || '?'}
+                </div>
+              )}
+              <div className="min-w-0">
+                <div className="flex items-center gap-1.5">
+                  <span className="truncate text-xs font-medium text-dark-100">
+                    {user.full_name}
+                  </span>
+                  {canExpand && (
+                    <span className="shrink-0 rounded-md bg-dark-700/60 px-1.5 py-0.5 text-[9px] font-medium tabular-nums text-dark-400">
+                      {subCount}
+                    </span>
+                  )}
+                </div>
+                <div className="truncate text-[10px] leading-tight text-dark-500">
+                  {user.username ? `@${user.username}` : `ID: ${user.telegram_id}`}
+                </div>
+              </div>
+            </div>
+          );
+        },
+      },
+      {
+        id: 'subscription_status',
+        accessorFn: (row) => row.subscription_status,
+        header: t('admin.bulkActions.columns.status'),
+        size: 100,
+        cell: ({ row }) => {
+          const user = row.original;
+          if (!user.has_subscription) {
+            return <span className="text-xs text-dark-500">-</span>;
+          }
+          return <StatusBadge status={user.subscription_status} />;
+        },
+      },
+      {
+        id: 'tariff',
+        accessorFn: (row) => row.tariff_name,
+        header: t('admin.bulkActions.columns.tariff'),
+        size: 160,
+        cell: ({ row }) => {
+          const user = row.original;
+          const subs = user.subscriptions ?? [];
+          const tariffNames = subs
+            .map((s) => s.tariff_name)
+            .filter((name): name is string => !!name);
+          const uniqueNames = [...new Set(tariffNames)];
+
+          if (uniqueNames.length === 0) {
+            if (!user.tariff_name) {
+              return <span className="text-xs text-dark-500">—</span>;
+            }
+            return <span className="text-xs text-dark-200">{user.tariff_name}</span>;
+          }
+
+          return (
+            <div className="flex flex-wrap gap-1">
+              {uniqueNames.map((name) => (
+                <span
+                  key={name}
+                  className="inline-flex rounded-md border border-dark-600/40 bg-dark-700/40 px-1.5 py-0.5 text-[10px] font-medium text-dark-200"
+                >
+                  {name}
+                </span>
+              ))}
+            </div>
+          );
+        },
+      },
+      {
+        id: 'balance',
+        accessorKey: 'balance_rubles',
+        header: t('admin.bulkActions.columns.balance'),
+        size: 100,
+        cell: ({ getValue }) => (
+          <span className="text-xs font-medium text-dark-200">
+            {formatWithCurrency(getValue() as number)}
+          </span>
+        ),
+      },
+      {
+        id: 'promo_group',
+        accessorFn: (row) => row.promo_group_name,
+        header: t('admin.bulkActions.columns.promoGroup'),
+        size: 120,
+        cell: ({ getValue }) => {
+          const name = getValue() as string | null;
+          return name ? (
+            <span className="inline-flex rounded-lg border border-accent-500/20 bg-accent-500/5 px-2 py-0.5 text-[10px] font-medium text-accent-400">
+              {name}
+            </span>
+          ) : (
+            <span className="text-xs text-dark-500">-</span>
+          );
+        },
+      },
+      {
+        id: 'total_spent',
+        accessorKey: 'total_spent_kopeks',
+        header: t('admin.bulkActions.columns.spent'),
+        size: 100,
+        cell: ({ getValue }) => {
+          const kopeks = getValue() as number;
+          return (
+            <span className="text-xs text-dark-300">
+              {kopeks > 0 ? formatWithCurrency(kopeks / 100) : '-'}
+            </span>
+          );
+        },
+      },
+    ],
+    [t, formatWithCurrency, expandedRows, toggleExpandRow, getFilteredSubs],
+  );
+
+  // When multiple tariffs are selected, filter users client-side
+  // (server only supports single tariff_id filter)
+  const filteredUsers = useMemo(() => {
+    let result = users;
+
+    // Trial-only filter: show users with trial subscription
+    if (trialOnly) {
+      result = result.filter(
+        (u) => u.subscription_is_trial || (u.subscriptions ?? []).some((s) => s.status === 'trial'),
+      );
+    }
+
+    return result;
+  }, [users, trialOnly]);
+
+  const table = useReactTable({
+    data: filteredUsers,
+    columns,
+    state: { rowSelection },
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    enableRowSelection: true,
+    getRowId: (row) => String(row.id),
+  });
+
+  const totalPages = Math.ceil(total / limit);
+  const currentPage = Math.floor(offset / limit) + 1;
+
+  // ---- Status filter options ----
+  const statusOptions: DropdownOption[] = [
+    { value: '', label: t('admin.bulkActions.filters.allStatuses') },
+    { value: 'active', label: t('admin.bulkActions.statuses.active') },
+    { value: 'expired', label: t('admin.bulkActions.statuses.expired') },
+    { value: 'limited', label: t('admin.bulkActions.statuses.limited') },
+    { value: 'disabled', label: t('admin.bulkActions.statuses.disabled') },
+  ];
+
+  const tariffMultiOptions: MultiSelectOption[] = tariffs.map((tt) => ({
+    value: tt.id,
+    label: tt.name,
+  }));
+
+  const promoGroupOptions: DropdownOption[] = [
+    { value: '', label: t('admin.bulkActions.filters.allGroups') },
+    ...promoGroups.map((pg) => ({ value: String(pg.id), label: pg.name })),
+  ];
+
+  const campaignOptions: DropdownOption[] = [
+    { value: '', label: t('admin.bulkActions.filters.allCampaigns') },
+    ...campaigns.map((c) => ({ value: String(c.id), label: c.name })),
+  ];
+
+  const partnerOptions: DropdownOption[] = [
+    { value: '', label: t('admin.bulkActions.filters.allPartners') },
+    ...partners.map((p) => ({
+      value: String(p.user_id),
+      label: p.username ? `@${p.username}` : p.first_name || String(p.telegram_id),
+    })),
+  ];
+
+  return (
+    <div className="relative animate-fade-in">
+      <ProgressBar loading={loading} />
+
+      {/* Header */}
+      <div className="mb-5 flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          {!capabilities.hasBackButton && (
+            <button
+              onClick={() => navigate('/admin')}
+              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"
+              aria-label={t('common.back')}
+            >
+              <BackIcon />
+            </button>
+          )}
+          <div>
+            <div className="flex items-center gap-2.5">
+              <h1 className="text-xl font-bold text-dark-100">{t('admin.bulkActions.title')}</h1>
+              <span className="rounded-lg border border-dark-700 bg-dark-800 px-2 py-0.5 text-xs font-medium tabular-nums text-dark-400">
+                {total.toLocaleString()}
+              </span>
+            </div>
+            <p className="text-sm text-dark-400">{t('admin.bulkActions.subtitle')}</p>
+          </div>
+        </div>
+        <button
+          onClick={handleRefresh}
+          disabled={loading}
+          className="rounded-lg p-2 text-dark-400 transition-colors hover:bg-dark-700 hover:text-dark-200 disabled:opacity-50"
+          aria-label={t('common.refresh')}
+        >
+          <RefreshIcon className={loading ? 'animate-spin' : ''} />
+        </button>
+      </div>
+
+      {/* Filters */}
+      <div className="mb-4 flex flex-col gap-3">
+        {/* Search */}
+        <form onSubmit={handleSearchSubmit}>
+          <div className="relative">
+            <input
+              type="text"
+              value={searchInput}
+              onChange={(e) => handleSearchChange(e.target.value)}
+              placeholder={t('admin.bulkActions.filters.search')}
+              className="w-full rounded-xl border border-dark-700 bg-dark-800 py-2.5 pl-10 pr-4 text-sm text-dark-100 outline-none transition-colors placeholder:text-dark-500 focus:border-accent-500/40 focus:shadow-[0_0_0_3px_rgba(var(--color-accent-500),0.08)]"
+            />
+            <div className="absolute left-3 top-1/2 -translate-y-1/2 text-dark-500">
+              <SearchIcon />
+            </div>
+          </div>
+        </form>
+
+        {/* Filter dropdowns + trial toggle */}
+        <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
+          <DropdownSelect
+            value={statusFilter}
+            options={statusOptions}
+            onChange={handleStatusFilterChange}
+          />
+          <MultiSelectDropdown
+            options={tariffMultiOptions}
+            selected={tariffFilter}
+            onChange={handleTariffFilterChange}
+            placeholder={t('admin.bulkActions.filters.allTariffs')}
+          />
+          <DropdownSelect
+            value={promoGroupFilter}
+            options={promoGroupOptions}
+            onChange={handlePromoGroupFilterChange}
+          />
+        </div>
+
+        {/* Campaign & Partner filters */}
+        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+          <DropdownSelect
+            value={campaignFilter}
+            options={campaignOptions}
+            onChange={handleCampaignFilterChange}
+          />
+          <DropdownSelect
+            value={partnerFilter}
+            options={partnerOptions}
+            onChange={handlePartnerFilterChange}
+          />
+        </div>
+
+        {/* Trial filter checkbox */}
+        <label className="inline-flex cursor-pointer items-center gap-2">
+          <button
+            onClick={() => {
+              setTrialOnly((prev) => !prev);
+              setOffset(0);
+            }}
+            className={cn(
+              'flex h-5 w-5 items-center justify-center rounded-md border-2 transition-all duration-150',
+              trialOnly
+                ? 'border-amber-500 bg-amber-500 shadow-[0_0_8px_rgba(245,158,11,0.4)]'
+                : 'border-dark-500 bg-dark-700/60 hover:border-amber-500/50 hover:bg-dark-600/60',
+            )}
+            aria-pressed={trialOnly}
+          >
+            {trialOnly && <CheckIcon />}
+          </button>
+          <span
+            className={cn('text-sm', trialOnly ? 'font-medium text-amber-400' : 'text-dark-400')}
+          >
+            {t('admin.bulkActions.filters.trialOnly')}
+          </span>
+        </label>
+      </div>
+
+      {/* Table */}
+      {loading && users.length === 0 ? (
+        <div className="flex justify-center py-16">
+          <div className="h-8 w-8 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
+        </div>
+      ) : users.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-16">
+          <div className="mb-3 flex h-14 w-14 items-center justify-center rounded-2xl border border-dark-700/50 bg-dark-800/40 text-dark-500">
+            <SearchIcon />
+          </div>
+          <p className="text-sm font-medium text-dark-300">{t('admin.bulkActions.noResults')}</p>
+        </div>
+      ) : (
+        <div
+          className={cn(
+            'transition-opacity duration-200',
+            loading && users.length > 0 && 'opacity-60',
+          )}
+        >
+          <div className="overflow-x-auto rounded-xl border border-dark-700">
+            <table className="w-full text-left text-sm">
+              <thead>
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <tr key={headerGroup.id} className="border-b border-dark-700 bg-dark-800/80">
+                    {headerGroup.headers.map((header) => (
+                      <th
+                        key={header.id}
+                        className="whitespace-nowrap px-3 py-2.5 text-xs font-medium text-dark-400"
+                        style={{ width: header.getSize() }}
+                      >
+                        {header.isPlaceholder
+                          ? null
+                          : flexRender(header.column.columnDef.header, header.getContext())}
+                      </th>
+                    ))}
+                  </tr>
+                ))}
+              </thead>
+              <tbody>
+                {table.getRowModel().rows.map((row) => {
+                  const user = row.original;
+                  const filteredSubs = getFilteredSubs(user.subscriptions ?? []);
+                  const canExpand = isMultiTariff && filteredSubs.length > 0;
+                  const isExpanded = expandedRows[user.id] ?? false;
+
+                  return (
+                    <React.Fragment key={row.id}>
+                      {/* User row */}
+                      <tr
+                        className={cn(
+                          'border-b transition-colors',
+                          canExpand && isExpanded ? 'border-dark-700/30' : 'border-dark-700/50',
+                          row.getIsSelected() ? 'bg-accent-500/5' : 'hover:bg-dark-800/50',
+                        )}
+                      >
+                        {row.getVisibleCells().map((cell) => (
+                          <td
+                            key={cell.id}
+                            className="px-3 py-2.5"
+                            style={{ width: cell.column.getSize() }}
+                          >
+                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                          </td>
+                        ))}
+                      </tr>
+
+                      {/* Subscription sub-rows (only when expanded and multi-sub) */}
+                      {canExpand &&
+                        isExpanded &&
+                        filteredSubs.map((sub) => (
+                          <SubscriptionSubRow
+                            key={`sub-${sub.id}`}
+                            subscription={sub}
+                            isSelected={subscriptionSelection[sub.id] ?? false}
+                            onToggleSelect={() => toggleSubscriptionSelection(sub.id)}
+                            isMultiTariff={isMultiTariff}
+                          />
+                        ))}
+
+                      {/* Single subscription — auto-select with user (no separate sub-row) */}
+                    </React.Fragment>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+
+      {/* Pagination + per-page selector */}
+      <div className="mt-4 flex flex-wrap items-center justify-between gap-3">
+        <div className="flex items-center gap-3">
+          <span className="text-sm text-dark-400">
+            {offset + 1}&ndash;{Math.min(offset + limit, total)} / {total}
+          </span>
+          <div className="flex items-center gap-1.5">
+            <span className="text-xs text-dark-500">{t('admin.bulkActions.perPage')}</span>
+            <select
+              value={limit}
+              onChange={(e) => {
+                setLimit(Number(e.target.value));
+                setOffset(0);
+              }}
+              className="rounded-lg border border-dark-700 bg-dark-800 px-2 py-1.5 text-xs text-dark-200 outline-none transition-colors focus:border-accent-500/40"
+            >
+              {[25, 50, 100, 200].map((n) => (
+                <option key={n} value={n}>
+                  {n}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+        {totalPages > 1 && (
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => {
+                setOffset(Math.max(0, offset - limit));
+              }}
+              disabled={offset === 0}
+              className="rounded-lg border border-dark-700 bg-dark-800 p-2 transition-colors hover:bg-dark-700 disabled:opacity-50"
+              aria-label={t('common.back')}
+            >
+              <ChevronLeftIcon />
+            </button>
+            <span className="px-3 py-2 text-sm text-dark-300">
+              {currentPage} / {totalPages}
+            </span>
+            <button
+              onClick={() => {
+                setOffset(offset + limit);
+              }}
+              disabled={offset + limit >= total}
+              className="rounded-lg border border-dark-700 bg-dark-800 p-2 transition-colors hover:bg-dark-700 disabled:opacity-50"
+              aria-label={t('common.next')}
+            >
+              <ChevronRightIcon />
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Bottom spacer to prevent floating bar from covering pagination */}
+      {(selectedUserIds.length > 0 || selectedSubscriptionIds.length > 0) && (
+        <div className="h-24" />
+      )}
+
+      {/* Floating action bar — portal to body for correct fixed positioning */}
+      {createPortal(
+        <FloatingActionBar
+          selectedUserCount={selectedUserIds.length}
+          selectedSubscriptionCount={selectedSubscriptionIds.length}
+          isMultiTariff={isMultiTariff}
+          totalVisibleSubscriptionCount={allVisibleSubscriptionIds.length}
+          onAction={handleOpenAction}
+          onToggleAllSubscriptions={toggleAllSubscriptions}
+        />,
+        document.body,
+      )}
+
+      {/* Action modal */}
+      <ActionModal
+        modal={modal}
+        selectedCount={
+          modal.action && isMultiTariff && isSubscriptionLevelAction(modal.action)
+            ? selectedSubscriptionIds.length
+            : selectedUserIds.length
+        }
+        tariffs={tariffs}
+        promoGroups={promoGroups}
+        onClose={handleCloseModal}
+        onExecute={handleExecuteAction}
+      />
+    </div>
+  );
+}
diff --git a/src/pages/AdminInfoPageEditor.tsx b/src/pages/AdminInfoPageEditor.tsx
new file mode 100644
index 0000000..3b885de
--- /dev/null
+++ b/src/pages/AdminInfoPageEditor.tsx
@@ -0,0 +1,1458 @@
+import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
+import { useNavigate, useParams, useSearchParams } from 'react-router';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import { useEditor, EditorContent } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import ImageExtension from '@tiptap/extension-image';
+import LinkExtension from '@tiptap/extension-link';
+import PlaceholderExtension from '@tiptap/extension-placeholder';
+import TextAlignExtension from '@tiptap/extension-text-align';
+import UnderlineExtension from '@tiptap/extension-underline';
+import HighlightExtension from '@tiptap/extension-highlight';
+import { VideoExtension } from '../lib/tiptap-video';
+import { infoPagesApi } from '../api/infoPages';
+import { newsApi } from '../api/news';
+import { AdminBackButton } from '../components/admin';
+import { Toggle } from '../components/admin/Toggle';
+import { useHapticFeedback } from '../platform/hooks/useHaptic';
+import { cn } from '../lib/utils';
+import type { InfoPageType, FaqItem, ReplacesTab } from '../api/infoPages';
+
+const AVAILABLE_LOCALES = ['ru', 'en', 'zh', 'fa'] as const;
+type LocaleCode = (typeof AVAILABLE_LOCALES)[number];
+
+// --- Icons ---
+const BoldIcon = () => (
+  <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z" />
+  </svg>
+);
+
+const ItalicIcon = () => (
+  <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z" />
+  </svg>
+);
+
+const UnderlineIcon = () => (
+  <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z" />
+  </svg>
+);
+
+const StrikeIcon = () => (
+  <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M10 19h4v-3h-4v3zM5 4v3h5v3h4V7h5V4H5zM3 14h18v-2H3v2z" />
+  </svg>
+);
+
+const H1Icon = () => <span className="text-xs font-bold">H1</span>;
+const H2Icon = () => <span className="text-xs font-bold">H2</span>;
+const H3Icon = () => <span className="text-xs font-bold">H3</span>;
+
+const ListBulletIcon = () => (
+  <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z" />
+  </svg>
+);
+
+const ListOrderedIcon = () => (
+  <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z" />
+  </svg>
+);
+
+const QuoteIcon = () => (
+  <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z" />
+  </svg>
+);
+
+const CodeBlockIcon = () => (
+  <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z" />
+  </svg>
+);
+
+const ImageIcon = () => (
+  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
+    />
+  </svg>
+);
+
+const LinkIcon = () => (
+  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244"
+    />
+  </svg>
+);
+
+const AlignLeftIcon = () => (
+  <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z" />
+  </svg>
+);
+
+const AlignCenterIcon = () => (
+  <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z" />
+  </svg>
+);
+
+const HighlightIcon = () => (
+  <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M16.56 3.44a1.5 1.5 0 012.12 0l1.88 1.88a1.5 1.5 0 010 2.12L8.44 19.56 3 21l1.44-5.44L16.56 3.44z" />
+  </svg>
+);
+
+// --- Toolbar Button ---
+interface ToolbarButtonProps {
+  onClick: () => void;
+  isActive?: boolean;
+  disabled?: boolean;
+  title: string;
+  children: React.ReactNode;
+}
+
+function ToolbarButton({ onClick, isActive, disabled, title, children }: ToolbarButtonProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      title={title}
+      aria-label={title}
+      aria-pressed={isActive}
+      className={cn(
+        'min-h-[44px] min-w-[44px] rounded p-2.5 transition-colors',
+        disabled && 'cursor-not-allowed opacity-50',
+        isActive
+          ? 'bg-accent-500/20 text-accent-400'
+          : 'text-dark-400 hover:bg-dark-700 hover:text-dark-200',
+      )}
+    >
+      {children}
+    </button>
+  );
+}
+
+// --- Security: URL scheme validation ---
+function isSafeUrl(url: string | null | undefined): boolean {
+  if (!url) return false;
+  try {
+    const parsed = new URL(url);
+    return parsed.protocol === 'https:' || parsed.protocol === 'http:';
+  } catch {
+    return false;
+  }
+}
+
+// --- Slug utility ---
+const TRANSLIT_MAP: Record<string, string> = {
+  а: 'a',
+  б: 'b',
+  в: 'v',
+  г: 'g',
+  д: 'd',
+  е: 'e',
+  ё: 'yo',
+  ж: 'zh',
+  з: 'z',
+  и: 'i',
+  й: 'y',
+  к: 'k',
+  л: 'l',
+  м: 'm',
+  н: 'n',
+  о: 'o',
+  п: 'p',
+  р: 'r',
+  с: 's',
+  т: 't',
+  у: 'u',
+  ф: 'f',
+  х: 'kh',
+  ц: 'ts',
+  ч: 'ch',
+  ш: 'sh',
+  щ: 'shch',
+  ъ: '',
+  ы: 'y',
+  ь: '',
+  э: 'e',
+  ю: 'yu',
+  я: 'ya',
+};
+
+function generateSlug(title: string): string {
+  const lower = title.toLowerCase();
+  const transliterated = Array.from(lower)
+    .map((ch) => TRANSLIT_MAP[ch] ?? ch)
+    .join('');
+  return transliterated
+    .replace(/[^a-z0-9\s-]/g, '')
+    .replace(/[\s_]+/g, '-')
+    .replace(/-+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .substring(0, 100);
+}
+
+// --- FAQ Q&A Item Icons ---
+const ChevronUpIcon = () => (
+  <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 15.75l7.5-7.5 7.5 7.5" />
+  </svg>
+);
+
+const ChevronDownIcon = () => (
+  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+  </svg>
+);
+
+const TrashSmallIcon = () => (
+  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+    />
+  </svg>
+);
+
+const PlusSmallIcon = () => (
+  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+  </svg>
+);
+
+// --- FAQ Answer Rich Editor ---
+
+const FAQ_EDITOR_EXTENSIONS = [
+  StarterKit.configure({
+    heading: { levels: [2, 3] },
+    link: false,
+    underline: false,
+  }),
+  UnderlineExtension,
+  LinkExtension.configure({ openOnClick: false, HTMLAttributes: { class: 'link' } }),
+  ImageExtension.configure({ HTMLAttributes: { class: 'rounded-xl max-w-full' } }),
+  PlaceholderExtension.configure({ placeholder: '' }),
+  TextAlignExtension.configure({ types: ['heading', 'paragraph'] }),
+  HighlightExtension,
+  VideoExtension,
+];
+
+function FaqAnswerEditor({ value, onChange }: { value: string; onChange: (html: string) => void }) {
+  const { t } = useTranslation();
+  const haptic = useHapticFeedback();
+  const mediaRef = useRef<HTMLInputElement>(null);
+  const [uploadCount, setUploadCount] = useState(0);
+  const isUploading = uploadCount > 0;
+  const [isDragging, setIsDragging] = useState(false);
+  const activeUploadsRef = useRef(new Set<AbortController>());
+
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+
+  const editor = useEditor({
+    extensions: FAQ_EDITOR_EXTENSIONS,
+    content: value,
+    editorProps: {
+      attributes: {
+        class: 'prose prose-sm max-w-none min-h-[120px] p-3 focus:outline-none',
+      },
+    },
+    onUpdate: ({ editor: e }) => {
+      const html = e.getHTML();
+      const isEmpty = html === '<p></p>' || html === '';
+      onChangeRef.current(isEmpty ? '' : html);
+    },
+  });
+
+  // Sync external value changes (e.g., reorder, locale switch)
+  useEffect(() => {
+    if (!editor || editor.isDestroyed) return;
+    const currentHtml = editor.getHTML();
+    const normalizedCurrent = currentHtml === '<p></p>' ? '' : currentHtml;
+    if (normalizedCurrent !== value) {
+      editor.commands.setContent(value || '', { emitUpdate: false });
+    }
+  }, [value, editor]);
+
+  // Cleanup uploads on unmount
+  useEffect(() => {
+    const uploads = activeUploadsRef.current;
+    return () => {
+      for (const c of uploads) c.abort();
+      uploads.clear();
+    };
+  }, []);
+
+  const handleMediaUpload = useCallback(
+    async (file: File) => {
+      if (!editor) return;
+      const isImage = file.type.startsWith('image/');
+      const isVideo = file.type.startsWith('video/');
+      if (!isImage && !isVideo) return;
+      const maxSize = isImage ? 10 * 1024 * 1024 : 50 * 1024 * 1024;
+      if (file.size > maxSize) {
+        haptic.error();
+        return;
+      }
+      const controller = new AbortController();
+      activeUploadsRef.current.add(controller);
+      setUploadCount((c) => c + 1);
+      try {
+        const result = await newsApi.uploadMedia(file, controller.signal);
+        if (controller.signal.aborted) return;
+        if (!isSafeUrl(result.url)) return;
+        if (result.media_type === 'image') {
+          editor.chain().focus().setImage({ src: result.url, alt: file.name }).run();
+        } else {
+          editor
+            .chain()
+            .focus()
+            .insertContent({
+              type: 'video',
+              attrs: { src: result.url, class: 'w-full rounded-xl max-h-96' },
+            })
+            .run();
+        }
+        haptic.success();
+      } catch {
+        if (!controller.signal.aborted) haptic.error();
+      } finally {
+        activeUploadsRef.current.delete(controller);
+        setUploadCount((c) => c - 1);
+      }
+    },
+    [editor, haptic],
+  );
+
+  const handleMediaUploadRef = useRef(handleMediaUpload);
+  useEffect(() => {
+    handleMediaUploadRef.current = handleMediaUpload;
+  }, [handleMediaUpload]);
+
+  // Register paste/drop handlers after editor is created
+  useEffect(() => {
+    if (!editor) return;
+    const handlePaste = (_view: unknown, event: ClipboardEvent) => {
+      const items = event.clipboardData?.items;
+      if (!items) return false;
+      for (const item of Array.from(items)) {
+        if (item.type.startsWith('image/') || item.type.startsWith('video/')) {
+          const file = item.getAsFile();
+          if (file) {
+            handleMediaUploadRef.current(file);
+            return true;
+          }
+        }
+      }
+      return false;
+    };
+    const handleDrop = (_view: unknown, event: DragEvent) => {
+      const file = event.dataTransfer?.files[0];
+      if (file && (file.type.startsWith('image/') || file.type.startsWith('video/'))) {
+        event.preventDefault();
+        handleMediaUploadRef.current(file);
+        return true;
+      }
+      return false;
+    };
+    editor.setOptions({ editorProps: { ...editor.options.editorProps, handlePaste, handleDrop } });
+  }, [editor]);
+
+  const addLink = useCallback(() => {
+    const url = window.prompt(t('news.admin.toolbar.linkUrlPrompt'));
+    if (url && editor) {
+      try {
+        const parsed = new URL(url);
+        if (parsed.protocol !== 'https:' && parsed.protocol !== 'http:') return;
+      } catch {
+        return;
+      }
+      editor.chain().focus().setLink({ href: url }).run();
+    }
+  }, [editor, t]);
+
+  if (!editor) return null;
+
+  return (
+    <div className="overflow-hidden rounded-xl border border-dark-700 bg-dark-800/50">
+      {/* Upload overlay */}
+      {isUploading && (
+        <div className="flex items-center justify-center gap-2 bg-dark-900/60 px-3 py-2">
+          <div className="h-4 w-4 animate-spin rounded-full border-2 border-accent-400 border-t-transparent" />
+          <span className="text-xs text-dark-300">{t('news.admin.uploading')}</span>
+        </div>
+      )}
+      {isDragging && !isUploading && (
+        <div className="flex items-center justify-center border-b border-dashed border-accent-400 bg-accent-400/10 px-3 py-2">
+          <span className="text-xs font-medium text-accent-400">{t('news.admin.dropMedia')}</span>
+        </div>
+      )}
+
+      {/* Compact toolbar */}
+      <div className="flex flex-wrap items-center gap-0.5 border-b border-dark-700 bg-dark-800 px-1.5 py-1">
+        <ToolbarButton
+          onClick={() => editor.chain().focus().toggleBold().run()}
+          isActive={editor.isActive('bold')}
+          title={t('news.admin.toolbar.bold')}
+        >
+          <BoldIcon />
+        </ToolbarButton>
+        <ToolbarButton
+          onClick={() => editor.chain().focus().toggleItalic().run()}
+          isActive={editor.isActive('italic')}
+          title={t('news.admin.toolbar.italic')}
+        >
+          <ItalicIcon />
+        </ToolbarButton>
+        <ToolbarButton
+          onClick={() => editor.chain().focus().toggleUnderline().run()}
+          isActive={editor.isActive('underline')}
+          title={t('news.admin.toolbar.underline')}
+        >
+          <UnderlineIcon />
+        </ToolbarButton>
+        <ToolbarButton
+          onClick={() => editor.chain().focus().toggleStrike().run()}
+          isActive={editor.isActive('strike')}
+          title={t('news.admin.toolbar.strikethrough')}
+        >
+          <StrikeIcon />
+        </ToolbarButton>
+        <div className="mx-0.5 h-4 w-px bg-dark-700" />
+        <ToolbarButton
+          onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+          isActive={editor.isActive('heading', { level: 2 })}
+          title={t('news.admin.toolbar.heading2')}
+        >
+          <H2Icon />
+        </ToolbarButton>
+        <ToolbarButton
+          onClick={() => editor.chain().focus().toggleBulletList().run()}
+          isActive={editor.isActive('bulletList')}
+          title={t('news.admin.toolbar.bulletList')}
+        >
+          <ListBulletIcon />
+        </ToolbarButton>
+        <ToolbarButton
+          onClick={() => editor.chain().focus().toggleOrderedList().run()}
+          isActive={editor.isActive('orderedList')}
+          title={t('news.admin.toolbar.orderedList')}
+        >
+          <ListOrderedIcon />
+        </ToolbarButton>
+        <ToolbarButton
+          onClick={() => editor.chain().focus().toggleBlockquote().run()}
+          isActive={editor.isActive('blockquote')}
+          title={t('news.admin.toolbar.blockquote')}
+        >
+          <QuoteIcon />
+        </ToolbarButton>
+        <div className="mx-0.5 h-4 w-px bg-dark-700" />
+        <ToolbarButton
+          onClick={() => editor.chain().focus().toggleHighlight().run()}
+          isActive={editor.isActive('highlight')}
+          title={t('news.admin.toolbar.highlight')}
+        >
+          <HighlightIcon />
+        </ToolbarButton>
+        <ToolbarButton onClick={addLink} title={t('news.admin.toolbar.link')}>
+          <LinkIcon />
+        </ToolbarButton>
+        <ToolbarButton
+          onClick={() => mediaRef.current?.click()}
+          disabled={isUploading}
+          title={t('news.admin.toolbar.image')}
+        >
+          {isUploading ? (
+            <div className="h-4 w-4 animate-spin rounded-full border-2 border-accent-400 border-t-transparent" />
+          ) : (
+            <ImageIcon />
+          )}
+        </ToolbarButton>
+      </div>
+
+      {/* Editor */}
+      <div
+        onDragOver={(e) => {
+          e.preventDefault();
+          setIsDragging(true);
+        }}
+        onDragLeave={(e) => {
+          e.preventDefault();
+          setIsDragging(false);
+        }}
+        onDrop={(e) => {
+          setIsDragging(false);
+          if (e.defaultPrevented) return;
+          const file = e.dataTransfer.files[0];
+          if (file && (file.type.startsWith('image/') || file.type.startsWith('video/'))) {
+            e.preventDefault();
+            handleMediaUpload(file);
+          }
+        }}
+      >
+        <EditorContent editor={editor} />
+      </div>
+
+      {/* Hidden file input */}
+      <input
+        ref={mediaRef}
+        type="file"
+        accept="image/jpeg,image/png,image/webp,video/mp4,video/webm"
+        onChange={(e) => {
+          const file = e.target.files?.[0];
+          if (file) handleMediaUpload(file);
+          e.target.value = '';
+        }}
+        className="hidden"
+        aria-hidden="true"
+      />
+    </div>
+  );
+}
+
+// --- FAQ Q&A Builder ---
+interface FaqBuilderProps {
+  items: FaqItem[];
+  onChange: (items: FaqItem[]) => void;
+  locale: string;
+  localeLabel: string;
+}
+
+function FaqBuilder({ items, onChange, locale, localeLabel }: FaqBuilderProps) {
+  const { t } = useTranslation();
+
+  // Stable keys for React — travel with items through reorder/delete
+  const keyCounter = useRef(0);
+  const [itemKeys, setItemKeys] = useState<number[]>(() => items.map(() => keyCounter.current++));
+
+  // Regenerate all keys on locale switch (items are semantically different)
+  useEffect(() => {
+    setItemKeys(items.map(() => keyCounter.current++));
+  }, [locale]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Sync key count when items added/removed within the same locale
+  useEffect(() => {
+    setItemKeys((prev) => {
+      if (prev.length === items.length) return prev;
+      if (items.length > prev.length) {
+        const newKeys = [...prev];
+        for (let i = prev.length; i < items.length; i++) {
+          newKeys.push(keyCounter.current++);
+        }
+        return newKeys;
+      }
+      return prev.slice(0, items.length);
+    });
+  }, [items.length]);
+
+  const handleQuestionChange = useCallback(
+    (index: number, value: string) => {
+      const updated = items.map((item, i) => (i === index ? { ...item, q: value } : item));
+      onChange(updated);
+    },
+    [items, onChange],
+  );
+
+  const handleAnswerChange = useCallback(
+    (index: number, value: string) => {
+      const updated = items.map((item, i) => (i === index ? { ...item, a: value } : item));
+      onChange(updated);
+    },
+    [items, onChange],
+  );
+
+  const handleRemove = useCallback(
+    (index: number) => {
+      setItemKeys((prev) => prev.filter((_, i) => i !== index));
+      onChange(items.filter((_, i) => i !== index));
+    },
+    [items, onChange],
+  );
+
+  const handleAdd = useCallback(() => {
+    const newKey = keyCounter.current++;
+    setItemKeys((prev) => [...prev, newKey]);
+    onChange([...items, { q: '', a: '' }]);
+  }, [items, onChange]);
+
+  const handleMoveUp = useCallback(
+    (index: number) => {
+      if (index === 0) return;
+      const updated = [...items];
+      [updated[index - 1], updated[index]] = [updated[index], updated[index - 1]];
+      setItemKeys((prev) => {
+        const k = [...prev];
+        [k[index - 1], k[index]] = [k[index], k[index - 1]];
+        return k;
+      });
+      onChange(updated);
+    },
+    [items, onChange],
+  );
+
+  const handleMoveDown = useCallback(
+    (index: number) => {
+      if (index >= items.length - 1) return;
+      const updated = [...items];
+      [updated[index], updated[index + 1]] = [updated[index + 1], updated[index]];
+      setItemKeys((prev) => {
+        const k = [...prev];
+        [k[index], k[index + 1]] = [k[index + 1], k[index]];
+        return k;
+      });
+      onChange(updated);
+    },
+    [items, onChange],
+  );
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <label className="label">
+          {t('admin.infoPages.faq.questions')} ({localeLabel})
+        </label>
+        <span className="text-xs text-dark-500">
+          {items.length} {t('admin.infoPages.faq.questionsCount')}
+        </span>
+      </div>
+
+      {items.length === 0 && (
+        <div className="rounded-xl border border-dashed border-dark-700 bg-dark-800/30 p-6 text-center text-sm text-dark-500">
+          {t('admin.infoPages.faq.noQuestions')}
+        </div>
+      )}
+
+      {items.map((item, index) => (
+        <div
+          key={itemKeys[index] ?? index}
+          className="rounded-xl border border-dark-700 bg-dark-800/50 p-4 transition-all hover:border-dark-600"
+        >
+          <div className="mb-3 flex items-center justify-between">
+            <span className="text-xs font-medium text-dark-400">
+              {t('admin.infoPages.faq.questionNumber', { n: index + 1 })}
+            </span>
+            <div className="flex items-center gap-1">
+              <button
+                type="button"
+                onClick={() => handleMoveUp(index)}
+                disabled={index === 0}
+                className="min-h-[44px] min-w-[44px] rounded-lg p-2 text-dark-400 transition-colors hover:bg-dark-700 hover:text-dark-200 disabled:cursor-not-allowed disabled:opacity-30"
+                title={t('admin.infoPages.faq.moveUp')}
+              >
+                <ChevronUpIcon />
+              </button>
+              <button
+                type="button"
+                onClick={() => handleMoveDown(index)}
+                disabled={index >= items.length - 1}
+                className="min-h-[44px] min-w-[44px] rounded-lg p-2 text-dark-400 transition-colors hover:bg-dark-700 hover:text-dark-200 disabled:cursor-not-allowed disabled:opacity-30"
+                title={t('admin.infoPages.faq.moveDown')}
+              >
+                <ChevronDownIcon />
+              </button>
+              <button
+                type="button"
+                onClick={() => handleRemove(index)}
+                className="min-h-[44px] min-w-[44px] rounded-lg p-2 text-dark-400 transition-colors hover:bg-error-500/10 hover:text-error-400"
+                title={t('admin.infoPages.faq.removeQuestion')}
+              >
+                <TrashSmallIcon />
+              </button>
+            </div>
+          </div>
+
+          <div className="space-y-3">
+            <div>
+              <label className="mb-1 block text-xs font-medium text-dark-400">
+                {t('admin.infoPages.faq.question')}
+              </label>
+              <input
+                type="text"
+                value={item.q}
+                onChange={(e) => handleQuestionChange(index, e.target.value)}
+                className="input text-sm"
+                placeholder={t('admin.infoPages.faq.questionPlaceholder')}
+              />
+            </div>
+            <div>
+              <label className="mb-1 block text-xs font-medium text-dark-400">
+                {t('admin.infoPages.faq.answer')}
+              </label>
+              <FaqAnswerEditor
+                value={item.a}
+                onChange={(html) => handleAnswerChange(index, html)}
+              />
+            </div>
+          </div>
+        </div>
+      ))}
+
+      <button
+        type="button"
+        onClick={handleAdd}
+        className="flex min-h-[44px] w-full items-center justify-center gap-2 rounded-xl border border-dashed border-dark-600 bg-dark-800/30 py-3 text-sm font-medium text-dark-300 transition-colors hover:border-dark-500 hover:bg-dark-800/50 hover:text-dark-100"
+      >
+        <PlusSmallIcon />
+        {t('admin.infoPages.faq.addQuestion')}
+      </button>
+    </div>
+  );
+}
+
+export default function AdminInfoPageEditor() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { id: rawId } = useParams<{ id: string }>();
+  const [searchParams] = useSearchParams();
+  const queryClient = useQueryClient();
+  const haptic = useHapticFeedback();
+  const pageId = rawId != null ? Number(rawId) : undefined;
+  const isEdit = pageId != null && !Number.isNaN(pageId);
+  const initialPageType = (searchParams.get('type') === 'faq' ? 'faq' : 'page') as InfoPageType;
+
+  // Form state
+  const [slug, setSlug] = useState('');
+  const [slugManuallyEdited, setSlugManuallyEdited] = useState(false);
+  const [icon, setIcon] = useState('');
+  const [isActive, setIsActive] = useState(true);
+  const [sortOrder, setSortOrder] = useState(0);
+  const [pageType, setPageType] = useState<InfoPageType>(initialPageType);
+  const [replacesTab, setReplacesTab] = useState<ReplacesTab | null>(null);
+  const [saveError, setSaveError] = useState<string | null>(null);
+
+  // FAQ Q&A state per locale
+  const [faqItems, setFaqItems] = useState<Record<string, FaqItem[]>>({});
+
+  // Multi-locale state
+  const [activeLocale, setActiveLocale] = useState<LocaleCode>('ru');
+  const [titles, setTitles] = useState<Record<string, string>>({});
+  const [contents, setContents] = useState<Record<string, string>>({});
+
+  // Media upload state
+  const mediaInputRef = useRef<HTMLInputElement>(null);
+  const [uploadCount, setUploadCount] = useState(0);
+  const isUploading = uploadCount > 0;
+  const [isDragging, setIsDragging] = useState(false);
+  const activeUploadsRef = useRef(new Set<AbortController>());
+
+  const handleMediaUploadRef = useRef<(file: File) => void>(() => {});
+
+  // TipTap editor
+  const extensions = useMemo(
+    () => [
+      StarterKit.configure({
+        heading: { levels: [1, 2, 3] },
+        link: false,
+        underline: false,
+      }),
+      UnderlineExtension,
+      LinkExtension.configure({
+        openOnClick: false,
+        HTMLAttributes: { class: 'link' },
+      }),
+      ImageExtension.configure({
+        HTMLAttributes: { class: 'rounded-xl max-w-full' },
+      }),
+      PlaceholderExtension.configure({
+        placeholder: t('admin.infoPages.fields.content'),
+      }),
+      TextAlignExtension.configure({
+        types: ['heading', 'paragraph'],
+      }),
+      HighlightExtension,
+      VideoExtension,
+    ],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  const editor = useEditor({
+    extensions,
+    editorProps: {
+      attributes: {
+        class: 'prose max-w-none min-h-[300px] p-4 focus:outline-none',
+      },
+      handlePaste: (_view, event) => {
+        const items = event.clipboardData?.items;
+        if (!items) return false;
+
+        for (const item of Array.from(items)) {
+          if (item.type.startsWith('image/') || item.type.startsWith('video/')) {
+            const file = item.getAsFile();
+            if (file) {
+              handleMediaUploadRef.current(file);
+              return true;
+            }
+          }
+        }
+        return false;
+      },
+      handleDrop: (_view, event) => {
+        const file = event.dataTransfer?.files[0];
+        if (file && (file.type.startsWith('image/') || file.type.startsWith('video/'))) {
+          event.preventDefault();
+          handleMediaUploadRef.current(file);
+          return true;
+        }
+        return false;
+      },
+    },
+  });
+
+  // --- Media upload handlers ---
+
+  const handleMediaUpload = useCallback(
+    async (file: File) => {
+      if (!editor) return;
+
+      const isImage = file.type.startsWith('image/');
+      const isVideo = file.type.startsWith('video/');
+      if (!isImage && !isVideo) return;
+
+      const maxSize = isImage ? 10 * 1024 * 1024 : 50 * 1024 * 1024;
+      if (file.size > maxSize) {
+        haptic.error();
+        setSaveError(t('news.admin.fileTooLarge'));
+        return;
+      }
+
+      const controller = new AbortController();
+      activeUploadsRef.current.add(controller);
+      setUploadCount((c) => c + 1);
+
+      try {
+        const result = await newsApi.uploadMedia(file, controller.signal);
+        if (controller.signal.aborted) return;
+
+        if (!isSafeUrl(result.url)) {
+          haptic.error();
+          setSaveError(t('news.admin.uploadError'));
+          return;
+        }
+
+        if (result.media_type === 'image') {
+          editor.chain().focus().setImage({ src: result.url, alt: file.name }).run();
+        } else {
+          editor
+            .chain()
+            .focus()
+            .insertContent({
+              type: 'video',
+              attrs: { src: result.url, class: 'w-full rounded-xl max-h-96' },
+            })
+            .run();
+        }
+        haptic.success();
+      } catch {
+        if (controller.signal.aborted) return;
+        haptic.error();
+        setSaveError(t('news.admin.uploadError'));
+      } finally {
+        activeUploadsRef.current.delete(controller);
+        setUploadCount((c) => c - 1);
+      }
+    },
+    [editor, haptic, t],
+  );
+
+  useEffect(() => {
+    handleMediaUploadRef.current = handleMediaUpload;
+  }, [handleMediaUpload]);
+
+  useEffect(() => {
+    const uploads = activeUploadsRef.current;
+    return () => {
+      for (const controller of uploads) {
+        controller.abort();
+      }
+      uploads.clear();
+    };
+  }, []);
+
+  const handleFileInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0];
+      if (file) handleMediaUpload(file);
+      e.target.value = '';
+    },
+    [handleMediaUpload],
+  );
+
+  const handleEditorDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(true);
+  }, []);
+
+  const handleEditorDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+  }, []);
+
+  const handleEditorDrop = useCallback(
+    (e: React.DragEvent) => {
+      setIsDragging(false);
+      if (e.defaultPrevented) return;
+      e.preventDefault();
+      const file = e.dataTransfer.files[0];
+      if (file) handleMediaUpload(file);
+    },
+    [handleMediaUpload],
+  );
+
+  // Fetch all admin pages to detect tab conflicts
+  const { data: allAdminPages } = useQuery({
+    queryKey: ['admin', 'info-pages', 'list', 'all'],
+    queryFn: () => infoPagesApi.getAdminPages(),
+    staleTime: 30_000,
+  });
+
+  // Fetch page for editing
+  const { data: pageData, isLoading: isLoadingPage } = useQuery({
+    queryKey: ['admin', 'info-pages', 'page', pageId],
+    queryFn: () => {
+      if (pageId == null) throw new Error('Missing page id parameter');
+      return infoPagesApi.getAdminPage(pageId);
+    },
+    enabled: isEdit,
+    staleTime: 0,
+    gcTime: 0,
+    refetchOnMount: true,
+    refetchOnWindowFocus: false,
+  });
+
+  // Populate form when page data loads (once only -- not on locale switch)
+  const editorPopulated = useRef(false);
+  const formPopulated = useRef(false);
+  useEffect(() => {
+    if (!pageData || formPopulated.current) return;
+    setSlug(pageData.slug);
+    setSlugManuallyEdited(true);
+    setIcon(pageData.icon ?? '');
+    setIsActive(pageData.is_active);
+    setSortOrder(pageData.sort_order);
+    setPageType(pageData.page_type ?? 'page');
+    setReplacesTab(pageData.replaces_tab ?? null);
+    setTitles(pageData.title);
+
+    if (pageData.page_type === 'faq') {
+      // For FAQ pages, content stores Q&A arrays per locale
+      const parsed: Record<string, FaqItem[]> = {};
+      for (const [loc, val] of Object.entries(pageData.content)) {
+        try {
+          const arr = typeof val === 'string' ? JSON.parse(val) : val;
+          parsed[loc] = Array.isArray(arr) ? arr : [];
+        } catch {
+          parsed[loc] = [];
+        }
+      }
+      setFaqItems(parsed);
+      setContents({});
+    } else {
+      setContents(pageData.content);
+    }
+
+    formPopulated.current = true;
+  }, [pageData]);
+
+  // Set editor content once when editor is ready
+  useEffect(() => {
+    if (!pageData || !editor || editorPopulated.current) return;
+    const initialContent = pageData.content[activeLocale] ?? pageData.content['ru'] ?? '';
+    editor.commands.setContent(initialContent);
+    editorPopulated.current = true;
+  }, [pageData, editor]); // activeLocale intentionally omitted
+
+  // Auto-generate slug from Russian title
+  useEffect(() => {
+    if (!slugManuallyEdited && titles['ru']) {
+      setSlug(generateSlug(titles['ru']));
+    }
+  }, [titles, slugManuallyEdited]);
+
+  // --- Locale switching ---
+  const switchLocale = useCallback(
+    (newLocale: LocaleCode) => {
+      if (!editor) return;
+      // Save current editor content
+      const currentHtml = editor.getHTML();
+      const isEmpty = currentHtml === '<p></p>' || currentHtml === '';
+      setContents((prev) => ({
+        ...prev,
+        [activeLocale]: isEmpty ? '' : currentHtml,
+      }));
+      // Load new locale content
+      const newContent = contents[newLocale] ?? '';
+      editor.commands.setContent(newContent);
+      setActiveLocale(newLocale);
+    },
+    [editor, activeLocale, contents],
+  );
+
+  // Save mutation
+  const saveMutation = useMutation({
+    mutationFn: (data: {
+      slug: string;
+      title: Record<string, string>;
+      content: Record<string, string>;
+      page_type: InfoPageType;
+      is_active: boolean;
+      sort_order: number;
+      icon: string | null;
+      replaces_tab: ReplacesTab | null;
+    }) => {
+      if (isEdit && pageId != null) {
+        return infoPagesApi.updatePage(pageId, data);
+      }
+      return infoPagesApi.createPage(data);
+    },
+    onSuccess: () => {
+      haptic.success();
+      queryClient.invalidateQueries({ queryKey: ['admin', 'info-pages'] });
+      queryClient.invalidateQueries({ queryKey: ['info-pages'] });
+      navigate('/admin/info-pages');
+    },
+    onError: (error: Error) => {
+      haptic.error();
+      setSaveError(error.message || t('admin.infoPages.saveError'));
+    },
+  });
+
+  const handleSave = () => {
+    setSaveError(null);
+    if (!slug.trim()) return;
+
+    let finalContents: Record<string, string>;
+
+    if (pageType === 'faq') {
+      // Serialize FAQ items as JSON strings per locale
+      finalContents = {};
+      for (const [loc, items] of Object.entries(faqItems)) {
+        finalContents[loc] = JSON.stringify(items);
+      }
+    } else {
+      // Capture current editor content for the active locale
+      const currentHtml = editor?.getHTML() ?? '';
+      const isEmpty = currentHtml === '<p></p>' || currentHtml === '';
+      finalContents = {
+        ...contents,
+        [activeLocale]: isEmpty ? '' : currentHtml,
+      };
+    }
+
+    const data = {
+      slug: slug.trim(),
+      title: titles,
+      content: finalContents,
+      page_type: pageType,
+      is_active: isActive,
+      sort_order: sortOrder,
+      icon: icon.trim() || null,
+      replaces_tab: replacesTab,
+    };
+
+    haptic.buttonPress();
+    saveMutation.mutate(data);
+  };
+
+  // Toolbar actions
+  const addLink = () => {
+    const url = window.prompt(t('news.admin.toolbar.linkUrlPrompt'));
+    if (url && editor) {
+      try {
+        const parsed = new URL(url);
+        if (parsed.protocol !== 'https:' && parsed.protocol !== 'http:') return;
+      } catch {
+        return;
+      }
+      editor.chain().focus().setLink({ href: url }).run();
+    }
+  };
+
+  if (isEdit && isLoadingPage) {
+    return (
+      <div className="space-y-6">
+        <div className="skeleton h-8 w-48 rounded-lg" />
+        <div className="skeleton h-12 w-full rounded-xl" />
+        <div className="skeleton h-64 w-full rounded-xl" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <AdminBackButton to="/admin/info-pages" />
+          <h1 className="text-xl font-bold text-dark-100">
+            {isEdit ? t('admin.infoPages.edit') : t('admin.infoPages.create')}
+          </h1>
+        </div>
+        <button
+          onClick={handleSave}
+          disabled={saveMutation.isPending || !slug.trim()}
+          className="min-h-[44px] rounded-lg bg-accent-500 px-6 py-2.5 text-sm font-medium text-white transition-colors hover:bg-accent-600 disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          {saveMutation.isPending ? t('admin.infoPages.saving') : t('admin.infoPages.save')}
+        </button>
+      </div>
+
+      {/* Form */}
+      <div className="space-y-5">
+        {/* Slug */}
+        <div>
+          <label className="label">{t('admin.infoPages.fields.slug')}</label>
+          <input
+            type="text"
+            value={slug}
+            onChange={(e) => {
+              setSlug(e.target.value);
+              setSlugManuallyEdited(true);
+            }}
+            className="input font-mono text-sm"
+            required
+          />
+        </div>
+
+        {/* Icon + Sort Order row */}
+        <div className="grid gap-4 sm:grid-cols-2">
+          <div>
+            <label className="label">{t('admin.infoPages.fields.icon')}</label>
+            <input
+              type="text"
+              value={icon}
+              onChange={(e) => setIcon(e.target.value)}
+              className="input"
+              placeholder="📄"
+            />
+          </div>
+          <div>
+            <label className="label">{t('admin.infoPages.fields.sortOrder')}</label>
+            <input
+              type="number"
+              value={sortOrder}
+              onChange={(e) => setSortOrder(Number(e.target.value) || 0)}
+              min={0}
+              className="input max-w-xs"
+            />
+          </div>
+        </div>
+
+        {/* Active toggle */}
+        <div className="flex items-center gap-3">
+          <Toggle
+            checked={isActive}
+            onChange={() => setIsActive((v) => !v)}
+            aria-label={t('admin.infoPages.fields.isActive')}
+          />
+          <span className="text-sm text-dark-300">{t('admin.infoPages.fields.isActive')}</span>
+        </div>
+
+        {/* Page type selector */}
+        <div>
+          <label className="label">{t('admin.infoPages.fields.pageType')}</label>
+          <div className="flex gap-1">
+            {(['page', 'faq'] as const).map((pt) => (
+              <button
+                key={pt}
+                type="button"
+                onClick={() => setPageType(pt)}
+                className={cn(
+                  'min-h-[44px] rounded-lg px-4 py-2.5 text-sm font-medium transition-colors',
+                  pageType === pt
+                    ? pt === 'faq'
+                      ? 'bg-warning-500 text-white'
+                      : 'bg-accent-500 text-white'
+                    : 'bg-dark-700 text-dark-300 hover:bg-dark-600 hover:text-dark-100',
+                )}
+              >
+                {t(`admin.infoPages.pageTypes.${pt}`)}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Replaces tab selector */}
+        <div>
+          <label className="label">{t('admin.infoPages.fields.replacesTab')}</label>
+          <select
+            value={replacesTab ?? ''}
+            onChange={(e) => setReplacesTab((e.target.value || null) as ReplacesTab | null)}
+            className="input max-w-xs"
+          >
+            <option value="">{t('admin.infoPages.replacesTabNone')}</option>
+            {(['faq', 'rules', 'privacy', 'offer'] as const).map((tab) => {
+              const conflict = allAdminPages?.find(
+                (p) => p.replaces_tab === tab && p.id !== pageId,
+              );
+              return (
+                <option key={tab} value={tab}>
+                  {t(`admin.infoPages.replacesTabOptions.${tab}`)}
+                  {conflict ? ` (${t('admin.infoPages.replacesTabConflict')})` : ''}
+                </option>
+              );
+            })}
+          </select>
+          {replacesTab &&
+            allAdminPages?.some((p) => p.replaces_tab === replacesTab && p.id !== pageId) && (
+              <p className="mt-1 text-xs text-warning-400">
+                {t('admin.infoPages.replacesTabWarning')}
+              </p>
+            )}
+        </div>
+
+        {/* Locale tabs */}
+        <div>
+          <label className="label">{t('admin.infoPages.localeLabel')}</label>
+          <div className="flex flex-wrap gap-1">
+            {AVAILABLE_LOCALES.map((loc) => (
+              <button
+                key={loc}
+                type="button"
+                onClick={() => switchLocale(loc)}
+                className={cn(
+                  'min-h-[44px] rounded-lg px-4 py-2.5 text-sm font-medium transition-colors',
+                  activeLocale === loc
+                    ? 'bg-accent-500 text-white'
+                    : 'bg-dark-700 text-dark-300 hover:bg-dark-600 hover:text-dark-100',
+                )}
+              >
+                {t(`admin.infoPages.locales.${loc}`)}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Title for current locale */}
+        <div>
+          <label className="label">
+            {t('admin.infoPages.fields.title')} ({t(`admin.infoPages.locales.${activeLocale}`)})
+          </label>
+          <input
+            type="text"
+            value={titles[activeLocale] ?? ''}
+            onChange={(e) => setTitles((prev) => ({ ...prev, [activeLocale]: e.target.value }))}
+            className="input"
+          />
+        </div>
+
+        {/* Content: TipTap editor for pages, FAQ builder for FAQ */}
+        {pageType === 'faq' ? (
+          <FaqBuilder
+            items={faqItems[activeLocale] ?? []}
+            onChange={(items) => setFaqItems((prev) => ({ ...prev, [activeLocale]: items }))}
+            locale={activeLocale}
+            localeLabel={t(`admin.infoPages.locales.${activeLocale}`)}
+          />
+        ) : (
+          <div>
+            <label className="label">
+              {t('admin.infoPages.fields.content')} ({t(`admin.infoPages.locales.${activeLocale}`)})
+            </label>
+            <div
+              className="relative overflow-hidden rounded-xl border border-dark-700 bg-dark-800/50"
+              onDragOver={handleEditorDragOver}
+              onDragLeave={handleEditorDragLeave}
+              onDrop={handleEditorDrop}
+            >
+              {/* Upload progress overlay */}
+              {isUploading && (
+                <div className="absolute inset-0 z-10 flex items-center justify-center rounded-xl bg-dark-900/60 backdrop-blur-sm">
+                  <div className="flex flex-col items-center gap-3">
+                    <div className="h-8 w-8 animate-spin rounded-full border-2 border-accent-400 border-t-transparent" />
+                    <span className="text-sm font-medium text-dark-200">
+                      {t('news.admin.uploading')}
+                    </span>
+                  </div>
+                </div>
+              )}
+
+              {/* Drag overlay */}
+              {isDragging && !isUploading && (
+                <div className="absolute inset-0 z-10 flex items-center justify-center rounded-xl border-2 border-dashed border-accent-400 bg-accent-400/10">
+                  <span className="text-sm font-semibold text-accent-400">
+                    {t('news.admin.dropMedia')}
+                  </span>
+                </div>
+              )}
+
+              {/* Toolbar */}
+              {editor && (
+                <div className="flex flex-wrap items-center gap-0.5 border-b border-dark-700 bg-dark-800 p-2">
+                  <ToolbarButton
+                    onClick={() => editor.chain().focus().toggleBold().run()}
+                    isActive={editor.isActive('bold')}
+                    title={t('news.admin.toolbar.bold')}
+                  >
+                    <BoldIcon />
+                  </ToolbarButton>
+                  <ToolbarButton
+                    onClick={() => editor.chain().focus().toggleItalic().run()}
+                    isActive={editor.isActive('italic')}
+                    title={t('news.admin.toolbar.italic')}
+                  >
+                    <ItalicIcon />
+                  </ToolbarButton>
+                  <ToolbarButton
+                    onClick={() => editor.chain().focus().toggleUnderline().run()}
+                    isActive={editor.isActive('underline')}
+                    title={t('news.admin.toolbar.underline')}
+                  >
+                    <UnderlineIcon />
+                  </ToolbarButton>
+                  <ToolbarButton
+                    onClick={() => editor.chain().focus().toggleStrike().run()}
+                    isActive={editor.isActive('strike')}
+                    title={t('news.admin.toolbar.strikethrough')}
+                  >
+                    <StrikeIcon />
+                  </ToolbarButton>
+
+                  <div className="mx-1 h-5 w-px bg-dark-700" />
+
+                  <ToolbarButton
+                    onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
+                    isActive={editor.isActive('heading', { level: 1 })}
+                    title={t('news.admin.toolbar.heading1')}
+                  >
+                    <H1Icon />
+                  </ToolbarButton>
+                  <ToolbarButton
+                    onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+                    isActive={editor.isActive('heading', { level: 2 })}
+                    title={t('news.admin.toolbar.heading2')}
+                  >
+                    <H2Icon />
+                  </ToolbarButton>
+                  <ToolbarButton
+                    onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
+                    isActive={editor.isActive('heading', { level: 3 })}
+                    title={t('news.admin.toolbar.heading3')}
+                  >
+                    <H3Icon />
+                  </ToolbarButton>
+
+                  <div className="mx-1 h-5 w-px bg-dark-700" />
+
+                  <ToolbarButton
+                    onClick={() => editor.chain().focus().toggleBulletList().run()}
+                    isActive={editor.isActive('bulletList')}
+                    title={t('news.admin.toolbar.bulletList')}
+                  >
+                    <ListBulletIcon />
+                  </ToolbarButton>
+                  <ToolbarButton
+                    onClick={() => editor.chain().focus().toggleOrderedList().run()}
+                    isActive={editor.isActive('orderedList')}
+                    title={t('news.admin.toolbar.orderedList')}
+                  >
+                    <ListOrderedIcon />
+                  </ToolbarButton>
+                  <ToolbarButton
+                    onClick={() => editor.chain().focus().toggleBlockquote().run()}
+                    isActive={editor.isActive('blockquote')}
+                    title={t('news.admin.toolbar.blockquote')}
+                  >
+                    <QuoteIcon />
+                  </ToolbarButton>
+                  <ToolbarButton
+                    onClick={() => editor.chain().focus().toggleCodeBlock().run()}
+                    isActive={editor.isActive('codeBlock')}
+                    title={t('news.admin.toolbar.codeBlock')}
+                  >
+                    <CodeBlockIcon />
+                  </ToolbarButton>
+
+                  <div className="mx-1 h-5 w-px bg-dark-700" />
+
+                  <ToolbarButton
+                    onClick={() => editor.chain().focus().setTextAlign('left').run()}
+                    isActive={editor.isActive({ textAlign: 'left' })}
+                    title={t('news.admin.toolbar.alignLeft')}
+                  >
+                    <AlignLeftIcon />
+                  </ToolbarButton>
+                  <ToolbarButton
+                    onClick={() => editor.chain().focus().setTextAlign('center').run()}
+                    isActive={editor.isActive({ textAlign: 'center' })}
+                    title={t('news.admin.toolbar.alignCenter')}
+                  >
+                    <AlignCenterIcon />
+                  </ToolbarButton>
+
+                  <div className="mx-1 h-5 w-px bg-dark-700" />
+
+                  <ToolbarButton
+                    onClick={() => editor.chain().focus().toggleHighlight().run()}
+                    isActive={editor.isActive('highlight')}
+                    title={t('news.admin.toolbar.highlight')}
+                  >
+                    <HighlightIcon />
+                  </ToolbarButton>
+                  <ToolbarButton onClick={addLink} title={t('news.admin.toolbar.link')}>
+                    <LinkIcon />
+                  </ToolbarButton>
+                  <ToolbarButton
+                    onClick={() => mediaInputRef.current?.click()}
+                    disabled={isUploading}
+                    title={t('news.admin.toolbar.image')}
+                  >
+                    {isUploading ? (
+                      <div className="h-4 w-4 animate-spin rounded-full border-2 border-accent-400 border-t-transparent" />
+                    ) : (
+                      <ImageIcon />
+                    )}
+                  </ToolbarButton>
+                </div>
+              )}
+
+              {/* Editor content */}
+              <EditorContent editor={editor} />
+            </div>
+
+            {/* Hidden file inputs */}
+            <input
+              ref={mediaInputRef}
+              type="file"
+              accept="image/jpeg,image/png,image/webp,video/mp4,video/webm"
+              onChange={handleFileInputChange}
+              className="hidden"
+              aria-hidden="true"
+            />
+          </div>
+        )}
+
+        {/* Error feedback */}
+        {saveError && (
+          <div className="rounded-lg border border-error-500/30 bg-error-500/10 px-4 py-3 text-sm text-error-400">
+            {saveError}
+          </div>
+        )}
+
+        {/* Bottom save button */}
+        <button
+          onClick={handleSave}
+          disabled={saveMutation.isPending || !slug.trim()}
+          className="min-h-[44px] w-full rounded-lg bg-accent-500 py-3 text-sm font-medium text-white transition-colors hover:bg-accent-600 disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          {saveMutation.isPending ? t('admin.infoPages.saving') : t('admin.infoPages.save')}
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/AdminInfoPages.tsx b/src/pages/AdminInfoPages.tsx
new file mode 100644
index 0000000..be774f8
--- /dev/null
+++ b/src/pages/AdminInfoPages.tsx
@@ -0,0 +1,396 @@
+import { useCallback, useState, memo } from 'react';
+import { useNavigate } from 'react-router';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import { infoPagesApi } from '../api/infoPages';
+import { AdminBackButton } from '../components/admin';
+import { Toggle } from '../components/admin/Toggle';
+import { useHapticFeedback } from '../platform/hooks/useHaptic';
+import { useDestructiveConfirm } from '../platform/hooks/useNativeDialog';
+import { cn } from '../lib/utils';
+import type { InfoPageListItem, InfoPageType } from '../api/infoPages';
+
+type FilterTab = 'all' | 'page' | 'faq';
+
+// Icons
+const PlusIcon = () => (
+  <svg
+    className="h-5 w-5"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth={2}
+    aria-hidden="true"
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+  </svg>
+);
+
+const RefreshIcon = () => (
+  <svg
+    className="h-4 w-4"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth={2}
+    aria-hidden="true"
+  >
+    <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 PencilIcon = () => (
+  <svg
+    className="h-4 w-4"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth={2}
+    aria-hidden="true"
+  >
+    <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 TrashIcon = () => (
+  <svg
+    className="h-4 w-4"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth={2}
+    aria-hidden="true"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+    />
+  </svg>
+);
+
+const FileTextIcon = () => (
+  <svg
+    className="h-6 w-6"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth={1.5}
+    aria-hidden="true"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
+    />
+  </svg>
+);
+
+// --- Page Row ---
+
+const PageRow = memo(function PageRow({
+  page,
+  locale,
+  onEdit,
+  onDelete,
+  onToggleActive,
+}: {
+  page: InfoPageListItem;
+  locale: string;
+  onEdit: () => void;
+  onDelete: () => void;
+  onToggleActive: () => void;
+}) {
+  const { t } = useTranslation();
+  const resolvedTitle = page.title[locale] || page.title['ru'] || page.title['en'] || '';
+
+  return (
+    <div className="rounded-xl border border-dark-700 bg-dark-800/50 p-4 transition-all hover:border-dark-600">
+      <div className="flex items-start gap-4">
+        <div className="min-w-0 flex-1">
+          <div className="mb-1.5 flex flex-wrap items-center gap-2">
+            {page.icon && <span className="text-base">{page.icon}</span>}
+            <span className="rounded-full bg-dark-700 px-2 py-0.5 font-mono text-[10px] font-medium text-dark-300">
+              /{page.slug}
+            </span>
+            <span
+              className={`rounded-full px-2 py-0.5 text-[10px] font-medium ${
+                page.page_type === 'faq'
+                  ? 'bg-warning-500/20 text-warning-400'
+                  : 'bg-accent-500/20 text-accent-400'
+              }`}
+            >
+              {page.page_type === 'faq' ? 'FAQ' : t('admin.infoPages.typePage')}
+            </span>
+            <span
+              className={`rounded-full px-2 py-0.5 text-[10px] font-medium ${
+                page.is_active
+                  ? 'bg-success-500/20 text-success-400'
+                  : 'bg-dark-500/20 text-dark-400'
+              }`}
+            >
+              {page.is_active ? t('admin.infoPages.active') : t('admin.infoPages.inactive')}
+            </span>
+            {page.replaces_tab && (
+              <span className="rounded-full bg-purple-500/20 px-2 py-0.5 text-[10px] font-medium text-purple-400">
+                {t(`admin.infoPages.replacesTabOptions.${page.replaces_tab}`)}
+              </span>
+            )}
+            <span className="text-xs text-dark-500">#{page.id}</span>
+          </div>
+
+          <p className="truncate text-sm font-medium text-dark-100">{resolvedTitle}</p>
+
+          <div className="mt-2 flex items-center gap-4 text-xs text-dark-500">
+            <span>
+              {t('admin.infoPages.fields.sortOrder')}: {page.sort_order}
+            </span>
+            {page.updated_at && <span>{new Date(page.updated_at).toLocaleDateString()}</span>}
+          </div>
+        </div>
+
+        <div className="flex shrink-0 items-center gap-1.5">
+          <Toggle
+            checked={page.is_active}
+            onChange={onToggleActive}
+            aria-label={t('admin.infoPages.fields.isActive')}
+          />
+          <button
+            type="button"
+            onClick={onEdit}
+            className="min-h-[44px] min-w-[44px] rounded-lg p-2.5 text-dark-400 transition-colors hover:bg-dark-700 hover:text-dark-200"
+            title={t('admin.infoPages.edit')}
+            aria-label={t('admin.infoPages.edit')}
+          >
+            <PencilIcon />
+          </button>
+          <button
+            type="button"
+            onClick={onDelete}
+            className="min-h-[44px] min-w-[44px] rounded-lg p-2.5 text-dark-400 transition-colors hover:bg-error-500/10 hover:text-error-400"
+            title={t('admin.infoPages.delete')}
+            aria-label={t('admin.infoPages.delete')}
+          >
+            <TrashIcon />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+});
+
+// --- Row Wrapper (stable callbacks for memo) ---
+
+interface PageRowWrapperProps {
+  page: InfoPageListItem;
+  locale: string;
+  onNavigate: (path: string) => void;
+  onDelete: (id: number) => void;
+  onToggleActive: (id: number) => void;
+}
+
+const PageRowWrapper = memo(function PageRowWrapper({
+  page,
+  locale,
+  onNavigate,
+  onDelete,
+  onToggleActive,
+}: PageRowWrapperProps) {
+  const handleEdit = useCallback(
+    () => onNavigate(`/admin/info-pages/${page.id}/edit`),
+    [page.id, onNavigate],
+  );
+  const handleDelete = useCallback(() => onDelete(page.id), [page.id, onDelete]);
+  const handleToggleActive = useCallback(() => onToggleActive(page.id), [page.id, onToggleActive]);
+
+  return (
+    <PageRow
+      page={page}
+      locale={locale}
+      onEdit={handleEdit}
+      onDelete={handleDelete}
+      onToggleActive={handleToggleActive}
+    />
+  );
+});
+
+export default function AdminInfoPages() {
+  const { t, i18n } = useTranslation();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const haptic = useHapticFeedback();
+  const confirm = useDestructiveConfirm();
+  const currentLocale = i18n.language.split('-')[0];
+  const [activeFilter, setActiveFilter] = useState<FilterTab>('all');
+
+  const filterParam: InfoPageType | undefined = activeFilter === 'all' ? undefined : activeFilter;
+
+  const {
+    data: pages,
+    isLoading,
+    refetch,
+  } = useQuery({
+    queryKey: ['admin', 'info-pages', 'list', activeFilter],
+    queryFn: () => infoPagesApi.getAdminPages(filterParam),
+    staleTime: 30_000,
+  });
+
+  const items = pages ?? [];
+
+  const deleteMutation = useMutation({
+    mutationFn: infoPagesApi.deletePage,
+    onSuccess: () => {
+      haptic.success();
+      queryClient.invalidateQueries({ queryKey: ['admin', 'info-pages'] });
+      queryClient.invalidateQueries({ queryKey: ['info-pages'] });
+    },
+  });
+
+  const toggleActiveMutation = useMutation({
+    mutationFn: infoPagesApi.toggleActive,
+    onSuccess: () => {
+      haptic.success();
+      queryClient.invalidateQueries({ queryKey: ['admin', 'info-pages'] });
+      queryClient.invalidateQueries({ queryKey: ['info-pages'] });
+    },
+  });
+
+  const handleDelete = useCallback(
+    async (id: number) => {
+      const confirmed = await confirm(t('admin.infoPages.confirmDelete'));
+      if (confirmed) {
+        deleteMutation.mutate(id);
+      }
+    },
+    [confirm, deleteMutation, t],
+  );
+
+  const handleToggleActive = useCallback(
+    (id: number) => {
+      toggleActiveMutation.mutate(id);
+    },
+    [toggleActiveMutation],
+  );
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <AdminBackButton />
+          <div className="flex items-center gap-2">
+            <h1 className="text-xl font-bold text-dark-100">{t('admin.infoPages.title')}</h1>
+            {items.length > 0 && (
+              <span className="rounded-full bg-dark-700 px-2 py-0.5 text-xs font-medium text-dark-300">
+                {items.length}
+              </span>
+            )}
+          </div>
+        </div>
+        <div className="flex gap-2">
+          <button
+            onClick={() => refetch()}
+            className="min-h-[44px] min-w-[44px] rounded-lg bg-dark-800 p-2.5 text-dark-400 transition-colors hover:text-dark-100"
+            aria-label={t('common.refresh')}
+          >
+            <RefreshIcon />
+          </button>
+          <button
+            onClick={() => {
+              haptic.buttonPress();
+              navigate('/admin/info-pages/create?type=faq');
+            }}
+            className="flex min-h-[44px] items-center gap-2 rounded-lg bg-warning-500/80 px-4 py-2.5 text-white transition-colors hover:bg-warning-500"
+            aria-label={t('admin.infoPages.createFaq')}
+          >
+            <PlusIcon />
+            <span className="hidden sm:inline">{t('admin.infoPages.createFaq')}</span>
+          </button>
+          <button
+            onClick={() => {
+              haptic.buttonPress();
+              navigate('/admin/info-pages/create');
+            }}
+            className="flex min-h-[44px] items-center gap-2 rounded-lg bg-accent-500 px-4 py-2.5 text-white transition-colors hover:bg-accent-600"
+            aria-label={t('admin.infoPages.create')}
+          >
+            <PlusIcon />
+            <span className="hidden sm:inline">{t('admin.infoPages.create')}</span>
+          </button>
+        </div>
+      </div>
+
+      {/* Filter tabs */}
+      <div className="flex flex-wrap gap-1">
+        {(['all', 'page', 'faq'] as const).map((tab) => (
+          <button
+            key={tab}
+            type="button"
+            onClick={() => setActiveFilter(tab)}
+            className={cn(
+              'min-h-[44px] rounded-lg px-4 py-2.5 text-sm font-medium transition-colors',
+              activeFilter === tab
+                ? 'bg-accent-500 text-white'
+                : 'bg-dark-700 text-dark-300 hover:bg-dark-600 hover:text-dark-100',
+            )}
+          >
+            {t(`admin.infoPages.filter.${tab}`)}
+          </button>
+        ))}
+      </div>
+
+      {/* Pages list */}
+      {isLoading ? (
+        <div className="space-y-3">
+          {Array.from({ length: 3 }).map((_, i) => (
+            <div
+              key={i}
+              className="animate-pulse rounded-xl border border-dark-700 bg-dark-800/50 p-4"
+            >
+              <div className="flex items-start gap-4">
+                <div className="min-w-0 flex-1 space-y-2">
+                  <div className="flex gap-2">
+                    <div className="h-4 w-16 rounded bg-dark-700" />
+                    <div className="h-4 w-12 rounded bg-dark-700" />
+                  </div>
+                  <div className="h-5 w-3/4 rounded bg-dark-700" />
+                  <div className="h-3 w-1/2 rounded bg-dark-700" />
+                </div>
+                <div className="flex gap-2">
+                  <div className="h-8 w-14 rounded-full bg-dark-700" />
+                  <div className="h-8 w-8 rounded-lg bg-dark-700" />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : items.length === 0 ? (
+        <div className="flex flex-col items-center rounded-xl border border-dark-700 bg-dark-800/50 p-8 text-center text-dark-400">
+          <FileTextIcon />
+          <p className="mt-2">{t('admin.infoPages.noPages')}</p>
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {items.map((page) => (
+            <PageRowWrapper
+              key={page.id}
+              page={page}
+              locale={currentLocale}
+              onNavigate={navigate}
+              onDelete={handleDelete}
+              onToggleActive={handleToggleActive}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/pages/AdminPanel.tsx b/src/pages/AdminPanel.tsx
index f8b8f81..24db4c2 100644
--- a/src/pages/AdminPanel.tsx
+++ b/src/pages/AdminPanel.tsx
@@ -333,12 +333,27 @@ const icons = {
       <path d="M15 8h-5M15 12h-5" />
     </SvgIcon>
   ),
+  'list-checks': (
+    <SvgIcon>
+      <path d="M10 6h11M10 12h11M10 18h11" />
+      <path d="m3 6 1 1 2-2M3 12l1 1 2-2M3 18l1 1 2-2" />
+    </SvgIcon>
+  ),
   search: (
     <SvgIcon>
       <circle cx="11" cy="11" r="8" />
       <path d="m21 21-4.3-4.3" />
     </SvgIcon>
   ),
+  'file-text': (
+    <SvgIcon>
+      <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
+      <polyline points="14 2 14 8 20 8" />
+      <line x1="16" y1="13" x2="8" y2="13" />
+      <line x1="16" y1="17" x2="8" y2="17" />
+      <line x1="10" y1="9" x2="8" y2="9" />
+    </SvgIcon>
+  ),
   chevron: (
     <SvgIcon>
       <path d="m9 18 6-6-6-6" />
@@ -412,6 +427,12 @@ const sections: AdminSection[] = [
     gradient: 'linear-gradient(135deg, rgb(var(--color-accent-400)), rgb(var(--color-error-400)))',
     items: [
       { name: 'admin.nav.users', icon: 'users', to: '/admin/users', permission: 'users:read' },
+      {
+        name: 'admin.nav.bulkActions',
+        icon: 'list-checks',
+        to: '/admin/bulk-actions',
+        permission: 'users:read',
+      },
       {
         name: 'admin.nav.tickets',
         icon: 'ticket',
@@ -549,6 +570,12 @@ const sections: AdminSection[] = [
         to: '/admin/email-templates',
         permission: 'email_templates:read',
       },
+      {
+        name: 'admin.nav.infoPages',
+        icon: 'file-text',
+        to: '/admin/info-pages',
+        permission: 'settings:read',
+      },
       {
         name: 'admin.nav.updates',
         icon: 'refresh',
diff --git a/src/pages/Info.tsx b/src/pages/Info.tsx
index 24b73b5..af34bb4 100644
--- a/src/pages/Info.tsx
+++ b/src/pages/Info.tsx
@@ -1,9 +1,11 @@
-import { useState } from 'react';
+import { useState, useMemo, useCallback, useRef, useEffect } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
 import DOMPurify from 'dompurify';
 import { infoApi, FaqPage } from '../api/info';
+import { infoPagesApi } from '../api/infoPages';
 import { promoApi, LoyaltyTierInfo } from '../api/promo';
+import type { FaqItem, ReplacesTab } from '../api/infoPages';
 
 const InfoIcon = () => (
   <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
@@ -67,7 +69,7 @@ const ChevronIcon = ({ expanded }: { expanded: boolean }) => (
   </svg>
 );
 
-type TabType = 'faq' | 'rules' | 'privacy' | 'offer' | 'loyalty';
+const BUILTIN_TABS = new Set<string>(['faq', 'rules', 'privacy', 'offer', 'loyalty']);
 
 // Sanitize HTML content to prevent XSS
 const sanitizeHtml = (html: string): string => {
@@ -105,6 +107,136 @@ const sanitizeHtml = (html: string): string => {
   });
 };
 
+// Rich sanitizer for custom InfoPage content (TipTap editor output with media)
+const ALLOWED_IFRAME_HOSTS = new Set([
+  'www.youtube.com',
+  'youtube.com',
+  'player.vimeo.com',
+  'www.youtube-nocookie.com',
+]);
+
+const infoPagePurify = DOMPurify(window);
+
+infoPagePurify.addHook('afterSanitizeAttributes', (node) => {
+  if (node.tagName === 'IFRAME') {
+    const src = node.getAttribute('src') ?? '';
+    try {
+      const url = new URL(src);
+      if (url.protocol !== 'https:' || !ALLOWED_IFRAME_HOSTS.has(url.hostname)) {
+        node.remove();
+        return;
+      }
+    } catch {
+      node.remove();
+      return;
+    }
+    node.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-presentation');
+    node.setAttribute('allow', 'autoplay; encrypted-media; picture-in-picture');
+  }
+  if (node.tagName === 'VIDEO') {
+    const src = node.getAttribute('src') ?? '';
+    try {
+      const url = new URL(src);
+      if (url.protocol !== 'https:' && url.protocol !== 'http:') {
+        node.remove();
+        return;
+      }
+    } catch {
+      node.remove();
+      return;
+    }
+    node.setAttribute('controls', '');
+    node.setAttribute('preload', 'metadata');
+  }
+  if (node.tagName === 'A') {
+    node.setAttribute('target', '_blank');
+    node.setAttribute('rel', 'noopener noreferrer');
+  }
+  if (node.hasAttribute('style')) {
+    const style = node.getAttribute('style') ?? '';
+    const match = style.match(/text-align\s*:\s*(left|center|right|justify)/i);
+    if (match) {
+      node.setAttribute('style', `text-align: ${match[1]}`);
+    } else {
+      node.removeAttribute('style');
+    }
+  }
+});
+
+const RICH_SANITIZE_CONFIG = {
+  ALLOWED_TAGS: [
+    'p',
+    'div',
+    'br',
+    'hr',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'blockquote',
+    'pre',
+    'code',
+    'ul',
+    'ol',
+    'li',
+    'table',
+    'thead',
+    'tbody',
+    'tr',
+    'th',
+    'td',
+    'a',
+    'strong',
+    'b',
+    'em',
+    'i',
+    'u',
+    's',
+    'del',
+    'ins',
+    'span',
+    'mark',
+    'sub',
+    'sup',
+    'small',
+    'img',
+    'video',
+    'iframe',
+    'figure',
+    'figcaption',
+  ],
+  ALLOWED_ATTR: [
+    'href',
+    'target',
+    'rel',
+    'src',
+    'alt',
+    'title',
+    'width',
+    'height',
+    'loading',
+    'class',
+    'start',
+    'reversed',
+    'type',
+    'controls',
+    'preload',
+    'frameborder',
+    'allowfullscreen',
+    'allow',
+    'sandbox',
+    'style',
+  ],
+  ALLOW_DATA_ATTR: false,
+  ADD_ATTR: ['target'],
+};
+
+const sanitizeRichHtml = (html: string): string => {
+  return infoPagePurify.sanitize(html, RICH_SANITIZE_CONFIG);
+};
+
 // Convert content to formatted HTML (handles Telegram HTML + plain text)
 const formatContent = (content: string): string => {
   if (!content) return '';
@@ -154,15 +286,165 @@ const formatContent = (content: string): string => {
   return sanitizeHtml(result);
 };
 
+// --- FAQ Accordion for tab replacements ---
+
+function ReplacementFaqItem({
+  item,
+  isOpen,
+  onToggle,
+}: {
+  item: FaqItem;
+  isOpen: boolean;
+  onToggle: () => void;
+}) {
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [height, setHeight] = useState(0);
+
+  useEffect(() => {
+    if (contentRef.current) {
+      setHeight(isOpen ? contentRef.current.scrollHeight : 0);
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (!isOpen || !contentRef.current) return;
+    const observer = new ResizeObserver(() => {
+      if (contentRef.current) setHeight(contentRef.current.scrollHeight);
+    });
+    observer.observe(contentRef.current);
+    return () => observer.disconnect();
+  }, [isOpen]);
+
+  const sanitizedAnswer = useMemo(() => sanitizeRichHtml(item.a), [item.a]);
+
+  return (
+    <div className="overflow-hidden rounded-xl border border-dark-700 bg-dark-800/50 transition-all hover:border-dark-600">
+      <button
+        type="button"
+        onClick={onToggle}
+        className="flex min-h-[52px] w-full items-center justify-between gap-3 px-5 py-4 text-left"
+        aria-expanded={isOpen}
+      >
+        <span className="text-sm font-medium text-dark-100 sm:text-base">{item.q}</span>
+        <ChevronIcon expanded={isOpen} />
+      </button>
+      <div
+        style={{ height }}
+        className="overflow-hidden transition-[height] duration-300 ease-in-out"
+      >
+        <div ref={contentRef} className="border-t border-dark-700/50 px-5 pb-4 pt-3">
+          <div
+            className="prose prose-sm max-w-none text-dark-300"
+            dangerouslySetInnerHTML={{ __html: sanitizedAnswer }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ReplacementFaqView({ items }: { items: FaqItem[] }) {
+  const [openKey, setOpenKey] = useState<string | null>(null);
+
+  const handleToggle = useCallback((key: string) => {
+    setOpenKey((prev) => (prev === key ? null : key));
+  }, []);
+
+  return (
+    <div className="space-y-2">
+      {items.map((item, index) => {
+        const key = `${index}-${item.q.slice(0, 50)}`;
+        return (
+          <ReplacementFaqItem
+            key={key}
+            item={item}
+            isOpen={openKey === key}
+            onToggle={() => handleToggle(key)}
+          />
+        );
+      })}
+    </div>
+  );
+}
+
 export default function Info() {
-  const { t } = useTranslation();
-  const [activeTab, setActiveTab] = useState<TabType>('faq');
+  const { t, i18n } = useTranslation();
+  const [activeTab, setActiveTab] = useState<string>('faq');
   const [expandedFaq, setExpandedFaq] = useState<number | null>(null);
+  const locale = i18n.language.split('-')[0];
+
+  // Fetch tab replacements
+  const { data: tabReplacements, isError: replacementsError } = useQuery({
+    queryKey: ['info-pages', 'tab-replacements'],
+    queryFn: infoPagesApi.getTabReplacements,
+    staleTime: 60_000,
+  });
+
+  // Fetch custom InfoPages (active pages without replaces_tab — shown as extra tabs)
+  const { data: customPages } = useQuery({
+    queryKey: ['info-pages', 'list'],
+    queryFn: () => infoPagesApi.getPages(),
+    staleTime: 60_000,
+  });
+
+  // Filter to only pages that don't replace a built-in tab and don't collide with built-in IDs
+  const extraPages = useMemo(
+    () => (customPages ?? []).filter((p) => !p.replaces_tab && !BUILTIN_TABS.has(p.slug)),
+    [customPages],
+  );
+
+  // Determine if we're on a built-in tab or a custom page tab
+  const isCustomTab = !BUILTIN_TABS.has(activeTab);
+  const customTabSlug = isCustomTab ? activeTab : null;
+
+  // Check if current built-in tab has a replacement
+  const currentTabSlug =
+    !isCustomTab && activeTab !== 'loyalty'
+      ? (tabReplacements?.[activeTab as ReplacesTab] ?? null)
+      : null;
+
+  // Slug to fetch: either a custom page tab or a tab replacement
+  const pageSlugToFetch = customTabSlug ?? currentTabSlug;
+
+  // Wait for tab replacements before firing built-in queries (also proceed on error — graceful degradation)
+  const replacementsLoaded = tabReplacements !== undefined || replacementsError;
+
+  // Fetch the InfoPage when needed (replacement or custom tab)
+  const { data: infoPage, isLoading: infoPageLoading } = useQuery({
+    queryKey: ['info-pages', 'page', pageSlugToFetch],
+    queryFn: () => {
+      if (!pageSlugToFetch) throw new Error('No slug');
+      return infoPagesApi.getPageBySlug(pageSlugToFetch);
+    },
+    enabled: !!pageSlugToFetch,
+    staleTime: 60_000,
+  });
+
+  // Parse FAQ items from InfoPage content
+  const infoPageFaqItems = useMemo((): FaqItem[] => {
+    if (!infoPage || infoPage.page_type !== 'faq') return [];
+    const raw =
+      infoPage.content[locale] || infoPage.content['ru'] || infoPage.content['en'] || '[]';
+    try {
+      const parsed = typeof raw === 'string' ? JSON.parse(raw) : raw;
+      return Array.isArray(parsed) ? parsed : [];
+    } catch {
+      return [];
+    }
+  }, [infoPage, locale]);
+
+  // Sanitize regular InfoPage HTML content
+  const infoPageHtml = useMemo(() => {
+    if (!infoPage || infoPage.page_type === 'faq') return '';
+    const rawContent =
+      infoPage.content[locale] || infoPage.content['ru'] || infoPage.content['en'] || '';
+    return sanitizeRichHtml(rawContent);
+  }, [infoPage, locale]);
 
   const { data: faqPages, isLoading: faqLoading } = useQuery({
     queryKey: ['faq-pages'],
     queryFn: infoApi.getFaqPages,
-    enabled: activeTab === 'faq',
+    enabled: activeTab === 'faq' && !currentTabSlug && replacementsLoaded,
     staleTime: 0,
     refetchOnMount: 'always',
   });
@@ -170,7 +452,7 @@ export default function Info() {
   const { data: rules, isLoading: rulesLoading } = useQuery({
     queryKey: ['rules'],
     queryFn: infoApi.getRules,
-    enabled: activeTab === 'rules',
+    enabled: activeTab === 'rules' && !currentTabSlug && replacementsLoaded,
     staleTime: 0,
     refetchOnMount: 'always',
   });
@@ -178,7 +460,7 @@ export default function Info() {
   const { data: privacy, isLoading: privacyLoading } = useQuery({
     queryKey: ['privacy-policy'],
     queryFn: infoApi.getPrivacyPolicy,
-    enabled: activeTab === 'privacy',
+    enabled: activeTab === 'privacy' && !currentTabSlug && replacementsLoaded,
     staleTime: 0,
     refetchOnMount: 'always',
   });
@@ -186,7 +468,7 @@ export default function Info() {
   const { data: offer, isLoading: offerLoading } = useQuery({
     queryKey: ['public-offer'],
     queryFn: infoApi.getPublicOffer,
-    enabled: activeTab === 'offer',
+    enabled: activeTab === 'offer' && !currentTabSlug && replacementsLoaded,
     staleTime: 0,
     refetchOnMount: 'always',
   });
@@ -199,19 +481,76 @@ export default function Info() {
     refetchOnMount: 'always',
   });
 
-  const tabs = [
-    { id: 'faq' as TabType, label: t('info.faq'), icon: QuestionIcon },
-    { id: 'rules' as TabType, label: t('info.rules'), icon: DocumentIcon },
-    { id: 'privacy' as TabType, label: t('info.privacy'), icon: ShieldIcon },
-    { id: 'offer' as TabType, label: t('info.offer'), icon: DocumentIcon },
-    { id: 'loyalty' as TabType, label: t('info.loyalty'), icon: StarIcon },
+  const builtinTabs: Array<{ id: string; label: string; icon: React.FC; emoji?: string }> = [
+    { id: 'faq', label: t('info.faq'), icon: QuestionIcon },
+    { id: 'rules', label: t('info.rules'), icon: DocumentIcon },
+    { id: 'privacy', label: t('info.privacy'), icon: ShieldIcon },
+    { id: 'offer', label: t('info.offer'), icon: DocumentIcon },
+    { id: 'loyalty', label: t('info.loyalty'), icon: StarIcon },
   ];
 
-  const toggleFaq = (id: number) => {
-    setExpandedFaq(expandedFaq === id ? null : id);
+  const customTabs = extraPages.map((p) => {
+    const label = p.title[locale] || p.title['ru'] || p.title['en'] || p.slug;
+    return { id: p.slug, label, icon: DocumentIcon, emoji: p.icon ?? undefined };
+  });
+
+  const tabs = [...builtinTabs, ...customTabs];
+
+  const toggleFaq = useCallback((id: number) => {
+    setExpandedFaq((prev) => (prev === id ? null : id));
+  }, []);
+
+  const renderInfoPageContent = () => {
+    if (infoPageLoading) {
+      return (
+        <div className="flex justify-center py-8">
+          <div className="h-8 w-8 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
+        </div>
+      );
+    }
+
+    if (!infoPage) {
+      return <div className="py-8 text-center text-dark-400">{t('info.noContent')}</div>;
+    }
+
+    if (infoPage.page_type === 'faq') {
+      if (infoPageFaqItems.length === 0) {
+        return <div className="py-8 text-center text-dark-400">{t('info.noFaq')}</div>;
+      }
+      return <ReplacementFaqView items={infoPageFaqItems} />;
+    }
+
+    if (!infoPageHtml) {
+      return <div className="py-8 text-center text-dark-400">{t('info.noContent')}</div>;
+    }
+
+    return (
+      <div className="bento-card prose prose-invert max-w-none">
+        <div className="overflow-x-auto" dangerouslySetInnerHTML={{ __html: infoPageHtml }} />
+      </div>
+    );
   };
 
   const renderContent = () => {
+    // Custom page tab — always render InfoPage content
+    if (isCustomTab) {
+      return renderInfoPageContent();
+    }
+
+    // Show spinner while tab replacements are loading (prevents flash of wrong content)
+    if (!replacementsLoaded) {
+      return (
+        <div className="flex justify-center py-8">
+          <div className="h-8 w-8 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
+        </div>
+      );
+    }
+
+    // Built-in tab replaced by an InfoPage
+    if (currentTabSlug) {
+      return renderInfoPageContent();
+    }
+
     if (activeTab === 'faq') {
       if (faqLoading) {
         return (
@@ -231,7 +570,7 @@ export default function Info() {
             <div key={faq.id} className="bento-card overflow-hidden p-0">
               <button
                 onClick={() => toggleFaq(faq.id)}
-                className="flex w-full items-center justify-between px-4 py-3 text-left transition-colors hover:bg-dark-800/50"
+                className="flex min-h-[52px] w-full items-center justify-between px-4 py-3 text-left transition-colors hover:bg-dark-800/50"
               >
                 <span className="font-medium">{faq.title}</span>
                 <ChevronIcon expanded={expandedFaq === faq.id} />
@@ -262,7 +601,10 @@ export default function Info() {
 
       return (
         <div className="bento-card prose prose-invert max-w-none">
-          <div dangerouslySetInnerHTML={{ __html: formatContent(rules.content) }} />
+          <div
+            className="overflow-x-auto"
+            dangerouslySetInnerHTML={{ __html: formatContent(rules.content) }}
+          />
           {rules.updated_at && (
             <p className="mt-6 border-t border-dark-700 pt-4 text-sm text-dark-400">
               {t('info.updatedAt')}: {new Date(rules.updated_at).toLocaleDateString()}
@@ -287,7 +629,10 @@ export default function Info() {
 
       return (
         <div className="bento-card prose prose-invert max-w-none">
-          <div dangerouslySetInnerHTML={{ __html: formatContent(privacy.content) }} />
+          <div
+            className="overflow-x-auto"
+            dangerouslySetInnerHTML={{ __html: formatContent(privacy.content) }}
+          />
           {privacy.updated_at && (
             <p className="mt-6 border-t border-dark-700 pt-4 text-sm text-dark-400">
               {t('info.updatedAt')}: {new Date(privacy.updated_at).toLocaleDateString()}
@@ -312,7 +657,10 @@ export default function Info() {
 
       return (
         <div className="bento-card prose prose-invert max-w-none">
-          <div dangerouslySetInnerHTML={{ __html: formatContent(offer.content) }} />
+          <div
+            className="overflow-x-auto"
+            dangerouslySetInnerHTML={{ __html: formatContent(offer.content) }}
+          />
           {offer.updated_at && (
             <p className="mt-6 border-t border-dark-700 pt-4 text-sm text-dark-400">
               {t('info.updatedAt')}: {new Date(offer.updated_at).toLocaleDateString()}
@@ -384,13 +732,13 @@ export default function Info() {
             <div className="mb-4 grid grid-cols-2 gap-4">
               <div className="rounded-xl bg-dark-800/50 p-3">
                 <div className="mb-1 text-xs text-dark-400">{t('info.totalSpent')}</div>
-                <div className="text-lg font-bold text-dark-50">
+                <div className="truncate text-base font-bold text-dark-50 sm:text-lg">
                   {formatCurrency(loyaltyData.current_spent_rubles)}
                 </div>
               </div>
               <div className="rounded-xl bg-dark-800/50 p-3">
                 <div className="mb-1 text-xs text-dark-400">{t('info.currentStatus')}</div>
-                <div className="text-lg font-bold text-accent-400">
+                <div className="truncate text-base font-bold text-accent-400 sm:text-lg">
                   {loyaltyData.current_tier_name || '-'}
                 </div>
               </div>
@@ -399,14 +747,17 @@ export default function Info() {
             {/* Progress bar to next tier */}
             {loyaltyData.next_tier_name && loyaltyData.next_tier_threshold_rubles ? (
               <div>
-                <div className="mb-2 flex justify-between text-xs text-dark-400">
+                <div className="mb-2 flex flex-col gap-1 text-xs text-dark-400 sm:flex-row sm:justify-between">
                   <span>
                     {t('info.nextStatus')}: {loyaltyData.next_tier_name}
                   </span>
                   <span>
                     {t('info.toNextStatus')}:{' '}
                     {formatCurrency(
-                      loyaltyData.next_tier_threshold_rubles - loyaltyData.current_spent_rubles,
+                      Math.max(
+                        0,
+                        loyaltyData.next_tier_threshold_rubles - loyaltyData.current_spent_rubles,
+                      ),
                     )}
                   </span>
                 </div>
@@ -453,14 +804,14 @@ export default function Info() {
                     >
                       <StarIcon />
                     </div>
-                    <div>
-                      <h4 className="font-semibold text-dark-50">{tier.name}</h4>
+                    <div className="min-w-0">
+                      <h4 className="truncate font-semibold text-dark-50">{tier.name}</h4>
                       <p className="text-xs text-dark-400">
                         {t('info.threshold')}: {formatCurrency(tier.threshold_rubles)}
                       </p>
                     </div>
                   </div>
-                  {getStatusBadge(tier)}
+                  <span className="shrink-0">{getStatusBadge(tier)}</span>
                 </div>
 
                 {/* Discounts */}
@@ -514,19 +865,19 @@ export default function Info() {
       </div>
 
       {/* Tabs */}
-      <div className="flex flex-wrap gap-2">
+      <div className="scrollbar-hide flex gap-2 overflow-x-auto pb-1 sm:flex-wrap sm:overflow-x-visible">
         {tabs.map((tab) => (
           <button
             key={tab.id}
             onClick={() => setActiveTab(tab.id)}
-            className={`flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors ${
+            className={`flex min-h-[44px] shrink-0 items-center gap-2 rounded-lg px-4 py-2.5 text-sm font-medium transition-colors ${
               activeTab === tab.id
                 ? 'bg-accent-500 text-white'
                 : 'bg-dark-800 text-dark-300 hover:bg-dark-700'
             }`}
           >
-            <tab.icon />
-            {tab.label}
+            {tab.emoji ? <span className="text-base">{tab.emoji}</span> : <tab.icon />}
+            <span className="max-w-[140px] truncate">{tab.label}</span>
           </button>
         ))}
       </div>
diff --git a/src/pages/InfoPageView.tsx b/src/pages/InfoPageView.tsx
new file mode 100644
index 0000000..d146b87
--- /dev/null
+++ b/src/pages/InfoPageView.tsx
@@ -0,0 +1,444 @@
+import { useEffect, useMemo, useRef, useState, useCallback } from 'react';
+import { useParams, useNavigate } from 'react-router';
+import { useTranslation } from 'react-i18next';
+import { useQuery } from '@tanstack/react-query';
+import DOMPurify from 'dompurify';
+import { infoPagesApi } from '../api/infoPages';
+import { usePlatform } from '../platform/hooks/usePlatform';
+import type { FaqItem } from '../api/infoPages';
+
+// Icons
+const BackIcon = () => (
+  <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>
+);
+
+/**
+ * Sanitization config — same strict allowlist as NewsArticlePage.
+ * All HTML content is sanitized with DOMPurify before rendering.
+ */
+const ALLOWED_IFRAME_HOSTS = new Set([
+  'www.youtube.com',
+  'youtube.com',
+  'player.vimeo.com',
+  'www.youtube-nocookie.com',
+]);
+
+function isAllowedIframeSrc(src: string): boolean {
+  try {
+    const url = new URL(src);
+    return url.protocol === 'https:' && ALLOWED_IFRAME_HOSTS.has(url.hostname);
+  } catch {
+    return false;
+  }
+}
+
+const SANITIZE_CONFIG = {
+  ALLOWED_TAGS: [
+    'p',
+    'div',
+    'br',
+    'hr',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'blockquote',
+    'pre',
+    'code',
+    'ul',
+    'ol',
+    'li',
+    'table',
+    'thead',
+    'tbody',
+    'tr',
+    'th',
+    'td',
+    'a',
+    'strong',
+    'b',
+    'em',
+    'i',
+    'u',
+    's',
+    'del',
+    'ins',
+    'span',
+    'mark',
+    'sub',
+    'sup',
+    'small',
+    'img',
+    'video',
+    'iframe',
+    'figure',
+    'figcaption',
+  ],
+  ALLOWED_ATTR: [
+    'href',
+    'target',
+    'rel',
+    'src',
+    'alt',
+    'title',
+    'width',
+    'height',
+    'loading',
+    'class',
+    'start',
+    'reversed',
+    'type',
+    'controls',
+    'preload',
+    'frameborder',
+    'allowfullscreen',
+    'allow',
+    'sandbox',
+    'style',
+  ],
+  ALLOW_DATA_ATTR: false,
+  ADD_ATTR: ['target'],
+};
+
+/**
+ * Isolated DOMPurify instance for info page content sanitization.
+ * All user-generated HTML is sanitized before being rendered.
+ */
+const infoPagePurify = DOMPurify(window);
+
+infoPagePurify.addHook('afterSanitizeAttributes', (node) => {
+  if (node.tagName === 'IFRAME') {
+    const src = node.getAttribute('src') ?? '';
+    if (!isAllowedIframeSrc(src)) {
+      node.remove();
+      return;
+    }
+    node.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-presentation');
+    node.setAttribute('allow', 'autoplay; encrypted-media; picture-in-picture');
+  }
+});
+
+infoPagePurify.addHook('afterSanitizeAttributes', (node) => {
+  if (node.tagName === 'VIDEO') {
+    const src = node.getAttribute('src') ?? '';
+    try {
+      const url = new URL(src);
+      if (url.protocol !== 'https:' && url.protocol !== 'http:') {
+        node.remove();
+        return;
+      }
+    } catch {
+      node.remove();
+      return;
+    }
+    node.setAttribute('controls', '');
+    node.setAttribute('preload', 'metadata');
+  }
+});
+
+infoPagePurify.addHook('afterSanitizeAttributes', (node) => {
+  if (node.tagName === 'A') {
+    node.setAttribute('target', '_blank');
+    node.setAttribute('rel', 'noopener noreferrer');
+  }
+});
+
+infoPagePurify.addHook('afterSanitizeAttributes', (node) => {
+  if (node.hasAttribute('style')) {
+    const style = node.getAttribute('style') ?? '';
+    const match = style.match(/text-align\s*:\s*(left|center|right|justify)/i);
+    if (match) {
+      node.setAttribute('style', `text-align: ${match[1]}`);
+    } else {
+      node.removeAttribute('style');
+    }
+  }
+});
+
+function sanitizeHtml(html: string): string {
+  return infoPagePurify.sanitize(html, SANITIZE_CONFIG);
+}
+
+// --- FAQ Accordion ---
+const ChevronIcon = ({ open }: { open: boolean }) => (
+  <svg
+    className={`h-5 w-5 text-dark-400 transition-transform duration-300 ${open ? 'rotate-180' : ''}`}
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth={2}
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+  </svg>
+);
+
+const SearchIcon = () => (
+  <svg
+    className="h-4 w-4 text-dark-500"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth={2}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+    />
+  </svg>
+);
+
+function FaqAccordionItem({
+  item,
+  isOpen,
+  onToggle,
+}: {
+  item: FaqItem;
+  isOpen: boolean;
+  onToggle: () => void;
+}) {
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [height, setHeight] = useState(0);
+
+  useEffect(() => {
+    if (contentRef.current) {
+      setHeight(isOpen ? contentRef.current.scrollHeight : 0);
+    }
+  }, [isOpen]);
+
+  // Update height when content resizes (images loading, viewport rotation)
+  useEffect(() => {
+    if (!isOpen || !contentRef.current) return;
+    const observer = new ResizeObserver(() => {
+      if (contentRef.current) setHeight(contentRef.current.scrollHeight);
+    });
+    observer.observe(contentRef.current);
+    return () => observer.disconnect();
+  }, [isOpen]);
+
+  const sanitizedAnswer = useMemo(() => sanitizeHtml(item.a), [item.a]);
+
+  return (
+    <div className="overflow-hidden rounded-xl border border-dark-700 bg-dark-800/50 transition-all hover:border-dark-600">
+      <button
+        type="button"
+        onClick={onToggle}
+        className="flex min-h-[52px] w-full items-center justify-between gap-3 px-5 py-4 text-left"
+        aria-expanded={isOpen}
+      >
+        <span className="text-sm font-medium text-dark-100 sm:text-base">{item.q}</span>
+        <ChevronIcon open={isOpen} />
+      </button>
+      <div
+        style={{ height }}
+        className="overflow-hidden transition-[height] duration-300 ease-in-out"
+      >
+        <div ref={contentRef} className="border-t border-dark-700/50 px-5 pb-4 pt-3">
+          <div
+            className="prose prose-sm max-w-none text-dark-300"
+            dangerouslySetInnerHTML={{ __html: sanitizedAnswer }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function FaqView({ items }: { items: FaqItem[] }) {
+  const { t } = useTranslation();
+  const [openKey, setOpenKey] = useState<string | null>(null);
+  const [search, setSearch] = useState('');
+
+  const handleToggle = useCallback((key: string) => {
+    setOpenKey((prev) => (prev === key ? null : key));
+  }, []);
+
+  const filteredItems = useMemo(() => {
+    if (!search.trim()) return items;
+    const lower = search.toLowerCase();
+    return items.filter((item) => item.q.toLowerCase().includes(lower));
+  }, [items, search]);
+
+  return (
+    <div className="space-y-4">
+      {/* Search */}
+      {items.length > 3 && (
+        <div className="relative">
+          <div className="pointer-events-none absolute inset-y-0 left-3 flex items-center">
+            <SearchIcon />
+          </div>
+          <input
+            type="text"
+            value={search}
+            onChange={(e) => {
+              setSearch(e.target.value);
+              setOpenKey(null);
+            }}
+            placeholder={t('admin.infoPages.faq.searchPlaceholder')}
+            className="input pl-9 text-sm"
+          />
+        </div>
+      )}
+
+      {/* Accordion items */}
+      {filteredItems.length === 0 ? (
+        <div className="rounded-xl border border-dark-700 bg-dark-800/50 p-6 text-center text-sm text-dark-400">
+          {search ? t('admin.infoPages.faq.noResults') : t('admin.infoPages.faq.noQuestions')}
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {filteredItems.map((item, index) => {
+            const key = `${index}-${item.q.slice(0, 50)}`;
+            return (
+              <FaqAccordionItem
+                key={key}
+                item={item}
+                isOpen={openKey === key}
+                onToggle={() => handleToggle(key)}
+              />
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function InfoPageView() {
+  const { slug } = useParams<{ slug: string }>();
+  const { t, i18n } = useTranslation();
+  const navigate = useNavigate();
+  const { capabilities, backButton } = usePlatform();
+
+  const navigateRef = useRef(navigate);
+  useEffect(() => {
+    navigateRef.current = navigate;
+  }, [navigate]);
+
+  useEffect(() => {
+    if (!capabilities.hasBackButton) return;
+    backButton.show(() => navigateRef.current(-1));
+    return () => backButton.hide();
+  }, [capabilities.hasBackButton, backButton]);
+
+  const {
+    data: page,
+    isLoading,
+    isError,
+  } = useQuery({
+    queryKey: ['info-pages', 'page', slug],
+    queryFn: () => {
+      if (!slug) throw new Error('Missing slug parameter');
+      return infoPagesApi.getPageBySlug(slug);
+    },
+    enabled: !!slug,
+    staleTime: 60_000,
+  });
+
+  const locale = i18n.language.split('-')[0];
+
+  const resolvedTitle = useMemo(() => {
+    if (!page) return '';
+    return page.title[locale] || page.title['ru'] || page.title['en'] || '';
+  }, [page, locale]);
+
+  const isFaq = page?.page_type === 'faq';
+
+  // Parse FAQ items from content
+  const faqItems = useMemo((): FaqItem[] => {
+    if (!page || !isFaq) return [];
+    const raw = page.content[locale] || page.content['ru'] || page.content['en'] || '[]';
+    try {
+      const parsed = typeof raw === 'string' ? JSON.parse(raw) : raw;
+      return Array.isArray(parsed) ? parsed : [];
+    } catch {
+      return [];
+    }
+  }, [page, locale, isFaq]);
+
+  // Content is sanitized with DOMPurify before rendering
+  const sanitizedContent = useMemo(() => {
+    if (!page || isFaq) return '';
+    const rawContent = page.content[locale] || page.content['ru'] || page.content['en'] || '';
+    return sanitizeHtml(rawContent);
+  }, [page, locale, isFaq]);
+
+  if (isLoading) {
+    return (
+      <div className="space-y-6">
+        <div className="skeleton h-8 w-32 rounded-lg" />
+        <div className="skeleton h-10 w-3/4 rounded-lg" />
+        <div className="skeleton h-64 w-full rounded-xl" />
+        <div className="space-y-3">
+          <div className="skeleton h-4 w-full rounded" />
+          <div className="skeleton h-4 w-5/6 rounded" />
+          <div className="skeleton h-4 w-4/6 rounded" />
+        </div>
+      </div>
+    );
+  }
+
+  if (isError || !page) {
+    return (
+      <div className="space-y-6">
+        {!capabilities.hasBackButton && (
+          <button
+            onClick={() => navigate('/info')}
+            className="flex min-h-[44px] min-w-[44px] items-center justify-center rounded-xl border border-dark-700 bg-dark-800 transition-colors hover:border-dark-600"
+            aria-label={t('common.back')}
+          >
+            <BackIcon />
+          </button>
+        )}
+        <div className="rounded-xl border border-dark-700 bg-dark-800/50 p-8 text-center text-dark-400">
+          {t('admin.infoPages.notFound')}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Back button */}
+      {!capabilities.hasBackButton && (
+        <button
+          onClick={() => navigate(-1)}
+          className="flex min-h-[44px] items-center gap-2 rounded-xl border border-dark-700 bg-dark-800 px-4 text-sm text-dark-400 transition-colors hover:border-dark-600 hover:text-dark-200"
+          aria-label={t('common.back')}
+        >
+          <BackIcon />
+          <span>{t('common.back')}</span>
+        </button>
+      )}
+
+      {/* Page header */}
+      <div>
+        {page.icon && <span className="mb-2 inline-block text-3xl">{page.icon}</span>}
+        <h1 className="text-2xl font-extrabold leading-tight text-dark-50 sm:text-3xl">
+          {resolvedTitle}
+        </h1>
+      </div>
+
+      {/* Page content */}
+      {isFaq ? (
+        <FaqView items={faqItems} />
+      ) : (
+        /* Regular page content - sanitized with DOMPurify (strict allowlist) */
+        <div
+          className="prose max-w-none overflow-x-auto lg:max-w-3xl"
+          dangerouslySetInnerHTML={{ __html: sanitizedContent }}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index ba512f9..cab9a2c 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -967,6 +967,9 @@ img.twemoji {
 
   .prose table {
     @apply mb-4 w-full border-collapse;
+    display: block;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
   }
 
   .prose th {
@@ -978,7 +981,7 @@ img.twemoji {
   }
 
   .prose img {
-    @apply my-4 max-w-full rounded-xl;
+    @apply my-4 h-auto max-w-full rounded-xl;
   }
 
   .prose mark {
@@ -989,6 +992,10 @@ img.twemoji {
     @apply my-4 block aspect-video w-full max-w-2xl rounded-xl;
   }
 
+  .prose video {
+    @apply my-4 block h-auto w-full max-w-full rounded-xl;
+  }
+
   /* Light theme prose styles */
   .light .prose {
     @apply text-champagne-800;
@@ -1070,6 +1077,14 @@ img.twemoji {
     @apply border border-champagne-300;
   }
 
+  .light .prose video {
+    @apply border border-champagne-300;
+  }
+
+  .light .prose img {
+    @apply border border-champagne-300;
+  }
+
   /* Support for plain text with line breaks */
   .prose-plain {
     @apply whitespace-pre-line;