From ed6b214b290c325914202bb2c04eb937f95e9ef0 Mon Sep 17 00:00:00 2001
From: 3252a8 <3252a8@proton.me>
Date: Mon, 11 May 2026 21:41:31 +0300
Subject: [PATCH] refactor: slice web app wip

---
 bot/app/web/frontend/src/App.svelte           | 1178 ++------
 .../web/frontend/src/admin/AdminPanel.svelte  | 2377 ++---------------
 .../src/admin/sections/AdsSection.svelte      |  121 +
 .../admin/sections/BroadcastSection.svelte    |   62 +
 .../src/admin/sections/LogsSection.svelte     |  102 +
 .../src/admin/sections/PaymentsSection.svelte |   30 +-
 .../src/admin/sections/PromosSection.svelte   |  140 +
 .../src/admin/sections/SettingsSection.svelte |  208 +-
 .../src/admin/sections/StatsSection.svelte    |   73 +-
 .../admin/sections/TariffEditorModal.svelte   |  498 ++++
 .../src/admin/sections/TariffsSection.svelte  |  118 +-
 .../src/admin/sections/UserDetailModal.svelte |  349 +++
 .../src/admin/sections/UsersSection.svelte    |   82 +-
 .../frontend/src/lib/admin/stores/adsStore.js |  101 +
 .../src/lib/admin/stores/broadcastStore.js    |   60 +
 .../src/lib/admin/stores/logsStore.js         |   59 +
 .../src/lib/admin/stores/paymentsStore.js     |   47 +
 .../src/lib/admin/stores/promosStore.js       |  112 +
 .../src/lib/admin/stores/settingsStore.js     |   92 +
 .../src/lib/admin/stores/statsStore.js        |   53 +
 .../src/lib/admin/stores/tariffsStore.js      |  255 ++
 .../src/lib/admin/stores/usersStore.js        |  295 ++
 .../src/lib/components/ui/button.svelte       |    4 +-
 .../src/lib/components/ui/dialog.svelte       |    2 +-
 .../src/lib/webapp/stores/accountStore.js     |  215 ++
 .../src/lib/webapp/stores/authStore.js        |  274 ++
 .../src/lib/webapp/stores/billingStore.js     |  360 +++
 .../src/lib/webapp/stores/devicesStore.js     |  100 +
 .../web/frontend/src/lib/webapp/tariffs.js    |   11 +-
 bot/app/web/frontend/src/styles.css           |    3 +
 .../frontend/src/styles/admin-controls.css    |  277 ++
 .../web/frontend/src/styles/admin-dialogs.css |    8 +
 bot/app/web/frontend/src/styles/admin.css     |  286 +-
 bot/app/web/frontend/src/styles/base.css      |   95 +
 bot/app/web/frontend/src/styles/controls.css  |  162 +-
 bot/app/web/frontend/src/styles/dialogs.css   |  138 +-
 bot/app/web/frontend/src/styles/webapp.css    |  226 +-
 .../web/frontend/src/webapp/BottomNav.svelte  |   10 +-
 .../frontend/src/webapp/PaymentDialogs.svelte |   76 +-
 .../frontend/src/webapp/TariffDialogs.svelte  |  141 +-
 .../src/webapp/auth/AuthScreen.svelte         |    6 +-
 .../src/webapp/screens/DevicesScreen.svelte   |   21 +-
 .../src/webapp/screens/HomeScreen.svelte      |   45 +-
 .../src/webapp/screens/SettingsScreen.svelte  |   20 +-
 locales/en.json                               |  207 +-
 locales/ru.json                               |  207 +-
 scratch_divs.py                               |  159 --
 scratch_find.py                               |    8 -
 48 files changed, 5367 insertions(+), 4106 deletions(-)
 create mode 100644 bot/app/web/frontend/src/admin/sections/AdsSection.svelte
 create mode 100644 bot/app/web/frontend/src/admin/sections/BroadcastSection.svelte
 create mode 100644 bot/app/web/frontend/src/admin/sections/LogsSection.svelte
 create mode 100644 bot/app/web/frontend/src/admin/sections/PromosSection.svelte
 create mode 100644 bot/app/web/frontend/src/admin/sections/TariffEditorModal.svelte
 create mode 100644 bot/app/web/frontend/src/admin/sections/UserDetailModal.svelte
 create mode 100644 bot/app/web/frontend/src/lib/admin/stores/adsStore.js
 create mode 100644 bot/app/web/frontend/src/lib/admin/stores/broadcastStore.js
 create mode 100644 bot/app/web/frontend/src/lib/admin/stores/logsStore.js
 create mode 100644 bot/app/web/frontend/src/lib/admin/stores/paymentsStore.js
 create mode 100644 bot/app/web/frontend/src/lib/admin/stores/promosStore.js
 create mode 100644 bot/app/web/frontend/src/lib/admin/stores/settingsStore.js
 create mode 100644 bot/app/web/frontend/src/lib/admin/stores/statsStore.js
 create mode 100644 bot/app/web/frontend/src/lib/admin/stores/tariffsStore.js
 create mode 100644 bot/app/web/frontend/src/lib/admin/stores/usersStore.js
 create mode 100644 bot/app/web/frontend/src/lib/webapp/stores/accountStore.js
 create mode 100644 bot/app/web/frontend/src/lib/webapp/stores/authStore.js
 create mode 100644 bot/app/web/frontend/src/lib/webapp/stores/billingStore.js
 create mode 100644 bot/app/web/frontend/src/lib/webapp/stores/devicesStore.js
 create mode 100644 bot/app/web/frontend/src/styles/admin-controls.css
 create mode 100644 bot/app/web/frontend/src/styles/admin-dialogs.css
 create mode 100644 bot/app/web/frontend/src/styles/base.css
 delete mode 100644 scratch_divs.py
 delete mode 100644 scratch_find.py

diff --git a/bot/app/web/frontend/src/App.svelte b/bot/app/web/frontend/src/App.svelte
index 8dc4e3e..1d38e27 100644
--- a/bot/app/web/frontend/src/App.svelte
+++ b/bot/app/web/frontend/src/App.svelte
@@ -1,6 +1,10 @@
 <script>
   import { Bitcoin, CreditCard } from "lucide-svelte";
-  import { onMount } from "svelte";
+  import { onMount, setContext } from "svelte";
+  import { createAuthStore } from "./lib/webapp/stores/authStore.js";
+  import { createBillingStore } from "./lib/webapp/stores/billingStore.js";
+  import { createDevicesStore } from "./lib/webapp/stores/devicesStore.js";
+  import { createAccountStore } from "./lib/webapp/stores/accountStore.js";
   import { Tooltip } from "bits-ui";
 
   import BrandMark from "./BrandMark.svelte";
@@ -25,40 +29,27 @@
     TELEGRAM_WEBAPP_SCRIPT_URL,
     WEBAPP_LANGUAGE_ORDER,
   } from "./lib/webapp/constants.js";
+  
+
+
   import { applyFavicon, readJsonScript, structuredCloneSafe } from "./lib/webapp/browser.js";
   import { createApiClient } from "./lib/webapp/publicApi.js";
   import { createI18n } from "./lib/webapp/i18n.js";
   import {
-    formatMoney as fmtMoney,
-    formatTrafficGb as fmtTrafficGb,
-    formatTrafficBytes as fmtTrafficBytes,
-    formatCompactNumber as fmtCompactNumber,
-    normalizedEmail as fmtNormalizedEmail,
-    telegramName as fmtTelegramName,
+    formatCompactNumber,
+    formatTrafficGb,
+    normalizedEmail,
+    telegramName,
   } from "./lib/webapp/formatters.js";
   import {
-    buildTariffCatalog as buildTariffCatalogFn,
-    activeTariffName as activeTariffNameFn,
-    planKey as planKeyFn,
-    planDisplayTitle as planDisplayTitleFn,
-    planSubtitle as planSubtitleFn,
-    planUnitHint as planUnitHintFn,
-    tariffLimitLabel as tariffLimitLabelFn,
-    actionKey as actionKeyFn,
-    priceLabel as priceLabelFn,
+    activeTariffName,
+    buildTariffCatalog,
+    priceLabel,
   } from "./lib/webapp/tariffs.js";
   import {
-    trafficPercent as trafficPercentFn,
-    trafficLabel as trafficLabelFn,
-    trafficResetLabel as trafficResetLabelFn,
-    premiumTrafficPercent as premiumTrafficPercentFn,
-    premiumTrafficLabel as premiumTrafficLabelFn,
-    premiumTitle as premiumTitleFn,
-    premiumTrafficLeftLabel as premiumTrafficLeftLabelFn,
-    premiumTopupBalanceLabel as premiumTopupBalanceLabelFn,
-    premiumServerLabels as premiumServerLabelsFn,
-    isForeverSubscription as isForeverSubscriptionFn,
-    activeSubscriptionTermLabel as activeSubscriptionTermLabelFn,
+    premiumTitle,
+    premiumTrafficPercent,
+    trafficPercent,
   } from "./lib/webapp/traffic.js";
   import { buildGravatarUrl } from "./lib/webapp/gravatar.js";
   import { createBillingActions } from "./lib/webapp/billingActions.js";
@@ -116,74 +107,23 @@
   let data = isPreviewBoard ? structuredCloneSafe(DEV_MOCK.data) : null;
   let selectedPlan = null;
   let selectedMethod = "";
-  let paymentModalOpen = query.get("payment") === "1";
-  let paymentStep = "tariff";
-  let selectedTariffKey = "";
-  let topupModalOpen = query.get("topup") === "1";
-  let topupKind = "regular";
-  let deviceTopupModalOpen = query.get("device_topup") === "1";
-  let changeModalOpen = query.get("change") === "1";
-  let topupOptions = null;
-  let topupOptionsRequestId = 0;
-  let deviceTopupOptions = null;
-  let changeOptions = null;
-  let selectedTopupPlan = null;
-  let selectedDeviceTopupPlan = null;
-  let selectedChangeTarget = null;
-  let selectedChangeAction = null;
-  let changeConfirmOpen = false;
-  let tariffActionBusy = false;
-  let payBusy = false;
   let trialBusy = false;
-  let linkEmailOpen = false;
-  let linkEmailBusy = false;
-  let linkTelegramBusy = false;
-  let linkEmailValue = "";
-  let linkEmailPending = "";
-  let linkEmailCode = "";
-  let linkEmailStatus = "";
-  let linkEmailIsError = false;
-  let linkEmailFieldError = "";
   let promoCode = "";
   let promoBusy = false;
   let promoStatus = "";
   let promoIsError = false;
   let promoFieldError = "";
-  let devicesData = DEV_MOCK.data.devices;
-  let devicesLoaded = false;
-  let devicesBusy = false;
-  let devicesStatus = "";
-  let devicesIsError = false;
-  let deviceConfirmOpen = false;
-  let deviceToDisconnect = null;
-  let deviceDisconnectBusy = false;
   let toastText = "";
   let toastTimer = null;
-  let authStatus = "";
-  let authIsError = false;
-  let authBusy = false;
-  let telegramLoginBusy = false;
-  let telegramLoginWatchdogTimer = null;
-  let telegramLoginAttemptId = 0;
-  let loginEmailFieldError = "";
-  let loginEmailTooltipOpen = false;
-  let authResendCooldown = 0;
-  let authResendTimer = null;
-  let languageBusy = false;
   let languageMenuOpen = false;
   let languageClickGuard = false;
   let languageClickGuardArmed = false;
   let languageClickGuardTimer = null;
   let languageClickGuardArmTimer = null;
-  let email = "";
-  let pendingEmail = "";
-  let emailCode = "";
   let emailAvatarUrl = "";
   let avatarHashToken = "";
   let token = MOCK ? "local-preview" : readStoredToken();
   let csrfToken = MOCK ? "" : readCookie(CSRF_COOKIE_NAME) || "";
-  let linkEmailResendCooldown = 0;
-  let linkEmailResendTimer = null;
   let scrollLockApplied = false;
   let tg = null;
   const telegramSdk = createTelegramSdk({
@@ -197,6 +137,15 @@
   tg = telegramSdk.refresh();
   telegramSdkStatus = tg ? "ready" : "idle";
   telegramMiniAppInitData = telegramSdk.initData;
+  const i18n = createI18n({
+    messages: I18N,
+    defaultLang: "ru",
+    getLang: () => user?.language_code || CFG.language || "ru",
+  });
+  const normalizeLangCode = i18n.normalizeLangCode;
+  const t = i18n.t;
+  const termUnitLabel = i18n.termUnitLabel;
+  const languageName = i18n.languageName;
   const apiClient = createApiClient({
     apiBase: CFG.apiBase,
     csrfCookieName: CSRF_COOKIE_NAME,
@@ -213,6 +162,41 @@
   });
   const billing = createBillingActions({ api: (path, options) => apiClient.api(path, options), t: (...args) => t(...args) });
 
+  const authStore = createAuthStore({ publicApi, setToken, loadData, telegramSdk, getTg: () => tg, t, currentLang: () => currentLang, clearManualLogoutFlag });
+  const billingStore = createBillingStore({ billing, loadData, t, showToast, openExternalLink, tg });
+  const devicesStore = createDevicesStore({ api, t, showToast });
+  const accountStore = createAccountStore({
+    api,
+    publicApi,
+    setToken,
+    loadData,
+    t,
+    showToast,
+    clearToken,
+    markManualLogout,
+    showLogin,
+    telegramSdk,
+    getTg: () => tg,
+    telegramOAuthClientId,
+    currentLang: () => currentLang,
+    normalizeLangCode,
+    updateLocalData: (updatedLanguage) => {
+      if (!data?.user) return;
+      data = { ...data, user: { ...data.user, language_code: updatedLanguage } };
+    },
+  });
+
+  setContext("authStore", authStore);
+  setContext("billingStore", billingStore);
+  setContext("devicesStore", devicesStore);
+  setContext("accountStore", accountStore);
+
+  $: ({ authStatus, authIsError, authBusy, telegramLoginBusy, loginEmailFieldError, loginEmailTooltipOpen, authResendCooldown, email, pendingEmail, emailCode } = $authStore);
+  $: ({ paymentModalOpen, paymentStep, selectedTariffKey, selectedPlan, selectedMethod, topupModalOpen, topupKind, deviceTopupModalOpen, changeModalOpen, topupOptions, deviceTopupOptions, changeOptions, selectedTopupPlan, selectedDeviceTopupPlan, selectedChangeTarget, selectedChangeAction, changeConfirmOpen, tariffActionBusy, payBusy } = $billingStore);
+  $: ({ devicesData, devicesLoaded, devicesBusy, devicesStatus, devicesIsError, deviceConfirmOpen, deviceToDisconnect, deviceDisconnectBusy } = $devicesStore);
+  $: ({ linkEmailOpen, linkEmailBusy, linkTelegramBusy, linkEmailValue, linkEmailPending, linkEmailCode, linkEmailStatus, linkEmailIsError, linkEmailFieldError, linkEmailResendCooldown, languageBusy } = $accountStore);
+
+
 
   $: brandTitle = CFG.title || "/minishop";
   $: brandEmoji = CFG.logoEmoji || "🫥";
@@ -295,21 +279,32 @@
           : "";
   $: applyFavicon(CFG.logoUrl, brandEmoji);
   $: syncBodyScrollLock(paymentModalOpen || changeModalOpen || changeConfirmOpen || topupModalOpen || deviceTopupModalOpen || linkEmailOpen);
-  $: if (!tariffMode && !selectedPlan && plans.length) selectedPlan = plans[Math.min(1, plans.length - 1)];
+  $: if (!tariffMode && !$billingStore.selectedPlan && plans.length) {
+    billingStore.update((s) => ({ ...s, selectedPlan: plans[Math.min(1, plans.length - 1)] }));
+  }
   $: if (singleTariffMode && tariffCatalog[0]?.key && selectedTariffKey !== tariffCatalog[0].key) {
-    selectedTariffKey = tariffCatalog[0].key;
-    selectedPlan = plans.find((plan) => plan?.tariff_key === selectedTariffKey) || null;
-    if (paymentStep === "tariff") paymentStep = "checkout";
+    const tariffKey = tariffCatalog[0].key;
+    billingStore.update((s) => ({
+      ...s,
+      selectedTariffKey: tariffKey,
+      selectedPlan: plans.find((plan) => plan?.tariff_key === tariffKey) || null,
+      paymentStep: s.paymentStep === "tariff" ? "checkout" : s.paymentStep,
+    }));
   }
   $: if (tariffMode && selectedTariffKey && !tariffCatalog.some((tariff) => tariff.key === selectedTariffKey)) {
-    selectedTariffKey = "";
-    selectedPlan = null;
-    paymentStep = singleTariffMode ? "checkout" : "tariff";
+    billingStore.update((s) => ({
+      ...s,
+      selectedTariffKey: "",
+      selectedPlan: null,
+      paymentStep: singleTariffMode ? "checkout" : "tariff",
+    }));
   }
   $: if (tariffMode && selectedTariffKey && (!selectedPlan || selectedPlan.tariff_key !== selectedTariffKey)) {
-    selectedPlan = selectedTariffPlans[0] || null;
+    billingStore.update((s) => ({ ...s, selectedPlan: selectedTariffPlans[0] || null }));
+  }
+  $: if (!$billingStore.selectedMethod && methods.length) {
+    billingStore.update((s) => ({ ...s, selectedMethod: methods[0].id }));
   }
-  $: if (!selectedMethod && methods.length) selectedMethod = methods[0].id;
   $: {
     const emailKey = normalizedEmail(user?.email);
     if (!emailKey) {
@@ -338,7 +333,7 @@
         const nextSection = section === "devices" && !devicesEnabled ? "home" : section;
         activeTab = nextSection;
         screen = nextSection;
-        if (nextSection === "devices") loadDevices();
+        if (nextSection === "devices") devicesStore.loadDevices(devicesEnabled);
       }
     };
     window.addEventListener("popstate", onPopState);
@@ -378,6 +373,7 @@
       window.clearTimeout(languageClickGuardArmTimer);
       languageClickGuardArmTimer = null;
     }
+    languageClickGuard = false;
     languageClickGuardArmed = false;
   }
 
@@ -398,18 +394,6 @@
     }, 260);
   }
 
-
-  const i18n = createI18n({
-    messages: I18N,
-    defaultLang: "ru",
-    getLang: () => user?.language_code || CFG.language || "ru",
-  });
-  const normalizeLangCode = i18n.normalizeLangCode;
-  const t = i18n.t;
-  const termUnitLabel = i18n.termUnitLabel;
-  const languageName = i18n.languageName;
-
-
   function resolveTelegramWebApp() {
     return telegramSdk.tg;
   }
@@ -518,10 +502,13 @@
     const payload = await api("/me");
     if (!payload.ok) throw new Error(payload.error || "load_failed");
     data = payload;
-    selectedPlan = null;
-    selectedTariffKey = "";
-    paymentStep = "tariff";
-    selectedMethod = payload.payment_methods?.[0]?.id || "";
+    billingStore.update((s) => ({
+      ...s,
+      selectedPlan: null,
+      selectedTariffKey: "",
+      paymentStep: "tariff",
+      selectedMethod: payload.payment_methods?.[0]?.id || "",
+    }));
     let section = MOCK && query.get("screen") ? normalizeSection(query.get("screen")) : sectionFromPath(window.location.pathname);
     if (section === "admin" && !payload.user?.is_admin) section = "settings";
     if (section === "devices" && !payload.settings?.my_devices_enabled) section = "home";
@@ -534,11 +521,11 @@
       section === "admin" ? adminSectionFromPath(window.location.pathname) : null,
     );
     if (section === "devices" && payload.settings?.my_devices_enabled) {
-      await loadDevices();
+      await devicesStore.loadDevices(true);
     }
-    if (topupModalOpen) await loadTopupOptions();
-    if (deviceTopupModalOpen) await loadDeviceTopupOptions();
-    if (changeModalOpen) await loadTariffChangeOptions();
+    if (topupModalOpen) await billingStore.loadTopupOptions(topupKind);
+    if (deviceTopupModalOpen) await billingStore.loadDeviceTopupOptions();
+    if (changeModalOpen) await billingStore.loadTariffChangeOptions();
   }
 
   function showLogin() {
@@ -592,582 +579,65 @@
     return emailErrorHelper(error, fallback, t);
   }
 
-  async function finalizeMagicLogin(loginToken) {
-    if (authBusy) return false;
-    authBusy = true;
-    setAuthStatus(t("wa_auth_checking_login"));
-    try {
-      const payload = { token: loginToken };
-      const referralParam = readReferralParam();
-      if (referralParam) payload.referral_code = referralParam;
-      const response = await publicApi("/auth/email/magic", payload);
-      if (response.ok && response.token) {
-        setToken(response.token, response.csrf_token);
-        clearAuthQuery();
-        await loadData();
-        return true;
-      }
-      setAuthStatus(t("wa_auth_login_confirm_failed"), true);
-    } catch {
-      setAuthStatus(t("wa_auth_login_confirm_failed"), true);
-    } finally {
-      authBusy = false;
-    }
-    return false;
-  }
+  
 
-  async function finalizeTelegramAuth(authData, source = "auth_data", options = {}) {
-    if (authBusy) return false;
-    authBusy = true;
-    setAuthStatus(t("wa_auth_checking_telegram"));
-    try {
-      const payload =
-        source === "init_data"
-          ? { init_data: authData }
-          : source === "id_token"
-            ? { id_token: authData.id_token, nonce: authData.nonce }
-            : { auth_data: authData };
-      const referralParam = readReferralParam();
-      if (referralParam) payload.referral_code = referralParam;
-      const response = await publicApi("/auth/token", payload, { signal: options.signal });
-      if (response.ok && response.token) {
-        setToken(response.token, response.csrf_token);
-        clearAuthQuery();
-        setAuthStatus("");
-        await loadData();
-        return true;
-      }
-      setAuthStatus(response.error === "banned" ? t("wa_auth_access_denied") : t("wa_auth_telegram_not_confirmed"), true);
-    } catch (error) {
-      setAuthStatus(
-        error?.name === "AbortError" ? t("wa_auth_telegram_timeout") : t("wa_auth_telegram_unavailable"),
-        true,
-      );
-    } finally {
-      authBusy = false;
-    }
-    return false;
-  }
+  
 
-  async function requestEmailCode() {
-    if (screen === "code" && authResendCooldown > 0) return;
-    const normalized = email.trim().toLowerCase();
-    if (!normalized || !normalized.includes("@")) {
-      loginEmailFieldError = t("wa_auth_invalid_email");
-      loginEmailTooltipOpen = true;
-      return;
-    }
-    loginEmailFieldError = "";
-    loginEmailTooltipOpen = false;
-    authBusy = true;
-    setAuthStatus(t("wa_auth_sending_code"));
-    try {
-      const payload = { email: normalized, language: currentLang };
-      const referralParam = readReferralParam();
-      if (referralParam) payload.referral_code = referralParam;
-      const response = await publicApi("/auth/email/request", payload);
-      if (!response.ok) throw response;
-      pendingEmail = normalized;
-      emailCode = "";
-      screen = "code";
-      mode = "login";
-      setAuthStatus("");
-      startCooldownTimer("auth", 60);
-    } catch (error) {
-      setAuthStatus(emailError(error, t("wa_auth_send_code_failed")), true);
-    } finally {
-      authBusy = false;
-    }
-  }
+  
 
-  async function verifyEmailCode() {
-    const code = emailCode.replace(/\D/g, "").slice(0, 6);
-    if (code.length !== 6) {
-      setAuthStatus(t("wa_auth_enter_code_6digits"), true);
-      return;
-    }
-    authBusy = true;
-    setAuthStatus(t("wa_auth_checking_code"));
-    try {
-      const payload = { email: pendingEmail, code };
-      const referralParam = readReferralParam();
-      if (referralParam) payload.referral_code = referralParam;
-      const response = await publicApi("/auth/email/verify", payload);
-      if (!response.ok || !response.token) throw response;
-      setToken(response.token, response.csrf_token);
-      await loadData();
-      setAuthStatus("");
-    } catch (error) {
-      setAuthStatus(emailError(error, t("wa_auth_invalid_code")), true);
-    } finally {
-      authBusy = false;
-    }
-  }
+  
 
-  function setAuthStatus(message, isError = false) {
-    authStatus = message;
-    authIsError = isError;
-  }
+  
 
-  function clearCooldownTimer(kind) {
-    if (kind === "auth") {
-      if (authResendTimer) {
-        window.clearInterval(authResendTimer);
-        authResendTimer = null;
-      }
-      return;
-    }
-    if (linkEmailResendTimer) {
-      window.clearInterval(linkEmailResendTimer);
-      linkEmailResendTimer = null;
-    }
-  }
+  
 
   function submitEmailOnEnter(event) {
     if (event.key !== "Enter") return;
     event.preventDefault();
-    requestEmailCode();
+    authStore.requestEmailCode((s) => (screen = s));
   }
 
-  function startCooldownTimer(kind, seconds = 60) {
-    if (kind === "auth") {
-      clearCooldownTimer("auth");
-      authResendCooldown = Math.max(0, Number(seconds || 60));
-      authResendTimer = window.setInterval(() => {
-        if (authResendCooldown <= 1) {
-          authResendCooldown = 0;
-          clearCooldownTimer("auth");
-          return;
-        }
-        authResendCooldown -= 1;
-      }, 1000);
-      return;
-    }
-    clearCooldownTimer("link_email");
-    linkEmailResendCooldown = Math.max(0, Number(seconds || 60));
-    linkEmailResendTimer = window.setInterval(() => {
-      if (linkEmailResendCooldown <= 1) {
-        linkEmailResendCooldown = 0;
-        clearCooldownTimer("link_email");
-        return;
-      }
-      linkEmailResendCooldown -= 1;
-    }, 1000);
-  }
+  
 
-  function startTelegramLoginWatchdog() {
-    stopTelegramLoginWatchdog();
-    telegramLoginAttemptId += 1;
-    const attemptId = telegramLoginAttemptId;
-    telegramLoginWatchdogTimer = window.setTimeout(() => {
-      if (attemptId !== telegramLoginAttemptId) return;
-      telegramLoginWatchdogTimer = null;
-      telegramSdkStatus = "unavailable";
-      telegramLoginBusy = false;
-      authBusy = false;
-      setAuthStatus(t("wa_auth_telegram_timeout"), true);
-    }, TELEGRAM_MINI_APP_AUTH_TIMEOUT_MS);
-    return attemptId;
-  }
+  
 
-  function stopTelegramLoginWatchdog(attemptId = null) {
-    if (attemptId !== null && attemptId !== telegramLoginAttemptId) return;
-    if (telegramLoginWatchdogTimer) {
-      window.clearTimeout(telegramLoginWatchdogTimer);
-      telegramLoginWatchdogTimer = null;
-    }
-  }
+  
 
-  function isActiveTelegramLoginAttempt(attemptId) {
-    return attemptId === telegramLoginAttemptId && telegramLoginBusy;
-  }
+  
 
-  async function openTelegramLogin() {
-    if (authBusy || telegramLoginBusy || telegramLoginUnavailable) return;
-    setAuthStatus("");
+  
 
-    const isTelegramMiniAppAttempt = hasTelegramLaunchParams();
-    if (!isTelegramMiniAppAttempt && telegramOAuthClientId) {
-      telegramLoginBusy = true;
-      window.location.assign(buildTelegramOAuthStartUrl("login"));
-      window.setTimeout(() => {
-        telegramLoginBusy = false;
-      }, 1500);
-      return;
-    }
+  
 
-    telegramLoginBusy = true;
-    const attemptId = startTelegramLoginWatchdog();
-    const loginTimeout = createTelegramMiniAppAuthTimeout();
-    try {
-      await Promise.race([
-        (async () => {
-          await ensureTelegramSdkForAction();
-          if (!isActiveTelegramLoginAttempt(attemptId)) return;
-          const initData = telegramMiniAppInitData || tg?.initData || readTelegramMiniAppInitDataFromLocation();
-          if (initData) {
-            await finalizeTelegramAuth(initData, "init_data", { signal: loginTimeout.signal });
-            return;
-          }
+  
 
-          if (!telegramOAuthClientId) {
-            setAuthStatus(
-              telegramSdkStatus === "unavailable"
-                ? t("wa_auth_telegram_unavailable")
-                : t("wa_auth_telegram_not_configured"),
-              true,
-            );
-            return;
-          }
+  
 
-          window.location.assign(buildTelegramOAuthStartUrl("login"));
-        })(),
-        loginTimeout.promise,
-      ]);
-    } catch (error) {
-      if (!isActiveTelegramLoginAttempt(attemptId)) return;
-      if (error?.name === "AbortError") {
-        telegramSdkStatus = "unavailable";
-        setAuthStatus(t("wa_auth_telegram_timeout"), true);
-      } else {
-        setAuthStatus(t("wa_auth_telegram_unavailable"), true);
-      }
-    } finally {
-      loginTimeout.clear();
-      if (loginTimeout.timedOut) {
-        telegramSdkStatus = "unavailable";
-        setAuthStatus(t("wa_auth_telegram_timeout"), true);
-        authBusy = false;
-      }
-      if (isActiveTelegramLoginAttempt(attemptId)) {
-        stopTelegramLoginWatchdog(attemptId);
-        telegramLoginBusy = false;
-      }
-    }
-  }
+  
 
-  function setLinkEmailStatus(message, isError = false) {
-    linkEmailStatus = message;
-    linkEmailIsError = isError;
-  }
+  
 
-  function openLinkEmailDialog() {
-    linkEmailOpen = true;
-    linkEmailBusy = false;
-    linkEmailCode = "";
-    linkEmailPending = "";
-    linkEmailStatus = "";
-    linkEmailIsError = false;
-    linkEmailFieldError = "";
-    linkEmailValue = user?.email || "";
-    linkEmailResendCooldown = 0;
-    clearCooldownTimer("link_email");
-  }
+  
 
-  function closeLinkEmailDialog() {
-    linkEmailOpen = false;
-    linkEmailBusy = false;
-    linkEmailCode = "";
-    linkEmailPending = "";
-    linkEmailStatus = "";
-    linkEmailIsError = false;
-    linkEmailFieldError = "";
-    linkEmailResendCooldown = 0;
-    clearCooldownTimer("link_email");
-  }
+  
 
-  async function requestLinkEmailCode() {
-    if (linkEmailPending && linkEmailResendCooldown > 0) return;
-    const normalized = String(linkEmailValue || "").trim().toLowerCase();
-    if (!normalized || !normalized.includes("@")) {
-      linkEmailFieldError = t("wa_auth_invalid_email");
-      return;
-    }
-    linkEmailFieldError = "";
-    linkEmailBusy = true;
-    setLinkEmailStatus(t("wa_auth_sending_code"));
-    try {
-      const response = await api("/account/email/request", {
-        method: "POST",
-        body: JSON.stringify({ email: normalized }),
-      });
-      if (!response?.ok) throw response;
-      linkEmailPending = normalized;
-      linkEmailCode = "";
-      setLinkEmailStatus("");
-      startCooldownTimer("link_email", 60);
-    } catch (error) {
-      setLinkEmailStatus(emailError(error, t("wa_auth_send_code_failed")), true);
-    } finally {
-      linkEmailBusy = false;
-    }
-  }
+  
 
-  async function verifyLinkEmailCode() {
-    const code = String(linkEmailCode || "").replace(/\D/g, "").slice(0, 6);
-    if (!linkEmailPending) {
-      setLinkEmailStatus(t("wa_auth_send_code_failed"), true);
-      return;
-    }
-    if (code.length !== 6) {
-      setLinkEmailStatus(t("wa_auth_enter_code_6digits"), true);
-      return;
-    }
-    linkEmailBusy = true;
-    setLinkEmailStatus(t("wa_auth_checking_code"));
-    try {
-      const response = await api("/account/email/verify", {
-        method: "POST",
-        body: JSON.stringify({ email: linkEmailPending, code }),
-      });
-      if (!response?.ok) throw response;
-      if (response?.token) setToken(response.token, response.csrf_token);
-      await loadData();
-      closeLinkEmailDialog();
-      showToast(t("wa_settings_linked"));
-    } catch (error) {
-      setLinkEmailStatus(emailError(error, t("wa_auth_invalid_code")), true);
-    } finally {
-      linkEmailBusy = false;
-    }
-  }
+  
 
-  async function linkTelegramAccountWithPayload(payload) {
-    linkTelegramBusy = true;
-    try {
-      const response = await api("/account/telegram/link", {
-        method: "POST",
-        body: JSON.stringify(payload),
-      });
-      if (!response?.ok) throw response;
-      if (response?.token) setToken(response.token, response.csrf_token);
-      await loadData();
-      showToast(t("wa_settings_linked"));
-    } catch (error) {
-      showToast(error?.message || t("wa_auth_telegram_not_confirmed"));
-    } finally {
-      linkTelegramBusy = false;
-    }
-  }
+  
 
-  async function linkTelegramAccount() {
-    if (linkTelegramBusy) return;
-    if (shouldWaitForTelegramSdkBeforeOAuth()) await ensureTelegramSdkForAction();
-    const initData = telegramMiniAppInitData || tg?.initData || readTelegramMiniAppInitDataFromLocation();
-    if (initData) {
-      await linkTelegramAccountWithPayload({ init_data: initData });
-      return;
-    }
-    if (!telegramOAuthClientId) {
-      showToast(
-        telegramSdkStatus === "unavailable" ? t("wa_auth_telegram_unavailable") : t("wa_auth_telegram_not_configured"),
-      );
-      return;
-    }
-    linkTelegramBusy = true;
-    window.location.assign(buildTelegramOAuthStartUrl("link"));
-  }
+  
 
-  async function updateAccountLanguage(nextValue) {
-    const language = normalizeLangCode(nextValue);
-    if (!language || languageBusy || language === currentLang) return;
-    languageBusy = true;
-    try {
-      const response = await api("/account/language", {
-        method: "POST",
-        body: JSON.stringify({ language }),
-      });
-      if (!response?.ok) throw response;
-      if (data?.user) {
-        const updatedLanguage = normalizeLangCode(response.language || language);
-        data = {
-          ...data,
-          user: {
-            ...data.user,
-            language_code: updatedLanguage,
-          },
-        };
-      }
-      const previousScreen = screen;
-      const previousTab = activeTab;
-      const payload = await api("/me");
-      if (payload?.ok) {
-        data = payload;
-        selectedPlan = null;
-        selectedTariffKey = "";
-        paymentStep = "tariff";
-        selectedMethod = payload.payment_methods?.[0]?.id || "";
-        mode = "app";
-        screen = previousScreen;
-        activeTab = previousTab;
-      }
-    } catch {
-      showToast(t("wa_settings_language_update_failed"));
-    } finally {
-      languageBusy = false;
-    }
-  }
+  
 
-  async function createPayment() {
-    if (!selectedPlan || !selectedMethod || payBusy) return;
-    payBusy = true;
-    try {
-      const response = await billing.postPayment(billing.planPaymentBody(selectedPlan, selectedMethod));
-      if (!response.ok) throw response;
-      showToast(t("wa_payment_created"));
-      if (response.action === "open_invoice") {
-        if (!response.payment_url) throw response;
-        openTelegramInvoice(response.payment_url);
-      } else if (response.action === "invoice_sent") {
-        paymentModalOpen = false;
-        return;
-      } else {
-        if (!response.payment_url) throw response;
-        openExternalLink(response.payment_url);
-      }
-      paymentModalOpen = false;
-    } catch (error) {
-      showToast(error?.message || t("wa_payment_create_failed"));
-    } finally {
-      payBusy = false;
-    }
-  }
+  
 
-  async function loadTopupOptions(kind = topupKind) {
-    if (topupOptions?.topup_kind === kind) return;
-    const requestId = ++topupOptionsRequestId;
-    tariffActionBusy = true;
-    try {
-      topupOptions = null;
-      selectedTopupPlan = null;
-      const response = await billing.fetchTopupOptions(kind);
-      if (requestId !== topupOptionsRequestId || kind !== topupKind) return;
-      if (!response?.ok) throw response;
-      topupOptions = response;
-      selectedTopupPlan = response.plans?.[0] || null;
-    } catch (error) {
-      if (requestId !== topupOptionsRequestId || kind !== topupKind) return;
-      showToast(error?.message || t("wa_tariff_options_failed"));
-      topupModalOpen = false;
-    } finally {
-      if (requestId === topupOptionsRequestId) tariffActionBusy = false;
-    }
-  }
+  
 
-  async function loadTariffChangeOptions() {
-    if (changeOptions || tariffActionBusy) return;
-    tariffActionBusy = true;
-    try {
-      const response = await billing.fetchTariffChangeOptions();
-      if (!response?.ok) throw response;
-      changeOptions = response;
-      selectedChangeTarget = response.targets?.[0] || null;
-      selectedChangeAction = selectedChangeTarget?.actions?.[0] || null;
-    } catch (error) {
-      showToast(error?.message || t("wa_tariff_options_failed"));
-      changeModalOpen = false;
-    } finally {
-      tariffActionBusy = false;
-    }
-  }
+  
 
-  async function createTopupPayment() {
-    if (!selectedTopupPlan || !selectedMethod || payBusy) return;
-    payBusy = true;
-    try {
-      const response = await billing.postPayment(
-        billing.topupPaymentBody(selectedTopupPlan, selectedMethod, topupOptions?.tariff_key),
-      );
-      if (!response.ok || !response.payment_url) throw response;
-      showToast(t("wa_payment_created"));
-      openExternalLink(response.payment_url);
-      topupModalOpen = false;
-    } catch (error) {
-      showToast(error?.message || t("wa_payment_create_failed"));
-    } finally {
-      payBusy = false;
-    }
-  }
-
-  async function loadDeviceTopupOptions() {
-    if (deviceTopupOptions || tariffActionBusy) return;
-    tariffActionBusy = true;
-    try {
-      const response = await billing.fetchDeviceTopupOptions();
-      if (!response?.ok) throw response;
-      deviceTopupOptions = response;
-      selectedDeviceTopupPlan = response.plans?.[0] || null;
-    } catch (error) {
-      showToast(error?.message || t("wa_device_topup_options_failed"));
-      deviceTopupModalOpen = false;
-    } finally {
-      tariffActionBusy = false;
-    }
-  }
-
-  async function createDeviceTopupPayment() {
-    if (!selectedDeviceTopupPlan || !selectedMethod || payBusy) return;
-    payBusy = true;
-    try {
-      const response = await billing.postPayment(
-        billing.deviceTopupPaymentBody(selectedDeviceTopupPlan, selectedMethod, deviceTopupOptions?.tariff_key),
-      );
-      if (!response.ok || !response.payment_url) throw response;
-      showToast(t("wa_payment_created"));
-      openExternalLink(response.payment_url);
-      deviceTopupModalOpen = false;
-    } catch (error) {
-      showToast(error?.message || t("wa_payment_create_failed"));
-    } finally {
-      payBusy = false;
-    }
-  }
-
-  async function applyTariffChange() {
-    if (!selectedChangeTarget || !selectedChangeAction || tariffActionBusy) return;
-    if (selectedChangeAction.kind === "payment") {
-      await createTariffChangePayment();
-      return;
-    }
-    tariffActionBusy = true;
-    try {
-      const response = await billing.postTariffChange({
-        tariff_key: selectedChangeTarget.tariff_key,
-        mode: selectedChangeAction.mode,
-      });
-      if (!response?.ok) throw response;
-      showToast(t("wa_tariff_change_applied"));
-      changeConfirmOpen = false;
-      changeModalOpen = false;
-      changeOptions = null;
-      await loadData();
-    } catch (error) {
-      showToast(error?.message || t("wa_tariff_change_failed"));
-    } finally {
-      tariffActionBusy = false;
-    }
-  }
-
-  async function createTariffChangePayment() {
-    if (!selectedChangeTarget || !selectedChangeAction || !selectedMethod || payBusy) return;
-    payBusy = true;
-    try {
-      const body = billing.changePaymentBody(selectedChangeAction, selectedChangeTarget, selectedMethod);
-      const response =
-        selectedChangeAction.mode === "buy_package" || selectedChangeAction.mode === "buy_period"
-          ? await billing.postPayment(body)
-          : await billing.postTariffChangePayment(body);
-      if (!response.ok || !response.payment_url) throw response;
-      showToast(t("wa_payment_created"));
-      openExternalLink(response.payment_url);
-      changeConfirmOpen = false;
-      changeModalOpen = false;
-    } catch (error) {
-      showToast(error?.message || t("wa_payment_create_failed"));
-    } finally {
-      payBusy = false;
-    }
-  }
+  
 
   function openExternalLink(url) {
     if (!url) return;
@@ -1269,66 +739,15 @@
     }
   }
 
-  async function loadDevices(force = false) {
-    if (!devicesEnabled || devicesBusy || (devicesLoaded && !force)) return;
-    devicesBusy = true;
-    devicesStatus = "";
-    devicesIsError = false;
-    try {
-      const response = await api("/devices");
-      if (!response?.ok) throw response;
-      devicesData = response;
-      devicesLoaded = true;
-    } catch (error) {
-      devicesStatus = error?.message || t("wa_devices_load_failed");
-      devicesIsError = true;
-      devicesLoaded = true;
-    } finally {
-      devicesBusy = false;
-    }
-  }
+  
 
-  function openDeviceDisconnectDialog(device) {
-    deviceToDisconnect = device;
-    deviceConfirmOpen = true;
-  }
+  
 
-  function closeDeviceDisconnectDialog() {
-    if (deviceDisconnectBusy) return;
-    deviceConfirmOpen = false;
-    deviceToDisconnect = null;
-  }
+  
 
-  async function disconnectDevice() {
-    const token = String(deviceToDisconnect?.token || "").trim();
-    if (!token || deviceDisconnectBusy) return;
-    deviceDisconnectBusy = true;
-    try {
-      const response = await api("/devices/disconnect", {
-        method: "POST",
-        body: JSON.stringify({ token }),
-      });
-      if (!response?.ok) throw response;
-      showToast(t("wa_device_disconnected"));
-      deviceConfirmOpen = false;
-      deviceToDisconnect = null;
-      devicesLoaded = false;
-      await loadDevices(true);
-    } catch (error) {
-      showToast(error?.message || t("wa_device_disconnect_failed"));
-    } finally {
-      deviceDisconnectBusy = false;
-    }
-  }
+  
 
-  async function logout() {
-    markManualLogout();
-    clearToken();
-    try {
-      await publicApi("/auth/logout", { keepalive: true });
-    } catch {}
-    showLogin();
-  }
+  
 
   function showToast(message) {
     toastText = message;
@@ -1339,14 +758,14 @@
   }
 
   function goHome() {
-    paymentModalOpen = false;
+    billingStore.closePaymentModal();
     activeTab = "home";
     screen = "home";
     syncSectionPath("home");
   }
 
   function goInvite() {
-    paymentModalOpen = false;
+    billingStore.closePaymentModal();
     activeTab = "invite";
     screen = "invite";
     syncSectionPath("invite");
@@ -1354,25 +773,55 @@
 
   function goDevices() {
     if (!devicesEnabled) return;
-    paymentModalOpen = false;
+    billingStore.closePaymentModal();
     activeTab = "devices";
     screen = "devices";
     syncSectionPath("devices");
-    loadDevices();
+    devicesStore.loadDevices(devicesEnabled);
+  }
+
+  function defaultPaymentMethod() {
+    return methods[0]?.id || "";
+  }
+
+  function openPaymentModal() {
+    billingStore.openPaymentModal(tariffMode, singleTariffMode, tariffCatalog, subscription, plans, defaultPaymentMethod());
+  }
+
+  function openTopupModal(kind) {
+    billingStore.openTopupModal(kind, defaultPaymentMethod());
+  }
+
+  function openRegularTopupModal() {
+    openTopupModal("regular");
+  }
+
+  function openPremiumTopupModal() {
+    openTopupModal("premium");
+  }
+
+  function openTariffChangeModal() {
+    billingStore.openTariffChangeModal(defaultPaymentMethod());
   }
 
   function openDeviceTopupModal() {
-    selectedMethod = methods[0]?.id || "";
-    deviceTopupModalOpen = true;
-    loadDeviceTopupOptions();
+    billingStore.openDeviceTopupModal(defaultPaymentMethod());
   }
 
   function closeDeviceTopupModal() {
-    deviceTopupModalOpen = false;
+    billingStore.closeDeviceTopupModal();
+  }
+
+  function loadDevices(force = false) {
+    return devicesStore.loadDevices(devicesEnabled, force);
+  }
+
+  function disconnectDevice() {
+    return devicesStore.disconnectDevice(devicesEnabled);
   }
 
   function goSettings() {
-    paymentModalOpen = false;
+    billingStore.closePaymentModal();
     activeTab = "settings";
     screen = "settings";
     syncSectionPath("settings");
@@ -1380,7 +829,9 @@
 
   function openAdminPanel() {
     if (!isAdmin) return;
-    paymentModalOpen = false;
+    clearLanguageClickGuard();
+    billingStore.closePaymentModal();
+    activeTab = "settings";
     screen = "admin";
     syncSectionPath("admin", false, adminSectionFromPath(window.location.pathname));
   }
@@ -1402,9 +853,7 @@
   }
 
   async function handleTariffsSaved() {
-    topupOptions = null;
-    deviceTopupOptions = null;
-    changeOptions = null;
+    billingStore.update((s) => ({ ...s, topupOptions: null, deviceTopupOptions: null, changeOptions: null }));
     try {
       await loadData();
     } catch {
@@ -1413,9 +862,7 @@
   }
 
   async function handleSettingsSaved() {
-    topupOptions = null;
-    deviceTopupOptions = null;
-    changeOptions = null;
+    billingStore.update((s) => ({ ...s, topupOptions: null, deviceTopupOptions: null, changeOptions: null }));
     try {
       await loadData();
     } catch {
@@ -1423,146 +870,21 @@
     }
   }
 
-  function openPaymentModal() {
-    if (tariffMode) {
-      if (singleTariffMode && tariffCatalog[0]?.key) {
-        selectedTariffKey = tariffCatalog[0].key;
-        selectedPlan = plans.find((plan) => plan?.tariff_key === selectedTariffKey) || null;
-        paymentStep = "checkout";
-      } else if (subscription?.active && subscription?.tariff_key && tariffCatalog.some((t) => t.key === subscription.tariff_key)) {
-        selectedTariffKey = subscription.tariff_key;
-        selectedPlan = plans.find((plan) => plan?.tariff_key === selectedTariffKey) || null;
-        paymentStep = "checkout";
-      } else {
-        paymentStep = "tariff";
-        selectedTariffKey = "";
-        selectedPlan = null;
-      }
-    } else {
-      paymentStep = "checkout";
-    }
-    paymentModalOpen = true;
-  }
+  
 
-  function closePaymentModal() {
-    paymentModalOpen = false;
-  }
+  
 
-  function openTopupModal(kind = "regular") {
-    if (kind === "premium" ? !canOpenPremiumTopupModal : !canOpenRegularTopupModal) return;
-    if (topupKind !== kind) {
-      topupOptions = null;
-      selectedTopupPlan = null;
-    }
-    topupKind = kind;
-    topupModalOpen = true;
-    loadTopupOptions(kind);
-  }
+  
 
-  function closeTopupModal() {
-    if (payBusy || tariffActionBusy) return;
-    topupModalOpen = false;
-  }
+  
 
-  function openTariffChangeModal() {
-    changeModalOpen = true;
-    loadTariffChangeOptions();
-  }
+  
 
-  function closeTariffChangeModal() {
-    if (payBusy || tariffActionBusy) return;
-    changeModalOpen = false;
-    changeConfirmOpen = false;
-  }
+  
 
-  function openTariffChangeConfirm() {
-    if (!selectedChangeTarget || !selectedChangeAction || tariffActionBusy || payBusy) return;
-    changeConfirmOpen = true;
-  }
+  
 
-  function closeTariffChangeConfirm() {
-    if (payBusy || tariffActionBusy) return;
-    changeConfirmOpen = false;
-  }
-
-  function formatMoney(value, currency = CFG.currency || "RUB") {
-    return fmtMoney(value, currency);
-  }
-  function priceLabel(plan, methodId = selectedMethod) {
-    return priceLabelFn(plan, methodId);
-  }
-  function formatTrafficGb(value) {
-    return fmtTrafficGb(value);
-  }
-  function formatTrafficBytes(value) {
-    return fmtTrafficBytes(value);
-  }
-  function formatCompactNumber(value) {
-    return fmtCompactNumber(value);
-  }
-  function normalizedEmail(value) {
-    return fmtNormalizedEmail(value);
-  }
-  function telegramName(profile) {
-    return fmtTelegramName(profile, t("wa_telegram_not_linked"));
-  }
-  function planKey(plan) {
-    return planKeyFn(plan);
-  }
-  function buildTariffCatalog(planList) {
-    return buildTariffCatalogFn(planList);
-  }
-  function activeTariffName(sub, planList) {
-    return activeTariffNameFn(sub, planList);
-  }
-  function planDisplayTitle(plan) {
-    return planDisplayTitleFn(plan, { trafficMode, t });
-  }
-  function planSubtitle(plan) {
-    return planSubtitleFn(plan, { lang: currentLang });
-  }
-  function planUnitHint(plan) {
-    return planUnitHintFn(plan, { trafficMode, selectedMethod, t });
-  }
-  function tariffLimitLabel(tariff) {
-    return tariffLimitLabelFn(tariff, { t });
-  }
-  function actionKey(action) {
-    return actionKeyFn(action);
-  }
-  function trafficPercent(sub) {
-    return trafficPercentFn(sub);
-  }
-  function trafficLabel(sub) {
-    return trafficLabelFn(sub, t);
-  }
-  function trafficResetLabel(sub) {
-    return trafficResetLabelFn(sub, t);
-  }
-  function premiumTrafficPercent(sub) {
-    return premiumTrafficPercentFn(sub);
-  }
-  function premiumTrafficLabel(sub) {
-    return premiumTrafficLabelFn(sub, t);
-  }
-  function premiumTitle(sub = subscription) {
-    return premiumTitleFn(sub, t);
-  }
-  function premiumTrafficLeftLabel(sub) {
-    return premiumTrafficLeftLabelFn(sub);
-  }
-  function premiumTopupBalanceLabel(sub) {
-    return premiumTopupBalanceLabelFn(sub);
-  }
-  function premiumServerLabels(sub) {
-    return premiumServerLabelsFn(sub);
-  }
-  function isForeverSubscription(sub) {
-    return isForeverSubscriptionFn(sub);
-  }
-  function activeSubscriptionTermLabel(sub) {
-    return activeSubscriptionTermLabelFn(sub, { t, termUnitLabel });
-  }
+  
 
   function methodMeta(method) {
     const id = String(method?.id || "").toLowerCase();
@@ -1597,25 +919,15 @@
   }
 
   function selectTariff(tariff) {
-    const key = String(tariff?.key || "").trim();
-    if (!key) return;
-    selectedTariffKey = key;
-    selectedPlan = plans.find((plan) => plan?.tariff_key === key) || null;
+    billingStore.selectTariff(tariff, plans);
   }
 
   function continueWithSelectedTariff() {
-    if (!selectedTariffKey) return;
-    if (!selectedPlan) {
-      selectedPlan = selectedTariffPlans[0] || null;
-    }
-    paymentStep = "checkout";
+    billingStore.continueWithSelectedTariff(selectedTariffPlans);
   }
 
   function backToTariffList() {
-    if (subscription?.active && subscription?.tariff_key && tariffCatalog.some((t) => t.key === subscription.tariff_key)) {
-      return;
-    }
-    paymentStep = "tariff";
+    billingStore.backToTariffList(subscription, tariffCatalog);
   }
 
   function paymentTitle() {
@@ -1775,8 +1087,8 @@
           {CFG}
           {brandTitle}
           {brandEmoji}
-          bind:email
-          bind:emailCode
+          bind:email={$authStore.email}
+          bind:emailCode={$authStore.emailCode}
           {pendingEmail}
           {authStatus}
           {authIsError}
@@ -1792,9 +1104,9 @@
           {privacyPolicyUrl}
           {userAgreementUrl}
           {t}
-          {requestEmailCode}
-          {verifyEmailCode}
-          {openTelegramLogin}
+          requestEmailCode={() => authStore.requestEmailCode((s) => (screen = s))}
+          verifyEmailCode={authStore.verifyEmailCode}
+          openTelegramLogin={() => authStore.openTelegramLogin(telegramOAuthClientId, () => telegramMiniAppInitData)}
           {openExternalLink}
           {submitEmailOnEnter}
           onBackToLogin={() => (screen = "login")}
@@ -1821,7 +1133,7 @@
         currentLang={currentLang}
         languageOptions={languageOptions}
         languageBusy={languageBusy}
-        onLanguageChange={updateAccountLanguage}
+        onLanguageChange={accountStore.updateAccountLanguage}
         t={t}
       />
     {:else}
@@ -1855,24 +1167,17 @@
             {hasActiveTariffSubscription}
             {hasMultipleTariffs}
             {subscription}
+            {termUnitLabel}
             {trafficMode}
             {trialBusy}
-            {activeSubscriptionTermLabel}
             {activateTrial}
             {openConnectLink}
             {openPaymentModal}
+            {openRegularTopupModal}
+            {openPremiumTopupModal}
             {openTariffChangeModal}
-            {openTopupModal}
-            {premiumServerLabels}
-            {premiumTitle}
-            {premiumTrafficLabel}
-            {premiumTrafficPercent}
             {primaryPayActionLabel}
             {t}
-            {trafficLabel}
-            {trafficPercent}
-            {trafficResetLabel}
-            {trialTrafficLabel}
           />
         {:else if screen === "invite"}
           <InviteScreen
@@ -1898,11 +1203,8 @@
             {devicesLoaded}
             {devicesStatus}
             {subscription}
-            {devicesCountLabel}
-            {devicesLimitLabel}
-            {devicesPercent}
             {loadDevices}
-            {openDeviceDisconnectDialog}
+            openDeviceDisconnectDialog={devicesStore.openDeviceDisconnectDialog}
             {openDeviceTopupModal}
             {t}
           />
@@ -1928,28 +1230,28 @@
             {user}
             {userAgreementUrl}
             {userLanguage}
-            {linkTelegramAccount}
-            {logout}
+            linkTelegramAccount={accountStore.linkTelegramAccount}
+            logout={accountStore.logout}
             {openAdminPanel}
             {openExternalLink}
-            {openLinkEmailDialog}
+            openLinkEmailDialog={accountStore.openLinkEmailDialog}
             {setLanguageMenuOpen}
             {t}
-            {updateAccountLanguage}
+            updateAccountLanguage={accountStore.updateAccountLanguage}
           />
         {/if}
       </WebAppShell>
 
       <PaymentDialogs
-        bind:linkEmailCode
-        bind:linkEmailFieldError
-        bind:linkEmailValue
-        bind:paymentModalOpen
-        bind:paymentStep
-        bind:selectedMethod
-        bind:selectedPlan
-        bind:selectedTariffKey
-        {createPayment}
+        bind:linkEmailCode={$accountStore.linkEmailCode}
+        bind:linkEmailFieldError={$accountStore.linkEmailFieldError}
+        bind:linkEmailValue={$accountStore.linkEmailValue}
+        bind:paymentModalOpen={$billingStore.paymentModalOpen}
+        bind:paymentStep={$billingStore.paymentStep}
+        bind:selectedMethod={$billingStore.selectedMethod}
+        bind:selectedPlan={$billingStore.selectedPlan}
+        bind:selectedTariffKey={$billingStore.selectedTariffKey}
+        createPayment={billingStore.createPayment}
         {deviceConfirmOpen}
         {deviceDisconnectBusy}
         {deviceToDisconnect}
@@ -1960,6 +1262,7 @@
         {linkEmailPending}
         {linkEmailResendCooldown}
         {linkEmailStatus}
+        {hasMultipleTariffs}
         {methods}
         {payBusy}
         {plans}
@@ -1969,61 +1272,48 @@
         {subscription}
         {tariffCatalog}
         {tariffMode}
-        {closeDeviceDisconnectDialog}
-        {closeLinkEmailDialog}
-        {closePaymentModal}
+        closeDeviceDisconnectDialog={devicesStore.closeDeviceDisconnectDialog}
+        closeLinkEmailDialog={accountStore.closeLinkEmailDialog}
+        closePaymentModal={billingStore.closePaymentModal}
+        {backToTariffList}
         {continueWithSelectedTariff}
-        {methodMeta}
-        {paymentDescription}
-        {paymentTitle}
-        {planKey}
-        {planSubtitle}
-        {planUnitHint}
-        {priceLabel}
-        {requestLinkEmailCode}
+        requestLinkEmailCode={accountStore.requestLinkEmailCode}
         {selectTariff}
         {t}
-        {verifyLinkEmailCode}
+        {termUnitLabel}
+        verifyLinkEmailCode={accountStore.verifyLinkEmailCode}
       />
 
       <TariffDialogs
-        bind:changeConfirmOpen
-        bind:changeModalOpen
-        bind:deviceTopupModalOpen
-        bind:selectedChangeAction
-        bind:selectedChangeTarget
-        bind:selectedDeviceTopupPlan
-        bind:selectedMethod
-        bind:selectedTopupPlan
-        bind:topupModalOpen
-        {actionKey}
-        {applyTariffChange}
-        {changeActionTitle}
+        bind:changeConfirmOpen={$billingStore.changeConfirmOpen}
+        bind:changeModalOpen={$billingStore.changeModalOpen}
+        bind:deviceTopupModalOpen={$billingStore.deviceTopupModalOpen}
+        bind:selectedChangeAction={$billingStore.selectedChangeAction}
+        bind:selectedChangeTarget={$billingStore.selectedChangeTarget}
+        bind:selectedDeviceTopupPlan={$billingStore.selectedDeviceTopupPlan}
+        bind:selectedMethod={$billingStore.selectedMethod}
+        bind:selectedTopupPlan={$billingStore.selectedTopupPlan}
+        bind:topupModalOpen={$billingStore.topupModalOpen}
+        applyTariffChange={billingStore.applyTariffChange}
         {changeOptions}
         {closeDeviceTopupModal}
-        {closeTariffChangeConfirm}
-        {closeTariffChangeModal}
-        {closeTopupModal}
-        {createDeviceTopupPayment}
-        {createTopupPayment}
-        {deviceTopupModalDescription}
+        closeTariffChangeConfirm={billingStore.closeTariffChangeConfirm}
+        closeTariffChangeModal={billingStore.closeTariffChangeModal}
+        closeTopupModal={billingStore.closeTopupModal}
+        createDeviceTopupPayment={billingStore.createDeviceTopupPayment}
+        createTopupPayment={billingStore.createTopupPayment}
         {deviceTopupOptions}
         {methods}
-        {methodMeta}
-        {openTariffChangeConfirm}
+        openTariffChangeConfirm={billingStore.openTariffChangeConfirm}
         {payBusy}
-        {planKey}
-        {planUnitHint}
-        {priceLabel}
         {singleTariffMode}
+        {subscription}
         {tariffActionBusy}
-        {tariffChangeModalDescription}
-        {tariffChangeSummary}
-        {topupCarryoverNotes}
-        {topupModalDescription}
-        {topupModalTitle}
+        {topupKind}
         {topupOptions}
+        {trafficMode}
         {t}
+        {termUnitLabel}
       />
     {/if}
 
diff --git a/bot/app/web/frontend/src/admin/AdminPanel.svelte b/bot/app/web/frontend/src/admin/AdminPanel.svelte
index 611a3c6..5fa2e9e 100644
--- a/bot/app/web/frontend/src/admin/AdminPanel.svelte
+++ b/bot/app/web/frontend/src/admin/AdminPanel.svelte
@@ -1,20 +1,11 @@
 <script>
   import {
     ArrowLeft,
-    BarChart3,
     Check,
     ChevronsUpDown,
-    ChevronDown,
-    ChevronLeft,
-    ChevronRight,
     Coins,
-    Copy,
-    ExternalLink,
     CreditCard,
-    Database,
     Download,
-    Eye,
-    EyeOff,
     FileText,
     Globe2,
     LayoutDashboard,
@@ -23,57 +14,52 @@
     Plus,
     RefreshCw,
     Save,
-    Send,
-    Settings as SettingsIcon,
-    Shield,
     Sliders,
     Sparkles,
     Tag,
-    Trash2,
-    UserMinus,
-    UserPlus,
-    UserRound,
     UsersRound,
-    X,
   } from "lucide-svelte";
-  import { onMount } from "svelte";
-  import { Accordion, Label, Select, Separator, Switch, Tabs } from "bits-ui";
+  import { onMount, setContext } from "svelte";
+  import { Select } from "bits-ui";
 
   import BrandMark from "../BrandMark.svelte";
-  import Dialog from "../lib/components/ui/dialog.svelte";
+  import AdsSection from "./sections/AdsSection.svelte";
+  import BroadcastSection from "./sections/BroadcastSection.svelte";
+  import LogsSection from "./sections/LogsSection.svelte";
   import PaymentsSection from "./sections/PaymentsSection.svelte";
+  import PromosSection from "./sections/PromosSection.svelte";
   import SettingsSection from "./sections/SettingsSection.svelte";
   import StatsSection from "./sections/StatsSection.svelte";
+  import TariffEditorModal from "./sections/TariffEditorModal.svelte";
   import TariffsSection from "./sections/TariffsSection.svelte";
+  import UserDetailModal from "./sections/UserDetailModal.svelte";
   import UsersSection from "./sections/UsersSection.svelte";
-
+  import { createAdsStore } from "../lib/admin/stores/adsStore.js";
+  import { createBroadcastStore } from "../lib/admin/stores/broadcastStore.js";
+  import { createLogsStore } from "../lib/admin/stores/logsStore.js";
+  import { createPaymentsStore } from "../lib/admin/stores/paymentsStore.js";
+  import { createPromosStore } from "../lib/admin/stores/promosStore.js";
+  import { createSettingsStore } from "../lib/admin/stores/settingsStore.js";
+  import { createStatsStore } from "../lib/admin/stores/statsStore.js";
+  import { createTariffsStore } from "../lib/admin/stores/tariffsStore.js";
+  import { createUsersStore } from "../lib/admin/stores/usersStore.js";
   import {
-    structuredCloneSafe,
-    pretty,
     fmtDate,
     fmtDateShort,
     fmtMoney,
-    fmtTrafficBytes,
-    trafficPercentValue,
+    optionLabel,
+    paymentStatusVariant,
     trafficLeftLabel,
     trafficOfLabel,
-    paymentStatusVariant,
-    optionLabel,
+    trafficPercentValue,
   } from "../lib/admin/format.js";
   import {
-    userDisplayName,
-    userSecondaryName,
-    userInitials,
-    userAvatarUrl,
     createGravatarCache,
+    userAvatarUrl,
+    userDisplayName,
+    userInitials,
+    userSecondaryName,
   } from "../lib/admin/users.js";
-  import {
-    emptyTariffDraft,
-    cloneCatalog,
-    draftFromTariff,
-    tariffFromDraft as tariffFromDraftFn,
-    normalizeUuidList,
-  } from "../lib/admin/tariffDraft.js";
 
   export let api;
   export let onClose = () => {};
@@ -85,7 +71,7 @@
   export let onTariffsSaved = () => {};
   export let brandTitle = "/minishop";
   export let logoUrl = "";
-  export let logoEmoji = "рџ«Ґ";
+  export let logoEmoji = "🫥";
   export let appVersion = "dev+local";
   export let appRepositoryUrl = "https://github.com/3252a8/remnawave-minishop";
   export let currentLang = "ru";
@@ -96,13 +82,11 @@
 
   const at = (key, params = {}, fallback = "") => t(`admin_${key}`, params, fallback || key);
 
-  const NAV_GROUPS = [
+  $: NAV_GROUPS = [
     {
       id: "overview",
-      label: at("nav_overview", {}, "Overview"),
-      items: [
-        { id: "stats", label: at("nav_dashboard", {}, "Дашборд"), icon: LayoutDashboard },
-      ],
+      label: at("nav_overview", {}, "Обзор"),
+      items: [{ id: "stats", label: at("nav_dashboard", {}, "Дашборд"), icon: LayoutDashboard }],
     },
     {
       id: "operations",
@@ -132,9 +116,9 @@
     },
   ];
 
-  const SECTION_META = {
+  $: SECTION_META = {
     stats: { title: at("section_stats_title", {}, "Дашборд"), subtitle: at("section_stats_subtitle", {}, "Сводка по магазину и панели") },
-    users: { title: at("section_users_title", {}, "Пользователи"), subtitle: at("section_users_subtitle", {}, "Поиск, баны, действия над аккаунтами") },
+    users: { title: at("section_users_title", {}, "Пользователи"), subtitle: at("section_users_subtitle", {}, "Поиск, баны и действия над аккаунтами") },
     payments: { title: at("section_payments_title", {}, "Платежи"), subtitle: at("section_payments_subtitle", {}, "История транзакций и экспорт") },
     promos: { title: at("section_promos_title", {}, "Промокоды"), subtitle: at("section_promos_subtitle", {}, "Создание и управление кодами") },
     ads: { title: at("section_ads_title", {}, "Рекламные кампании"), subtitle: at("section_ads_subtitle", {}, "UTM-источники и атрибуция") },
@@ -144,1064 +128,148 @@
     settings: { title: at("section_settings_title", {}, "Настройки приложения"), subtitle: at("section_settings_subtitle", {}, "Оверрайды над .env, применяются мгновенно") },
   };
 
-  const VALID_SECTIONS = NAV_GROUPS.flatMap((g) => g.items.map((i) => i.id));
-  function _normalizeSection(value) {
-    return VALID_SECTIONS.includes(value) ? value : "stats";
+  $: VALID_SECTIONS = (NAV_GROUPS || []).flatMap((group) => (group.items || []).map((item) => item.id));
+  const normalizeSection = (value) => ((VALID_SECTIONS || []).includes(value) ? value : "stats");
+
+  let active = normalizeSection(initialSection);
+  $: if (initialSection) {
+    active = normalizeSection(initialSection);
   }
-  let active = _normalizeSection(initialSection);
   let sidebarOpen = false;
-
-  // Stats
-  let stats = null;
-  let statsLoading = false;
-  let statsError = "";
-  let syncBusy = false;
-
-  // Users
-  let users = [];
-  let usersTotal = 0;
-  let usersPage = 0;
-  const USERS_PAGE_SIZE = 25;
-  let usersQuery = "";
-  let usersFilter = "all";
-  let usersPanelStatus = "all";
-  let usersSort = "registered_desc";
-  let usersLoading = false;
-
-  const USERS_FILTER_OPTIONS = [
-    { value: "all", label: at("filter_all", {}, "Все") },
-    { value: "active", label: at("filter_not_banned", {}, "Не забанены") },
-    { value: "banned", label: at("filter_banned", {}, "Забанены") },
-    { value: "tg_linked", label: at("filter_tg_linked", {}, "С Telegram") },
-    { value: "no_tg", label: at("filter_no_tg", {}, "Без Telegram") },
-    { value: "email_linked", label: at("filter_email_linked", {}, "С email") },
-    { value: "no_email", label: at("filter_no_email", {}, "Без email") },
-    { value: "panel_linked", label: at("filter_panel_linked", {}, "С панелью") },
-  ];
-
-  const USERS_SORT_OPTIONS = [
-    { value: "registered_desc", label: at("sort_registered_desc", {}, "Сначала новые") },
-    { value: "registered_asc", label: at("sort_registered_asc", {}, "Сначала старые") },
-    { value: "name_asc", label: at("sort_name_asc", {}, "Имя ↑") },
-    { value: "name_desc", label: at("sort_name_desc", {}, "Имя ↓") },
-    { value: "id_asc", label: at("sort_id_asc", {}, "ID ↑") },
-    { value: "id_desc", label: at("sort_id_desc", {}, "ID ↓") },
-  ];
-
-  const USERS_PANEL_STATUS_OPTIONS = [
-    { value: "all", label: at("panel_status_all", {}, "Все статусы") },
-    { value: "active", label: "active" },
-    { value: "expired", label: "expired" },
-    { value: "limited", label: "limited" },
-  ];
-
-  const BROADCAST_TARGET_OPTIONS = [
-    { value: "all", label: at("broadcast_target_all", {}, "Все активные") },
-    { value: "active", label: at("broadcast_target_active", {}, "С подпиской") },
-    { value: "inactive", label: at("broadcast_target_inactive", {}, "Без подписки") },
-  ];
-  let openedUser = null;
-  let openedUserDetail = null;
-  let userDetailLoading = false;
-  let userMessageDraft = "";
-  let userExtendDays = 30;
-  let userActionBusy = false;
-  let userDeleteOpen = false;
-  let userBanConfirmOpen = false;
-  let userMessageConfirmOpen = false;
-  let userDetailTab = "profile";
-  let tariffEditorTab = "general";
-
-  // Payments
-  let payments = [];
-  let paymentsTotal = 0;
-  let paymentsPage = 0;
-  const PAYMENTS_PAGE_SIZE = 25;
-  let paymentsLoading = false;
-
-  // Promos
-  let promos = [];
-  let promosTotal = 0;
-  let promosPage = 0;
-  const PROMOS_PAGE_SIZE = 25;
-  let promosLoading = false;
-  let promoCreateOpen = false;
-  let promoDraft = { code: "", bonus_days: 7, max_activations: 1, valid_days: 30 };
-
-  // Broadcast
-  let broadcastTarget = "all";
-  let broadcastText = "";
-  let broadcastBusy = false;
-  let broadcastResult = null;
-
-  // Logs
-  let logs = [];
-  let logsTotal = 0;
-  let logsPage = 0;
-  const LOGS_PAGE_SIZE = 50;
-  let logsUserFilter = "";
-  let logsLoading = false;
-
-  // Ads
-  let ads = [];
-  let adsTotals = null;
-  let adsLoading = false;
-  let adCreateOpen = false;
-  let adDraft = { source: "", start_param: "", cost: 0 };
-
-  // Tariffs
-  let tariffsCatalog = {
-    default_tariff: "",
-    topup_packages_default: { rub: [], stars: [] },
-    tariffs: [],
-  };
-  let tariffsPath = "";
-  let tariffsLoading = false;
-  let tariffsSaving = false;
-  let tariffEditorOpen = false;
-  let tariffEditingKey = "";
-  let tariffDeleteOpen = false;
-  let tariffDeleteTarget = null;
-  let tariffDraft = emptyTariffDraft();
-  let panelSquads = [];
-  let panelSquadsLoading = false;
-  let selectedBaseSquad = "";
-  let selectedPremiumSquad = "";
-
-  // Settings
-  let settingsSections = [];
-  let settingsLoading = false;
-  let settingsDirty = {};
-  let settingsSaving = false;
-  let settingsOpenSections = []; // bits-ui Accordion value (multiple)
-  let settingsOpenSubsections = {}; // sectionId -> array of open subsection labels
   let isCompact = false;
 
   function flash(text) {
     onToast(text);
   }
 
+  const adsStore = createAdsStore({ api, onToast: flash, at });
+  const broadcastStore = createBroadcastStore({ api, onToast: flash, at });
+  const logsStore = createLogsStore({ api, at });
+  const paymentsStore = createPaymentsStore({ api, at });
+  const promosStore = createPromosStore({ api, onToast: flash, at });
+  const settingsStore = createSettingsStore({ api, onToast: flash, at });
+  const statsStore = createStatsStore({ api, onToast: flash, at });
+  const tariffsStore = createTariffsStore({ api, onToast: flash, onTariffsSaved, flash, at });
+  const usersStore = createUsersStore({ api, onToast: flash, at });
+
+  setContext("promosStore", promosStore);
+  setContext("adsStore", adsStore);
+  setContext("broadcastStore", broadcastStore);
+  setContext("logsStore", logsStore);
+  setContext("paymentsStore", paymentsStore);
+  setContext("statsStore", statsStore);
+  setContext("settingsStore", settingsStore);
+  setContext("usersStore", usersStore);
+  setContext("tariffsStore", tariffsStore);
+
+  $: usersStore.setActive(active);
+  $: dirtyCount = Object.keys($settingsStore.settingsDirty || {}).length;
+  $: syncBusy = $statsStore.syncBusy;
+  $: settingsSaving = $settingsStore.settingsSaving;
+  $: meta = SECTION_META[active] || { title: active, subtitle: "" };
+  $: currentLanguageOption = languageOptions.find((option) => option.value === currentLang) || languageOptions[0];
+
+  const gravatarCache = createGravatarCache(() => usersStore.updateState({}));
+
   function setActive(id) {
-    const next = _normalizeSection(id);
-    if (active === next) {
-      sidebarOpen = false;
-      return;
-    }
-    active = next;
+    const next = normalizeSection(id);
     sidebarOpen = false;
-    if (openedUser) {
-      openedUser = null;
-      openedUserDetail = null;
-      userDeleteOpen = false;
-      userBanConfirmOpen = false;
-    }
+    if (active === next) return;
+    active = next;
+    usersStore.closeUser();
     onSectionChange(next);
-    loadActive();
   }
 
-  function _readSectionFromPath() {
+  function readSectionFromPath() {
     if (typeof window === "undefined") return "stats";
-    const m = window.location.pathname.match(/^\/admin\/([a-z0-9_-]+)(?:\/[^/]+)?$/i);
-    return _normalizeSection(m ? m[1].toLowerCase() : "stats");
+    const match = window.location.pathname.match(/^\/admin\/([a-z0-9_-]+)(?:\/[^/]+)?$/i);
+    return normalizeSection(match ? match[1].toLowerCase() : "stats");
   }
 
-  function _readUserIdFromPath() {
+  function readUserIdFromPath() {
     if (typeof window === "undefined") return null;
-    const m = window.location.pathname.match(/^\/admin\/users\/(-?\d+)$/);
-    return m ? Number(m[1]) : null;
+    const match = window.location.pathname.match(/^\/admin\/users\/(-?\d+)$/);
+    return match ? Number(match[1]) : null;
   }
 
-  function _onPopState() {
-    const next = _readSectionFromPath();
-    if (active !== next) {
-      active = next;
-      sidebarOpen = false;
-      loadActive();
-    }
-    const uid = _readUserIdFromPath();
-    if (uid) {
-      if (!openedUser || openedUser.user_id !== uid) openUser(uid, { skipPush: true });
-    } else if (openedUser) {
-      closeUser({ skipPush: true });
-    }
-  }
-
-  async function loadActive() {
-    if (active === "stats") return loadStats();
-    if (active === "users") return loadUsers();
-    if (active === "payments") return loadPayments();
-    if (active === "promos") return loadPromos();
-    if (active === "logs") return loadLogs();
-    if (active === "ads") return loadAds();
-    if (active === "tariffs") return loadTariffs();
-    if (active === "settings") return loadSettings();
-  }
-
-  // ─── Stats ────────────────────────────────────────────────────
-  async function loadStats() {
-    statsLoading = true;
-    statsError = "";
-    try {
-      const data = await api("/admin/stats");
-      if (!data?.ok) statsError = data?.error || "load_failed";
-      else stats = data;
-    } catch (e) {
-      statsError = e?.message || String(e);
-    } finally {
-      statsLoading = false;
-    }
-  }
-
-  async function triggerSync() {
-    if (syncBusy) return;
-    syncBusy = true;
-    try {
-      const res = await api("/admin/sync", { method: "POST" });
-      if (res?.ok) {
-        flash(at("sync_started", {}, "Синхронизация запущена"));
-        await loadStats();
-      } else {
-        flash(res?.error || at("sync_error", {}, "Ошибка синхронизации"));
+  function onPopState() {
+    active = readSectionFromPath();
+    sidebarOpen = false;
+    const userId = readUserIdFromPath();
+    if (userId) {
+      if (!$usersStore.openedUser || $usersStore.openedUser.user_id !== userId) {
+        usersStore.openUser(userId, { skipPush: true });
       }
-    } finally {
-      syncBusy = false;
-    }
-  }
-
-  // ─── Users ────────────────────────────────────────────────────
-  async function loadUsers() {
-    usersLoading = true;
-    try {
-      const params = new URLSearchParams({
-        page: String(usersPage),
-        page_size: String(USERS_PAGE_SIZE),
-      });
-      if (usersQuery.trim()) params.set("q", usersQuery.trim());
-      if (usersFilter && usersFilter !== "all") params.set("filter", usersFilter);
-      if (usersPanelStatus && usersPanelStatus !== "all") params.set("panel_status", usersPanelStatus);
-      if (usersSort && usersSort !== "registered_desc") params.set("sort", usersSort);
-      const data = await api(`/admin/users?${params.toString()}`);
-      if (data?.ok) {
-        users = data.users || [];
-        usersTotal = data.total || users.length;
-      }
-    } finally {
-      usersLoading = false;
-    }
-  }
-
-  async function openUser(userOrId, opts = {}) {
-    const userId = typeof userOrId === "object" && userOrId !== null ? userOrId.user_id : Number(userOrId);
-    if (!userId) return;
-    openedUser = typeof userOrId === "object" && userOrId !== null ? userOrId : { user_id: userId };
-    openedUserDetail = null;
-    userMessageDraft = "";
-    userMessageConfirmOpen = false;
-    userExtendDays = 30;
-    userDetailLoading = true;
-    userDetailTab = "subscription";
-    if (!opts.skipPush) _pushUserPath(userId);
-    try {
-      const res = await api(`/admin/users/${userId}`);
-      if (res?.ok) {
-        openedUserDetail = res;
-        if (res.user) openedUser = { ...res.user, ...openedUser, ...res.user };
-      } else {
-        flash(res?.error || "load_failed");
-        openedUser = null;
-        if (!opts.skipPush) _pushUserPath(null);
-      }
-    } finally {
-      userDetailLoading = false;
-    }
-  }
-
-  function closeUser(opts = {}) {
-    const wasOpen = Boolean(openedUser);
-    openedUser = null;
-    openedUserDetail = null;
-    userDeleteOpen = false;
-    userBanConfirmOpen = false;
-    userMessageConfirmOpen = false;
-    if (wasOpen && !opts.skipPush) _pushUserPath(null);
-  }
-
-  function _pushUserPath(userId) {
-    if (typeof window === "undefined") return;
-    if (window.location.protocol === "file:") return;
-    if (active !== "users") return;
-    const target = userId ? `/admin/users/${userId}` : `/admin/users`;
-    if (window.location.pathname === target) return;
-    window.history.pushState(null, "", `${target}${window.location.search}${window.location.hash}`);
-  }
-
-  function copyToClipboard(text, successMessage = at("link_copied", {}, "Ссылка скопирована")) {
-    if (!text) return;
-    if (typeof navigator !== "undefined" && navigator?.clipboard?.writeText) {
-      navigator.clipboard.writeText(text).then(
-        () => flash(successMessage),
-        () => flash(text),
-      );
-    } else {
-      flash(text);
-    }
-  }
-
-  function requestBanToggle() {
-    if (!openedUser) return;
-    if (openedUser.is_banned) {
-      // Unbanning is reversible — apply directly without confirmation.
-      applyBanToggle(false);
-    } else {
-      userBanConfirmOpen = true;
-    }
-  }
-
-  async function applyBanToggle(banned) {
-    if (!openedUser) return;
-    userActionBusy = true;
-    try {
-      const res = await api(`/admin/users/${openedUser.user_id}/ban`, {
-        method: "POST",
-        body: JSON.stringify({ banned }),
-      });
-      if (res?.ok) {
-        openedUser.is_banned = banned;
-        users = users.map((u) =>
-          u.user_id === openedUser.user_id ? { ...u, is_banned: banned } : u,
-        );
-        userBanConfirmOpen = false;
-        flash(banned ? at("user_banned", {}, "Пользователь забанен") : at("user_unbanned", {}, "Пользователь разбанен"));
-      } else flash(res?.error || at("error", {}, "Ошибка"));
-    } finally {
-      userActionBusy = false;
-    }
-  }
-
-  async function sendUserMessage() {
-    if (!openedUser || !userMessageDraft.trim()) return;
-    userActionBusy = true;
-    try {
-      const res = await api(`/admin/users/${openedUser.user_id}/message`, {
-        method: "POST",
-        body: JSON.stringify({ text: userMessageDraft }),
-      });
-      if (res?.ok) {
-        flash(at("message_sent", {}, "Сообщение отправлено"));
-        userMessageDraft = "";
-        userMessageConfirmOpen = false;
-      } else flash(res?.error || at("message_send_failed", {}, "Не удалось отправить"));
-    } finally {
-      userActionBusy = false;
-    }
-  }
-
-  function requestSendUserMessage() {
-    if (!openedUser || !userMessageDraft.trim()) return;
-    userMessageConfirmOpen = true;
-  }
-
-  async function previewUserMessage() {
-    if (!openedUser || !userMessageDraft.trim()) return;
-    userActionBusy = true;
-    try {
-      const res = await api(`/admin/users/${openedUser.user_id}/message/preview`, {
-        method: "POST",
-        body: JSON.stringify({ text: userMessageDraft }),
-      });
-      if (res?.ok) flash(at("message_preview_sent", {}, "Превью отправлено вам в Telegram"));
-      else flash(res?.error || at("message_preview_failed", {}, "Не удалось отправить превью"));
-    } finally {
-      userActionBusy = false;
-    }
-  }
-
-  async function extendUser() {
-    if (!openedUser) return;
-    const days = Number(userExtendDays);
-    if (!days || days <= 0) return;
-    userActionBusy = true;
-    try {
-      const res = await api(`/admin/users/${openedUser.user_id}/extend`, {
-        method: "POST",
-        body: JSON.stringify({ days }),
-      });
-      if (res?.ok) {
-        flash(at("subscription_extended", { days }, `Подписка продлена на ${days} дн.`));
-        await openUser(openedUser, { skipPush: true });
-      } else flash(res?.error || at("error", {}, "Ошибка"));
-    } finally {
-      userActionBusy = false;
-    }
-  }
-
-  async function resetTrialUser() {
-    if (!openedUser) return;
-    userActionBusy = true;
-    try {
-      const res = await api(`/admin/users/${openedUser.user_id}/reset-trial`, { method: "POST" });
-      if (res?.ok) flash(at("trial_reset", {}, "Триал сброшен"));
-      else flash(res?.error || at("error", {}, "Ошибка"));
-    } finally {
-      userActionBusy = false;
-    }
-  }
-
-  async function deleteUser() {
-    if (!openedUser) return;
-    userActionBusy = true;
-    try {
-      const res = await api(`/admin/users/${openedUser.user_id}`, { method: "DELETE" });
-      if (res?.ok) {
-        flash(at("user_deleted", {}, "Пользователь удалён"));
-        users = users.filter((u) => u.user_id !== openedUser.user_id);
-        closeUser();
-      } else flash(res?.error || at("error", {}, "Ошибка"));
-    } finally {
-      userActionBusy = false;
-    }
-  }
-
-  // ─── Payments ─────────────────────────────────────────────────
-  async function loadPayments() {
-    paymentsLoading = true;
-    try {
-      const data = await api(`/admin/payments?page=${paymentsPage}&page_size=${PAYMENTS_PAGE_SIZE}`);
-      if (data?.ok) {
-        payments = data.payments || [];
-        paymentsTotal = data.total || 0;
-      }
-    } finally {
-      paymentsLoading = false;
+    } else if ($usersStore.openedUser) {
+      usersStore.closeUser({ skipPush: true });
     }
   }
 
   function exportPayments() {
-    window.location.assign("/api/admin/payments/export.csv");
-  }
-
-  // ─── Promos ───────────────────────────────────────────────────
-  async function loadPromos() {
-    promosLoading = true;
-    try {
-      const data = await api(`/admin/promos?page=${promosPage}&page_size=${PROMOS_PAGE_SIZE}`);
-      if (data?.ok) {
-        promos = data.promos || [];
-        promosTotal = data.total || 0;
-      }
-    } finally {
-      promosLoading = false;
-    }
-  }
-
-  async function createPromo() {
-    if (!promoDraft.code.trim()) return;
-    const res = await api("/admin/promos", {
-      method: "POST",
-      body: JSON.stringify(promoDraft),
-    });
-    if (res?.ok) {
-      flash("Промокод создан");
-      promoCreateOpen = false;
-      promoDraft = { code: "", bonus_days: 7, max_activations: 1, valid_days: 30 };
-      loadPromos();
-    } else flash(res?.error || "Ошибка");
-  }
-
-  async function togglePromo(promo) {
-    const res = await api(`/admin/promos/${promo.id}`, {
-      method: "PATCH",
-      body: JSON.stringify({ is_active: !promo.is_active }),
-    });
-    if (res?.ok) {
-      promos = promos.map((p) => (p.id === promo.id ? res.promo : p));
-    } else flash(res?.error || "Ошибка");
-  }
-
-  async function deletePromo(promo) {
-    const res = await api(`/admin/promos/${promo.id}`, { method: "DELETE" });
-    if (res?.ok) {
-      promos = promos.filter((p) => p.id !== promo.id);
-      flash("Промокод удалён");
-    } else flash(res?.error || "Ошибка");
-  }
-
-  // ─── Broadcast ────────────────────────────────────────────────
-  async function runBroadcast() {
-    if (!broadcastText.trim()) return;
-    broadcastBusy = true;
-    broadcastResult = null;
-    try {
-      const res = await api("/admin/broadcast", {
-        method: "POST",
-        body: JSON.stringify({ target: broadcastTarget, text: broadcastText }),
-      });
-      if (res?.ok) {
-        broadcastResult = res;
-        broadcastText = "";
-        flash(`В очереди: ${res.queued}`);
-      } else flash(res?.error || "Ошибка");
-    } finally {
-      broadcastBusy = false;
-    }
-  }
-
-  // ─── Logs ─────────────────────────────────────────────────────
-  async function loadLogs() {
-    logsLoading = true;
-    try {
-      const params = new URLSearchParams({ page: String(logsPage), page_size: String(LOGS_PAGE_SIZE) });
-      if (logsUserFilter.trim()) params.set("user_id", logsUserFilter.trim());
-      const data = await api(`/admin/logs?${params.toString()}`);
-      if (data?.ok) {
-        logs = data.logs || [];
-        logsTotal = data.total || 0;
-      }
-    } finally {
-      logsLoading = false;
-    }
-  }
-
-  // ─── Ads ──────────────────────────────────────────────────────
-  async function loadAds() {
-    adsLoading = true;
-    try {
-      const data = await api("/admin/ads");
-      if (data?.ok) {
-        ads = data.campaigns || [];
-        adsTotals = data.totals || {};
-      }
-    } finally {
-      adsLoading = false;
-    }
-  }
-
-  async function createAd() {
-    if (!adDraft.source.trim() || !adDraft.start_param.trim()) return;
-    const res = await api("/admin/ads", {
-      method: "POST",
-      body: JSON.stringify(adDraft),
-    });
-    if (res?.ok) {
-      flash("Кампания создана");
-      adCreateOpen = false;
-      adDraft = { source: "", start_param: "", cost: 0 };
-      loadAds();
-    } else flash(res?.error || "Ошибка");
-  }
-
-  async function toggleAd(ad) {
-    const res = await api(`/admin/ads/${ad.id}/toggle`, {
-      method: "POST",
-      body: JSON.stringify({ is_active: !ad.is_active }),
-    });
-    if (res?.ok) {
-      ads = ads.map((c) => (c.id === ad.id ? { ...c, is_active: !ad.is_active } : c));
-    } else flash(res?.error || "Ошибка");
-  }
-
-  async function deleteAd(ad) {
-    const res = await api(`/admin/ads/${ad.id}`, { method: "DELETE" });
-    if (res?.ok) {
-      ads = ads.filter((c) => c.id !== ad.id);
-      flash("Удалено");
-    } else flash(res?.error || "Ошибка");
-  }
-
-  // ─── Tariffs ─────────────────────────────────────────────────
-  const tariffFromDraft = () => tariffFromDraftFn(tariffDraft);
-
-  async function loadTariffs() {
-    tariffsLoading = true;
-    try {
-      loadPanelSquads();
-      const data = await api("/admin/tariffs");
-      if (data?.ok) {
-        tariffsCatalog = cloneCatalog(data.catalog);
-        tariffsPath = data.path || "";
-      } else {
-        flash(data?.message || data?.error || "Не удалось загрузить тарифы");
-      }
-    } finally {
-      tariffsLoading = false;
-    }
-  }
-
-  async function loadPanelSquads() {
-    if (panelSquadsLoading) return;
-    panelSquadsLoading = true;
-    try {
-      const data = await api("/admin/panel/internal-squads");
-      if (data?.ok) panelSquads = data.squads || [];
-    } catch (e) {
-      panelSquads = [];
-    } finally {
-      panelSquadsLoading = false;
-    }
-  }
-
-  function squadLabel(uuid) {
-    const squad = panelSquads.find((item) => item.uuid === uuid);
-    return squad ? `${squad.name} · ${uuid.slice(0, 8)}…` : uuid;
-  }
-
-  function addSquadToDraft(field, uuid) {
-    if (!uuid) return;
-    const current = normalizeUuidList(tariffDraft[field]);
-    if (current.includes(uuid)) return;
-    tariffDraft = { ...tariffDraft, [field]: [...current, uuid] };
-  }
-
-  function removeSquadFromDraft(field, uuid) {
-    tariffDraft = {
-      ...tariffDraft,
-      [field]: normalizeUuidList(tariffDraft[field]).filter((item) => item !== uuid),
-    };
-  }
-
-  async function persistTariffs(nextCatalog, successText) {
-    tariffsSaving = true;
-    try {
-      const res = await api("/admin/tariffs", {
-        method: "PUT",
-        body: JSON.stringify({ catalog: nextCatalog }),
-      });
-      if (res?.ok) {
-        tariffsCatalog = cloneCatalog(res.catalog);
-        tariffsPath = res.path || tariffsPath;
-        await onTariffsSaved(res.catalog);
-        flash(successText || "Тарифы сохранены");
-        tariffEditorOpen = false;
-        tariffDeleteOpen = false;
-        tariffDeleteTarget = null;
-      } else {
-        flash(res?.message || res?.error || "Ошибка сохранения тарифов");
-      }
-    } finally {
-      tariffsSaving = false;
-    }
-  }
-
-  function openCreateTariff() {
-    tariffEditingKey = "";
-    tariffDraft = emptyTariffDraft();
-    tariffEditorTab = "general";
-    selectedBaseSquad = "";
-    selectedPremiumSquad = "";
-    tariffEditorOpen = true;
-  }
-
-  function openEditTariff(tariff) {
-    tariffEditingKey = tariff.key;
-    tariffDraft = draftFromTariff(tariff);
-    tariffEditorTab = "general";
-    selectedBaseSquad = "";
-    selectedPremiumSquad = "";
-    tariffEditorOpen = true;
-  }
-
-  async function saveTariffDraft() {
-    const tariff = tariffFromDraft();
-    if (!tariff.key) {
-      flash("Укажите ключ тарифа");
-      return;
-    }
-    const existing = (tariffsCatalog.tariffs || []).find((item) => item.key === tariff.key && item.key !== tariffEditingKey);
-    if (existing) {
-      flash("Тариф с таким ключом уже есть");
-      return;
-    }
-    const current = tariffsCatalog.tariffs || [];
-    const tariffs = tariffEditingKey
-      ? current.map((item) => (item.key === tariffEditingKey ? tariff : item))
-      : [...current, tariff];
-    const enabledKeys = tariffs.filter((item) => item.enabled !== false).map((item) => item.key);
-    if (!enabledKeys.length) {
-      flash("Должен быть хотя бы один включённый тариф");
-      return;
-    }
-    const currentDefault = tariffsCatalog.default_tariff === tariffEditingKey ? tariff.key : tariffsCatalog.default_tariff;
-    const defaultTariff = enabledKeys.includes(currentDefault)
-      ? currentDefault
-      : enabledKeys[0];
-    await persistTariffs({ ...cloneCatalog(tariffsCatalog), default_tariff: defaultTariff, tariffs }, "Тариф сохранён");
-  }
-
-  async function toggleTariffEnabled(tariff) {
-    const tariffs = (tariffsCatalog.tariffs || []).map((item) =>
-      item.key === tariff.key ? { ...item, enabled: item.enabled === false } : item,
-    );
-    const enabledKeys = tariffs.filter((item) => item.enabled !== false).map((item) => item.key);
-    if (!enabledKeys.length) {
-      flash("Должен остаться хотя бы один включённый тариф");
-      return;
-    }
-    const defaultTariff = enabledKeys.includes(tariffsCatalog.default_tariff) ? tariffsCatalog.default_tariff : enabledKeys[0];
-    await persistTariffs({ ...cloneCatalog(tariffsCatalog), default_tariff: defaultTariff, tariffs }, "Статус тарифа обновлён");
-  }
-
-  async function setDefaultTariff(key) {
-    if (!key || key === tariffsCatalog.default_tariff) return;
-    await persistTariffs({ ...cloneCatalog(tariffsCatalog), default_tariff: key }, "Тариф по умолчанию обновлён");
-  }
-
-  async function deleteTariff() {
-    if (!tariffDeleteTarget) return;
-    const tariffs = (tariffsCatalog.tariffs || []).filter((item) => item.key !== tariffDeleteTarget.key);
-    const enabledKeys = tariffs.filter((item) => item.enabled !== false).map((item) => item.key);
-    if (!enabledKeys.length) {
-      flash("Нельзя удалить последний включённый тариф");
-      return;
-    }
-    const defaultTariff = enabledKeys.includes(tariffsCatalog.default_tariff) ? tariffsCatalog.default_tariff : enabledKeys[0];
-    await persistTariffs({ ...cloneCatalog(tariffsCatalog), default_tariff: defaultTariff, tariffs }, "Тариф удалён");
-  }
-
-  function addDraftRow(field, row) {
-    tariffDraft = { ...tariffDraft, [field]: [...(tariffDraft[field] || []), row] };
-  }
-
-  function removeDraftRow(field, index) {
-    tariffDraft = {
-      ...tariffDraft,
-      [field]: (tariffDraft[field] || []).filter((_, idx) => idx !== index),
-    };
-  }
-
-  // ─── Settings ─────────────────────────────────────────────────
-  async function loadSettings() {
-    settingsLoading = true;
-    settingsDirty = {};
-    try {
-      const data = await api("/admin/settings");
-      if (data?.ok) {
-        settingsSections = data.sections || [];
-        // Expand the first section on phones; expand all on desktop.
-        const ids = settingsSections.map((s) => s.id);
-        settingsOpenSections = isCompact ? ids.slice(0, 1) : ids.slice();
-      }
-    } finally {
-      settingsLoading = false;
-    }
-  }
-
-  function toggleAllSections() {
-    if (settingsOpenSections.length === settingsSections.length) {
-      settingsOpenSections = [];
-    } else {
-      settingsOpenSections = settingsSections.map((s) => s.id);
-    }
-  }
-
-  function markDirty(key, value, deleted = false) {
-    settingsDirty = { ...settingsDirty, [key]: { value, deleted } };
-  }
-
-  function clearDirty(key) {
-    const next = { ...settingsDirty };
-    delete next[key];
-    settingsDirty = next;
-  }
-
-  function valueFor(field) {
-    if (settingsDirty[field.key]?.deleted) return "";
-    if (Object.prototype.hasOwnProperty.call(settingsDirty, field.key)) {
-      return settingsDirty[field.key].value;
-    }
-    return field.value ?? "";
-  }
-
-  function isOverridden(field) {
-    return Boolean(field.overridden) && !settingsDirty[field.key]?.deleted;
-  }
-
-  let revealedSecrets = new Set();
-  function isSecretRevealed(key) {
-    return revealedSecrets.has(key);
-  }
-  function toggleSecretReveal(key) {
-    const next = new Set(revealedSecrets);
-    if (next.has(key)) next.delete(key);
-    else next.add(key);
-    revealedSecrets = next;
-  }
-
-  function groupSectionFields(section) {
-    const groups = new Map();
-    for (const field of section.fields || []) {
-      const key = field.subsection || "_root";
-      if (!groups.has(key)) groups.set(key, []);
-      groups.get(key).push(field);
-    }
-    return Array.from(groups.entries()).map(([id, fields]) => ({
-      id,
-      label: id === "_root" ? null : id,
-      fields,
-    }));
-  }
-
-  function resetField(field) {
-    if (field.overridden) {
-      markDirty(field.key, "", true);
-    } else {
-      clearDirty(field.key);
-    }
-  }
-
-  async function saveSettings() {
-    if (!Object.keys(settingsDirty).length) return;
-    settingsSaving = true;
-    try {
-      const updates = {};
-      const deletes = [];
-      for (const [key, change] of Object.entries(settingsDirty)) {
-        if (change.deleted) deletes.push(key);
-        else updates[key] = change.value;
-      }
-      const res = await api("/admin/settings", {
-        method: "PATCH",
-        body: JSON.stringify({ updates, deletes }),
-      });
-      if (res?.ok) {
-        flash("Настройки сохранены");
-        settingsDirty = {};
-        await onSettingsSaved({ updates, deletes });
-        await loadSettings();
-      } else if (res?.errors) {
-        const summary = Object.entries(res.errors).map(([k, v]) => `${k}: ${v}`).join("; ");
-        flash(`Ошибка: ${summary}`);
-      } else {
-        flash(res?.error || "Ошибка");
-      }
-    } finally {
-      settingsSaving = false;
-    }
-  }
-
-  function tariffName(tariff) {
-    return tariff?.names?.ru || tariff?.names?.en || tariff?.key || "—";
-  }
-
-  function tariffPriceSummary(tariff) {
-    if (tariff.billing_model === "traffic") {
-      const rub = tariff.traffic_packages?.rub || [];
-      const first = rub[0];
-      return first ? `${first.gb} GB за ${fmtMoney(first.price, "RUB")}` : "Пакеты трафика";
-    }
-    const months = [...(tariff.enabled_periods || [])].sort((a, b) => a - b);
-    return months
-      .map((month) => {
-        const rub = tariff.prices_rub?.[String(month)];
-        const stars = tariff.prices_stars?.[String(month)];
-        if (rub) return `${month} мес. ${fmtMoney(rub, "RUB")}`;
-        if (stars) return `${month} мес. ${stars} ⭐`;
-        return `${month} мес.`;
-      })
-      .join(" · ");
-  }
-
-  function packageSummary(packages, valueKey, unit) {
-    const rub = packages?.rub || [];
-    const stars = packages?.stars || [];
-    if (!rub.length && !stars.length) return "—";
-    const first = [...rub, ...stars][0];
-    const total = rub.length + stars.length;
-    return `${first[valueKey]} ${unit}, всего ${total}`;
-  }
-
-  const _gravatarCache = createGravatarCache(() => {
-    users = users;
-    openedUser = openedUser;
-  });
-  function userGravatarUrl(user) {
-    return _gravatarCache.gravatarUrl(user?.email);
+    if (typeof window === "undefined") return;
+    window.open("/api/admin/payments/export.csv", "_blank", "noopener");
   }
 
   function resolvedAvatarUrl(user) {
-    return userAvatarUrl(user) || (!user?.telegram_id && user?.email ? userGravatarUrl(user) : "");
+    return userAvatarUrl(user) || (!user?.telegram_id && user?.email ? gravatarCache.gravatarUrl(user.email) : "");
   }
 
   function panelStatusBadge(user) {
     const status = String(user?.panel_status || "").toLowerCase();
-    if (user?.is_banned) return { label: "Бан", variant: "danger" };
+    if (user?.is_banned) return { label: at("status_banned", {}, "Бан"), variant: "danger" };
     switch (status) {
       case "active":
-        return { label: "Active", variant: "success" };
+        return { label: at("status_active", {}, "Active"), variant: "success" };
       case "expired":
         return {
           label: user?.panel_status_expired_at
             ? at("expired_badge", { date: fmtDateShort(user.panel_status_expired_at) }, `Expired ${fmtDateShort(user.panel_status_expired_at)}`)
-            : "Expired",
+            : at("status_expired", {}, "Expired"),
           variant: "warning",
         };
       case "limited":
-        return { label: "Limited", variant: "warning" };
+        return { label: at("status_limited", {}, "Limited"), variant: "warning" };
       case "disabled":
-        return { label: "Disabled", variant: "muted" };
+        return { label: at("status_disabled", {}, "Disabled"), variant: "muted" };
       case "bot_only":
-        return { label: "Только бот", variant: "muted" };
+        return { label: at("status_bot_only", {}, "Только бот"), variant: "muted" };
       default:
         return { label: status || "—", variant: "muted" };
     }
   }
 
-  function sectionTitle(id) {
-    const map = {
-      general: at("settings_section_general", {}, "Общие"),
-      appearance: at("settings_section_appearance", {}, "Внешний вид"),
-      pricing: at("settings_section_pricing", {}, "Тарифы и цены"),
-      payments: at("settings_section_payments", {}, "Платёжные системы"),
-      trial: at("settings_section_trial", {}, "Триал"),
-      referral: at("settings_section_referral", {}, "Реферальная программа"),
-      notifications: at("settings_section_notifications", {}, "Уведомления"),
-      devices: at("settings_section_devices", {}, "Устройства"),
-    };
-    return map[id] || id;
-  }
-
-  $: dirtyCount = Object.keys(settingsDirty).length;
-  $: meta = SECTION_META[active] || { title: active, subtitle: "" };
-  $: currentLanguageOption = languageOptions.find((option) => option.value === currentLang) || languageOptions[0];
-  $: usersHasMore = users.length === USERS_PAGE_SIZE;
-  $: paymentsHasMore = payments.length === PAYMENTS_PAGE_SIZE;
-  $: logsHasMore = logs.length === LOGS_PAGE_SIZE;
-  $: enabledTariffs = (tariffsCatalog.tariffs || []).filter((tariff) => tariff.enabled !== false);
-  $: disabledTariffs = Math.max(0, (tariffsCatalog.tariffs || []).length - enabledTariffs.length);
-  $: settingsAllOpen =
-    settingsSections.length > 0 && settingsOpenSections.length === settingsSections.length;
-
-  let _compactMql = null;
-  function _onCompactChange(event) {
-    const next = Boolean(event?.matches);
-    if (next === isCompact) return;
-    isCompact = next;
-    if (settingsSections.length) {
-      const ids = settingsSections.map((s) => s.id);
-      settingsOpenSections = isCompact ? ids.slice(0, 1) : ids.slice();
-    }
+  let compactMql = null;
+  function onCompactChange(event) {
+    isCompact = Boolean(event?.matches);
   }
 
   onMount(() => {
     if (typeof window !== "undefined" && typeof window.matchMedia === "function") {
-      _compactMql = window.matchMedia("(max-width: 720px)");
-      isCompact = _compactMql.matches;
-      if (_compactMql.addEventListener) _compactMql.addEventListener("change", _onCompactChange);
-      else if (_compactMql.addListener) _compactMql.addListener(_onCompactChange);
+      compactMql = window.matchMedia("(max-width: 720px)");
+      isCompact = compactMql.matches;
+      if (compactMql.addEventListener) compactMql.addEventListener("change", onCompactChange);
+      else if (compactMql.addListener) compactMql.addListener(onCompactChange);
     }
     if (typeof window !== "undefined") {
-      window.addEventListener("popstate", _onPopState);
-    }
-    loadActive();
-    if (active === "users" && initialUserId) {
-      openUser(initialUserId, { skipPush: true });
+      window.addEventListener("popstate", onPopState);
     }
     return () => {
-      if (_compactMql) {
-        if (_compactMql.removeEventListener) _compactMql.removeEventListener("change", _onCompactChange);
-        else if (_compactMql.removeListener) _compactMql.removeListener(_onCompactChange);
-      }
-      if (typeof window !== "undefined") {
-        window.removeEventListener("popstate", _onPopState);
+      if (compactMql) {
+        if (compactMql.removeEventListener) compactMql.removeEventListener("change", onCompactChange);
+        else if (compactMql.removeListener) compactMql.removeListener(onCompactChange);
       }
+      if (typeof window !== "undefined") window.removeEventListener("popstate", onPopState);
     };
   });
-</script>
 
-{#snippet renderField(field)}
-  {@const revealed = isSecretRevealed(field.key)}
-  <div class="admin-setting" class:is-overridden={isOverridden(field)}>
-    <div class="admin-setting-meta">
-      <strong>
-        {field.label}
-        {#if field.secret}
-          <span class="admin-badge admin-badge-warning">Secret</span>
-        {/if}
-        {#if isOverridden(field)}
-          <span class="admin-badge admin-badge-success">Override</span>
-        {/if}
-      </strong>
-      <code>{field.key}</code>
-      {#if field.description}
-        <small>{field.description}</small>
-      {/if}
-    </div>
-    <div class="admin-setting-control">
-      {#if field.type === "bool"}
-        <div class="admin-setting-switch">
-          <Switch.Root
-            checked={Boolean(valueFor(field))}
-            onCheckedChange={(checked) => markDirty(field.key, checked)}
-            class="admin-switch-root"
-          >
-            <Switch.Thumb class="admin-switch-thumb" />
-          </Switch.Root>
-          <span>{Boolean(valueFor(field)) ? "Включено" : "Выключено"}</span>
-        </div>
-      {:else if field.type === "color"}
-        <input
-          class="admin-color"
-          type="color"
-          value={valueFor(field) || "#00fe7a"}
-          on:input={(e) => markDirty(field.key, e.currentTarget.value)}
-        />
-        <input
-          class="input"
-          type="text"
-          value={valueFor(field) || ""}
-          on:input={(e) => markDirty(field.key, e.currentTarget.value)}
-        />
-      {:else if field.type === "int" || field.type === "float"}
-        <input
-          class="input"
-          type="number"
-          step={field.type === "float" ? "0.1" : "1"}
-          placeholder={field.placeholder}
-          value={valueFor(field) ?? ""}
-          on:input={(e) => markDirty(field.key, e.currentTarget.value)}
-        />
-      {:else if field.secret}
-        <input
-          class="input"
-          type={revealed ? "text" : "password"}
-          placeholder={field.placeholder || "••••••••"}
-          autocomplete="off"
-          value={valueFor(field) ?? ""}
-          on:input={(e) => markDirty(field.key, e.currentTarget.value)}
-        />
-        <button
-          type="button"
-          class="admin-btn admin-btn-sm admin-btn-ghost"
-          aria-label={revealed ? "Скрыть" : "Показать"}
-          on:click={() => toggleSecretReveal(field.key)}
-        >
-          {#if revealed}<EyeOff size={13} />{:else}<Eye size={13} />{/if}
-        </button>
-      {:else}
-        <input
-          class="input"
-          type="text"
-          placeholder={field.placeholder}
-          value={valueFor(field) ?? ""}
-          on:input={(e) => markDirty(field.key, e.currentTarget.value)}
-        />
-      {/if}
-      {#if isOverridden(field) || settingsDirty[field.key]}
-        <button type="button" class="admin-btn admin-btn-sm admin-btn-ghost" on:click={() => resetField(field)}>
-          <X size={12} /> Сбросить
-        </button>
-      {/if}
-    </div>
-  </div>
-{/snippet}
+  $: if (active === "users" && initialUserId && (!$usersStore.openedUser || $usersStore.openedUser.user_id !== initialUserId)) {
+    usersStore.openUser(initialUserId, { skipPush: true });
+  }
+</script>
 
 <div class="admin-screen-wrap" class:is-sidebar-open={sidebarOpen}>
   {#if sidebarOpen}
-    <button
-      type="button"
-      class="admin-sidebar-backdrop"
-      aria-label={at("close_menu", {}, "Закрыть меню")}
-      on:click={() => (sidebarOpen = false)}
-    ></button>
+    <button type="button" class="admin-sidebar-backdrop" aria-label={at("close_menu", {}, "Закрыть меню")} on:click={() => (sidebarOpen = false)}></button>
   {/if}
 
   <aside class="admin-sidebar" aria-label={at("sidebar_navigation", {}, "Навигация админки")}>
@@ -1220,12 +288,7 @@
       <div class="admin-sidebar-section-label">{group.label}</div>
       <nav class="admin-nav" aria-label={group.label}>
         {#each group.items as item}
-          <button
-            type="button"
-            class="admin-nav-item"
-            class:active={active === item.id}
-            on:click={() => setActive(item.id)}
-          >
+          <button type="button" class="admin-nav-item" class:active={active === item.id} on:click={() => setActive(item.id)}>
             <svelte:component this={item.icon} size={16} />
             <span>{item.label}</span>
             <span></span>
@@ -1238,13 +301,7 @@
       {#if languageOptions.length}
         <div class="admin-language-switch">
           <Globe2 size={16} />
-          <Select.Root
-            type="single"
-            value={currentLang}
-            items={languageOptions}
-            disabled={languageBusy}
-            onValueChange={onLanguageChange}
-          >
+          <Select.Root type="single" value={currentLang} items={languageOptions} disabled={languageBusy} onValueChange={onLanguageChange}>
             <Select.Trigger class="admin-language-trigger" aria-label={t("wa_settings_language", {}, at("language", {}, "Язык"))}>
               <span>
                 <strong>{t("wa_settings_language", {}, at("language", {}, "Язык"))}</strong>
@@ -1271,13 +328,7 @@
           </Select.Root>
         </div>
       {/if}
-      <a
-        class="admin-version-link"
-        href={appRepositoryUrl}
-        target="_blank"
-        rel="noopener noreferrer"
-        title="GitHub"
-      >
+      <a class="admin-version-link" href={appRepositoryUrl} target="_blank" rel="noopener noreferrer" title="GitHub">
         <span>remnawave-minishop</span>
         <span>{appVersion || "dev+local"}</span>
       </a>
@@ -1287,12 +338,7 @@
   <section class="admin-content">
     <header class="admin-header">
       <div style="display:flex; align-items:center; gap:12px; min-width:0;">
-        <button
-          type="button"
-          class="admin-mobile-toggle"
-          on:click={() => (sidebarOpen = !sidebarOpen)}
-          aria-label={at("menu", {}, "Меню")}
-        >
+        <button type="button" class="admin-mobile-toggle" on:click={() => (sidebarOpen = !sidebarOpen)} aria-label={at("menu", {}, "Меню")}>
           <Menu size={18} />
         </button>
         <div class="admin-header-title">
@@ -1302,8 +348,8 @@
       </div>
       <div class="admin-header-actions">
         {#if active === "stats"}
-          <button type="button" class="admin-btn" on:click={triggerSync} disabled={syncBusy}>
-            <RefreshCw size={14} /> {syncBusy ? "Синхронизация..." : "Синхронизировать"}
+          <button type="button" class="admin-btn" on:click={statsStore.triggerSync} disabled={syncBusy}>
+            <RefreshCw size={14} /> {syncBusy ? at("btn_syncing", {}, "Синхронизация...") : at("btn_sync", {}, "Синхронизировать")}
           </button>
         {/if}
         {#if active === "payments"}
@@ -1312,26 +358,26 @@
           </button>
         {/if}
         {#if active === "promos"}
-          <button type="button" class="admin-btn admin-btn-primary" on:click={() => (promoCreateOpen = true)}>
-            <Plus size={14} /> Создать
+          <button type="button" class="admin-btn admin-btn-primary" on:click={() => promosStore.setCreateOpen(true)}>
+            <Plus size={14} /> {at("btn_create", {}, "Создать")}
           </button>
         {/if}
         {#if active === "ads"}
-          <button type="button" class="admin-btn admin-btn-primary" on:click={() => (adCreateOpen = true)}>
-            <Plus size={14} /> Кампания
+          <button type="button" class="admin-btn admin-btn-primary" on:click={() => adsStore.setCreateOpen(true)}>
+            <Plus size={14} /> {at("btn_campaign", {}, "Кампания")}
           </button>
         {/if}
         {#if active === "tariffs"}
-          <button type="button" class="admin-btn admin-btn-primary" on:click={openCreateTariff}>
-            <Plus size={14} /> Тариф
+          <button type="button" class="admin-btn admin-btn-primary" on:click={tariffsStore.openCreateTariff}>
+            <Plus size={14} /> {at("btn_tariff", {}, "Тариф")}
           </button>
         {/if}
         {#if active === "settings"}
           {#if dirtyCount}
-            <span class="admin-badge admin-badge-warning">Изменений: {dirtyCount}</span>
+            <span class="admin-badge admin-badge-warning">{at("settings_dirty_count", { count: dirtyCount }, "Изменений: " + dirtyCount)}</span>
           {/if}
-          <button type="button" class="admin-btn admin-btn-primary" on:click={saveSettings} disabled={!dirtyCount || settingsSaving}>
-            <Save size={14} /> {settingsSaving ? "Сохранение..." : "Сохранить"}
+          <button type="button" class="admin-btn admin-btn-primary" on:click={() => settingsStore.saveSettings(onSettingsSaved)} disabled={!dirtyCount || settingsSaving}>
+            <Save size={14} /> {settingsSaving ? at("btn_saving", {}, "Сохранение...") : at("btn_save", {}, "Сохранить")}
           </button>
         {/if}
       </div>
@@ -1339,1181 +385,66 @@
 
     <main class="admin-main">
       {#if active === "stats"}
-        <StatsSection
-          {fmtDate}
-          {fmtMoney}
-          {paymentStatusVariant}
-          {stats}
-          {statsError}
-          {statsLoading}
-        />
+        <StatsSection {at} {fmtDate} {fmtMoney} {paymentStatusVariant} />
       {/if}
 
       {#if active === "users"}
         <UsersSection
-          bind:usersFilter
-          bind:usersPage
-          bind:usersPanelStatus
-          bind:usersQuery
-          bind:usersSort
-          {USERS_FILTER_OPTIONS}
-          {USERS_PAGE_SIZE}
-          {USERS_PANEL_STATUS_OPTIONS}
-          {USERS_SORT_OPTIONS}
           {at}
           {fmtDateShort}
-          {loadUsers}
-          {openUser}
           {optionLabel}
           {panelStatusBadge}
           {resolvedAvatarUrl}
           {userDisplayName}
           {userInitials}
           {userSecondaryName}
-          {users}
-          {usersHasMore}
-          {usersLoading}
-          {usersTotal}
         />
       {/if}
 
       {#if active === "payments"}
-        <PaymentsSection
-          bind:paymentsPage
-          {at}
-          {fmtDate}
-          {fmtMoney}
-          {loadPayments}
-          {paymentStatusVariant}
-          {payments}
-          {paymentsHasMore}
-          {paymentsLoading}
-          {paymentsTotal}
-        />
+        <PaymentsSection {at} {fmtDate} {fmtMoney} {paymentStatusVariant} />
       {/if}
 
       {#if active === "promos"}
-        <div class="admin-table-wrap">
-          {#if promosLoading}
-            <table class="admin-table admin-table-skeleton" aria-hidden="true">
-              <thead>
-                <tr>
-                  <th>Код</th><th>Бонус</th><th>Активаций</th><th>Действует до</th><th>Статус</th><th class="admin-cell-actions">Действия</th>
-                </tr>
-              </thead>
-              <tbody>
-                {#each Array(6) as _, i (i)}
-                  <tr>
-                    <td><span class="admin-skeleton admin-skeleton-line admin-skeleton-line-short"></span></td>
-                    <td><span class="admin-skeleton admin-skeleton-line admin-skeleton-line-tiny"></span></td>
-                    <td><span class="admin-skeleton admin-skeleton-line admin-skeleton-line-tiny"></span></td>
-                    <td><span class="admin-skeleton admin-skeleton-line admin-skeleton-line-short"></span></td>
-                    <td><span class="admin-skeleton admin-skeleton-badge"></span></td>
-                    <td><span class="admin-skeleton admin-skeleton-line"></span></td>
-                  </tr>
-                {/each}
-              </tbody>
-            </table>
-          {:else if !promos.length}
-            <div class="admin-card-body"><span class="admin-muted">Промокодов нет</span></div>
-          {:else}
-            <table class="admin-table">
-              <thead>
-                <tr>
-                  <th>Код</th>
-                  <th>Бонус</th>
-                  <th>Активаций</th>
-                  <th>Действует до</th>
-                  <th>Статус</th>
-                  <th class="admin-cell-actions">Действия</th>
-                </tr>
-              </thead>
-              <tbody>
-                {#each promos as p}
-                  <tr>
-                    <td class="admin-cell-mono" data-label="Код">{p.code}</td>
-                    <td data-label="Бонус">+{p.bonus_days} дн.</td>
-                    <td data-label="Активаций">{p.current_activations}/{p.max_activations}</td>
-                    <td data-label="Действует до">{p.valid_until ? fmtDateShort(p.valid_until) : "∞"}</td>
-                    <td data-label="Статус">
-                      {#if p.is_active}
-                        <span class="admin-badge admin-badge-success">Активен</span>
-                      {:else}
-                        <span class="admin-badge admin-badge-muted">Выключен</span>
-                      {/if}
-                    </td>
-                    <td class="admin-cell-actions" data-label="Действия">
-                      <button type="button" class="admin-btn admin-btn-sm" on:click={() => togglePromo(p)}>
-                        {p.is_active ? "Выкл" : "Вкл"}
-                      </button>
-                      <button type="button" class="admin-btn admin-btn-sm admin-btn-danger" on:click={() => deletePromo(p)}>
-                        <Trash2 size={13} />
-                      </button>
-                    </td>
-                  </tr>
-                {/each}
-              </tbody>
-            </table>
-          {/if}
-        </div>
-      {/if}
-
-      {#if active === "broadcast"}
-        <div class="admin-card">
-          <header class="admin-card-head">
-            <h3>Рассылка</h3>
-            <small>Доставка через очередь сообщений</small>
-          </header>
-          <div class="admin-card-body">
-            <div class="admin-form">
-              <Label.Root class="admin-field-label">
-                <span>Аудитория</span>
-                <Select.Root type="single" value={broadcastTarget} onValueChange={(value) => (broadcastTarget = value)}>
-                  <Select.Trigger class="admin-select-trigger" aria-label="Аудитория">
-                    <span>{optionLabel(BROADCAST_TARGET_OPTIONS, broadcastTarget)}</span>
-                    <ChevronDown size={14} class="admin-select-icon" />
-                  </Select.Trigger>
-                  <Select.Portal>
-                    <Select.Content class="admin-select-content" sideOffset={6}>
-                      {#each BROADCAST_TARGET_OPTIONS as opt}
-                        <Select.Item value={opt.value} class="admin-select-item">
-                          <span>{opt.label}</span>
-                          <Check size={14} class="admin-select-item-check" />
-                        </Select.Item>
-                      {/each}
-                    </Select.Content>
-                  </Select.Portal>
-                </Select.Root>
-              </Label.Root>
-              <Label.Root class="admin-field-label">
-                <span>Текст сообщения</span>
-                <small>Поддерживается HTML-разметка Telegram</small>
-                <textarea class="admin-textarea" rows="6" bind:value={broadcastText}></textarea>
-              </Label.Root>
-              <div style="display:flex; gap:8px; align-items:center;">
-                <button type="button" class="admin-btn admin-btn-primary" on:click={runBroadcast} disabled={broadcastBusy || !broadcastText.trim()}>
-                  <Send size={14} /> {broadcastBusy ? "Отправка..." : "Поставить в очередь"}
-                </button>
-                {#if broadcastResult}
-                  <span class="admin-muted">В очереди: {broadcastResult.queued} · Неудач: {broadcastResult.failed}</span>
-                {/if}
-              </div>
-            </div>
-          </div>
-        </div>
-      {/if}
-
-      {#if active === "logs"}
-        <div class="admin-toolbar admin-toolbar-card">
-          <div class="admin-toolbar-search admin-toolbar-search-actions">
-            <input
-              type="search"
-              class="input"
-              placeholder={at("logs_user_filter_placeholder", {}, "Фильтр по ID пользователя")}
-              bind:value={logsUserFilter}
-              on:keydown={(e) => e.key === "Enter" && ((logsPage = 0), loadLogs())}
-            />
-            <button type="button" class="admin-btn admin-btn-primary" on:click={() => { logsPage = 0; loadLogs(); }}>{at("apply", {}, "Применить")}</button>
-            <button type="button" class="admin-btn admin-btn-ghost" on:click={() => { logsUserFilter = ""; logsPage = 0; loadLogs(); }}>{at("reset", {}, "Сбросить")}</button>
-          </div>
-          <div class="admin-toolbar-summary">
-            <span class="admin-toolbar-field-label">{at("total", {}, "Всего")}</span>
-            <strong>{logsTotal}</strong>
-          </div>
-        </div>
-
-        <div class="admin-table-wrap">
-          {#if logsLoading}
-            <table class="admin-table admin-table-skeleton" aria-hidden="true">
-              <thead>
-                <tr>
-                  <th>{at("date", {}, "Дата")}</th><th>{at("event", {}, "Событие")}</th><th>User</th><th>Target</th><th>{at("content", {}, "Контент")}</th>
-                </tr>
-              </thead>
-              <tbody>
-                {#each Array(10) as _, i (i)}
-                  <tr>
-                    <td><span class="admin-skeleton admin-skeleton-line admin-skeleton-line-short"></span></td>
-                    <td><span class="admin-skeleton admin-skeleton-line admin-skeleton-line-short"></span></td>
-                    <td><span class="admin-skeleton admin-skeleton-line admin-skeleton-line-tiny"></span></td>
-                    <td><span class="admin-skeleton admin-skeleton-line admin-skeleton-line-tiny"></span></td>
-                    <td><span class="admin-skeleton admin-skeleton-line"></span></td>
-                  </tr>
-                {/each}
-              </tbody>
-            </table>
-          {:else if !logs.length}
-            <div class="admin-card-body"><span class="admin-muted">{at("logs_empty", {}, "Записей нет")}</span></div>
-          {:else}
-            <table class="admin-table">
-              <thead>
-                <tr>
-                  <th>{at("date", {}, "Дата")}</th>
-                  <th>{at("event", {}, "Событие")}</th>
-                  <th>User</th>
-                  <th>Target</th>
-                  <th>{at("content", {}, "Контент")}</th>
-                </tr>
-              </thead>
-              <tbody>
-                {#each logs as entry}
-                  <tr>
-                    <td data-label={at("date", {}, "Дата")}>{fmtDate(entry.timestamp)}</td>
-                    <td class="admin-cell-mono" data-label={at("event", {}, "Событие")}>{entry.event_type}</td>
-                    <td class="admin-cell-mono" data-label="User">{entry.user_id || "—"}</td>
-                    <td class="admin-cell-mono" data-label="Target">{entry.target_user_id || "—"}</td>
-                    <td class="admin-cell-wrap" data-label={at("content", {}, "Контент")}>{entry.content || ""}</td>
-                  </tr>
-                {/each}
-              </tbody>
-            </table>
-          {/if}
-        </div>
-
-        <div class="admin-pagination">
-          <span class="admin-pagination-meta">{at("page_short", {}, "Стр.")} {logsPage + 1}</span>
-          <div class="admin-pagination-buttons">
-            <button type="button" class="admin-btn admin-btn-sm" disabled={logsPage === 0} on:click={() => { logsPage = Math.max(0, logsPage - 1); loadLogs(); }}>
-              <ChevronLeft size={14} /> {at("back", {}, "Назад")}
-            </button>
-            <button type="button" class="admin-btn admin-btn-sm" disabled={!logsHasMore} on:click={() => { logsPage += 1; loadLogs(); }}>
-              {at("next", {}, "Далее")} <ChevronRight size={14} />
-            </button>
-          </div>
-        </div>
+        <PromosSection {at} {fmtDateShort} />
       {/if}
 
       {#if active === "ads"}
-        <div class="admin-table-wrap">
-          {#if adsLoading}
-            <table class="admin-table admin-table-skeleton" aria-hidden="true">
-              <thead>
-                <tr>
-                  <th>ID</th><th>Источник</th><th>Параметр</th><th>Стоимость</th><th>Регистрации</th><th>Конверсии</th><th>Статус</th><th class="admin-cell-actions">Действия</th>
-                </tr>
-              </thead>
-              <tbody>
-                {#each Array(6) as _, i (i)}
-                  <tr>
-                    <td><span class="admin-skeleton admin-skeleton-line admin-skeleton-line-tiny"></span></td>
-                    <td><span class="admin-skeleton admin-skeleton-line admin-skeleton-line-short"></span></td>
-                    <td><span class="admin-skeleton admin-skeleton-line admin-skeleton-line-short"></span></td>
-                    <td><span class="admin-skeleton admin-skeleton-line admin-skeleton-line-tiny"></span></td>
-                    <td><span class="admin-skeleton admin-skeleton-line admin-skeleton-line-tiny"></span></td>
-                    <td><span class="admin-skeleton admin-skeleton-line admin-skeleton-line-tiny"></span></td>
-                    <td><span class="admin-skeleton admin-skeleton-badge"></span></td>
-                    <td><span class="admin-skeleton admin-skeleton-line"></span></td>
-                  </tr>
-                {/each}
-              </tbody>
-            </table>
-          {:else if !ads.length}
-            <div class="admin-card-body"><span class="admin-muted">Кампаний нет</span></div>
-          {:else}
-            <table class="admin-table">
-              <thead>
-                <tr>
-                  <th>ID</th>
-                  <th>Источник</th>
-                  <th>Параметр</th>
-                  <th>Стоимость</th>
-                  <th>Регистрации</th>
-                  <th>Конверсии</th>
-                  <th>Статус</th>
-                  <th class="admin-cell-actions">Действия</th>
-                </tr>
-              </thead>
-              <tbody>
-                {#each ads as ad}
-                  <tr>
-                    <td class="admin-cell-id" data-label="ID">#{ad.id}</td>
-                    <td data-label="Источник">{ad.source}</td>
-                    <td class="admin-cell-mono" data-label="Параметр">{ad.start_param}</td>
-                    <td data-label="Стоимость">{fmtMoney(ad.cost)}</td>
-                    <td data-label="Регистрации">{ad.stats?.registrations ?? 0}</td>
-                    <td data-label="Конверсии">{ad.stats?.conversions ?? 0}</td>
-                    <td data-label="Статус">
-                      {#if ad.is_active}
-                        <span class="admin-badge admin-badge-success">Активна</span>
-                      {:else}
-                        <span class="admin-badge admin-badge-muted">Выключена</span>
-                      {/if}
-                    </td>
-                    <td class="admin-cell-actions" data-label="Действия">
-                      <button type="button" class="admin-btn admin-btn-sm" on:click={() => toggleAd(ad)}>
-                        {ad.is_active ? "Выкл" : "Вкл"}
-                      </button>
-                      <button type="button" class="admin-btn admin-btn-sm admin-btn-danger" on:click={() => deleteAd(ad)}>
-                        <Trash2 size={13} />
-                      </button>
-                    </td>
-                  </tr>
-                {/each}
-              </tbody>
-            </table>
-          {/if}
-        </div>
+        <AdsSection {at} {fmtMoney} />
+      {/if}
+
+      {#if active === "broadcast"}
+        <BroadcastSection {at} {optionLabel} />
+      {/if}
+
+      {#if active === "logs"}
+        <LogsSection {at} {fmtDate} />
       {/if}
 
       {#if active === "tariffs"}
-        <TariffsSection
-          bind:tariffDeleteOpen
-          bind:tariffDeleteTarget
-          {disabledTariffs}
-          {enabledTariffs}
-          {loadTariffs}
-          {openEditTariff}
-          {setDefaultTariff}
-          {tariffName}
-          {tariffPriceSummary}
-          {tariffsCatalog}
-          {tariffsLoading}
-          {tariffsPath}
-          {tariffsSaving}
-          {toggleTariffEnabled}
-        />
+        <TariffsSection {at} {fmtMoney} />
       {/if}
 
       {#if active === "settings"}
-        <SettingsSection
-          bind:settingsOpenSections
-          bind:settingsOpenSubsections
-          {groupSectionFields}
-          {isOverridden}
-          {renderField}
-          {sectionTitle}
-          {settingsAllOpen}
-          {settingsDirty}
-          {settingsLoading}
-          {settingsSections}
-          {toggleAllSections}
-        />
+        <SettingsSection {at} {isCompact} {onSettingsSaved} />
       {/if}
     </main>
   </section>
 </div>
 
-<Dialog
-  open={tariffEditorOpen}
-  title={tariffEditingKey ? "Настройка тарифа" : "Новый тариф"}
-  description={tariffEditingKey || "Каталог будет сохранён в JSON после подтверждения"}
-  closeLabel="Закрыть"
-  onclose={() => (tariffEditorOpen = false)}
-  class="admin-dialog admin-tariff-dialog"
->
-  <Tabs.Root bind:value={tariffEditorTab} class="admin-tabs-root">
-    <Tabs.List class="admin-tabs-list">
-      <Tabs.Trigger value="general" class="admin-tabs-trigger">Основное</Tabs.Trigger>
-      <Tabs.Trigger value="pricing" class="admin-tabs-trigger">Цены</Tabs.Trigger>
-      <Tabs.Trigger value="topup" class="admin-tabs-trigger">Докупки</Tabs.Trigger>
-      <Tabs.Trigger value="premium" class="admin-tabs-trigger">Premium</Tabs.Trigger>
-      <Tabs.Trigger value="hwid" class="admin-tabs-trigger">Устройства</Tabs.Trigger>
-    </Tabs.List>
+<TariffEditorModal {at} />
 
-    <Tabs.Content value="general" class="admin-tabs-content">
-      <div class="admin-form-row admin-form-row-2">
-        <Label.Root class="admin-field-label">
-          <span>Ключ тарифа</span>
-          <small>Латиницей, без пробелов. Используется в платежах и подписках, менять после публикации не рекомендуется</small>
-          <input class="input" type="text" placeholder="standard" bind:value={tariffDraft.key} />
-        </Label.Root>
-
-        <div class="admin-field-label">
-          <span>Модель тарификации</span>
-          <small><b>Период</b> — пользователь покупает фиксированный срок (1/3/12 мес. и т.д.). <b>Трафик</b> — пользователь покупает пакеты гигабайт по фиксированной цене за GB</small>
-          <Select.Root type="single" bind:value={tariffDraft.billing_model}>
-            <Select.Trigger class="admin-select-trigger" aria-label="Модель">
-              <span>{tariffDraft.billing_model === "traffic" ? "Трафик" : "Период"}</span>
-              <ChevronDown size={14} class="admin-select-icon" />
-            </Select.Trigger>
-            <Select.Portal>
-              <Select.Content class="admin-select-content" sideOffset={6}>
-                <Select.Item value="period" class="admin-select-item">
-                  <span>Период</span>
-                  <Check size={14} class="admin-select-item-check" />
-                </Select.Item>
-                <Select.Item value="traffic" class="admin-select-item">
-                  <span>Трафик</span>
-                  <Check size={14} class="admin-select-item-check" />
-                </Select.Item>
-              </Select.Content>
-            </Select.Portal>
-          </Select.Root>
-        </div>
-      </div>
-
-      <div class="admin-action-row admin-action-row-bordered">
-        <Switch.Root
-          checked={tariffDraft.enabled}
-          onCheckedChange={(v) => (tariffDraft.enabled = v)}
-          class="admin-switch-root"
-        >
-          <Switch.Thumb class="admin-switch-thumb" />
-        </Switch.Root>
-        <Label.Root class="admin-action-label">
-          <strong>{tariffDraft.enabled ? "Тариф виден на витрине" : "Тариф скрыт от пользователей"}</strong>
-          <small>Выключенный тариф не показывается в боте/мини-аппе, но активные подписки на нём продолжают работать</small>
-        </Label.Root>
-      </div>
-
-      <div class="admin-form-row admin-form-row-2">
-        <Label.Root class="admin-field-label">
-          <span>Название · RU</span>
-          <input class="input" type="text" placeholder="Стандарт" bind:value={tariffDraft.nameRu} />
-        </Label.Root>
-        <Label.Root class="admin-field-label">
-          <span>Название · EN</span>
-          <input class="input" type="text" placeholder="Standard" bind:value={tariffDraft.nameEn} />
-        </Label.Root>
-      </div>
-
-      <div class="admin-form-row admin-form-row-2">
-        <Label.Root class="admin-field-label">
-          <span>Описание · RU</span>
-          <input class="input" type="text" placeholder="Базовый набор серверов" bind:value={tariffDraft.descriptionRu} />
-        </Label.Root>
-        <Label.Root class="admin-field-label">
-          <span>Описание · EN</span>
-          <input class="input" type="text" placeholder="Base server pool" bind:value={tariffDraft.descriptionEn} />
-        </Label.Root>
-      </div>
-
-      <div class="admin-field-label">
-        <span>Базовые Internal Squads</span>
-        <small>{panelSquadsLoading ? "Загружаю список из панели…" : "Сквады Remnawave, к которым подключается пользователь по этому тарифу. Выберите один или несколько"}</small>
-        <Select.Root
-          type="single"
-          bind:value={selectedBaseSquad}
-          onValueChange={(value) => {
-            addSquadToDraft("squadUuids", value);
-            selectedBaseSquad = "";
-          }}
-        >
-          <Select.Trigger class="admin-select-trigger" aria-label="Добавить основной сквад">
-            <span>Добавить сквад</span>
-            <ChevronDown size={14} class="admin-select-icon" />
-          </Select.Trigger>
-          <Select.Portal>
-            <Select.Content class="admin-select-content" sideOffset={6}>
-              {#each panelSquads as squad}
-                <Select.Item value={squad.uuid} class="admin-select-item">
-                  <span>{squad.name}</span>
-                  <Check size={14} class="admin-select-item-check" />
-                </Select.Item>
-              {/each}
-            </Select.Content>
-          </Select.Portal>
-        </Select.Root>
-        <div class="admin-chip-list">
-          {#each normalizeUuidList(tariffDraft.squadUuids) as uuid}
-            <button type="button" class="admin-chip" on:click={() => removeSquadFromDraft("squadUuids", uuid)}>
-              {squadLabel(uuid)} <X size={12} />
-            </button>
-          {/each}
-        </div>
-      </div>
-
-      <div class="admin-form-row admin-form-row-2">
-        <Label.Root class="admin-field-label">
-          <span>Лимит устройств (HWID)</span>
-          <small>Сколько устройств может одновременно использовать подписку. Пусто — взять значение из .env, <code>0</code> — без ограничений</small>
-          <input class="input" type="number" min="0" placeholder="5" bind:value={tariffDraft.hwid_device_limit} />
-        </Label.Root>
-        {#if tariffDraft.billing_model === "period"}
-          <Label.Root class="admin-field-label">
-            <span>Месячный лимит трафика, GB</span>
-            <small>Сколько GB включено в тариф на каждый месяц. <code>0</code> — безлимитный трафик. Сверху можно докупать пакеты на вкладке «Докупки»</small>
-            <input class="input" type="number" min="0" step="0.1" placeholder="100" bind:value={tariffDraft.monthly_gb} />
-          </Label.Root>
-        {:else}
-          <Label.Root class="admin-field-label">
-            <span>Курс конвертации, ₽ за 1 GB</span>
-            <small>По этому курсу остаток подписки пересчитывается в гигабайты при переходе пользователя с тарифа «Период» на «Трафик»</small>
-            <input class="input" type="number" min="0" step="0.01" placeholder="20" bind:value={tariffDraft.conversion_rate_rub_per_gb} />
-          </Label.Root>
-        {/if}
-      </div>
-    </Tabs.Content>
-
-    <Tabs.Content value="premium" class="admin-tabs-content">
-      <section class="admin-editor-section">
-        <header class="admin-editor-section-head">
-          <div class="admin-editor-section-title">
-            <strong>Premium-доступ и отдельный счётчик трафика</strong>
-            <small>Premium-сквады дают пользователю доступ к более быстрым/премиальным нодам; их трафик считается отдельно от основного, чтобы можно было ограничить или продавать дополнительно</small>
-          </div>
-        </header>
-        <div class="admin-form-row admin-form-row-2">
-          <Label.Root class="admin-field-label">
-            <span>Название premium-раздела, RU</span>
-            <small>Эта строка заменит «Premium-серверы» в кабинете, докупках и карточках лимитов.</small>
-            <input class="input" type="text" placeholder="Premium-серверы" bind:value={tariffDraft.premiumNameRu} />
-          </Label.Root>
-          <Label.Root class="admin-field-label">
-            <span>Название premium-раздела, EN</span>
-            <small>Опционально для английского интерфейса.</small>
-            <input class="input" type="text" placeholder="Premium servers" bind:value={tariffDraft.premiumNameEn} />
-          </Label.Root>
-        </div>
-        <div class="admin-form-row admin-form-row-2">
-          <div class="admin-field-label">
-            <span>Premium Internal Squads</span>
-            <small>Сквады из Remnawave, доступные только владельцам этого тарифа. Трафик считается по их accessible nodes</small>
-            <Select.Root
-              type="single"
-              bind:value={selectedPremiumSquad}
-              onValueChange={(value) => {
-                addSquadToDraft("premiumSquadUuids", value);
-                selectedPremiumSquad = "";
-              }}
-            >
-              <Select.Trigger class="admin-select-trigger" aria-label="Добавить premium-сквад">
-                <span>Добавить premium-сквад</span>
-                <ChevronDown size={14} class="admin-select-icon" />
-              </Select.Trigger>
-              <Select.Portal>
-                <Select.Content class="admin-select-content" sideOffset={6}>
-                  {#each panelSquads as squad}
-                    <Select.Item value={squad.uuid} class="admin-select-item">
-                      <span>{squad.name}</span>
-                      <Check size={14} class="admin-select-item-check" />
-                    </Select.Item>
-                  {/each}
-                </Select.Content>
-              </Select.Portal>
-            </Select.Root>
-            <div class="admin-chip-list">
-              {#each normalizeUuidList(tariffDraft.premiumSquadUuids) as uuid}
-                <button type="button" class="admin-chip" on:click={() => removeSquadFromDraft("premiumSquadUuids", uuid)}>
-                  {squadLabel(uuid)} <X size={12} />
-                </button>
-              {/each}
-            </div>
-          </div>
-          <Label.Root class="admin-field-label">
-            <span>Месячный лимит premium-трафика, GB</span>
-            <small>Сколько GB через premium-сквады включено в тариф каждый месяц. <code>0</code> или пусто — отдельного premium-лимита нет (premium-нодами можно пользоваться без ограничения)</small>
-            <input class="input" type="number" min="0" step="0.1" placeholder="50" bind:value={tariffDraft.premium_monthly_gb} />
-          </Label.Root>
-        </div>
-      </section>
-
-      <section class="admin-editor-section">
-        <header class="admin-editor-section-head">
-          <div class="admin-editor-section-title">
-            <strong>Докупка premium-трафика</strong>
-            <small>Пакеты для расширения месячного premium-лимита, когда пользователь его исчерпал</small>
-          </div>
-          <div class="admin-editor-section-actions">
-            <button type="button" class="admin-btn admin-btn-sm" on:click={() => addDraftRow("premiumTopupRubRows", { gb: 10, price: "" })}><Plus size={12} /> Пакет ₽</button>
-            <button type="button" class="admin-btn admin-btn-sm" on:click={() => addDraftRow("premiumTopupStarsRows", { gb: 10, price: "" })}><Plus size={12} /> Пакет ⭐</button>
-          </div>
-        </header>
-        <div class="admin-package-columns">
-          <div class="admin-row-editor">
-            <span class="admin-row-editor-caption">Оплата рублями</span>
-            {#if tariffDraft.premiumTopupRubRows.length}
-              <div class="admin-row-editor-line admin-row-editor-header">
-                <span>Объём, GB</span>
-                <span>Цена, ₽</span>
-                <span></span>
-              </div>
-            {/if}
-            {#each tariffDraft.premiumTopupRubRows as row, index}
-              <div class="admin-row-editor-line">
-                <input class="input" type="number" min="0.1" step="0.1" placeholder="10" bind:value={row.gb} aria-label="Объём premium-пакета в GB" />
-                <input class="input" type="number" min="0" step="0.01" placeholder="199" bind:value={row.price} aria-label="Цена premium-пакета в рублях" />
-                <button type="button" class="admin-btn admin-btn-sm admin-btn-danger" on:click={() => removeDraftRow("premiumTopupRubRows", index)} aria-label="Удалить"><Trash2 size={13} /></button>
-              </div>
-            {/each}
-          </div>
-          <div class="admin-row-editor">
-            <span class="admin-row-editor-caption">Оплата Telegram Stars</span>
-            {#if tariffDraft.premiumTopupStarsRows.length}
-              <div class="admin-row-editor-line admin-row-editor-header">
-                <span>Объём, GB</span>
-                <span>Цена, ⭐</span>
-                <span></span>
-              </div>
-            {/if}
-            {#each tariffDraft.premiumTopupStarsRows as row, index}
-              <div class="admin-row-editor-line">
-                <input class="input" type="number" min="0.1" step="0.1" placeholder="10" bind:value={row.gb} aria-label="Объём premium-пакета в GB" />
-                <input class="input" type="number" min="0" step="1" placeholder="100" bind:value={row.price} aria-label="Цена premium-пакета в Telegram Stars" />
-                <button type="button" class="admin-btn admin-btn-sm admin-btn-danger" on:click={() => removeDraftRow("premiumTopupStarsRows", index)} aria-label="Удалить"><Trash2 size={13} /></button>
-              </div>
-            {/each}
-          </div>
-        </div>
-      </section>
-    </Tabs.Content>
-
-    <Tabs.Content value="pricing" class="admin-tabs-content">
-      {#if tariffDraft.billing_model === "period"}
-        <section class="admin-editor-section">
-          <header class="admin-editor-section-head">
-            <div class="admin-editor-section-title">
-              <strong>Периоды подписки и цены</strong>
-              <small>Каждая строка — отдельный вариант на витрине: за сколько месяцев пользователь платит и сколько это стоит</small>
-            </div>
-            <button type="button" class="admin-btn admin-btn-sm" on:click={() => addDraftRow("periodRows", { months: 1, rub: "", stars: "" })}>
-              <Plus size={13} /> Период
-            </button>
-          </header>
-          {#if !tariffDraft.periodRows.length}
-            <p class="admin-muted">Добавьте хотя бы один период — без него тариф не появится на витрине.</p>
-          {:else}
-            <div class="admin-row-editor">
-              <div class="admin-row-editor-line admin-row-editor-4 admin-row-editor-header">
-                <span>Срок, мес.</span>
-                <span>Цена, ₽</span>
-                <span>Цена, ⭐ Stars</span>
-                <span></span>
-              </div>
-              {#each tariffDraft.periodRows as row, index}
-                <div class="admin-row-editor-line admin-row-editor-4">
-                  <input class="input" type="number" min="1" placeholder="1" bind:value={row.months} aria-label="Срок (месяцы)" />
-                  <input class="input" type="number" min="0" step="0.01" placeholder="299" bind:value={row.rub} aria-label="Цена в рублях" />
-                  <input class="input" type="number" min="0" step="1" placeholder="150" bind:value={row.stars} aria-label="Цена в Telegram Stars" />
-                  <button type="button" class="admin-btn admin-btn-sm admin-btn-danger" on:click={() => removeDraftRow("periodRows", index)} aria-label="Удалить">
-                    <Trash2 size={13} />
-                  </button>
-                </div>
-              {/each}
-            </div>
-          {/if}
-        </section>
-      {:else}
-        <section class="admin-editor-section">
-          <header class="admin-editor-section-head">
-            <div class="admin-editor-section-title">
-              <strong>Пакеты трафика</strong>
-              <small>Базовая витрина для трафиковой модели. Каждая строка — пакет «N гигабайт за N единиц валюты»</small>
-            </div>
-            <div class="admin-editor-section-actions">
-              <button type="button" class="admin-btn admin-btn-sm" on:click={() => addDraftRow("trafficRubRows", { gb: 10, price: "" })}><Plus size={12} /> Пакет ₽</button>
-              <button type="button" class="admin-btn admin-btn-sm" on:click={() => addDraftRow("trafficStarsRows", { gb: 10, price: "" })}><Plus size={12} /> Пакет ⭐</button>
-            </div>
-          </header>
-          <div class="admin-package-columns">
-            <div class="admin-row-editor">
-              <span class="admin-row-editor-caption">Оплата рублями</span>
-              {#if tariffDraft.trafficRubRows.length}
-                <div class="admin-row-editor-line admin-row-editor-header">
-                  <span>Объём, GB</span>
-                  <span>Цена, ₽</span>
-                  <span></span>
-                </div>
-              {/if}
-              {#each tariffDraft.trafficRubRows as row, index}
-                <div class="admin-row-editor-line">
-                  <input class="input" type="number" min="0.1" step="0.1" placeholder="50" bind:value={row.gb} aria-label="Объём пакета в GB" />
-                  <input class="input" type="number" min="0" step="0.01" placeholder="299" bind:value={row.price} aria-label="Цена пакета в рублях" />
-                  <button type="button" class="admin-btn admin-btn-sm admin-btn-danger" on:click={() => removeDraftRow("trafficRubRows", index)} aria-label="Удалить"><Trash2 size={13} /></button>
-                </div>
-              {/each}
-            </div>
-            <div class="admin-row-editor">
-              <span class="admin-row-editor-caption">Оплата Telegram Stars</span>
-              {#if tariffDraft.trafficStarsRows.length}
-                <div class="admin-row-editor-line admin-row-editor-header">
-                  <span>Объём, GB</span>
-                  <span>Цена, ⭐</span>
-                  <span></span>
-                </div>
-              {/if}
-              {#each tariffDraft.trafficStarsRows as row, index}
-                <div class="admin-row-editor-line">
-                  <input class="input" type="number" min="0.1" step="0.1" placeholder="50" bind:value={row.gb} aria-label="Объём пакета в GB" />
-                  <input class="input" type="number" min="0" step="1" placeholder="150" bind:value={row.price} aria-label="Цена пакета в Telegram Stars" />
-                  <button type="button" class="admin-btn admin-btn-sm admin-btn-danger" on:click={() => removeDraftRow("trafficStarsRows", index)} aria-label="Удалить"><Trash2 size={13} /></button>
-                </div>
-              {/each}
-            </div>
-          </div>
-        </section>
-      {/if}
-    </Tabs.Content>
-
-    <Tabs.Content value="topup" class="admin-tabs-content">
-      {#if tariffDraft.billing_model === "period"}
-        <section class="admin-editor-section">
-          <header class="admin-editor-section-head">
-            <div class="admin-editor-section-title">
-              <strong>Докупка трафика поверх месячного лимита</strong>
-              <small>Когда у пользователя кончился месячный лимит, ему предложат купить дополнительный пакет, не меняя срок подписки</small>
-            </div>
-            <div class="admin-editor-section-actions">
-              <button type="button" class="admin-btn admin-btn-sm" on:click={() => addDraftRow("topupRubRows", { gb: 10, price: "" })}><Plus size={12} /> Пакет ₽</button>
-              <button type="button" class="admin-btn admin-btn-sm" on:click={() => addDraftRow("topupStarsRows", { gb: 10, price: "" })}><Plus size={12} /> Пакет ⭐</button>
-            </div>
-          </header>
-          <div class="admin-package-columns">
-            <div class="admin-row-editor">
-              <span class="admin-row-editor-caption">Оплата рублями</span>
-              {#if tariffDraft.topupRubRows.length}
-                <div class="admin-row-editor-line admin-row-editor-header">
-                  <span>Объём, GB</span>
-                  <span>Цена, ₽</span>
-                  <span></span>
-                </div>
-              {/if}
-              {#each tariffDraft.topupRubRows as row, index}
-                <div class="admin-row-editor-line">
-                  <input class="input" type="number" min="0.1" step="0.1" placeholder="20" bind:value={row.gb} aria-label="Объём пакета в GB" />
-                  <input class="input" type="number" min="0" step="0.01" placeholder="149" bind:value={row.price} aria-label="Цена пакета в рублях" />
-                  <button type="button" class="admin-btn admin-btn-sm admin-btn-danger" on:click={() => removeDraftRow("topupRubRows", index)} aria-label="Удалить"><Trash2 size={13} /></button>
-                </div>
-              {/each}
-            </div>
-            <div class="admin-row-editor">
-              <span class="admin-row-editor-caption">Оплата Telegram Stars</span>
-              {#if tariffDraft.topupStarsRows.length}
-                <div class="admin-row-editor-line admin-row-editor-header">
-                  <span>Объём, GB</span>
-                  <span>Цена, ⭐</span>
-                  <span></span>
-                </div>
-              {/if}
-              {#each tariffDraft.topupStarsRows as row, index}
-                <div class="admin-row-editor-line">
-                  <input class="input" type="number" min="0.1" step="0.1" placeholder="20" bind:value={row.gb} aria-label="Объём пакета в GB" />
-                  <input class="input" type="number" min="0" step="1" placeholder="75" bind:value={row.price} aria-label="Цена пакета в Telegram Stars" />
-                  <button type="button" class="admin-btn admin-btn-sm admin-btn-danger" on:click={() => removeDraftRow("topupStarsRows", index)} aria-label="Удалить"><Trash2 size={13} /></button>
-                </div>
-              {/each}
-            </div>
-          </div>
-        </section>
-      {:else}
-        <p class="admin-muted">Для трафиковой модели отдельные «докупки» не нужны — пакеты, которые вы настроили на вкладке «Цены», и являются докупками: пользователь покупает их повторно по мере исчерпания.</p>
-      {/if}
-    </Tabs.Content>
-
-    <Tabs.Content value="hwid" class="admin-tabs-content">
-      <section class="admin-editor-section">
-        <header class="admin-editor-section-head">
-          <div class="admin-editor-section-title">
-            <strong>Пакеты дополнительных устройств (HWID)</strong>
-            <small>Расширяет лимит, указанный во вкладке «Основное». Каждая строка — пакет «+N устройств за N единиц валюты»</small>
-          </div>
-          <div class="admin-editor-section-actions">
-            <button type="button" class="admin-btn admin-btn-sm" on:click={() => addDraftRow("hwidRubRows", { count: 1, price: "" })}><Plus size={12} /> Пакет ₽</button>
-            <button type="button" class="admin-btn admin-btn-sm" on:click={() => addDraftRow("hwidStarsRows", { count: 1, price: "" })}><Plus size={12} /> Пакет ⭐</button>
-          </div>
-        </header>
-        <div class="admin-package-columns">
-          <div class="admin-row-editor">
-            <span class="admin-row-editor-caption">Оплата рублями</span>
-            {#if tariffDraft.hwidRubRows.length}
-              <div class="admin-row-editor-line admin-row-editor-header">
-                <span>+ устройств</span>
-                <span>Цена, ₽</span>
-                <span></span>
-              </div>
-            {/if}
-            {#each tariffDraft.hwidRubRows as row, index}
-              <div class="admin-row-editor-line">
-                <input class="input" type="number" min="1" step="1" placeholder="1" bind:value={row.count} aria-label="Сколько устройств добавляет пакет" />
-                <input class="input" type="number" min="0" step="0.01" placeholder="99" bind:value={row.price} aria-label="Цена пакета в рублях" />
-                <button type="button" class="admin-btn admin-btn-sm admin-btn-danger" on:click={() => removeDraftRow("hwidRubRows", index)} aria-label="Удалить"><Trash2 size={13} /></button>
-              </div>
-            {/each}
-          </div>
-          <div class="admin-row-editor">
-            <span class="admin-row-editor-caption">Оплата Telegram Stars</span>
-            {#if tariffDraft.hwidStarsRows.length}
-              <div class="admin-row-editor-line admin-row-editor-header">
-                <span>+ устройств</span>
-                <span>Цена, ⭐</span>
-                <span></span>
-              </div>
-            {/if}
-            {#each tariffDraft.hwidStarsRows as row, index}
-              <div class="admin-row-editor-line">
-                <input class="input" type="number" min="1" step="1" placeholder="1" bind:value={row.count} aria-label="Сколько устройств добавляет пакет" />
-                <input class="input" type="number" min="0" step="1" placeholder="50" bind:value={row.price} aria-label="Цена пакета в Telegram Stars" />
-                <button type="button" class="admin-btn admin-btn-sm admin-btn-danger" on:click={() => removeDraftRow("hwidStarsRows", index)} aria-label="Удалить"><Trash2 size={13} /></button>
-              </div>
-            {/each}
-          </div>
-        </div>
-      </section>
-    </Tabs.Content>
-  </Tabs.Root>
-
-  <div class="admin-dialog-actions">
-    <button type="button" class="admin-btn" on:click={() => (tariffEditorOpen = false)}>Отмена</button>
-    <button type="button" class="admin-btn admin-btn-primary" on:click={saveTariffDraft} disabled={tariffsSaving || !tariffDraft.key.trim()}>
-      <Save size={14} /> {tariffsSaving ? "Сохранение..." : "Сохранить тариф"}
-    </button>
-  </div>
-</Dialog>
-
-<Dialog
-  open={tariffDeleteOpen}
-  title="Удалить тариф?"
-  description={tariffDeleteTarget ? `Тариф ${tariffDeleteTarget.key} исчезнет из каталога продаж.` : ""}
-  closeLabel="Закрыть"
-  onclose={() => (tariffDeleteOpen = false)}
-  class="admin-dialog"
->
-  <div class="admin-form-row">
-    <button type="button" class="admin-btn" on:click={() => (tariffDeleteOpen = false)}>Отмена</button>
-    <button type="button" class="admin-btn admin-btn-danger" on:click={deleteTariff} disabled={tariffsSaving}>
-      <Trash2 size={14} /> Подтвердить удаление
-    </button>
-  </div>
-</Dialog>
-
-<Dialog
-  open={Boolean(openedUser)}
-  title={openedUser ? `Пользователь #${openedUser.user_id}` : ""}
-  description={openedUser?.username ? "@" + openedUser.username : ""}
-  closeLabel="Закрыть"
-  onclose={closeUser}
-  class="admin-dialog admin-user-dialog"
->
-  {#if openedUser}
-    {#if userDetailLoading || !openedUserDetail}
-      <p class="admin-muted">Загрузка…</p>
-    {:else}
-      <div class="admin-user-dialog-body">
-        <aside class="admin-user-aside">
-          <div class="admin-user-summary">
-            <span class="admin-avatar admin-avatar-lg">
-              {#if resolvedAvatarUrl(openedUser)}
-                <img src={resolvedAvatarUrl(openedUser)} alt="" loading="lazy" referrerpolicy="no-referrer" />
-              {:else}
-                <span>{userInitials(openedUser)}</span>
-              {/if}
-            </span>
-            <div class="admin-user-summary-meta">
-              <strong>{userDisplayName(openedUser)}</strong>
-              <small>{userSecondaryName(openedUser)}</small>
-              <div class="admin-user-summary-tags">
-                {#if openedUser.is_banned}
-                  <span class="admin-badge admin-badge-danger">Бан</span>
-                {:else}
-                  <span class="admin-badge admin-badge-success">Активен</span>
-                {/if}
-                {#if openedUserDetail.active_subscription}
-                  <span class="admin-badge admin-badge-success">Подписка</span>
-                {:else}
-                  <span class="admin-badge admin-badge-muted">Без подписки</span>
-                {/if}
-              </div>
-            </div>
-          </div>
-
-          <div class="admin-user-stats">
-            <div class="admin-user-stat">
-              <span>Заплачено</span>
-              <strong>{fmtMoney(openedUserDetail.total_paid)}</strong>
-            </div>
-            <div class="admin-user-stat">
-              <span>Логов</span>
-              <strong>{openedUserDetail.log_count}</strong>
-            </div>
-          </div>
-
-          <div class="admin-subsection-title">Профиль</div>
-          <ul class="admin-meta-list">
-            <li><span>ID</span><strong>{openedUser.user_id}</strong></li>
-            <li><span>Telegram ID</span><strong>{openedUser.telegram_id || "—"}</strong></li>
-            <li><span>Username</span><strong>{openedUser.username ? "@" + openedUser.username : "—"}</strong></li>
-            <li><span>Email</span><strong class="admin-meta-truncate">{openedUser.email || "—"}</strong></li>
-            <li><span>Регистрация</span><strong>{fmtDate(openedUser.registration_date)}</strong></li>
-            <li><span>Реф. код</span><strong>{openedUserDetail.referral?.code || openedUserDetail.user?.referral_code || "—"}</strong></li>
-          </ul>
-
-          {#if openedUserDetail.subscription_url || openedUserDetail.referral?.bot_link || openedUserDetail.referral?.webapp_link}
-            <div class="admin-subsection-title">Ссылки</div>
-            <div class="admin-link-list">
-              {#if openedUserDetail.subscription_url}
-                <div class="admin-link-row">
-                  <div class="admin-link-row-meta">
-                    <span class="admin-link-row-label">Подписка</span>
-                    <a class="admin-link-row-url" href={openedUserDetail.subscription_url} target="_blank" rel="noopener">
-                      {openedUserDetail.subscription_url}
-                    </a>
-                  </div>
-                  <button type="button" class="admin-btn admin-btn-icon" title="Скопировать" on:click={() => copyToClipboard(openedUserDetail.subscription_url, "Ссылка на подписку скопирована")}>
-                    <Copy size={14} />
-                  </button>
-                </div>
-              {/if}
-              {#if openedUserDetail.referral?.bot_link}
-                <div class="admin-link-row">
-                  <div class="admin-link-row-meta">
-                    <span class="admin-link-row-label">Реф. ссылка (бот)</span>
-                    <a class="admin-link-row-url" href={openedUserDetail.referral.bot_link} target="_blank" rel="noopener">
-                      {openedUserDetail.referral.bot_link}
-                    </a>
-                  </div>
-                  <button type="button" class="admin-btn admin-btn-icon" title="Скопировать" on:click={() => copyToClipboard(openedUserDetail.referral.bot_link, "Реф. ссылка скопирована")}>
-                    <Copy size={14} />
-                  </button>
-                </div>
-              {/if}
-              {#if openedUserDetail.referral?.webapp_link}
-                <div class="admin-link-row">
-                  <div class="admin-link-row-meta">
-                    <span class="admin-link-row-label">Реф. ссылка (веб)</span>
-                    <a class="admin-link-row-url" href={openedUserDetail.referral.webapp_link} target="_blank" rel="noopener">
-                      {openedUserDetail.referral.webapp_link}
-                    </a>
-                  </div>
-                  <button type="button" class="admin-btn admin-btn-icon" title="Скопировать" on:click={() => copyToClipboard(openedUserDetail.referral.webapp_link, "Реф. ссылка скопирована")}>
-                    <Copy size={14} />
-                  </button>
-                </div>
-              {/if}
-            </div>
-          {/if}
-        </aside>
-
-        <main class="admin-user-main">
-          <Tabs.Root bind:value={userDetailTab} class="admin-tabs-root admin-user-tabs-root">
-            <Tabs.List class="admin-tabs-list">
-              <Tabs.Trigger value="subscription" class="admin-tabs-trigger">Подписка</Tabs.Trigger>
-              <Tabs.Trigger value="activity" class="admin-tabs-trigger">Активность</Tabs.Trigger>
-              <Tabs.Trigger value="actions" class="admin-tabs-trigger">Действия</Tabs.Trigger>
-            </Tabs.List>
-
-            <Tabs.Content value="subscription" class="admin-tabs-content">
-          {#if openedUserDetail.active_subscription}
-            <ul class="admin-meta-list">
-              <li><span>Активна до</span><strong>{fmtDate(openedUserDetail.active_subscription.end_date)}</strong></li>
-              <li><span>Тариф</span><strong>{openedUserDetail.active_subscription.tariff_key || "—"}</strong></li>
-              <li><span>Авто-продление</span><strong>{pretty(openedUserDetail.active_subscription.auto_renew_enabled)}</strong></li>
-              <li><span>Провайдер</span><strong>{openedUserDetail.active_subscription.provider || "—"}</strong></li>
-            </ul>
-            <div class="admin-traffic-summary">
-              <div class={`admin-traffic-card${openedUserDetail.active_subscription.is_throttled ? " admin-traffic-card-warning" : ""}`}>
-                <div class="admin-traffic-head">
-                  <span>Основной трафик</span>
-                  <strong>{trafficOfLabel(openedUserDetail.active_subscription.traffic_used_bytes, openedUserDetail.active_subscription.traffic_limit_bytes)}</strong>
-                </div>
-                <div class="admin-traffic-bar" aria-label="Использование основного трафика">
-                  <span style={`width: ${trafficPercentValue(openedUserDetail.active_subscription.traffic_used_bytes, openedUserDetail.active_subscription.traffic_limit_bytes)}%`}></span>
-                </div>
-                <div class="admin-traffic-meta">
-                  <span>Осталось: {trafficLeftLabel(openedUserDetail.active_subscription.traffic_used_bytes, openedUserDetail.active_subscription.traffic_limit_bytes)}</span>
-                  <span>{trafficPercentValue(openedUserDetail.active_subscription.traffic_used_bytes, openedUserDetail.active_subscription.traffic_limit_bytes)}%</span>
-                </div>
-              </div>
-              {#if Number(openedUserDetail.active_subscription.premium_limit_bytes || 0) > 0}
-                <div class={`admin-traffic-card admin-traffic-card-premium${openedUserDetail.active_subscription.premium_is_limited ? " admin-traffic-card-warning" : ""}`}>
-                  <div class="admin-traffic-head">
-                    <span>Premium-сквады</span>
-                    <strong>{trafficOfLabel(openedUserDetail.active_subscription.premium_used_bytes, openedUserDetail.active_subscription.premium_limit_bytes)}</strong>
-                  </div>
-                  <div class="admin-traffic-bar admin-traffic-bar-premium" aria-label="Использование premium-трафика">
-                    <span style={`width: ${trafficPercentValue(openedUserDetail.active_subscription.premium_used_bytes, openedUserDetail.active_subscription.premium_limit_bytes)}%`}></span>
-                  </div>
-                  <div class="admin-traffic-meta">
-                    <span>Осталось: {trafficLeftLabel(openedUserDetail.active_subscription.premium_used_bytes, openedUserDetail.active_subscription.premium_limit_bytes)}</span>
-                    <span>{trafficPercentValue(openedUserDetail.active_subscription.premium_used_bytes, openedUserDetail.active_subscription.premium_limit_bytes)}%</span>
-                  </div>
-                </div>
-              {/if}
-            </div>
-          {:else}
-            <p class="admin-muted">Активной подписки нет</p>
-          {/if}
-
-          {#if (openedUserDetail.subscriptions || []).length}
-            <Separator.Root class="admin-separator" />
-            <div class="admin-subsection-title">История подписок · {openedUserDetail.subscriptions.length}</div>
-            <div class="admin-mini-list">
-              {#each openedUserDetail.subscriptions.slice(0, 8) as sub}
-                <div class="admin-mini-list-row">
-                  <div>
-                    <strong>{sub.tariff_key || "Без тарифа"}</strong>
-                    <small>до {fmtDate(sub.end_date)}</small>
-                  </div>
-                  {#if sub.is_active}
-                    <span class="admin-badge admin-badge-success">Активна</span>
-                  {:else}
-                    <span class="admin-badge admin-badge-muted">{sub.status_from_panel || "История"}</span>
-                  {/if}
-                </div>
-              {/each}
-            </div>
-          {/if}
-        </Tabs.Content>
-
-        <Tabs.Content value="activity" class="admin-tabs-content">
-          <div class="admin-subsection-title">Последние платежи · {(openedUserDetail.recent_payments || []).length}</div>
-          {#if (openedUserDetail.recent_payments || []).length}
-            <div class="admin-mini-list">
-              {#each openedUserDetail.recent_payments.slice(0, 8) as payment}
-                <div class="admin-mini-list-row">
-                  <div>
-                    <strong>{fmtMoney(payment.amount, payment.currency)}</strong>
-                    <small>{payment.provider} · {fmtDateShort(payment.created_at)}</small>
-                  </div>
-                  <span class="admin-badge admin-badge-{paymentStatusVariant(payment.status)}">{payment.status}</span>
-                </div>
-              {/each}
-            </div>
-          {:else}
-            <p class="admin-muted">Платежей нет</p>
-          {/if}
-        </Tabs.Content>
-
-        <Tabs.Content value="actions" class="admin-tabs-content admin-actions-tab">
-          <div class="admin-user-quick-actions">
-            <button type="button" class="admin-btn admin-reset-trial-btn" on:click={resetTrialUser} disabled={userActionBusy}>
-              <RefreshCw size={14} /> Сбросить триал
-            </button>
-            <Label.Root class="admin-field-label admin-extend-field">
-              <span>Продлить подписку</span>
-              <div class="admin-extend-control">
-                <input class="input" type="number" min="1" bind:value={userExtendDays} aria-label="Дней" />
-                <button type="button" class="admin-btn" on:click={extendUser} disabled={userActionBusy}>
-                  <Plus size={14} /> Продлить
-                </button>
-              </div>
-            </Label.Root>
-          </div>
-
-          <Label.Root class="admin-field-label">
-            <span>Сообщение в Telegram</span>
-            <small>Поддерживается HTML-разметка Telegram</small>
-            <textarea class="admin-textarea" rows="3" placeholder="Текст сообщения" bind:value={userMessageDraft}></textarea>
-          </Label.Root>
-          <div class="admin-message-actions">
-            <button type="button" class="admin-btn" on:click={previewUserMessage} disabled={userActionBusy || !userMessageDraft.trim()}>
-              <Eye size={14} /> Превью в Telegram
-            </button>
-            <button type="button" class="admin-btn admin-btn-primary" on:click={requestSendUserMessage} disabled={userActionBusy || !userMessageDraft.trim()}>
-              <Send size={14} /> Отправить сообщение
-            </button>
-          </div>
-
-          <section class="admin-danger-zone">
-            <header class="admin-danger-zone-head">
-              <strong>Опасные действия</strong>
-              <small>Эти действия требуют подтверждения и (для удаления) необратимы</small>
-            </header>
-            <div class="admin-action-grid">
-              {#if openedUser.is_banned}
-                <button type="button" class="admin-btn admin-btn-danger-soft" on:click={requestBanToggle} disabled={userActionBusy}>
-                  <UserPlus size={14} /> Разбанить пользователя
-                </button>
-              {:else}
-                <button type="button" class="admin-btn admin-btn-danger" on:click={requestBanToggle} disabled={userActionBusy}>
-                  <UserMinus size={14} /> Заблокировать
-                </button>
-              {/if}
-              <button type="button" class="admin-btn admin-btn-danger" on:click={() => (userDeleteOpen = true)} disabled={userActionBusy}>
-                <Trash2 size={14} /> Удалить аккаунт
-              </button>
-            </div>
-          </section>
-        </Tabs.Content>
-          </Tabs.Root>
-        </main>
-      </div>
-    {/if}
-  {/if}
-</Dialog>
-
-<Dialog
-  open={userMessageConfirmOpen}
-  title="Отправить сообщение пользователю?"
-  description={openedUser ? `Получатель: ${userDisplayName(openedUser)}` : ""}
-  closeLabel="Закрыть"
-  onclose={() => (userMessageConfirmOpen = false)}
-  class="admin-dialog"
->
-  <div class="admin-confirm-message-preview">{userMessageDraft}</div>
-  <div class="admin-dialog-actions">
-    <button type="button" class="admin-btn" on:click={() => (userMessageConfirmOpen = false)}>Отмена</button>
-    <button type="button" class="admin-btn admin-btn-primary" on:click={sendUserMessage} disabled={userActionBusy || !userMessageDraft.trim()}>
-      <Send size={14} /> Подтвердить отправку
-    </button>
-  </div>
-</Dialog>
-
-<Dialog
-  open={userBanConfirmOpen}
-  title="Заблокировать пользователя?"
-  description={openedUser ? `${userDisplayName(openedUser)} больше не сможет взаимодействовать с ботом. Действие можно отменить позже.` : ""}
-  closeLabel="Закрыть"
-  onclose={() => (userBanConfirmOpen = false)}
-  class="admin-dialog"
->
-  <div class="admin-dialog-actions">
-    <button type="button" class="admin-btn" on:click={() => (userBanConfirmOpen = false)}>Отмена</button>
-    <button type="button" class="admin-btn admin-btn-danger" on:click={() => applyBanToggle(true)} disabled={userActionBusy}>
-      <UserMinus size={14} /> Заблокировать
-    </button>
-  </div>
-</Dialog>
-
-<Dialog
-  open={userDeleteOpen}
-  title="Удалить пользователя?"
-  description="Действие необратимо. Удалятся все платежи, подписки и логи."
-  closeLabel="Закрыть"
-  onclose={() => (userDeleteOpen = false)}
-  class="admin-dialog"
->
-  <div class="admin-form-row">
-    <button type="button" class="admin-btn" on:click={() => (userDeleteOpen = false)}>Отмена</button>
-    <button type="button" class="admin-btn admin-btn-danger" on:click={deleteUser} disabled={userActionBusy}>
-      <Trash2 size={14} /> Подтвердить удаление
-    </button>
-  </div>
-</Dialog>
-
-<Dialog open={promoCreateOpen} title="Новый промокод" closeLabel="Закрыть" onclose={() => (promoCreateOpen = false)} class="admin-dialog">
-  <div class="admin-form">
-    <Label.Root class="admin-field-label">
-      <span>Код</span>
-      <input class="input" type="text" placeholder="WELCOME10" bind:value={promoDraft.code} />
-    </Label.Root>
-    <div class="admin-form-row">
-      <Label.Root class="admin-field-label">
-        <span>Бонус (дней)</span>
-        <input class="input" type="number" min="1" bind:value={promoDraft.bonus_days} />
-      </Label.Root>
-      <Label.Root class="admin-field-label">
-        <span>Макс. активаций</span>
-        <input class="input" type="number" min="1" bind:value={promoDraft.max_activations} />
-      </Label.Root>
-      <Label.Root class="admin-field-label">
-        <span>Срок действия</span>
-        <small>0 — бессрочно</small>
-        <input class="input" type="number" min="0" bind:value={promoDraft.valid_days} />
-      </Label.Root>
-    </div>
-    <button type="button" class="admin-btn admin-btn-primary" on:click={createPromo} disabled={!promoDraft.code.trim()}>
-      <Check size={14} /> Создать
-    </button>
-  </div>
-</Dialog>
-
-<Dialog open={adCreateOpen} title="Новая кампания" closeLabel="Закрыть" onclose={() => (adCreateOpen = false)} class="admin-dialog">
-  <div class="admin-form">
-    <Label.Root class="admin-field-label">
-      <span>Источник</span>
-      <input class="input" type="text" placeholder="telegram_ads" bind:value={adDraft.source} />
-    </Label.Root>
-    <Label.Root class="admin-field-label">
-      <span>start-параметр</span>
-      <small>Передаётся в /start, должен быть уникален</small>
-      <input class="input" type="text" placeholder="ads_summer25" bind:value={adDraft.start_param} />
-    </Label.Root>
-    <Label.Root class="admin-field-label">
-      <span>Стоимость, RUB</span>
-      <input class="input" type="number" step="0.01" min="0" bind:value={adDraft.cost} />
-    </Label.Root>
-    <button type="button" class="admin-btn admin-btn-primary" on:click={createAd} disabled={!adDraft.source.trim() || !adDraft.start_param.trim()}>
-      <Check size={14} /> Создать
-    </button>
-  </div>
-</Dialog>
+<UserDetailModal
+  {at}
+  {fmtDate}
+  {fmtDateShort}
+  {fmtMoney}
+  {resolvedAvatarUrl}
+  {userDisplayName}
+  {userSecondaryName}
+  {userInitials}
+  {paymentStatusVariant}
+  {trafficPercentValue}
+  {trafficLeftLabel}
+  {trafficOfLabel}
+/>
diff --git a/bot/app/web/frontend/src/admin/sections/AdsSection.svelte b/bot/app/web/frontend/src/admin/sections/AdsSection.svelte
new file mode 100644
index 0000000..1fba3a5
--- /dev/null
+++ b/bot/app/web/frontend/src/admin/sections/AdsSection.svelte
@@ -0,0 +1,121 @@
+<script>
+  import { Trash2, Check } from "lucide-svelte";
+  import { getContext, onMount } from "svelte";
+  import Dialog from "../../lib/components/ui/dialog.svelte";
+  import { Label } from "bits-ui";
+
+  export let at;
+  export let fmtMoney;
+
+  const adsStore = getContext("adsStore");
+
+  $: ({
+    ads,
+    adsTotals,
+    adsLoading,
+    adCreateOpen,
+    adDraft,
+  } = $adsStore);
+
+  onMount(() => {
+    adsStore.loadAds();
+  });
+</script>
+
+<div class="admin-table-wrap">
+  {#if adsLoading}
+    <table class="admin-table admin-table-skeleton" aria-hidden="true">
+      <thead>
+        <tr>
+          <th>{at("id", {}, "ID")}</th>
+          <th>{at("ads_col_source", {}, "Источник")}</th>
+          <th>{at("ads_col_param", {}, "Параметр")}</th>
+          <th>{at("ads_col_cost", {}, "Стоимость")}</th>
+          <th>{at("ads_col_registrations", {}, "Регистрации")}</th>
+          <th>{at("ads_col_conversions", {}, "Конверсии")}</th>
+          <th>{at("ads_col_status", {}, "Статус")}</th>
+          <th class="admin-cell-actions">{at("actions", {}, "Действия")}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each Array(6) as _, i (i)}
+          <tr>
+            <td><span class="admin-skeleton admin-skeleton-line admin-skeleton-line-tiny"></span></td>
+            <td><span class="admin-skeleton admin-skeleton-line admin-skeleton-line-short"></span></td>
+            <td><span class="admin-skeleton admin-skeleton-line admin-skeleton-line-short"></span></td>
+            <td><span class="admin-skeleton admin-skeleton-line admin-skeleton-line-tiny"></span></td>
+            <td><span class="admin-skeleton admin-skeleton-line admin-skeleton-line-tiny"></span></td>
+            <td><span class="admin-skeleton admin-skeleton-line admin-skeleton-line-tiny"></span></td>
+            <td><span class="admin-skeleton admin-skeleton-badge"></span></td>
+            <td><span class="admin-skeleton admin-skeleton-line"></span></td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  {:else if !ads.length}
+    <div class="admin-card-body"><span class="admin-muted">{at("ads_empty", {}, "Кампаний нет")}</span></div>
+  {:else}
+    <table class="admin-table">
+      <thead>
+        <tr>
+          <th>{at("id", {}, "ID")}</th>
+          <th>{at("ads_col_source", {}, "Источник")}</th>
+          <th>{at("ads_col_param", {}, "Параметр")}</th>
+          <th>{at("ads_col_cost", {}, "Стоимость")}</th>
+          <th>{at("ads_col_registrations", {}, "Регистрации")}</th>
+          <th>{at("ads_col_conversions", {}, "Конверсии")}</th>
+          <th>{at("ads_col_status", {}, "Статус")}</th>
+          <th class="admin-cell-actions">{at("actions", {}, "Действия")}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each ads as ad}
+          <tr>
+            <td class="admin-cell-id" data-label={at("id", {}, "ID")}>#{ad.id}</td>
+            <td data-label={at("ads_col_source", {}, "Источник")}>{ad.source}</td>
+            <td class="admin-cell-mono" data-label={at("ads_col_param", {}, "Параметр")}>{ad.start_param}</td>
+            <td data-label={at("ads_col_cost", {}, "Стоимость")}>{fmtMoney(ad.cost)}</td>
+            <td data-label={at("ads_col_registrations", {}, "Регистрации")}>{ad.stats?.registrations ?? 0}</td>
+            <td data-label={at("ads_col_conversions", {}, "Конверсии")}>{ad.stats?.conversions ?? 0}</td>
+            <td data-label={at("ads_col_status", {}, "Статус")}>
+              {#if ad.is_active}
+                <span class="admin-badge admin-badge-success">{at("status_active", {}, "Активна")}</span>
+              {:else}
+                <span class="admin-badge admin-badge-muted">{at("status_disabled", {}, "Выключена")}</span>
+              {/if}
+            </td>
+            <td class="admin-cell-actions" data-label={at("actions", {}, "Действия")}>
+              <button type="button" class="admin-btn admin-btn-sm" on:click={() => adsStore.toggleAd(ad)}>
+                {ad.is_active ? at("btn_disable", {}, "Выкл") : at("btn_enable", {}, "Вкл")}
+              </button>
+              <button type="button" class="admin-btn admin-btn-sm admin-btn-danger" on:click={() => adsStore.deleteAd(ad)}>
+                <Trash2 size={13} />
+              </button>
+            </td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  {/if}
+</div>
+
+<Dialog open={adCreateOpen} title={at("ad_create_title", {}, "Новая кампания")} closeLabel={at("close", {}, "Закрыть")} onclose={() => adsStore.setCreateOpen(false)} class="admin-dialog">
+  <div class="admin-form">
+    <Label.Root class="admin-field-label">
+      <span>{at("ad_label_source", {}, "Источник")}</span>
+      <input class="input" type="text" placeholder="telegram_ads" value={adDraft.source} on:input={(e) => adsStore.updateDraft({ source: e.target.value })} />
+    </Label.Root>
+    <Label.Root class="admin-field-label">
+      <span>{at("ad_label_param", {}, "start-параметр")}</span>
+      <small>{at("ad_hint_param", {}, "Передаётся в /start, должен быть уникален")}</small>
+      <input class="input" type="text" placeholder="ads_summer25" value={adDraft.start_param} on:input={(e) => adsStore.updateDraft({ start_param: e.target.value })} />
+    </Label.Root>
+    <Label.Root class="admin-field-label">
+      <span>{at("ad_label_cost", {}, "Стоимость, RUB")}</span>
+      <input class="input" type="number" step="0.01" min="0" value={adDraft.cost} on:input={(e) => adsStore.updateDraft({ cost: Number(e.target.value) })} />
+    </Label.Root>
+    <button type="button" class="admin-btn admin-btn-primary" on:click={adsStore.createAd} disabled={!adDraft.source.trim() || !adDraft.start_param.trim()}>
+      <Check size={14} /> {at("btn_create", {}, "Создать")}
+    </button>
+  </div>
+</Dialog>
diff --git a/bot/app/web/frontend/src/admin/sections/BroadcastSection.svelte b/bot/app/web/frontend/src/admin/sections/BroadcastSection.svelte
new file mode 100644
index 0000000..8b76503
--- /dev/null
+++ b/bot/app/web/frontend/src/admin/sections/BroadcastSection.svelte
@@ -0,0 +1,62 @@
+<script>
+  import { Send, ChevronDown, Check } from "lucide-svelte";
+  import { getContext } from "svelte";
+  import { Label, Select } from "bits-ui";
+
+  export let at;
+  export let optionLabel;
+
+  const broadcastStore = getContext("broadcastStore");
+
+  $: ({
+    broadcastTarget,
+    broadcastText,
+    broadcastBusy,
+    broadcastResult,
+  } = $broadcastStore);
+
+  const BROADCAST_TARGET_OPTIONS = broadcastStore.BROADCAST_TARGET_OPTIONS;
+</script>
+
+<div class="admin-card">
+  <header class="admin-card-head">
+    <h3>{at("broadcast_title", {}, "Рассылка")}</h3>
+    <small>{at("broadcast_subtitle", {}, "Доставка через очередь сообщений")}</small>
+  </header>
+  <div class="admin-card-body">
+    <div class="admin-form">
+      <Label.Root class="admin-field-label">
+        <span>{at("broadcast_label_audience", {}, "Аудитория")}</span>
+        <Select.Root type="single" value={broadcastTarget} onValueChange={(value) => broadcastStore.updateField({ broadcastTarget: value })}>
+          <Select.Trigger class="admin-select-trigger" aria-label={at("broadcast_label_audience", {}, "Аудитория")}>
+            <span>{optionLabel(BROADCAST_TARGET_OPTIONS, broadcastTarget)}</span>
+            <ChevronDown size={14} class="admin-select-icon" />
+          </Select.Trigger>
+          <Select.Portal>
+            <Select.Content class="admin-select-content" sideOffset={6}>
+              {#each BROADCAST_TARGET_OPTIONS as opt}
+                <Select.Item value={opt.value} class="admin-select-item">
+                  <span>{opt.label}</span>
+                  <Check size={14} class="admin-select-item-check" />
+                </Select.Item>
+              {/each}
+            </Select.Content>
+          </Select.Portal>
+        </Select.Root>
+      </Label.Root>
+      <Label.Root class="admin-field-label">
+        <span>{at("broadcast_label_text", {}, "Текст сообщения")}</span>
+        <small>{at("broadcast_hint_text", {}, "Поддерживается HTML-разметка Telegram")}</small>
+        <textarea class="admin-textarea" rows="6" value={broadcastText} on:input={(e) => broadcastStore.updateField({ broadcastText: e.target.value })}></textarea>
+      </Label.Root>
+      <div style="display:flex; gap:8px; align-items:center;">
+        <button type="button" class="admin-btn admin-btn-primary" on:click={broadcastStore.runBroadcast} disabled={broadcastBusy || !broadcastText.trim()}>
+          <Send size={14} /> {broadcastBusy ? at("btn_sending", {}, "Отправка...") : at("btn_queue", {}, "Поставить в очередь")}
+        </button>
+        {#if broadcastResult}
+          <span class="admin-muted">{at("broadcast_stat_queued", {}, "В очереди")}: {broadcastResult.queued} · {at("broadcast_stat_failed", {}, "Неудач")}: {broadcastResult.failed}</span>
+        {/if}
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/bot/app/web/frontend/src/admin/sections/LogsSection.svelte b/bot/app/web/frontend/src/admin/sections/LogsSection.svelte
new file mode 100644
index 0000000..f7c5993
--- /dev/null
+++ b/bot/app/web/frontend/src/admin/sections/LogsSection.svelte
@@ -0,0 +1,102 @@
+<script>
+  import { ChevronLeft, ChevronRight } from "lucide-svelte";
+  import { getContext, onMount } from "svelte";
+
+  export let at;
+  export let fmtDate;
+
+  const logsStore = getContext("logsStore");
+
+  $: ({
+    logs,
+    logsTotal,
+    logsPage,
+    logsUserFilter,
+    logsLoading,
+  } = $logsStore);
+
+  $: logsHasMore = logs.length > 0 && logsTotal > (logsPage + 1) * 50; // 50 is LOGS_PAGE_SIZE
+
+  onMount(() => {
+    logsStore.loadLogs();
+  });
+</script>
+
+<div class="admin-toolbar admin-toolbar-card">
+  <div class="admin-toolbar-search admin-toolbar-search-actions">
+    <input
+      type="search"
+      class="input"
+      placeholder={at("logs_user_filter_placeholder", {}, "Фильтр по ID пользователя")}
+      value={logsUserFilter}
+      on:input={(e) => logsStore.setFilter(e.target.value)}
+      on:keydown={(e) => e.key === "Enter" && (logsStore.setPage(0))}
+    />
+    <button type="button" class="admin-btn admin-btn-primary" on:click={() => { logsStore.setPage(0); }}>{at("apply", {}, "Применить")}</button>
+    <button type="button" class="admin-btn admin-btn-ghost" on:click={() => { logsStore.setFilter(""); logsStore.setPage(0); }}>{at("reset", {}, "Сбросить")}</button>
+  </div>
+  <div class="admin-toolbar-summary">
+    <span class="admin-toolbar-field-label">{at("total", {}, "Всего")}</span>
+    <strong>{logsTotal}</strong>
+  </div>
+</div>
+
+<div class="admin-table-wrap">
+  {#if logsLoading}
+    <table class="admin-table admin-table-skeleton" aria-hidden="true">
+      <thead>
+        <tr>
+          <th>{at("date", {}, "Дата")}</th><th>{at("event", {}, "Событие")}</th><th>User</th><th>Target</th><th>{at("content", {}, "Контент")}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each Array(10) as _, i (i)}
+          <tr>
+            <td><span class="admin-skeleton admin-skeleton-line admin-skeleton-line-short"></span></td>
+            <td><span class="admin-skeleton admin-skeleton-line admin-skeleton-line-short"></span></td>
+            <td><span class="admin-skeleton admin-skeleton-line admin-skeleton-line-tiny"></span></td>
+            <td><span class="admin-skeleton admin-skeleton-line admin-skeleton-line-tiny"></span></td>
+            <td><span class="admin-skeleton admin-skeleton-line"></span></td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  {:else if !logs.length}
+    <div class="admin-card-body"><span class="admin-muted">{at("logs_empty", {}, "Записей нет")}</span></div>
+  {:else}
+    <table class="admin-table">
+      <thead>
+        <tr>
+          <th>{at("date", {}, "Дата")}</th>
+          <th>{at("event", {}, "Событие")}</th>
+          <th>{at("user_short", {}, "User")}</th>
+          <th>{at("target_short", {}, "Target")}</th>
+          <th>{at("content", {}, "Контент")}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each logs as entry}
+          <tr>
+            <td data-label={at("date", {}, "Дата")}>{fmtDate(entry.timestamp)}</td>
+            <td class="admin-cell-mono" data-label={at("event", {}, "Событие")}>{entry.event_type}</td>
+            <td class="admin-cell-mono" data-label={at("user_short", {}, "User")}>{entry.user_id || "—"}</td>
+            <td class="admin-cell-mono" data-label={at("target_short", {}, "Target")}>{entry.target_user_id || "—"}</td>
+            <td class="admin-cell-wrap" data-label={at("content", {}, "Контент")}>{entry.content || ""}</td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  {/if}
+</div>
+
+<div class="admin-pagination">
+  <span class="admin-pagination-meta">{at("page_short", {}, "Стр.")} {logsPage + 1}</span>
+  <div class="admin-pagination-buttons">
+    <button type="button" class="admin-btn admin-btn-sm" disabled={logsPage === 0} on:click={() => { logsStore.setPage(Math.max(0, logsPage - 1)); }}>
+      <ChevronLeft size={14} /> {at("back", {}, "Назад")}
+    </button>
+    <button type="button" class="admin-btn admin-btn-sm" disabled={!logsHasMore} on:click={() => { logsStore.setPage(logsPage + 1); }}>
+      {at("next", {}, "Далее")} <ChevronRight size={14} />
+    </button>
+  </div>
+</div>
diff --git a/bot/app/web/frontend/src/admin/sections/PaymentsSection.svelte b/bot/app/web/frontend/src/admin/sections/PaymentsSection.svelte
index 38d29af..eadd2e9 100644
--- a/bot/app/web/frontend/src/admin/sections/PaymentsSection.svelte
+++ b/bot/app/web/frontend/src/admin/sections/PaymentsSection.svelte
@@ -1,16 +1,26 @@
 <script>
   import { ChevronLeft, ChevronRight } from "lucide-svelte";
+  import { getContext, onMount } from "svelte";
 
   export let at = (key) => key;
   export let fmtDate = (value) => value;
   export let fmtMoney = (value) => value;
-  export let loadPayments = () => {};
   export let paymentStatusVariant = () => "muted";
-  export let payments = [];
-  export let paymentsHasMore = false;
-  export let paymentsLoading = false;
-  export let paymentsPage = 0;
-  export let paymentsTotal = 0;
+
+  const paymentsStore = getContext("paymentsStore");
+
+  $: ({
+    payments,
+    paymentsTotal,
+    paymentsPage,
+    paymentsLoading,
+  } = $paymentsStore);
+
+  $: paymentsHasMore = payments.length > 0 && paymentsTotal > (paymentsPage + 1) * 25; // 25 is PAYMENTS_PAGE_SIZE
+
+  onMount(() => {
+    paymentsStore.loadPayments();
+  });
 </script>
 
 <div class="admin-table-wrap">
@@ -18,7 +28,7 @@
     <table class="admin-table admin-table-skeleton" aria-hidden="true">
       <thead>
         <tr>
-          <th>ID</th><th>{at("user", {}, "Пользователь")}</th><th>{at("amount", {}, "Сумма")}</th><th>{at("provider", {}, "Провайдер")}</th><th>{at("description", {}, "Описание")}</th><th>{at("status", {}, "Статус")}</th><th>{at("date", {}, "Дата")}</th>
+          <th>{at("id", {}, "ID")}</th><th>{at("user", {}, "Пользователь")}</th><th>{at("amount", {}, "Сумма")}</th><th>{at("provider", {}, "Провайдер")}</th><th>{at("description", {}, "Описание")}</th><th>{at("status", {}, "Статус")}</th><th>{at("date", {}, "Дата")}</th>
         </tr>
       </thead>
       <tbody>
@@ -41,7 +51,7 @@
     <table class="admin-table">
       <thead>
         <tr>
-          <th>ID</th>
+          <th>{at("id", {}, "ID")}</th>
           <th>{at("user", {}, "Пользователь")}</th>
           <th>{at("amount", {}, "Сумма")}</th>
           <th>{at("provider", {}, "Провайдер")}</th>
@@ -72,10 +82,10 @@
 <div class="admin-pagination">
   <span class="admin-pagination-meta">{at("page_short", {}, "Стр.")} {paymentsPage + 1} · {at("total", {}, "Всего")} {paymentsTotal}</span>
   <div class="admin-pagination-buttons">
-    <button type="button" class="admin-btn admin-btn-sm" disabled={paymentsPage === 0} on:click={() => { paymentsPage = Math.max(0, paymentsPage - 1); loadPayments(); }}>
+    <button type="button" class="admin-btn admin-btn-sm" disabled={paymentsPage === 0} on:click={() => { paymentsStore.setPage(Math.max(0, paymentsPage - 1)); }}>
       <ChevronLeft size={14} /> {at("back", {}, "Назад")}
     </button>
-    <button type="button" class="admin-btn admin-btn-sm" disabled={!paymentsHasMore} on:click={() => { paymentsPage += 1; loadPayments(); }}>
+    <button type="button" class="admin-btn admin-btn-sm" disabled={!paymentsHasMore} on:click={() => { paymentsStore.setPage(paymentsPage + 1); }}>
       {at("next", {}, "Далее")} <ChevronRight size={14} />
     </button>
   </div>
diff --git a/bot/app/web/frontend/src/admin/sections/PromosSection.svelte b/bot/app/web/frontend/src/admin/sections/PromosSection.svelte
new file mode 100644
index 0000000..31bbc34
--- /dev/null
+++ b/bot/app/web/frontend/src/admin/sections/PromosSection.svelte
@@ -0,0 +1,140 @@
+<script>
+  import { Trash2 } from "lucide-svelte";
+  import { getContext, onMount } from "svelte";
+  import Dialog from "../../lib/components/ui/dialog.svelte";
+  import { Label } from "bits-ui";
+
+  export let at;
+  export let fmtDateShort;
+
+  const promosStore = getContext("promosStore");
+
+  $: ({
+    promos,
+    promosTotal,
+    promosPage,
+    promosLoading,
+    promoCreateOpen,
+    promoDraft,
+  } = $promosStore);
+
+  $: promosHasMore = promos.length < promosTotal;
+
+  onMount(() => {
+    promosStore.loadPromos();
+  });
+</script>
+
+<div class="admin-table-wrap">
+  {#if promosLoading}
+    <table class="admin-table admin-table-skeleton" aria-hidden="true">
+      <thead>
+        <tr>
+          <th>{at("promo_col_code", {}, "Код")}</th>
+          <th>{at("promo_col_bonus", {}, "Бонус")}</th>
+          <th>{at("promo_col_activations", {}, "Активаций")}</th>
+          <th>{at("promo_col_valid_until", {}, "Действует до")}</th>
+          <th>{at("promo_col_status", {}, "Статус")}</th>
+          <th class="admin-cell-actions">{at("actions", {}, "Действия")}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each Array(6) as _, i (i)}
+          <tr>
+            <td><span class="admin-skeleton admin-skeleton-line admin-skeleton-line-short"></span></td>
+            <td><span class="admin-skeleton admin-skeleton-line admin-skeleton-line-tiny"></span></td>
+            <td><span class="admin-skeleton admin-skeleton-line admin-skeleton-line-tiny"></span></td>
+            <td><span class="admin-skeleton admin-skeleton-line admin-skeleton-line-short"></span></td>
+            <td><span class="admin-skeleton admin-skeleton-badge"></span></td>
+            <td><span class="admin-skeleton admin-skeleton-line"></span></td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  {:else if !promos.length}
+    <div class="admin-card-body"><span class="admin-muted">{at("promos_empty", {}, "Промокодов нет")}</span></div>
+  {:else}
+    <table class="admin-table">
+      <thead>
+        <tr>
+          <th>{at("promo_col_code", {}, "Код")}</th>
+          <th>{at("promo_col_bonus", {}, "Бонус")}</th>
+          <th>{at("promo_col_activations", {}, "Активаций")}</th>
+          <th>{at("promo_col_valid_until", {}, "Действует до")}</th>
+          <th>{at("promo_col_status", {}, "Статус")}</th>
+          <th class="admin-cell-actions">{at("actions", {}, "Действия")}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each promos as p}
+          <tr>
+            <td class="admin-cell-mono" data-label={at("promo_col_code", {}, "Код")}>{p.code}</td>
+            <td data-label={at("promo_col_bonus", {}, "Бонус")}>+{p.bonus_days} {at("days_short", {}, "дн.")}</td>
+            <td data-label={at("promo_col_activations", {}, "Активаций")}>{p.current_activations}/{p.max_activations}</td>
+            <td data-label={at("promo_col_valid_until", {}, "Действует до")}>{p.valid_until ? fmtDateShort(p.valid_until) : "∞"}</td>
+            <td data-label={at("promo_col_status", {}, "Статус")}>
+              {#if p.is_active}
+                <span class="admin-badge admin-badge-success">{at("status_active", {}, "Активен")}</span>
+              {:else}
+                <span class="admin-badge admin-badge-muted">{at("status_disabled", {}, "Выключен")}</span>
+              {/if}
+            </td>
+            <td class="admin-cell-actions" data-label={at("actions", {}, "Действия")}>
+              <button type="button" class="admin-btn admin-btn-sm" on:click={() => promosStore.togglePromo(p)}>
+                {p.is_active ? at("btn_disable", {}, "Выкл") : at("btn_enable", {}, "Вкл")}
+              </button>
+              <button type="button" class="admin-btn admin-btn-sm admin-btn-danger" on:click={() => promosStore.deletePromo(p)}>
+                <Trash2 size={13} />
+              </button>
+            </td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  {/if}
+  {#if promosHasMore}
+    <div style="padding: 12px; text-align: center;">
+      <button type="button" class="admin-btn" on:click={() => promosStore.setPage(promosPage + 1)}>{at("btn_show_more", {}, "Показать еще")}</button>
+    </div>
+  {/if}
+</div>
+
+<Dialog
+  open={promoCreateOpen}
+  title={at("promo_create_title", {}, "Создать промокод")}
+  closeLabel={at("close", {}, "Закрыть")}
+  onclose={() => promosStore.setCreateOpen(false)}
+  class="admin-dialog"
+>
+  <div class="admin-modal" data-dialog-content>
+    <div class="admin-modal-head">
+      <h3>{at("promo_create_title", {}, "Создать промокод")}</h3>
+    </div>
+    <div class="admin-modal-body admin-form">
+      <Label.Root class="admin-field-label">
+        <span>{at("promo_label_code", {}, "Код")}</span>
+        <input type="text" class="input" value={promoDraft.code} on:input={(e) => promosStore.updateDraft({ code: e.target.value })} placeholder="FREE-7-DAYS" />
+      </Label.Root>
+      <div class="admin-form-row-2">
+        <Label.Root class="admin-field-label">
+          <span>{at("promo_label_bonus_days", {}, "Бонус (дней)")}</span>
+          <input type="number" class="input" min="1" value={promoDraft.bonus_days} on:input={(e) => promosStore.updateDraft({ bonus_days: Number(e.target.value) })} />
+        </Label.Root>
+        <Label.Root class="admin-field-label">
+          <span>{at("promo_label_max_activations", {}, "Макс. активаций")}</span>
+          <input type="number" class="input" min="1" value={promoDraft.max_activations} on:input={(e) => promosStore.updateDraft({ max_activations: Number(e.target.value) })} />
+        </Label.Root>
+      </div>
+      <Label.Root class="admin-field-label">
+        <span>{at("promo_label_valid_days", {}, "Срок действия (дней от текущего)")}</span>
+        <input type="number" class="input" min="1" value={promoDraft.valid_days} on:input={(e) => promosStore.updateDraft({ valid_days: Number(e.target.value) })} />
+      </Label.Root>
+    </div>
+    <div class="admin-modal-footer">
+      <button type="button" class="admin-btn" on:click={() => promosStore.setCreateOpen(false)}>{at("btn_cancel", {}, "Отмена")}</button>
+      <button type="button" class="admin-btn admin-btn-primary" on:click={promosStore.createPromo} disabled={!promoDraft.code.trim()}>
+        {at("btn_create", {}, "Создать")}
+      </button>
+    </div>
+  </div>
+</Dialog>
diff --git a/bot/app/web/frontend/src/admin/sections/SettingsSection.svelte b/bot/app/web/frontend/src/admin/sections/SettingsSection.svelte
index fcd304c..8befd51 100644
--- a/bot/app/web/frontend/src/admin/sections/SettingsSection.svelte
+++ b/bot/app/web/frontend/src/admin/sections/SettingsSection.svelte
@@ -1,30 +1,198 @@
 <script>
-  import { ChevronRight } from "lucide-svelte";
-  import { Accordion } from "bits-ui";
+  import { ChevronRight, Eye, EyeOff, X } from "lucide-svelte";
+  import { Accordion, Switch } from "bits-ui";
+  import { getContext, onMount } from "svelte";
 
-  export let groupSectionFields = () => [];
-  export let isOverridden = () => false;
-  export let renderField = () => {};
-  export let sectionTitle = (id) => id;
-  export let settingsAllOpen = false;
-  export let settingsDirty = {};
-  export let settingsLoading = false;
-  export let settingsOpenSections = [];
-  export let settingsOpenSubsections = {};
-  export let settingsSections = [];
-  export let toggleAllSections = () => {};
+  export let at;
+  export let onSettingsSaved;
+  export let isCompact = false;
+
+  const settingsStore = getContext("settingsStore");
+
+  $: ({
+    settingsSections,
+    settingsLoading,
+    settingsDirty,
+    settingsSaving,
+  } = $settingsStore);
+
+  let settingsOpenSections = [];
+  let settingsOpenSubsections = {};
+  let revealedSecrets = new Set();
+
+  $: settingsAllOpen = settingsSections.length > 0 && settingsOpenSections.length === settingsSections.length;
+
+  onMount(() => {
+    settingsStore.loadSettings().then(() => {
+      if ($settingsStore.settingsSections.length) {
+        const ids = $settingsStore.settingsSections.map((s) => s.id);
+        settingsOpenSections = isCompact ? ids.slice(0, 1) : ids.slice();
+      }
+    });
+  });
+
+  function toggleAllSections() {
+    if (settingsOpenSections.length === settingsSections.length) {
+      settingsOpenSections = [];
+    } else {
+      settingsOpenSections = settingsSections.map((s) => s.id);
+    }
+  }
+
+  function valueFor(field) {
+    if (settingsDirty[field.key]?.deleted) return "";
+    if (Object.prototype.hasOwnProperty.call(settingsDirty, field.key)) {
+      return settingsDirty[field.key].value;
+    }
+    return field.value ?? "";
+  }
+
+  function isOverridden(field) {
+    return Boolean(field.overridden) && !settingsDirty[field.key]?.deleted;
+  }
+
+  function isSecretRevealed(key) {
+    return revealedSecrets.has(key);
+  }
+
+  function toggleSecretReveal(key) {
+    const next = new Set(revealedSecrets);
+    if (next.has(key)) next.delete(key);
+    else next.add(key);
+    revealedSecrets = next;
+  }
+
+  function groupSectionFields(section) {
+    const groups = new Map();
+    for (const field of section.fields || []) {
+      const key = field.subsection || "_root";
+      if (!groups.has(key)) groups.set(key, []);
+      groups.get(key).push(field);
+    }
+    return Array.from(groups.entries()).map(([id, fields]) => ({
+      id,
+      label: id === "_root" ? null : id,
+      fields,
+    }));
+  }
+
+  function sectionTitle(id) {
+    const map = {
+      general: at("settings_section_general", {}, "Общие"),
+      appearance: at("settings_section_appearance", {}, "Внешний вид"),
+      pricing: at("settings_section_pricing", {}, "Тарифы и цены"),
+      payments: at("settings_section_payments", {}, "Платёжные системы"),
+      trial: at("settings_section_trial", {}, "Триал"),
+      referral: at("settings_section_referral", {}, "Реферальная программа"),
+      notifications: at("settings_section_notifications", {}, "Уведомления"),
+      devices: at("settings_section_devices", {}, "Устройства"),
+    };
+    return map[id] || id;
+  }
 </script>
 
+{#snippet renderField(field)}
+  {@const revealed = isSecretRevealed(field.key)}
+  <div class="admin-setting" class:is-overridden={isOverridden(field)}>
+    <div class="admin-setting-meta">
+      <strong>
+        {field.label}
+          <span class="admin-badge admin-badge-warning">{at("settings_badge_secret", {}, "Secret")}</span>
+        {#if isOverridden(field)}
+          <span class="admin-badge admin-badge-success">{at("settings_badge_override", {}, "Override")}</span>
+        {/if}
+      </strong>
+      <code>{field.key}</code>
+      {#if field.description}
+        <small>{field.description}</small>
+      {/if}
+    </div>
+    <div class="admin-setting-control">
+      {#if field.type === "bool"}
+        <div class="admin-setting-switch">
+          <Switch.Root
+            checked={Boolean(valueFor(field))}
+            onCheckedChange={(checked) => settingsStore.markDirty(field.key, checked)}
+            class="admin-switch-root"
+          >
+            <Switch.Thumb class="admin-switch-thumb" />
+          </Switch.Root>
+          <span>{Boolean(valueFor(field)) ? at("enabled", {}, "Включено") : at("disabled", {}, "Выключено")}</span>
+        </div>
+      {:else if field.type === "color"}
+        <input
+          class="admin-color"
+          type="color"
+          value={valueFor(field) || "#00fe7a"}
+          on:input={(e) => settingsStore.markDirty(field.key, e.currentTarget.value)}
+        />
+        <input
+          class="input"
+          type="text"
+          value={valueFor(field) || ""}
+          on:input={(e) => settingsStore.markDirty(field.key, e.currentTarget.value)}
+        />
+      {:else if field.type === "int" || field.type === "float"}
+        <input
+          class="input"
+          type="number"
+          step={field.type === "float" ? "0.1" : "1"}
+          placeholder={field.placeholder}
+          value={valueFor(field) ?? ""}
+          on:input={(e) => settingsStore.markDirty(field.key, e.currentTarget.value)}
+        />
+      {:else if field.secret}
+        <input
+          class="input"
+          type={revealed ? "text" : "password"}
+          placeholder={field.placeholder || "••••••••"}
+          autocomplete="off"
+          value={valueFor(field) ?? ""}
+          on:input={(e) => settingsStore.markDirty(field.key, e.currentTarget.value)}
+        />
+        <button
+          type="button"
+          class="admin-btn admin-btn-sm admin-btn-ghost"
+          aria-label={revealed ? at("hide", {}, "Скрыть") : at("show", {}, "Показать")}
+          on:click={() => toggleSecretReveal(field.key)}
+        >
+          {#if revealed}<EyeOff size={13} />{:else}<Eye size={13} />{/if}
+        </button>
+      {:else}
+        <input
+          class="input"
+          type="text"
+          placeholder={field.placeholder}
+          value={valueFor(field) ?? ""}
+          on:input={(e) => settingsStore.markDirty(field.key, e.currentTarget.value)}
+        />
+      {/if}
+      {#if isOverridden(field) || settingsDirty[field.key]}
+        <button type="button" class="admin-btn admin-btn-sm admin-btn-ghost" on:click={() => settingsStore.resetField(field)}>
+          <X size={12} /> {at("reset", {}, "Сбросить")}
+        </button>
+      {/if}
+    </div>
+  </div>
+{/snippet}
+
 {#if settingsLoading || !settingsSections.length}
-  <div class="admin-empty">{settingsLoading ? "Загрузка…" : "Нет данных"}</div>
+  <div class="admin-empty">{settingsLoading ? at("loading", {}, "Загрузка…") : at("no_data", {}, "Нет данных")}</div>
 {:else}
   <div style="display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;">
     <p class="admin-muted" style="margin:0;">
-      Изменения в админке имеют приоритет над <code>.env</code>. Кнопка «Восстановить» возвращает значение из переменных окружения.
+      {at("settings_hint", {}, "Изменения в админке имеют приоритет над .env. Кнопка «Сбросить» возвращает значение из переменных окружения.")}
     </p>
-    <button type="button" class="admin-btn admin-btn-sm admin-btn-ghost" on:click={toggleAllSections}>
-      {settingsAllOpen ? "Свернуть всё" : "Развернуть всё"}
-    </button>
+    <div style="display:flex; gap:8px;">
+      <button type="button" class="admin-btn admin-btn-sm admin-btn-ghost" on:click={toggleAllSections}>
+        {settingsAllOpen ? at("collapse_all", {}, "Свернуть всё") : at("expand_all", {}, "Развернуть всё")}
+      </button>
+      {#if Object.keys(settingsDirty).length > 0}
+        <button type="button" class="admin-btn admin-btn-sm admin-btn-primary" on:click={() => settingsStore.saveSettings(onSettingsSaved)} disabled={settingsSaving}>
+          {settingsSaving ? at("saving", {}, "Сохранение...") : at("save", {}, "Сохранить")}
+        </button>
+      {/if}
+    </div>
   </div>
   <Accordion.Root type="multiple" bind:value={settingsOpenSections} class="admin-accordion">
     {#each settingsSections as section}
@@ -35,7 +203,7 @@
           <Accordion.Trigger class="admin-accordion-trigger">
             <span class="admin-accordion-title">{sectionTitle(section.id)}</span>
             <span class="admin-accordion-meta">
-              {section.fields.length} параметров{#if overriddenInSection} · {overriddenInSection} override{/if}{#if dirtyInSection} · {dirtyInSection} изм.{/if}
+              {at("settings_params_count", { count: section.fields.length }, `${section.fields.length} параметров`)}{#if overriddenInSection} · {at("settings_overridden_count", { count: overriddenInSection }, `${overriddenInSection} override`)}{/if}{#if dirtyInSection} · {at("settings_dirty_count", { count: dirtyInSection }, `${dirtyInSection} изм.`)}{/if}
             </span>
             <ChevronRight size={16} class="admin-accordion-chev" />
           </Accordion.Trigger>
@@ -65,7 +233,7 @@
                       <Accordion.Trigger class="admin-settings-subsection-trigger">
                         <strong>{group.label}</strong>
                         <span class="admin-settings-subsection-meta">
-                          {group.fields.length} полей{#if subOverridden} · {subOverridden} override{/if}{#if subDirty} · {subDirty} изм.{/if}
+                          {at("settings_fields_count", { count: group.fields.length }, `${group.fields.length} полей`)}{#if subOverridden} · {at("settings_overridden_count", { count: subOverridden }, `${subOverridden} override`)}{/if}{#if subDirty} · {at("settings_dirty_count", { count: subDirty }, `${subDirty} изм.`)}{/if}
                         </span>
                         <ChevronRight size={14} class="admin-accordion-chev" />
                       </Accordion.Trigger>
diff --git a/bot/app/web/frontend/src/admin/sections/StatsSection.svelte b/bot/app/web/frontend/src/admin/sections/StatsSection.svelte
index c009ec5..3ffd62c 100644
--- a/bot/app/web/frontend/src/admin/sections/StatsSection.svelte
+++ b/bot/app/web/frontend/src/admin/sections/StatsSection.svelte
@@ -1,88 +1,99 @@
 <script>
   import { BarChart3, Coins, Database, Send, Shield, UsersRound } from "lucide-svelte";
+  import { getContext, onMount } from "svelte";
 
+  export let at;
   export let fmtDate = (value) => value;
   export let fmtMoney = (value) => value;
   export let paymentStatusVariant = () => "muted";
-  export let stats = null;
-  export let statsError = "";
-  export let statsLoading = false;
+
+  const statsStore = getContext("statsStore");
+
+  $: ({
+    stats,
+    statsError,
+    statsLoading,
+  } = $statsStore);
+
+  onMount(() => {
+    statsStore.loadStats();
+  });
 </script>
 
 {#if statsError}
-  <div class="admin-empty">Не удалось загрузить статистику: {statsError}</div>
+  <div class="admin-empty">{at("stats_error", { error: statsError }, "Не удалось загрузить статистику: " + statsError)}</div>
 {:else if statsLoading || !stats}
-  <div class="admin-empty">Загрузка…</div>
+  <div class="admin-empty">{at("loading", {}, "Загрузка…")}</div>
 {:else}
   <div class="admin-stat-grid">
     <article class="admin-stat-card">
-      <span class="admin-stat-label"><UsersRound size={14} /> Пользователи</span>
+      <span class="admin-stat-label"><UsersRound size={14} /> {at("stats_label_users", {}, "Пользователи")}</span>
       <span class="admin-stat-value">{stats.users?.total_users ?? 0}</span>
-      <span class="admin-stat-trend">В бане: {stats.users?.banned_users ?? 0}</span>
+      <span class="admin-stat-trend">{at("stats_trend_banned", { count: stats.users?.banned_users ?? 0 }, "В бане: " + (stats.users?.banned_users ?? 0))}</span>
     </article>
     <article class="admin-stat-card">
-      <span class="admin-stat-label"><Shield size={14} /> Платные подписки</span>
+      <span class="admin-stat-label"><Shield size={14} /> {at("stats_label_paid_subs", {}, "Платные подписки")}</span>
       <span class="admin-stat-value">{stats.users?.paid_subscriptions ?? 0}</span>
-      <span class="admin-stat-trend">Триалы: {stats.users?.trial_users ?? 0}</span>
+      <span class="admin-stat-trend">{at("stats_trend_trials", { count: stats.users?.trial_users ?? 0 }, "Триалы: " + (stats.users?.trial_users ?? 0))}</span>
     </article>
     <article class="admin-stat-card">
-      <span class="admin-stat-label"><Coins size={14} /> Доход за день</span>
+      <span class="admin-stat-label"><Coins size={14} /> {at("stats_label_today_rev", {}, "Доход за день")}</span>
       <span class="admin-stat-value">{fmtMoney(stats.financial?.today_revenue, stats.currency_symbol)}</span>
-      <span class="admin-stat-trend">{stats.financial?.today_payments_count ?? 0} платежей</span>
+      <span class="admin-stat-trend">{at("stats_trend_payments", { count: stats.financial?.today_payments_count ?? 0 }, (stats.financial?.today_payments_count ?? 0) + " платежей")}</span>
     </article>
     <article class="admin-stat-card">
-      <span class="admin-stat-label"><BarChart3 size={14} /> За неделю</span>
+      <span class="admin-stat-label"><BarChart3 size={14} /> {at("stats_label_week", {}, "За неделю")}</span>
       <span class="admin-stat-value">{fmtMoney(stats.financial?.week_revenue, stats.currency_symbol)}</span>
-      <span class="admin-stat-trend">Месяц: {fmtMoney(stats.financial?.month_revenue, stats.currency_symbol)}</span>
+      <span class="admin-stat-trend">{at("stats_trend_month", { value: fmtMoney(stats.financial?.month_revenue, stats.currency_symbol) }, "Месяц: " + fmtMoney(stats.financial?.month_revenue, stats.currency_symbol))}</span>
     </article>
     <article class="admin-stat-card">
-      <span class="admin-stat-label"><Database size={14} /> Всё время</span>
+      <span class="admin-stat-label"><Database size={14} /> {at("stats_label_all_time", {}, "Всё время")}</span>
       <span class="admin-stat-value">{fmtMoney(stats.financial?.all_time_revenue, stats.currency_symbol)}</span>
-      <span class="admin-stat-trend">Sync: {stats.panel_sync?.status ?? "—"}</span>
+      <span class="admin-stat-trend">{at("stats_sync_label", {}, "Sync")}: {stats.panel_sync?.status ?? "—"}</span>
     </article>
     {#if stats.queue}
       <article class="admin-stat-card">
-        <span class="admin-stat-label"><Send size={14} /> Очередь</span>
+        <span class="admin-stat-label"><Send size={14} /> {at("stats_label_queue", {}, "Очередь")}</span>
         <span class="admin-stat-value">{stats.queue.user_queue_size ?? 0}</span>
-        <span class="admin-stat-trend">Группы: {stats.queue.group_queue_size ?? 0}</span>
+        <span class="admin-stat-trend">{at("stats_trend_groups", { count: stats.queue.group_queue_size ?? 0 }, "Группы: " + (stats.queue.group_queue_size ?? 0))}</span>
       </article>
     {/if}
   </div>
 
   <div class="admin-table-wrap">
     <header class="admin-card-head">
-      <h3>Последние платежи</h3>
-      <small>{(stats.recent_payments || []).length} записей</small>
+      <h3>{at("stats_recent_payments", {}, "Последние платежи")}</h3>
+      <small>{at("stats_records_count", { count: (stats.recent_payments || []).length }, (stats.recent_payments || []).length + " записей")}</small>
     </header>
     {#if (stats.recent_payments || []).length}
       <table class="admin-table">
         <thead>
           <tr>
-            <th>ID</th>
-            <th>Пользователь</th>
-            <th>Сумма</th>
-            <th>Провайдер</th>
-            <th>Статус</th>
-            <th>Дата</th>
+            <th>{at("id", {}, "ID")}</th>
+            <th>{at("user", {}, "Пользователь")}</th>
+            <th>{at("amount", {}, "Сумма")}</th>
+            <th>{at("provider", {}, "Провайдер")}</th>
+            <th>{at("status", {}, "Статус")}</th>
+            <th>{at("date", {}, "Дата")}</th>
           </tr>
         </thead>
         <tbody>
           {#each stats.recent_payments as p}
             <tr>
               <td class="admin-cell-id" data-label="ID">#{p.payment_id}</td>
-              <td data-label="Пользователь">{p.user_label || p.user_id}</td>
-              <td data-label="Сумма">{fmtMoney(p.amount, p.currency)}</td>
-              <td data-label="Провайдер">{p.provider}</td>
-              <td data-label="Статус">
+              <td data-label={at("user", {}, "Пользователь")}>{p.user_label || p.user_id}</td>
+              <td data-label={at("amount", {}, "Сумма")}>{fmtMoney(p.amount, p.currency)}</td>
+              <td data-label={at("provider", {}, "Провайдер")}>{p.provider}</td>
+              <td data-label={at("status", {}, "Статус")}>
                 <span class="admin-badge admin-badge-{paymentStatusVariant(p.status)}">{p.status}</span>
               </td>
-              <td data-label="Дата">{fmtDate(p.created_at)}</td>
+              <td data-label={at("date", {}, "Дата")}>{fmtDate(p.created_at)}</td>
             </tr>
           {/each}
         </tbody>
       </table>
     {:else}
-      <div class="admin-card-body"><span class="admin-muted">Нет данных</span></div>
+      <div class="admin-card-body"><span class="admin-muted">{at("no_data", {}, "Нет данных")}</span></div>
     {/if}
   </div>
 {/if}
diff --git a/bot/app/web/frontend/src/admin/sections/TariffEditorModal.svelte b/bot/app/web/frontend/src/admin/sections/TariffEditorModal.svelte
new file mode 100644
index 0000000..e2ac879
--- /dev/null
+++ b/bot/app/web/frontend/src/admin/sections/TariffEditorModal.svelte
@@ -0,0 +1,498 @@
+<script>
+  import { Tabs, Select, Switch, Label } from "bits-ui";
+  import Dialog from "../../lib/components/ui/dialog.svelte";
+  import { Check, ChevronDown, Plus, Save, Trash2, X } from "lucide-svelte";
+  import { getContext } from "svelte";
+  import { normalizeUuidList } from "../../lib/admin/tariffDraft.js";
+  
+  export let at;
+  const tariffsStore = getContext("tariffsStore");
+  
+  $: ({
+    tariffEditorOpen,
+    tariffEditingKey,
+    tariffDraft,
+    tariffsSaving,
+    tariffDeleteOpen,
+    tariffDeleteTarget,
+    selectedBaseSquad,
+    selectedPremiumSquad,
+    panelSquadsLoading,
+    panelSquads,
+    tariffEditorTab,
+  } = $tariffsStore);
+
+</script>
+
+<Dialog
+  open={tariffEditorOpen}
+  title={tariffEditingKey ? at("tariff_edit_title", {}, "Настройка тарифа") : at("tariff_create_title", {}, "Новый тариф")}
+  description={tariffEditingKey || at("tariff_create_subtitle", {}, "Каталог будет сохранён в JSON после подтверждения")}
+  closeLabel={at("close", {}, "Закрыть")}
+  onclose={() => tariffsStore.updateState({ tariffEditorOpen: false })}
+  class="admin-dialog admin-tariff-dialog"
+>
+  <Tabs.Root bind:value={$tariffsStore.tariffEditorTab} class="admin-tabs-root">
+    <Tabs.List class="admin-tabs-list">
+      <Tabs.Trigger value="general" class="admin-tabs-trigger">{at("tariff_tab_general", {}, "Основное")}</Tabs.Trigger>
+      <Tabs.Trigger value="pricing" class="admin-tabs-trigger">{at("tariff_tab_pricing", {}, "Цены")}</Tabs.Trigger>
+      <Tabs.Trigger value="topup" class="admin-tabs-trigger">{at("tariff_tab_topup", {}, "Докупки")}</Tabs.Trigger>
+      <Tabs.Trigger value="premium" class="admin-tabs-trigger">{at("tariff_tab_premium", {}, "Premium")}</Tabs.Trigger>
+      <Tabs.Trigger value="hwid" class="admin-tabs-trigger">{at("tariff_tab_hwid", {}, "Устройства")}</Tabs.Trigger>
+    </Tabs.List>
+
+    <Tabs.Content value="general" class="admin-tabs-content">
+      <div class="admin-form-row admin-form-row-2">
+        <Label.Root class="admin-field-label">
+          <span>{at("tariff_label_key", {}, "Ключ тарифа")}</span>
+          <small>{at("tariff_hint_key", {}, "Латиницей, без пробелов. Используется в платежах и подписках, менять после публикации не рекомендуется")}</small>
+          <input class="input" type="text" placeholder="standard" bind:value={$tariffsStore.tariffDraft.key} />
+        </Label.Root>
+
+        <div class="admin-field-label">
+          <span>{at("tariff_label_model", {}, "Модель тарификации")}</span>
+          <small><b>{at("tariff_model_period_label", {}, "Период")}</b> — {at("tariff_model_period_desc", {}, "пользователь покупает фиксированный срок (1/3/12 мес. и т.д.)")}. <b>{at("tariff_model_traffic_label", {}, "Трафик")}</b> — {at("tariff_model_traffic_desc", {}, "пользователь покупает пакеты гигабайт по фиксированной цене за GB")}</small>
+          <Select.Root type="single" bind:value={$tariffsStore.tariffDraft.billing_model}>
+            <Select.Trigger class="admin-select-trigger" aria-label={at("tariff_label_model", {}, "Модель")}>
+              <span>{tariffDraft.billing_model === "traffic" ? at("tariff_model_traffic_label", {}, "Трафик") : at("tariff_model_period_label", {}, "Период")}</span>
+              <ChevronDown size={14} class="admin-select-icon" />
+            </Select.Trigger>
+            <Select.Portal>
+              <Select.Content class="admin-select-content" sideOffset={6}>
+                <Select.Item value="period" class="admin-select-item">
+                  <span>{at("tariff_model_period_label", {}, "Период")}</span>
+                  <Check size={14} class="admin-select-item-check" />
+                </Select.Item>
+                <Select.Item value="traffic" class="admin-select-item">
+                  <span>{at("tariff_model_traffic_label", {}, "Трафик")}</span>
+                  <Check size={14} class="admin-select-item-check" />
+                </Select.Item>
+              </Select.Content>
+            </Select.Portal>
+          </Select.Root>
+        </div>
+      </div>
+
+      <div class="admin-action-row admin-action-row-bordered">
+        <Switch.Root
+          checked={tariffDraft.enabled}
+          onCheckedChange={(v) => (tariffDraft.enabled = v)}
+          class="admin-switch-root"
+        >
+          <Switch.Thumb class="admin-switch-thumb" />
+        </Switch.Root>
+        <Label.Root class="admin-action-label">
+          <strong>{tariffDraft.enabled ? at("tariff_visible", {}, "Тариф виден на витрине") : at("tariff_hidden", {}, "Тариф скрыт от пользователей")}</strong>
+          <small>{at("tariff_enabled_hint", {}, "Выключенный тариф не показывается в боте/мини-аппе, но активные подписки на нём продолжают работать")}</small>
+        </Label.Root>
+      </div>
+
+      <div class="admin-form-row admin-form-row-2">
+        <Label.Root class="admin-field-label">
+          <span>{at("tariff_label_name_ru", {}, "Название · RU")}</span>
+          <input class="input" type="text" placeholder={at("tariff_placeholder_name_ru", {}, "Стандарт")} bind:value={$tariffsStore.tariffDraft.nameRu} />
+        </Label.Root>
+        <Label.Root class="admin-field-label">
+          <span>{at("tariff_label_name_en", {}, "Название · EN")}</span>
+          <input class="input" type="text" placeholder={at("tariff_placeholder_name_en", {}, "Standard")} bind:value={$tariffsStore.tariffDraft.nameEn} />
+        </Label.Root>
+      </div>
+
+      <div class="admin-form-row admin-form-row-2">
+        <Label.Root class="admin-field-label">
+          <span>{at("tariff_label_desc_ru", {}, "Описание · RU")}</span>
+          <input class="input" type="text" placeholder={at("tariff_placeholder_desc_ru", {}, "Базовый набор серверов")} bind:value={$tariffsStore.tariffDraft.descriptionRu} />
+        </Label.Root>
+        <Label.Root class="admin-field-label">
+          <span>{at("tariff_label_desc_en", {}, "Описание · EN")}</span>
+          <input class="input" type="text" placeholder={at("tariff_placeholder_desc_en", {}, "Base server pool")} bind:value={$tariffsStore.tariffDraft.descriptionEn} />
+        </Label.Root>
+      </div>
+
+      <div class="admin-field-label">
+        <span>{at("tariff_label_squads", {}, "Базовые Internal Squads")}</span>
+        <small>{panelSquadsLoading ? at("loading_squads", {}, "Загружаю список из панели…") : at("tariff_hint_squads", {}, "Сквады Remnawave, к которым подключается пользователь по этому тарифу. Выберите один или несколько")}</small>
+        <Select.Root
+          type="single"
+          bind:value={$tariffsStore.selectedBaseSquad}
+          onValueChange={(value) => {
+            tariffsStore.addSquadToDraft("squadUuids", value);
+            selectedBaseSquad = "";
+          }}
+        >
+          <Select.Trigger class="admin-select-trigger" aria-label={at("btn_add_squad", {}, "Добавить основной сквад")}>
+            <span>{at("btn_add_squad", {}, "Добавить сквад")}</span>
+            <ChevronDown size={14} class="admin-select-icon" />
+          </Select.Trigger>
+          <Select.Portal>
+            <Select.Content class="admin-select-content" sideOffset={6}>
+              {#each panelSquads as squad}
+                <Select.Item value={squad.uuid} class="admin-select-item">
+                  <span>{squad.name}</span>
+                  <Check size={14} class="admin-select-item-check" />
+                </Select.Item>
+              {/each}
+            </Select.Content>
+          </Select.Portal>
+        </Select.Root>
+        <div class="admin-chip-list">
+          {#each normalizeUuidList(tariffDraft.squadUuids) as uuid}
+            <button type="button" class="admin-chip" on:click={() => tariffsStore.removeSquadFromDraft("squadUuids", uuid)}>
+              {tariffsStore.squadLabel(uuid)} <X size={12} />
+            </button>
+          {/each}
+        </div>
+      </div>
+
+      <div class="admin-form-row admin-form-row-2">
+        <Label.Root class="admin-field-label">
+          <span>{at("tariff_label_hwid", {}, "Лимит устройств (HWID)")}</span>
+          <small>{at("tariff_hint_hwid", {}, "Сколько устройств может одновременно использовать подписку. Пусто — взять значение из .env, 0 — без ограничений")}</small>
+          <input class="input" type="number" min="0" placeholder="5" bind:value={$tariffsStore.tariffDraft.hwid_device_limit} />
+        </Label.Root>
+        {#if tariffDraft.billing_model === "period"}
+          <Label.Root class="admin-field-label">
+            <span>{at("tariff_label_traffic_limit", {}, "Месячный лимит трафика, GB")}</span>
+            <small>{at("tariff_hint_traffic_limit", {}, "Сколько GB включено в тариф на каждый месяц. 0 — безлимитный трафика. Сверху можно докупать пакеты на вкладке «Докупки»")}</small>
+            <input class="input" type="number" min="0" step="0.1" placeholder="100" bind:value={$tariffsStore.tariffDraft.monthly_gb} />
+          </Label.Root>
+        {:else}
+          <Label.Root class="admin-field-label">
+            <span>{at("tariff_label_conversion", {}, "Курс конвертации, ₽ за 1 GB")}</span>
+            <small>{at("tariff_hint_conversion", {}, "По этому курсу остаток подписки пересчитывается в гигабайты при переходе пользователя с тарифа «Период» на «Трафик»")}</small>
+            <input class="input" type="number" min="0" step="0.01" placeholder="20" bind:value={$tariffsStore.tariffDraft.conversion_rate_rub_per_gb} />
+          </Label.Root>
+        {/if}
+      </div>
+    </Tabs.Content>
+
+    <Tabs.Content value="premium" class="admin-tabs-content">
+      <section class="admin-editor-section">
+        <header class="admin-editor-section-head">
+          <div class="admin-editor-section-title">
+            <strong>{at("tariff_premium_head", {}, "Premium-доступ и отдельный счётчик трафика")}</strong>
+            <small>{at("tariff_premium_subhead", {}, "Premium-сквады дают пользователю доступ к более быстрым/премиальным нодам; их трафик считается отдельно от основного, чтобы можно было ограничить или продавать дополнительно")}</small>
+          </div>
+        </header>
+        <div class="admin-form-row admin-form-row-2">
+          <Label.Root class="admin-field-label">
+            <span>{at("tariff_label_premium_name_ru", {}, "Название premium-раздела, RU")}</span>
+            <small>{at("tariff_hint_premium_name_ru", {}, "Эта строка заменит «Premium-серверы» в кабинете, докупках и карточках лимитов.")}</small>
+            <input class="input" type="text" placeholder={at("tariff_placeholder_premium_name_ru", {}, "Premium-серверы")} bind:value={$tariffsStore.tariffDraft.premiumNameRu} />
+          </Label.Root>
+          <Label.Root class="admin-field-label">
+            <span>{at("tariff_label_premium_name_en", {}, "Название premium-раздела, EN")}</span>
+            <small>{at("tariff_hint_premium_name_en", {}, "Опционально для английского интерфейса.")}</small>
+            <input class="input" type="text" placeholder={at("tariff_placeholder_premium_name_en", {}, "Premium servers")} bind:value={$tariffsStore.tariffDraft.premiumNameEn} />
+          </Label.Root>
+        </div>
+        <div class="admin-form-row admin-form-row-2">
+          <div class="admin-field-label">
+            <span>{at("tariff_label_premium_squads", {}, "Premium Internal Squads")}</span>
+            <small>{at("tariff_hint_premium_squads", {}, "Сквады из Remnawave, доступные только владельцам этого тарифа. Трафик считается по их accessible nodes")}</small>
+            <Select.Root
+              type="single"
+              bind:value={$tariffsStore.selectedPremiumSquad}
+              onValueChange={(value) => {
+                tariffsStore.addSquadToDraft("premiumSquadUuids", value);
+                selectedPremiumSquad = "";
+              }}
+            >
+              <Select.Trigger class="admin-select-trigger" aria-label={at("btn_add_premium_squad", {}, "Добавить premium-сквад")}>
+                <span>{at("btn_add_premium_squad", {}, "Добавить premium-сквад")}</span>
+                <ChevronDown size={14} class="admin-select-icon" />
+              </Select.Trigger>
+              <Select.Portal>
+                <Select.Content class="admin-select-content" sideOffset={6}>
+                  {#each panelSquads as squad}
+                    <Select.Item value={squad.uuid} class="admin-select-item">
+                      <span>{squad.name}</span>
+                      <Check size={14} class="admin-select-item-check" />
+                    </Select.Item>
+                  {/each}
+                </Select.Content>
+              </Select.Portal>
+            </Select.Root>
+            <div class="admin-chip-list">
+              {#each normalizeUuidList(tariffDraft.premiumSquadUuids) as uuid}
+                <button type="button" class="admin-chip" on:click={() => tariffsStore.removeSquadFromDraft("premiumSquadUuids", uuid)}>
+                  {tariffsStore.squadLabel(uuid)} <X size={12} />
+                </button>
+              {/each}
+            </div>
+          </div>
+          <Label.Root class="admin-field-label">
+            <span>{at("tariff_label_premium_traffic_limit", {}, "Месячный лимит premium-трафика, GB")}</span>
+            <small>{at("tariff_hint_premium_traffic_limit", {}, "Сколько GB через premium-сквады включено в тариф каждый месяц. 0 или пусто — отдельного premium-лимита нет (premium-нодами можно пользоваться без ограничения)")}</small>
+            <input class="input" type="number" min="0" step="0.1" placeholder="50" bind:value={$tariffsStore.tariffDraft.premium_monthly_gb} />
+          </Label.Root>
+        </div>
+      </section>
+
+      <section class="admin-editor-section">
+        <header class="admin-editor-section-head">
+          <div class="admin-editor-section-title">
+            <strong>{at("tariff_premium_topup_title", {}, "Докупка premium-трафика")}</strong>
+            <small>{at("tariff_premium_topup_subtitle", {}, "Пакеты для расширения месячного premium-лимита, когда пользователь его исчерпал")}</small>
+          </div>
+          <div class="admin-editor-section-actions">
+            <button type="button" class="admin-btn admin-btn-sm" on:click={() => tariffsStore.addDraftRow("premiumTopupRubRows", { gb: 10, price: "" })}><Plus size={12} /> {at("tariff_btn_package_rub", {}, "Пакет ₽")}</button>
+            <button type="button" class="admin-btn admin-btn-sm" on:click={() => tariffsStore.addDraftRow("premiumTopupStarsRows", { gb: 10, price: "" })}><Plus size={12} /> {at("tariff_btn_package_stars", {}, "Пакет ⭐")}</button>
+          </div>
+        </header>
+        <div class="admin-package-columns">
+          <div class="admin-row-editor">
+            <span class="admin-row-editor-caption">{at("payment_rub", {}, "Оплата рублями")}</span>
+            {#if tariffDraft.premiumTopupRubRows.length}
+              <div class="admin-row-editor-line admin-row-editor-header">
+                <span>{at("tariff_col_volume_gb", {}, "Объём, GB")}</span>
+                <span>{at("tariff_col_price_rub", {}, "Цена, ₽")}</span>
+                <span></span>
+              </div>
+            {/if}
+            {#each tariffDraft.premiumTopupRubRows as row, index}
+              <div class="admin-row-editor-line">
+                <input class="input" type="number" min="0.1" step="0.1" placeholder="10" bind:value={row.gb} aria-label={at("tariff_col_volume_gb", {}, "Объём premium-пакета в GB")} />
+                <input class="input" type="number" min="0" step="0.01" placeholder="199" bind:value={row.price} aria-label={at("tariff_label_price_rub", {}, "Цена premium-пакета в рублях")} />
+                <button type="button" class="admin-btn admin-btn-sm admin-btn-danger" on:click={() => tariffsStore.removeDraftRow("premiumTopupRubRows", index)} aria-label={at("btn_delete", {}, "Удалить")}><Trash2 size={13} /></button>
+              </div>
+            {/each}
+          </div>
+          <div class="admin-row-editor">
+            <span class="admin-row-editor-caption">{at("payment_stars", {}, "Оплата Telegram Stars")}</span>
+            {#if tariffDraft.premiumTopupStarsRows.length}
+              <div class="admin-row-editor-line admin-row-editor-header">
+                <span>{at("tariff_col_volume_gb", {}, "Объём, GB")}</span>
+                <span>{at("tariff_col_price_stars", {}, "Цена, ⭐")}</span>
+                <span></span>
+              </div>
+            {/if}
+            {#each tariffDraft.premiumTopupStarsRows as row, index}
+              <div class="admin-row-editor-line">
+                <input class="input" type="number" min="0.1" step="0.1" placeholder="10" bind:value={row.gb} aria-label={at("tariff_col_volume_gb", {}, "Объём premium-пакета в GB")} />
+                <input class="input" type="number" min="0" step="1" placeholder="100" bind:value={row.price} aria-label={at("tariff_label_price_stars", {}, "Цена premium-пакета в Telegram Stars")} />
+                <button type="button" class="admin-btn admin-btn-sm admin-btn-danger" on:click={() => tariffsStore.removeDraftRow("premiumTopupStarsRows", index)} aria-label={at("btn_delete", {}, "Удалить")}><Trash2 size={13} /></button>
+              </div>
+            {/each}
+          </div>
+        </div>
+      </section>
+    </Tabs.Content>
+
+    <Tabs.Content value="pricing" class="admin-tabs-content">
+      {#if tariffDraft.billing_model === "period"}
+        <section class="admin-editor-section">
+          <header class="admin-editor-section-head">
+            <div class="admin-editor-section-title">
+              <strong>{at("tariff_pricing_period_title", {}, "Периоды подписки и цены")}</strong>
+              <small>{at("tariff_pricing_period_subtitle", {}, "Каждая строка — отдельный вариант на витрине: за сколько месяцев пользователь платит и сколько это стоит")}</small>
+            </div>
+            <button type="button" class="admin-btn admin-btn-sm" on:click={() => tariffsStore.addDraftRow("periodRows", { months: 1, rub: "", stars: "" })}>
+              <Plus size={13} /> {at("tariff_btn_period", {}, "Период")}
+            </button>
+          </header>
+          {#if !tariffDraft.periodRows.length}
+            <p class="admin-muted">{at("tariff_pricing_empty", {}, "Добавьте хотя бы один период — без него тариф не появится на витрине.")}</p>
+          {:else}
+            <div class="admin-row-editor">
+              <div class="admin-row-editor-line admin-row-editor-4 admin-row-editor-header">
+                <span>{at("tariff_col_period_months", {}, "Срок, мес.")}</span>
+                <span>{at("tariff_col_price_rub", {}, "Цена, ₽")}</span>
+                <span>{at("tariff_col_price_stars_full", {}, "Цена, ⭐ Stars")}</span>
+                <span></span>
+              </div>
+              {#each tariffDraft.periodRows as row, index}
+                <div class="admin-row-editor-line admin-row-editor-4">
+                  <input class="input" type="number" min="1" placeholder="1" bind:value={row.months} aria-label={at("tariff_col_period_months", {}, "Срок (месяцы)")} />
+                  <input class="input" type="number" min="0" step="0.01" placeholder="299" bind:value={row.rub} aria-label={at("tariff_label_price_rub", {}, "Цена в рублях")} />
+                  <input class="input" type="number" min="0" step="1" placeholder="150" bind:value={row.stars} aria-label={at("tariff_label_price_stars", {}, "Цена в Telegram Stars")} />
+                  <button type="button" class="admin-btn admin-btn-sm admin-btn-danger" on:click={() => tariffsStore.removeDraftRow("periodRows", index)} aria-label={at("btn_delete", {}, "Удалить")}>
+                    <Trash2 size={13} />
+                  </button>
+                </div>
+              {/each}
+            </div>
+          {/if}
+        </section>
+      {:else}
+        <section class="admin-editor-section">
+          <header class="admin-editor-section-head">
+            <div class="admin-editor-section-title">
+              <strong>{at("tariff_pricing_traffic_title", {}, "Пакеты трафика")}</strong>
+              <small>{at("tariff_pricing_traffic_subtitle", {}, "Базовая витрина для трафиковой модели. Каждая строка — пакет «N гигабайт за N единиц валюты»")}</small>
+            </div>
+            <div class="admin-editor-section-actions">
+              <button type="button" class="admin-btn admin-btn-sm" on:click={() => tariffsStore.addDraftRow("trafficRubRows", { gb: 10, price: "" })}><Plus size={12} /> {at("tariff_btn_package_rub", {}, "Пакет ₽")}</button>
+              <button type="button" class="admin-btn admin-btn-sm" on:click={() => tariffsStore.addDraftRow("trafficStarsRows", { gb: 10, price: "" })}><Plus size={12} /> {at("tariff_btn_package_stars", {}, "Пакет ⭐")}</button>
+            </div>
+          </header>
+          <div class="admin-package-columns">
+            <div class="admin-row-editor">
+              <span class="admin-row-editor-caption">{at("payment_rub", {}, "Оплата рублями")}</span>
+              {#if tariffDraft.trafficRubRows.length}
+                <div class="admin-row-editor-line admin-row-editor-header">
+                  <span>{at("tariff_col_volume_gb", {}, "Объём, GB")}</span>
+                  <span>{at("tariff_col_price_rub", {}, "Цена, ₽")}</span>
+                  <span></span>
+                </div>
+              {/if}
+              {#each tariffDraft.trafficRubRows as row, index}
+                <div class="admin-row-editor-line">
+                  <input class="input" type="number" min="0.1" step="0.1" placeholder="50" bind:value={row.gb} aria-label={at("tariff_col_volume_gb", {}, "Объём пакета в GB")} />
+                  <input class="input" type="number" min="0" step="0.01" placeholder="299" bind:value={row.price} aria-label={at("tariff_label_price_rub", {}, "Цена пакета в рублях")} />
+                  <button type="button" class="admin-btn admin-btn-sm admin-btn-danger" on:click={() => tariffsStore.removeDraftRow("trafficRubRows", index)} aria-label={at("btn_delete", {}, "Удалить")}><Trash2 size={13} /></button>
+                </div>
+              {/each}
+            </div>
+            <div class="admin-row-editor">
+              <span class="admin-row-editor-caption">{at("payment_stars", {}, "Оплата Telegram Stars")}</span>
+              {#if tariffDraft.trafficStarsRows.length}
+                <div class="admin-row-editor-line admin-row-editor-header">
+                  <span>{at("tariff_col_volume_gb", {}, "Объём, GB")}</span>
+                  <span>{at("tariff_col_price_stars", {}, "Цена, ⭐")}</span>
+                  <span></span>
+                </div>
+              {/if}
+              {#each tariffDraft.trafficStarsRows as row, index}
+                <div class="admin-row-editor-line">
+                  <input class="input" type="number" min="0.1" step="0.1" placeholder="50" bind:value={row.gb} aria-label={at("tariff_col_volume_gb", {}, "Объём пакета в GB")} />
+                  <input class="input" type="number" min="0" step="1" placeholder="150" bind:value={row.price} aria-label={at("tariff_label_price_stars", {}, "Цена пакета в Telegram Stars")} />
+                  <button type="button" class="admin-btn admin-btn-sm admin-btn-danger" on:click={() => tariffsStore.removeDraftRow("trafficStarsRows", index)} aria-label={at("btn_delete", {}, "Удалить")}><Trash2 size={13} /></button>
+                </div>
+              {/each}
+            </div>
+          </div>
+        </section>
+      {/if}
+    </Tabs.Content>
+
+    <Tabs.Content value="topup" class="admin-tabs-content">
+      {#if tariffDraft.billing_model === "period"}
+        <section class="admin-editor-section">
+          <header class="admin-editor-section-head">
+            <div class="admin-editor-section-title">
+              <strong>{at("tariff_topup_title", {}, "Докупка трафика поверх месячного лимита")}</strong>
+              <small>{at("tariff_topup_subtitle", {}, "Когда у пользователя кончился месячный лимит, ему предложат купить дополнительный пакет, не меняя срок подписки")}</small>
+            </div>
+            <div class="admin-editor-section-actions">
+              <button type="button" class="admin-btn admin-btn-sm" on:click={() => tariffsStore.addDraftRow("topupRubRows", { gb: 10, price: "" })}><Plus size={12} /> {at("tariff_btn_package_rub", {}, "Пакет ₽")}</button>
+              <button type="button" class="admin-btn admin-btn-sm" on:click={() => tariffsStore.addDraftRow("topupStarsRows", { gb: 10, price: "" })}><Plus size={12} /> {at("tariff_btn_package_stars", {}, "Пакет ⭐")}</button>
+            </div>
+          </header>
+          <div class="admin-package-columns">
+            <div class="admin-row-editor">
+              <span class="admin-row-editor-caption">{at("payment_rub", {}, "Оплата рублями")}</span>
+              {#if tariffDraft.topupRubRows.length}
+                <div class="admin-row-editor-line admin-row-editor-header">
+                  <span>{at("tariff_col_volume_gb", {}, "Объём, GB")}</span>
+                  <span>{at("tariff_col_price_rub", {}, "Цена, ₽")}</span>
+                  <span></span>
+                </div>
+              {/if}
+              {#each tariffDraft.topupRubRows as row, index}
+                <div class="admin-row-editor-line">
+                  <input class="input" type="number" min="0.1" step="0.1" placeholder="20" bind:value={row.gb} aria-label={at("tariff_col_volume_gb", {}, "Объём пакета в GB")} />
+                  <input class="input" type="number" min="0" step="0.01" placeholder="149" bind:value={row.price} aria-label={at("tariff_label_price_rub", {}, "Цена пакета в рублях")} />
+                  <button type="button" class="admin-btn admin-btn-sm admin-btn-danger" on:click={() => tariffsStore.removeDraftRow("topupRubRows", index)} aria-label={at("btn_delete", {}, "Удалить")}><Trash2 size={13} /></button>
+                </div>
+              {/each}
+            </div>
+            <div class="admin-row-editor">
+              <span class="admin-row-editor-caption">{at("payment_stars", {}, "Оплата Telegram Stars")}</span>
+              {#if tariffDraft.topupStarsRows.length}
+                <div class="admin-row-editor-line admin-row-editor-header">
+                  <span>{at("tariff_col_volume_gb", {}, "Объём, GB")}</span>
+                  <span>{at("tariff_col_price_stars", {}, "Цена, ⭐")}</span>
+                  <span></span>
+                </div>
+              {/if}
+              {#each tariffDraft.topupStarsRows as row, index}
+                <div class="admin-row-editor-line">
+                  <input class="input" type="number" min="0.1" step="0.1" placeholder="20" bind:value={row.gb} aria-label={at("tariff_col_volume_gb", {}, "Объём пакета в GB")} />
+                  <input class="input" type="number" min="0" step="1" placeholder="75" bind:value={row.price} aria-label={at("tariff_label_price_stars", {}, "Цена пакета в Telegram Stars")} />
+                  <button type="button" class="admin-btn admin-btn-sm admin-btn-danger" on:click={() => tariffsStore.removeDraftRow("topupStarsRows", index)} aria-label={at("btn_delete", {}, "Удалить")}><Trash2 size={13} /></button>
+                </div>
+              {/each}
+            </div>
+          </div>
+        </section>
+      {:else}
+        <p class="admin-muted">{at("tariff_topup_traffic_hint", {}, "Для трафиковой модели отдельные «докупки» не нужны — пакеты, которые вы настроили на вкладке «Цены», и являются докупками: пользователь покупает их повторно по мере исчерпания.")}</p>
+      {/if}
+    </Tabs.Content>
+
+    <Tabs.Content value="hwid" class="admin-tabs-content">
+      <section class="admin-editor-section">
+        <header class="admin-editor-section-head">
+          <div class="admin-editor-section-title">
+            <strong>{at("tariff_hwid_packages_title", {}, "Пакеты дополнительных устройств (HWID)")}</strong>
+            <small>{at("tariff_hwid_packages_subtitle", {}, "Расширяет лимит, указанный во вкладке «Основное». Каждая строка — пакет «+N устройств за N единиц валюты»")}</small>
+          </div>
+          <div class="admin-editor-section-actions">
+            <button type="button" class="admin-btn admin-btn-sm" on:click={() => tariffsStore.addDraftRow("hwidRubRows", { count: 1, price: "" })}><Plus size={12} /> {at("tariff_btn_package_rub", {}, "Пакет ₽")}</button>
+            <button type="button" class="admin-btn admin-btn-sm" on:click={() => tariffsStore.addDraftRow("hwidStarsRows", { count: 1, price: "" })}><Plus size={12} /> {at("tariff_btn_package_stars", {}, "Пакет ⭐")}</button>
+          </div>
+        </header>
+        <div class="admin-package-columns">
+          <div class="admin-row-editor">
+            <span class="admin-row-editor-caption">{at("payment_rub", {}, "Оплата рублями")}</span>
+            {#if tariffDraft.hwidRubRows.length}
+              <div class="admin-row-editor-line admin-row-editor-header">
+                <span>{at("tariff_col_hwid_count", {}, "+ устройств")}</span>
+                <span>{at("tariff_col_price_rub", {}, "Цена, ₽")}</span>
+                <span></span>
+              </div>
+            {/if}
+            {#each tariffDraft.hwidRubRows as row, index}
+              <div class="admin-row-editor-line">
+                <input class="input" type="number" min="1" step="1" placeholder="1" bind:value={row.count} aria-label={at("tariff_label_hwid_count_full", {}, "Сколько устройств добавляет пакет")} />
+                <input class="input" type="number" min="0" step="0.01" placeholder="99" bind:value={row.price} aria-label={at("tariff_label_price_rub", {}, "Цена пакета в рублях")} />
+                <button type="button" class="admin-btn admin-btn-sm admin-btn-danger" on:click={() => tariffsStore.removeDraftRow("hwidRubRows", index)} aria-label={at("btn_delete", {}, "Удалить")}><Trash2 size={13} /></button>
+              </div>
+            {/each}
+          </div>
+          <div class="admin-row-editor">
+            <span class="admin-row-editor-caption">{at("payment_stars", {}, "Оплата Telegram Stars")}</span>
+            {#if tariffDraft.hwidStarsRows.length}
+              <div class="admin-row-editor-line admin-row-editor-header">
+                <span>{at("tariff_col_hwid_count", {}, "+ устройств")}</span>
+                <span>{at("tariff_col_price_stars", {}, "Цена, ⭐")}</span>
+                <span></span>
+              </div>
+            {/if}
+            {#each tariffDraft.hwidStarsRows as row, index}
+              <div class="admin-row-editor-line">
+                <input class="input" type="number" min="1" step="1" placeholder="1" bind:value={row.count} aria-label={at("tariff_label_hwid_count_full", {}, "Сколько устройств добавляет пакет")} />
+                <input class="input" type="number" min="0" step="1" placeholder="50" bind:value={row.price} aria-label={at("tariff_label_price_stars", {}, "Цена пакета в Telegram Stars")} />
+                <button type="button" class="admin-btn admin-btn-sm admin-btn-danger" on:click={() => tariffsStore.removeDraftRow("hwidStarsRows", index)} aria-label={at("btn_delete", {}, "Удалить")}><Trash2 size={13} /></button>
+              </div>
+            {/each}
+          </div>
+        </div>
+      </section>
+    </Tabs.Content>
+  </Tabs.Root>
+
+  <div class="admin-dialog-actions">
+    <button type="button" class="admin-btn" on:click={() => tariffsStore.updateState({ tariffEditorOpen: false })}>{at("btn_cancel", {}, "Отмена")}</button>
+    <button type="button" class="admin-btn admin-btn-primary" on:click={tariffsStore.saveTariffDraft} disabled={tariffsSaving || !tariffDraft.key.trim()}>
+      <Save size={14} /> {tariffsSaving ? at("btn_saving", {}, "Сохранение...") : at("btn_save_tariff", {}, "Сохранить тариф")}
+    </button>
+  </div>
+</Dialog>
+
+<Dialog
+  open={tariffDeleteOpen}
+  title={at("tariff_delete_title", {}, "Удалить тариф?")}
+  description={tariffDeleteTarget ? at("tariff_delete_subtitle", { key: tariffDeleteTarget.key }, `Тариф ${tariffDeleteTarget.key} исчезнет из каталога продаж.`) : ""}
+  closeLabel={at("close", {}, "Закрыть")}
+  onclose={() => tariffsStore.updateState({ tariffDeleteOpen: false })}
+  class="admin-dialog"
+>
+  <div class="admin-form-row">
+    <button type="button" class="admin-btn" on:click={() => tariffsStore.updateState({ tariffDeleteOpen: false })}>{at("btn_cancel", {}, "Отмена")}</button>
+    <button type="button" class="admin-btn admin-btn-danger" on:click={tariffsStore.deleteTariff} disabled={tariffsSaving}>
+      <Trash2 size={14} /> {at("btn_confirm_delete", {}, "Подтвердить удаление")}
+    </button>
+  </div>
+</Dialog>
diff --git a/bot/app/web/frontend/src/admin/sections/TariffsSection.svelte b/bot/app/web/frontend/src/admin/sections/TariffsSection.svelte
index 13adde6..d1cfcbe 100644
--- a/bot/app/web/frontend/src/admin/sections/TariffsSection.svelte
+++ b/bot/app/web/frontend/src/admin/sections/TariffsSection.svelte
@@ -1,57 +1,89 @@
 <script>
-  import { RefreshCw, Trash2 } from "lucide-svelte";
+  import { RefreshCw, Trash2, Plus } from "lucide-svelte";
+  import { getContext, onMount } from "svelte";
 
-  export let disabledTariffs = 0;
-  export let enabledTariffs = [];
-  export let loadTariffs = () => {};
-  export let openEditTariff = () => {};
-  export let setDefaultTariff = () => {};
-  export let tariffDeleteOpen = false;
-  export let tariffDeleteTarget = null;
-  export let tariffName = () => "";
-  export let tariffPriceSummary = () => "";
-  export let tariffsCatalog = { tariffs: [] };
-  export let tariffsLoading = false;
-  export let tariffsPath = "";
-  export let tariffsSaving = false;
-  export let toggleTariffEnabled = () => {};
+  export let at;
+  export let fmtMoney;
+
+  const tariffsStore = getContext("tariffsStore");
+
+  $: ({
+    tariffsCatalog,
+    tariffsLoading,
+    tariffsPath,
+    tariffsSaving,
+  } = $tariffsStore);
+
+  $: enabledTariffs = (tariffsCatalog.tariffs || []).filter((tariff) => tariff.enabled !== false);
+  $: disabledTariffs = Math.max(0, (tariffsCatalog.tariffs || []).length - enabledTariffs.length);
+
+  function tariffName(tariff) {
+    return tariff?.names?.ru || tariff?.names?.en || tariff?.key || "—";
+  }
+
+  function tariffPriceSummary(tariff) {
+    if (tariff.billing_model === "traffic") {
+      const rub = tariff.traffic_packages?.rub || [];
+      const first = rub[0];
+      return first ? `${first.gb} GB ${at("at", {}, "за")} ${fmtMoney(first.price, "RUB")}` : at("tariff_traffic_packages", {}, "Пакеты трафика");
+    }
+    const months = [...(tariff.enabled_periods || [])].sort((a, b) => a - b);
+    return months
+      .map((month) => {
+        const rub = tariff.prices_rub?.[String(month)];
+        const stars = tariff.prices_stars?.[String(month)];
+        if (rub) return `${month} ${at("months_short", {}, "мес.")} ${fmtMoney(rub, "RUB")}`;
+        if (stars) return `${month} ${at("months_short", {}, "мес.")} ${stars} ⭐`;
+        return `${month} ${at("months_short", {}, "мес.")}`;
+      })
+      .join(" · ");
+  }
+
+  onMount(() => {
+    tariffsStore.loadTariffs();
+  });
 </script>
 
 {#if tariffsLoading}
-  <div class="admin-empty">Загрузка…</div>
+  <div class="admin-empty">{at("loading", {}, "Загрузка…")}</div>
 {:else}
   <div class="admin-stat-grid">
     <div class="admin-stat-card">
-      <span class="admin-stat-label">Всего тарифов</span>
+      <span class="admin-stat-label">{at("tariffs_stat_total", {}, "Всего тарифов")}</span>
       <strong class="admin-stat-value">{tariffsCatalog.tariffs.length}</strong>
-      <span class="admin-stat-trend">Включено: {enabledTariffs.length}</span>
+      <span class="admin-stat-trend">{at("tariffs_stat_enabled", {}, "Включено")}: {enabledTariffs.length}</span>
     </div>
     <div class="admin-stat-card">
-      <span class="admin-stat-label">По умолчанию</span>
+      <span class="admin-stat-label">{at("tariffs_stat_default", {}, "По умолчанию")}</span>
       <strong class="admin-stat-value">{tariffsCatalog.default_tariff || "—"}</strong>
-      <span class="admin-stat-trend">Используется для новых подписок</span>
+      <span class="admin-stat-trend">{at("tariffs_stat_default_hint", {}, "Используется для новых подписок")}</span>
     </div>
     <div class="admin-stat-card">
-      <span class="admin-stat-label">Отключено</span>
+      <span class="admin-stat-label">{at("tariffs_stat_disabled", {}, "Отключено")}</span>
       <strong class="admin-stat-value">{disabledTariffs}</strong>
-      <span class="admin-stat-trend">Скрыто с витрины</span>
+      <span class="admin-stat-trend">{at("tariffs_stat_disabled_hint", {}, "Скрыто с витрины")}</span>
     </div>
   </div>
 
   <article class="admin-card">
     <header class="admin-card-head">
       <div>
-        <h3>Каталог тарифов</h3>
+        <h3>{at("tariffs_title", {}, "Каталог тарифов")}</h3>
         <small>{tariffsPath || "config/tariffs.json"}</small>
       </div>
-      <button type="button" class="admin-btn admin-btn-sm" on:click={loadTariffs} disabled={tariffsLoading || tariffsSaving}>
-        <RefreshCw size={13} /> Обновить
-      </button>
+      <div class="admin-editor-section-actions">
+        <button type="button" class="admin-btn admin-btn-sm" on:click={tariffsStore.loadTariffs} disabled={tariffsLoading || tariffsSaving}>
+          <RefreshCw size={13} /> {at("btn_refresh", {}, "Обновить")}
+        </button>
+        <button type="button" class="admin-btn admin-btn-sm admin-btn-primary" on:click={tariffsStore.openCreateTariff} disabled={tariffsLoading || tariffsSaving}>
+          <Plus size={13} /> {at("btn_create_tariff", {}, "Создать тариф")}
+        </button>
+      </div>
     </header>
     <div class="admin-card-body">
       {#if !tariffsCatalog.tariffs.length}
         <div class="admin-empty">
-          Каталог пуст. Добавьте первый тариф, после сохранения будет создан JSON-файл каталога.
+          {at("tariffs_catalog_empty", {}, "Каталог пуст. Добавьте первый тариф, после сохранения будет создан JSON-файл каталога.")}
         </div>
       {:else}
         <div class="admin-tariff-grid">
@@ -62,46 +94,46 @@
                   <div class="admin-tariff-title">
                     <strong>{tariffName(tariff)}</strong>
                     {#if tariff.key === tariffsCatalog.default_tariff}
-                      <span class="admin-badge admin-badge-success">Default</span>
+                      <span class="admin-badge admin-badge-success">{at("status_default", {}, "Default")}</span>
                     {/if}
                   </div>
                   <code>{tariff.key}</code>
                 </div>
                 {#if tariff.enabled === false}
-                  <span class="admin-badge admin-badge-muted">Выключен</span>
+                  <span class="admin-badge admin-badge-muted">{at("status_disabled", {}, "Выключен")}</span>
                 {:else}
-                  <span class="admin-badge admin-badge-success">Активен</span>
+                  <span class="admin-badge admin-badge-success">{at("status_active", {}, "Активен")}</span>
                 {/if}
               </div>
-              <p>{tariff.descriptions?.ru || tariff.descriptions?.en || "Без описания"}</p>
+              <p>{tariff.descriptions?.ru || tariff.descriptions?.en || at("no_description", {}, "Без описания")}</p>
               <div class="admin-tariff-facts">
-                <span>{tariff.billing_model === "traffic" ? "Трафик" : "Периоды"}</span>
+                <span>{tariff.billing_model === "traffic" ? at("tariff_model_traffic", {}, "Трафик") : at("tariff_model_periods", {}, "Периоды")}</span>
                 <span>{tariffPriceSummary(tariff)}</span>
-                <span>Squads: {(tariff.squad_uuids || []).length}</span>
-                <span>Premium: {(tariff.premium_squad_uuids || []).length ? `${tariff.premium_monthly_gb || 0} GB` : "—"}</span>
-                <span>Устройства: {tariff.hwid_device_limit ?? "env"}</span>
+                <span>{at("tariff_squads", {}, "Squads")}: {(tariff.squad_uuids || []).length}</span>
+                <span>{at("tariff_premium", {}, "Premium")}: {(tariff.premium_squad_uuids || []).length ? `${tariff.premium_monthly_gb || 0} GB` : "—"}</span>
+                <span>{at("tariff_devices", {}, "Устройства")}: {tariff.hwid_device_limit ?? "env"}</span>
               </div>
               <div class="admin-tariff-actions">
-                <button type="button" class="admin-btn admin-btn-sm" on:click={() => openEditTariff(tariff)}>
-                  Настроить
+                <button type="button" class="admin-btn admin-btn-sm" on:click={() => tariffsStore.openEditTariff(tariff)}>
+                  {at("btn_configure", {}, "Настроить")}
                 </button>
-                <button type="button" class="admin-btn admin-btn-sm" on:click={() => toggleTariffEnabled(tariff)} disabled={tariffsSaving}>
-                  {tariff.enabled === false ? "Включить" : "Выключить"}
+                <button type="button" class="admin-btn admin-btn-sm" on:click={() => tariffsStore.toggleTariffEnabled(tariff)} disabled={tariffsSaving}>
+                  {tariff.enabled === false ? at("btn_enable", {}, "Включить") : at("btn_disable", {}, "Выключить")}
                 </button>
                 <button
                   type="button"
                   class="admin-btn admin-btn-sm"
-                  on:click={() => setDefaultTariff(tariff.key)}
+                  on:click={() => tariffsStore.setDefaultTariff(tariff.key)}
                   disabled={tariffsSaving || tariff.enabled === false || tariff.key === tariffsCatalog.default_tariff}
                 >
-                  По умолчанию
+                  {at("btn_set_default", {}, "По умолчанию")}
                 </button>
                 <button
                   type="button"
                   class="admin-btn admin-btn-sm admin-btn-danger"
-                  on:click={() => { tariffDeleteTarget = tariff; tariffDeleteOpen = true; }}
+                  on:click={() => tariffsStore.updateState({ tariffDeleteTarget: tariff, tariffDeleteOpen: true })}
                   disabled={tariffsSaving}
-                  aria-label="Удалить тариф"
+                  aria-label={at("btn_delete_tariff", {}, "Удалить тариф")}
                 >
                   <Trash2 size={13} />
                 </button>
diff --git a/bot/app/web/frontend/src/admin/sections/UserDetailModal.svelte b/bot/app/web/frontend/src/admin/sections/UserDetailModal.svelte
new file mode 100644
index 0000000..e3f71c3
--- /dev/null
+++ b/bot/app/web/frontend/src/admin/sections/UserDetailModal.svelte
@@ -0,0 +1,349 @@
+<script>
+  import { Label, Select, Separator, Tabs } from "bits-ui";
+  import Dialog from "../../lib/components/ui/dialog.svelte";
+  import {
+    CalendarDays, Copy, CreditCard, ExternalLink, Eye, Info, Key,
+    Mail, Map, MessageSquare, MousePointerClick, QrCode, RefreshCw, Send,
+    Plus, Settings, Shield, Trash2, User, UserMinus, UserPlus, Users
+  } from "lucide-svelte";
+  import { getContext } from "svelte";
+  
+  export let at;
+  export let fmtDate;
+  export let fmtMoney;
+  export let resolvedAvatarUrl;
+  export let userDisplayName;
+  export let userSecondaryName;
+  export let paymentStatusVariant;
+  export let trafficPercentValue;
+  export let trafficLeftLabel;
+  export let trafficOfLabel;
+  export let userInitials = () => "";
+  export let fmtDateShort = (v) => v;
+  
+  function pretty(val) {
+    if (val === true) return at("yes", {}, "Да");
+    if (val === false) return at("no", {}, "Нет");
+    return String(val ?? "—");
+  }
+
+  const usersStore = getContext("usersStore");
+  
+  $: ({
+    openedUser,
+    openedUserDetail,
+    userDetailLoading,
+    userMessageDraft,
+    userExtendDays,
+    userActionBusy,
+    userDeleteOpen,
+    userBanConfirmOpen,
+    userMessageConfirmOpen,
+    userDetailTab,
+  } = $usersStore);
+
+</script>
+
+<Dialog
+  open={Boolean(openedUser)}
+  title={openedUser ? at("user_detail_title", { id: openedUser.user_id }, `Пользователь #${openedUser.user_id}`) : ""}
+  description={openedUser?.username ? "@" + openedUser.username : ""}
+  closeLabel={at("close", {}, "Закрыть")}
+  onclose={usersStore.closeUser}
+  class="admin-dialog admin-user-dialog"
+>
+  {#if openedUser}
+    {#if userDetailLoading || !openedUserDetail}
+      <p class="admin-muted">{at("loading", {}, "Загрузка…")}</p>
+    {:else}
+      <div class="admin-user-dialog-body">
+        <aside class="admin-user-aside">
+          <div class="admin-user-summary">
+            <span class="admin-avatar admin-avatar-lg">
+              {#if resolvedAvatarUrl(openedUser)}
+                <img src={resolvedAvatarUrl(openedUser)} alt="" loading="lazy" referrerpolicy="no-referrer" />
+              {:else}
+                <span>{userInitials(openedUser)}</span>
+              {/if}
+            </span>
+            <div class="admin-user-summary-meta">
+              <strong>{userDisplayName(openedUser)}</strong>
+              <small>{userSecondaryName(openedUser)}</small>
+              <div class="admin-user-summary-tags">
+                {#if openedUser.is_banned}
+                  <span class="admin-badge admin-badge-danger">{at("badge_banned", {}, "Бан")}</span>
+                {:else}
+                  <span class="admin-badge admin-badge-success">{at("badge_active", {}, "Активен")}</span>
+                {/if}
+                {#if openedUserDetail.active_subscription}
+                  <span class="admin-badge admin-badge-success">{at("badge_subscription", {}, "Подписка")}</span>
+                {:else}
+                  <span class="admin-badge admin-badge-muted">{at("badge_no_subscription", {}, "Без подписки")}</span>
+                {/if}
+              </div>
+            </div>
+          </div>
+
+          <div class="admin-user-stats">
+            <div class="admin-user-stat">
+              <span>{at("user_label_paid", {}, "Заплачено")}</span>
+              <strong>{fmtMoney(openedUserDetail.total_paid)}</strong>
+            </div>
+            <div class="admin-user-stat">
+              <span>{at("user_label_logs", {}, "Логов")}</span>
+              <strong>{openedUserDetail.log_count}</strong>
+            </div>
+          </div>
+
+          <div class="admin-subsection-title">{at("user_section_profile", {}, "Профиль")}</div>
+          <ul class="admin-meta-list">
+            <li><span>ID</span><strong>{openedUser.user_id}</strong></li>
+            <li><span>Telegram ID</span><strong>{openedUser.telegram_id || "—"}</strong></li>
+            <li><span>Username</span><strong>{openedUser.username ? "@" + openedUser.username : "—"}</strong></li>
+            <li><span>Email</span><strong class="admin-meta-truncate">{openedUser.email || "—"}</strong></li>
+            <li><span>{at("user_label_registration", {}, "Регистрация")}</span><strong>{fmtDate(openedUser.registration_date)}</strong></li>
+            <li><span>{at("user_label_ref_code", {}, "Реф. код")}</span><strong>{openedUserDetail.referral?.code || openedUserDetail.user?.referral_code || "—"}</strong></li>
+          </ul>
+
+          {#if openedUserDetail.subscription_url || openedUserDetail.referral?.bot_link || openedUserDetail.referral?.webapp_link}
+            <div class="admin-subsection-title">{at("user_section_links", {}, "Ссылки")}</div>
+            <div class="admin-link-list">
+              {#if openedUserDetail.subscription_url}
+                <div class="admin-link-row">
+                  <div class="admin-link-row-meta">
+                    <span class="admin-link-row-label">{at("status_subscription", {}, "Подписка")}</span>
+                    <a class="admin-link-row-url" href={openedUserDetail.subscription_url} target="_blank" rel="noopener">
+                      {openedUserDetail.subscription_url}
+                    </a>
+                  </div>
+                  <button type="button" class="admin-btn admin-btn-icon" title={at("user_copy_tooltip", {}, "Скопировать")} on:click={() => usersStore.copyToClipboard(openedUserDetail.subscription_url, at("user_sub_link_copied", {}, "Ссылка на подписку скопирована"))}>
+                    <Copy size={14} />
+                  </button>
+                </div>
+              {/if}
+              {#if openedUserDetail.referral?.bot_link}
+                <div class="admin-link-row">
+                  <div class="admin-link-row-meta">
+                    <span class="admin-link-row-label">{at("user_label_ref_bot", {}, "Реф. ссылка (бот)")}</span>
+                    <a class="admin-link-row-url" href={openedUserDetail.referral.bot_link} target="_blank" rel="noopener">
+                      {openedUserDetail.referral.bot_link}
+                    </a>
+                  </div>
+                  <button type="button" class="admin-btn admin-btn-icon" title={at("user_copy_tooltip", {}, "Скопировать")} on:click={() => usersStore.copyToClipboard(openedUserDetail.referral.bot_link, at("user_ref_link_copied", {}, "Реф. ссылка скопирована"))}>
+                    <Copy size={14} />
+                  </button>
+                </div>
+              {/if}
+              {#if openedUserDetail.referral?.webapp_link}
+                <div class="admin-link-row">
+                  <div class="admin-link-row-meta">
+                    <span class="admin-link-row-label">{at("user_label_ref_web", {}, "Реф. ссылка (веб)")}</span>
+                    <a class="admin-link-row-url" href={openedUserDetail.referral.webapp_link} target="_blank" rel="noopener">
+                      {openedUserDetail.referral.webapp_link}
+                    </a>
+                  </div>
+                  <button type="button" class="admin-btn admin-btn-icon" title={at("user_copy_tooltip", {}, "Скопировать")} on:click={() => usersStore.copyToClipboard(openedUserDetail.referral.webapp_link, at("user_ref_link_copied", {}, "Реф. ссылка скопирована"))}>
+                    <Copy size={14} />
+                  </button>
+                </div>
+              {/if}
+            </div>
+          {/if}
+        </aside>
+
+        <main class="admin-user-main">
+          <Tabs.Root bind:value={$usersStore.userDetailTab} class="admin-tabs-root admin-user-tabs-root">
+            <Tabs.List class="admin-tabs-list">
+              <Tabs.Trigger value="subscription" class="admin-tabs-trigger">{at("user_tab_subscription", {}, "Подписка")}</Tabs.Trigger>
+              <Tabs.Trigger value="activity" class="admin-tabs-trigger">{at("user_tab_activity", {}, "Активность")}</Tabs.Trigger>
+              <Tabs.Trigger value="actions" class="admin-tabs-trigger">{at("user_tab_actions", {}, "Действия")}</Tabs.Trigger>
+            </Tabs.List>
+
+            <Tabs.Content value="subscription" class="admin-tabs-content">
+          {#if openedUserDetail.active_subscription}
+            <ul class="admin-meta-list">
+              <li><span>{at("user_label_active_until", {}, "Активна до")}</span><strong>{fmtDate(openedUserDetail.active_subscription.end_date)}</strong></li>
+              <li><span>{at("user_label_tariff", {}, "Тариф")}</span><strong>{openedUserDetail.active_subscription.tariff_key || "—"}</strong></li>
+              <li><span>{at("user_label_auto_renew", {}, "Авто-продление")}</span><strong>{pretty(openedUserDetail.active_subscription.auto_renew_enabled)}</strong></li>
+              <li><span>{at("user_label_provider", {}, "Провайдер")}</span><strong>{openedUserDetail.active_subscription.provider || "—"}</strong></li>
+            </ul>
+            <div class="admin-traffic-summary">
+              <div class={`admin-traffic-card${openedUserDetail.active_subscription.is_throttled ? " admin-traffic-card-warning" : ""}`}>
+                <div class="admin-traffic-head">
+                  <span>{at("user_label_main_traffic", {}, "Основной трафик")}</span>
+                  <strong>{trafficOfLabel(openedUserDetail.active_subscription.traffic_used_bytes, openedUserDetail.active_subscription.traffic_limit_bytes)}</strong>
+                </div>
+                <div class="admin-traffic-bar" aria-label={at("aria_label_main_traffic", {}, "Использование основного трафика")}>
+                  <span style={`width: ${trafficPercentValue(openedUserDetail.active_subscription.traffic_used_bytes, openedUserDetail.active_subscription.traffic_limit_bytes)}%`}></span>
+                </div>
+                <div class="admin-traffic-meta">
+                  <span>{at("user_traffic_left", { left: trafficLeftLabel(openedUserDetail.active_subscription.traffic_used_bytes, openedUserDetail.active_subscription.traffic_limit_bytes) }, "Осталось: " + trafficLeftLabel(openedUserDetail.active_subscription.traffic_used_bytes, openedUserDetail.active_subscription.traffic_limit_bytes))}</span>
+                  <span>{trafficPercentValue(openedUserDetail.active_subscription.traffic_used_bytes, openedUserDetail.active_subscription.traffic_limit_bytes)}%</span>
+                </div>
+              </div>
+              {#if Number(openedUserDetail.active_subscription.premium_limit_bytes || 0) > 0}
+                <div class={`admin-traffic-card admin-traffic-card-premium${openedUserDetail.active_subscription.premium_is_limited ? " admin-traffic-card-warning" : ""}`}>
+                  <div class="admin-traffic-head">
+                    <span>{at("user_label_premium_squads", {}, "Premium-сквады")}</span>
+                    <strong>{trafficOfLabel(openedUserDetail.active_subscription.premium_used_bytes, openedUserDetail.active_subscription.premium_limit_bytes)}</strong>
+                  </div>
+                  <div class="admin-traffic-bar admin-traffic-bar-premium" aria-label={at("aria_label_premium_traffic", {}, "Использование premium-трафика")}>
+                    <span style={`width: ${trafficPercentValue(openedUserDetail.active_subscription.premium_used_bytes, openedUserDetail.active_subscription.premium_limit_bytes)}%`}></span>
+                  </div>
+                  <div class="admin-traffic-meta">
+                    <span>{at("user_traffic_left", { left: trafficLeftLabel(openedUserDetail.active_subscription.premium_used_bytes, openedUserDetail.active_subscription.premium_limit_bytes) }, "Осталось: " + trafficLeftLabel(openedUserDetail.active_subscription.premium_used_bytes, openedUserDetail.active_subscription.premium_limit_bytes))}</span>
+                    <span>{trafficPercentValue(openedUserDetail.active_subscription.premium_used_bytes, openedUserDetail.active_subscription.premium_limit_bytes)}%</span>
+                  </div>
+                </div>
+              {/if}
+            </div>
+          {:else}
+            <p class="admin-muted">{at("user_no_active_subscription", {}, "Активной подписки нет")}</p>
+          {/if}
+
+          {#if (openedUserDetail.subscriptions || []).length}
+            <Separator.Root class="admin-separator" />
+            <div class="admin-subsection-title">{at("user_history_title", { count: openedUserDetail.subscriptions.length }, `История подписок · ${openedUserDetail.subscriptions.length}`)}</div>
+            <div class="admin-mini-list">
+              {#each openedUserDetail.subscriptions.slice(0, 8) as sub}
+                <div class="admin-mini-list-row">
+                  <div>
+                    <strong>{sub.tariff_key || at("user_history_no_tariff", {}, "Без тарифа")}</strong>
+                    <small>{at("user_history_until", { date: fmtDate(sub.end_date) }, `до ${fmtDate(sub.end_date)}`)}</small>
+                  </div>
+                  {#if sub.is_active}
+                    <span class="admin-badge admin-badge-success">{at("user_history_active", {}, "Активна")}</span>
+                  {:else}
+                    <span class="admin-badge admin-badge-muted">{sub.status_from_panel || at("user_history_status_panel", {}, "История")}</span>
+                  {/if}
+                </div>
+              {/each}
+            </div>
+          {/if}
+        </Tabs.Content>
+
+        <Tabs.Content value="activity" class="admin-tabs-content">
+          <div class="admin-subsection-title">{at("user_recent_payments_title", { count: (openedUserDetail.recent_payments || []).length }, `Последние платежи · ${(openedUserDetail.recent_payments || []).length}`)}</div>
+          {#if (openedUserDetail.recent_payments || []).length}
+            <div class="admin-mini-list">
+              {#each openedUserDetail.recent_payments.slice(0, 8) as payment}
+                <div class="admin-mini-list-row">
+                  <div>
+                    <strong>{fmtMoney(payment.amount, payment.currency)}</strong>
+                    <small>{payment.provider} · {fmtDateShort(payment.created_at)}</small>
+                  </div>
+                  <span class="admin-badge admin-badge-{paymentStatusVariant(payment.status)}">{payment.status}</span>
+                </div>
+              {/each}
+            </div>
+          {:else}
+            <p class="admin-muted">{at("user_no_payments", {}, "Платежей нет")}</p>
+          {/if}
+        </Tabs.Content>
+
+        <Tabs.Content value="actions" class="admin-tabs-content admin-actions-tab">
+          <div class="admin-user-quick-actions">
+            <button type="button" class="admin-btn admin-reset-trial-btn" on:click={usersStore.resetTrialUser} disabled={userActionBusy}>
+              <RefreshCw size={14} /> {at("user_btn_reset_trial", {}, "Сбросить триал")}
+            </button>
+            <Label.Root class="admin-field-label admin-extend-field">
+              <span>{at("user_label_extend", {}, "Продлить подписку")}</span>
+              <div class="admin-extend-control">
+                <input class="input" type="number" min="1" bind:value={$usersStore.userExtendDays} aria-label={at("user_label_extend_days", {}, "Дней")} />
+                <button type="button" class="admin-btn" on:click={usersStore.extendUser} disabled={userActionBusy}>
+                  <Plus size={14} /> {at("user_btn_extend", {}, "Продлить")}
+                </button>
+              </div>
+            </Label.Root>
+          </div>
+
+          <Label.Root class="admin-field-label">
+            <span>{at("user_label_telegram_msg", {}, "Сообщение в Telegram")}</span>
+            <small>{at("user_hint_telegram_msg", {}, "Поддерживается HTML-разметка Telegram")}</small>
+            <textarea class="admin-textarea" rows="3" placeholder={at("user_placeholder_msg", {}, "Текст сообщения")} bind:value={$usersStore.userMessageDraft}></textarea>
+          </Label.Root>
+          <div class="admin-message-actions">
+            <button type="button" class="admin-btn" on:click={usersStore.previewUserMessage} disabled={userActionBusy || !userMessageDraft.trim()}>
+              <Eye size={14} /> {at("btn_preview_tg", {}, "Превью в Telegram")}
+            </button>
+            <button type="button" class="admin-btn admin-btn-primary" on:click={usersStore.requestSendUserMessage} disabled={userActionBusy || !userMessageDraft.trim()}>
+              <Send size={14} /> {at("btn_send_msg", {}, "Отправить сообщение")}
+            </button>
+          </div>
+
+          <section class="admin-danger-zone">
+            <header class="admin-danger-zone-head">
+              <strong>{at("user_danger_zone_title", {}, "Опасные действия")}</strong>
+              <small>{at("user_danger_zone_subtitle", {}, "Эти действия требуют подтверждения и (для удаления) необратимы")}</small>
+            </header>
+            <div class="admin-action-grid">
+              {#if openedUser.is_banned}
+                <button type="button" class="admin-btn admin-btn-danger-soft" on:click={usersStore.requestBanToggle} disabled={userActionBusy}>
+                  <UserPlus size={14} /> {at("btn_unban", {}, "Разбанить пользователя")}
+                </button>
+              {:else}
+                <button type="button" class="admin-btn admin-btn-danger" on:click={usersStore.requestBanToggle} disabled={userActionBusy}>
+                  <UserMinus size={14} /> {at("btn_ban", {}, "Заблокировать")}
+                </button>
+              {/if}
+              <button type="button" class="admin-btn admin-btn-danger" on:click={() => usersStore.updateState({ userDeleteOpen: true })} disabled={userActionBusy}>
+                <Trash2 size={14} /> {at("btn_delete_account", {}, "Удалить аккаунт")}
+              </button>
+            </div>
+          </section>
+        </Tabs.Content>
+          </Tabs.Root>
+        </main>
+      </div>
+    {/if}
+  {/if}
+</Dialog>
+
+<Dialog
+  open={userMessageConfirmOpen}
+  title={at("user_msg_confirm_title", {}, "Отправить сообщение пользователю?")}
+  description={openedUser ? at("user_msg_confirm_recipient", { name: userDisplayName(openedUser) }, `Получатель: ${userDisplayName(openedUser)}`) : ""}
+  closeLabel={at("close", {}, "Закрыть")}
+  onclose={() => usersStore.updateState({ userMessageConfirmOpen: false })}
+  class="admin-dialog"
+>
+  <div class="admin-confirm-message-preview">{userMessageDraft}</div>
+  <div class="admin-dialog-actions">
+    <button type="button" class="admin-btn" on:click={() => usersStore.updateState({ userMessageConfirmOpen: false })}>{at("btn_cancel", {}, "Отмена")}</button>
+    <button type="button" class="admin-btn admin-btn-primary" on:click={usersStore.sendUserMessage} disabled={userActionBusy || !userMessageDraft.trim()}>
+      <Send size={14} /> {at("btn_confirm_send", {}, "Подтвердить отправку")}
+    </button>
+  </div>
+</Dialog>
+
+<Dialog
+  open={userBanConfirmOpen}
+  title={at("user_ban_confirm_title", {}, "Заблокировать пользователя?")}
+  description={openedUser ? at("user_ban_confirm_subtitle", { name: userDisplayName(openedUser) }, `${userDisplayName(openedUser)} больше не сможет взаимодействовать с ботом. Действие можно отменить позже.`) : ""}
+  closeLabel={at("close", {}, "Закрыть")}
+  onclose={() => usersStore.updateState({ userBanConfirmOpen: false })}
+  class="admin-dialog"
+>
+  <div class="admin-dialog-actions">
+    <button type="button" class="admin-btn" on:click={() => usersStore.updateState({ userBanConfirmOpen: false })}>{at("btn_cancel", {}, "Отмена")}</button>
+    <button type="button" class="admin-btn admin-btn-danger" on:click={() => usersStore.applyBanToggle(true)} disabled={userActionBusy}>
+      <UserMinus size={14} /> {at("btn_ban", {}, "Заблокировать")}
+    </button>
+  </div>
+</Dialog>
+
+<Dialog
+  open={userDeleteOpen}
+  title={at("user_delete_confirm_title", {}, "Удалить пользователя?")}
+  description={at("user_delete_confirm_subtitle", {}, "Действие необратимо. Удалятся все платежи, подписки и логи.")}
+  closeLabel={at("close", {}, "Закрыть")}
+  onclose={() => usersStore.updateState({ userDeleteOpen: false })}
+  class="admin-dialog"
+>
+  <div class="admin-form-row">
+    <button type="button" class="admin-btn" on:click={() => usersStore.updateState({ userDeleteOpen: false })}>{at("btn_cancel", {}, "Отмена")}</button>
+    <button type="button" class="admin-btn admin-btn-danger" on:click={usersStore.deleteUser} disabled={userActionBusy}>
+      <Trash2 size={14} /> {at("btn_confirm_delete", {}, "Подтвердить удаление")}
+    </button>
+  </div>
+</Dialog>
diff --git a/bot/app/web/frontend/src/admin/sections/UsersSection.svelte b/bot/app/web/frontend/src/admin/sections/UsersSection.svelte
index f1e4701..9670610 100644
--- a/bot/app/web/frontend/src/admin/sections/UsersSection.svelte
+++ b/bot/app/web/frontend/src/admin/sections/UsersSection.svelte
@@ -1,30 +1,63 @@
 <script>
   import { Check, ChevronDown, ChevronLeft, ChevronRight } from "lucide-svelte";
   import { Label, Select } from "bits-ui";
+  import { getContext, onMount } from "svelte";
 
-  export let USERS_FILTER_OPTIONS = [];
-  export let USERS_PAGE_SIZE = 25;
-  export let USERS_PANEL_STATUS_OPTIONS = [];
-  export let USERS_SORT_OPTIONS = [];
   export let at = (key) => key;
   export let fmtDateShort = (value) => value;
-  export let loadUsers = () => {};
-  export let openUser = () => {};
   export let optionLabel = () => "";
   export let panelStatusBadge = () => ({});
   export let resolvedAvatarUrl = () => "";
   export let userDisplayName = () => "";
   export let userInitials = () => "";
   export let userSecondaryName = () => "";
-  export let users = [];
-  export let usersFilter = "all";
-  export let usersHasMore = false;
-  export let usersLoading = false;
-  export let usersPage = 0;
-  export let usersPanelStatus = "all";
-  export let usersQuery = "";
-  export let usersSort = "registered_desc";
-  export let usersTotal = 0;
+
+  const usersStore = getContext("usersStore");
+
+  $: ({
+    users,
+    usersTotal,
+    usersPage,
+    usersQuery,
+    usersFilter,
+    usersPanelStatus,
+    usersSort,
+    usersLoading,
+  } = $usersStore);
+
+  const USERS_PAGE_SIZE = 25;
+  $: usersHasMore = users.length === USERS_PAGE_SIZE;
+
+  const USERS_FILTER_OPTIONS = [
+    { value: "all", label: at("filter_all", {}, "Все") },
+    { value: "active", label: at("filter_not_banned", {}, "Не забанены") },
+    { value: "banned", label: at("filter_banned", {}, "Забанены") },
+    { value: "tg_linked", label: at("filter_tg_linked", {}, "С Telegram") },
+    { value: "no_tg", label: at("filter_no_tg", {}, "Без Telegram") },
+    { value: "email_linked", label: at("filter_email_linked", {}, "С email") },
+    { value: "no_email", label: at("filter_no_email", {}, "Без email") },
+    { value: "panel_linked", label: at("filter_panel_linked", {}, "С панелью") },
+  ];
+
+  const USERS_SORT_OPTIONS = [
+    { value: "registered_desc", label: at("sort_registered_desc", {}, "Сначала новые") },
+    { value: "registered_asc", label: at("sort_registered_asc", {}, "Сначала старые") },
+    { value: "name_asc", label: at("sort_name_asc", {}, "Имя ↑") },
+    { value: "name_desc", label: at("sort_name_desc", {}, "Имя ↓") },
+    { value: "id_asc", label: at("sort_id_asc", {}, "ID ↑") },
+    { value: "id_desc", label: at("sort_id_desc", {}, "ID ↓") },
+  ];
+
+  const USERS_PANEL_STATUS_OPTIONS = [
+    { value: "all", label: at("panel_status_all", {}, "Все статусы") },
+    { value: "active", label: at("status_active", {}, "active") },
+    { value: "expired", label: at("status_expired", {}, "expired") },
+    { value: "limited", label: at("status_limited", {}, "limited") },
+  ];
+
+  onMount(() => {
+    usersStore.loadUsers();
+  });
 </script>
 
 <div class="admin-toolbar admin-toolbar-users">
@@ -33,10 +66,11 @@
       type="search"
       class="input"
       placeholder={at("users_search_placeholder", {}, "ID, @username или email")}
-      bind:value={usersQuery}
-      on:keydown={(e) => e.key === "Enter" && ((usersPage = 0), loadUsers())}
+      value={usersQuery}
+      on:input={(e) => usersStore.updateState({ usersQuery: e.target.value })}
+      on:keydown={(e) => e.key === "Enter" && (usersStore.updateState({ usersPage: 0 }), usersStore.loadUsers())}
     />
-    <button type="button" class="admin-btn admin-btn-primary" on:click={() => { usersPage = 0; loadUsers(); }}>{at("find", {}, "Найти")}</button>
+    <button type="button" class="admin-btn admin-btn-primary" on:click={() => { usersStore.updateState({ usersPage: 0 }); usersStore.loadUsers(); }}>{at("find", {}, "Найти")}</button>
   </div>
 
   <div class="admin-toolbar-controls">
@@ -45,7 +79,7 @@
       <Select.Root
         type="single"
         value={usersFilter}
-        onValueChange={(value) => { usersFilter = value; usersPage = 0; loadUsers(); }}
+        onValueChange={(value) => { usersStore.updateState({ usersFilter: value, usersPage: 0 }); usersStore.loadUsers(); }}
       >
         <Select.Trigger class="admin-select-trigger admin-toolbar-select" aria-label={at("filter", {}, "Фильтр")}>
           <span>{optionLabel(USERS_FILTER_OPTIONS, usersFilter)}</span>
@@ -69,7 +103,7 @@
       <Select.Root
         type="single"
         value={usersPanelStatus}
-        onValueChange={(value) => { usersPanelStatus = value; usersPage = 0; loadUsers(); }}
+        onValueChange={(value) => { usersStore.updateState({ usersPanelStatus: value, usersPage: 0 }); usersStore.loadUsers(); }}
       >
         <Select.Trigger class="admin-select-trigger admin-toolbar-select" aria-label={at("panel_status", {}, "Статус панели")}>
           <span>{optionLabel(USERS_PANEL_STATUS_OPTIONS, usersPanelStatus)}</span>
@@ -93,7 +127,7 @@
       <Select.Root
         type="single"
         value={usersSort}
-        onValueChange={(value) => { usersSort = value; usersPage = 0; loadUsers(); }}
+        onValueChange={(value) => { usersStore.updateState({ usersSort: value, usersPage: 0 }); usersStore.loadUsers(); }}
       >
         <Select.Trigger class="admin-select-trigger admin-toolbar-select" aria-label={at("sort", {}, "Сортировка")}>
           <span>{optionLabel(USERS_SORT_OPTIONS, usersSort)}</span>
@@ -146,7 +180,7 @@
         {@const avatar = resolvedAvatarUrl(user)}
         {@const badge = panelStatusBadge(user)}
         <li>
-          <button type="button" class="admin-user-row" on:click={() => openUser(user)}>
+          <button type="button" class="admin-user-row" on:click={() => usersStore.openUser(user)}>
             <span class="admin-avatar admin-avatar-sm">
               {#if avatar}
                 <img src={avatar} alt="" loading="lazy" referrerpolicy="no-referrer" />
@@ -172,10 +206,10 @@
 <div class="admin-pagination">
   <span class="admin-pagination-meta">{at("page", {}, "Страница")} {usersPage + 1}</span>
   <div class="admin-pagination-buttons">
-    <button type="button" class="admin-btn admin-btn-sm" disabled={usersPage === 0} on:click={() => { usersPage = Math.max(0, usersPage - 1); loadUsers(); }}>
+    <button type="button" class="admin-btn admin-btn-sm" disabled={usersPage === 0} on:click={() => { usersStore.updateState({ usersPage: Math.max(0, usersPage - 1) }); usersStore.loadUsers(); }}>
       <ChevronLeft size={14} /> {at("back", {}, "Назад")}
     </button>
-    <button type="button" class="admin-btn admin-btn-sm" disabled={!usersHasMore} on:click={() => { usersPage += 1; loadUsers(); }}>
+    <button type="button" class="admin-btn admin-btn-sm" disabled={!usersHasMore} on:click={() => { usersStore.updateState({ usersPage: usersPage + 1 }); usersStore.loadUsers(); }}>
       {at("next", {}, "Далее")} <ChevronRight size={14} />
     </button>
   </div>
diff --git a/bot/app/web/frontend/src/lib/admin/stores/adsStore.js b/bot/app/web/frontend/src/lib/admin/stores/adsStore.js
new file mode 100644
index 0000000..fff0b22
--- /dev/null
+++ b/bot/app/web/frontend/src/lib/admin/stores/adsStore.js
@@ -0,0 +1,101 @@
+import { writable } from "svelte/store";
+
+export function createAdsStore({ api, onToast, at }) {
+  const state = writable({
+    ads: [],
+    adsTotals: null,
+    adsLoading: false,
+    adCreateOpen: false,
+    adDraft: { source: "", start_param: "", cost: 0 },
+  });
+
+  async function loadAds() {
+    state.update((s) => ({ ...s, adsLoading: true }));
+    try {
+      const data = await api("/admin/ads");
+      if (data?.ok) {
+        state.update((s) => ({
+          ...s,
+          ads: data.campaigns || [],
+          adsTotals: data.totals || {},
+        }));
+      }
+    } finally {
+      state.update((s) => ({ ...s, adsLoading: false }));
+    }
+  }
+
+  async function createAd() {
+    let draft = null;
+    state.update((s) => {
+      draft = s.adDraft;
+      return s;
+    });
+    if (!draft.source.trim() || !draft.start_param.trim()) return;
+
+    const res = await api("/admin/ads", {
+      method: "POST",
+      body: JSON.stringify(draft),
+    });
+
+    if (res?.ok) {
+      onToast(at("ad_created", {}, "Кампания создана"));
+      state.update((s) => ({
+        ...s,
+        adCreateOpen: false,
+        adDraft: { source: "", start_param: "", cost: 0 },
+      }));
+      await loadAds();
+    } else {
+      onToast(res?.error || at("error", {}, "Ошибка"));
+    }
+  }
+
+  async function toggleAd(ad) {
+    const res = await api(`/admin/ads/${ad.id}/toggle`, {
+      method: "POST",
+      body: JSON.stringify({ is_active: !ad.is_active }),
+    });
+    if (res?.ok) {
+      state.update((s) => ({
+        ...s,
+        ads: s.ads.map((c) => (c.id === ad.id ? { ...c, is_active: !ad.is_active } : c)),
+      }));
+    } else {
+      onToast(res?.error || at("error", {}, "Ошибка"));
+    }
+  }
+
+  async function deleteAd(ad) {
+    const res = await api(`/admin/ads/${ad.id}`, { method: "DELETE" });
+    if (res?.ok) {
+      state.update((s) => ({
+        ...s,
+        ads: s.ads.filter((c) => c.id !== ad.id),
+      }));
+      onToast(at("ad_deleted", {}, "Кампания удалена"));
+    } else {
+      onToast(res?.error || at("error", {}, "Ошибка"));
+    }
+  }
+
+  function setCreateOpen(open) {
+    state.update((s) => ({ ...s, adCreateOpen: open }));
+  }
+
+  function updateDraft(fields) {
+    state.update((s) => ({ ...s, adDraft: { ...s.adDraft, ...fields } }));
+  }
+
+  return {
+    subscribe: state.subscribe,
+    set: state.set,
+    update: state.update,
+    loadAds,
+    createAd,
+    toggleAd,
+    deleteAd,
+    setCreateOpen,
+    updateDraft,
+  };
+}
diff --git a/bot/app/web/frontend/src/lib/admin/stores/broadcastStore.js b/bot/app/web/frontend/src/lib/admin/stores/broadcastStore.js
new file mode 100644
index 0000000..33fea5a
--- /dev/null
+++ b/bot/app/web/frontend/src/lib/admin/stores/broadcastStore.js
@@ -0,0 +1,60 @@
+import { writable } from "svelte/store";
+
+export function createBroadcastStore({ api, onToast, at }) {
+  const state = writable({
+    broadcastTarget: "all",
+    broadcastText: "",
+    broadcastBusy: false,
+    broadcastResult: null,
+  });
+
+  const BROADCAST_TARGET_OPTIONS = [
+    { value: "all", label: at("broadcast_target_all", {}, "Все активные") },
+    { value: "active", label: at("broadcast_target_active", {}, "С подпиской") },
+    { value: "inactive", label: at("broadcast_target_inactive", {}, "Без подписки") },
+  ];
+
+  async function runBroadcast() {
+    let text = "";
+    let target = "";
+    state.update((s) => {
+      text = s.broadcastText;
+      target = s.broadcastTarget;
+      s.broadcastBusy = true;
+      s.broadcastResult = null;
+      return s;
+    });
+
+    try {
+      const res = await api("/admin/broadcast", {
+        method: "POST",
+        body: JSON.stringify({ target, text }),
+      });
+      if (res?.ok) {
+        state.update((s) => ({
+          ...s,
+          broadcastText: "",
+          broadcastResult: { queued: res.queued || 0, failed: res.failed || 0 },
+        }));
+        onToast(at("broadcast_started", {}, "Рассылка запущена"));
+      } else {
+        onToast(res?.error || at("broadcast_failed", {}, "Ошибка рассылки"));
+      }
+    } finally {
+      state.update((s) => ({ ...s, broadcastBusy: false }));
+    }
+  }
+
+  function updateField(fields) {
+    state.update((s) => ({ ...s, ...fields }));
+  }
+
+  return {
+    subscribe: state.subscribe,
+    set: state.set,
+    update: state.update,
+    runBroadcast,
+    updateField,
+    BROADCAST_TARGET_OPTIONS,
+  };
+}
diff --git a/bot/app/web/frontend/src/lib/admin/stores/logsStore.js b/bot/app/web/frontend/src/lib/admin/stores/logsStore.js
new file mode 100644
index 0000000..7783bd5
--- /dev/null
+++ b/bot/app/web/frontend/src/lib/admin/stores/logsStore.js
@@ -0,0 +1,59 @@
+import { writable } from "svelte/store";
+
+export function createLogsStore({ api, at }) {
+  const state = writable({
+    logs: [],
+    logsTotal: 0,
+    logsPage: 0,
+    logsUserFilter: "",
+    logsLoading: false,
+  });
+
+  const LOGS_PAGE_SIZE = 50;
+
+  async function loadLogs() {
+    state.update((s) => ({ ...s, logsLoading: true }));
+    let currentPage = 0;
+    let filter = "";
+    state.update((s) => {
+      currentPage = s.logsPage;
+      filter = s.logsUserFilter;
+      return s;
+    });
+
+    try {
+      let q = `/admin/logs?page=${currentPage}&page_size=${LOGS_PAGE_SIZE}`;
+      if (filter.trim()) {
+        q += `&user_id=${encodeURIComponent(filter.trim())}`;
+      }
+      const data = await api(q);
+      if (data?.ok) {
+        state.update((s) => ({
+          ...s,
+          logs: data.logs || [],
+          logsTotal: data.total || 0,
+        }));
+      }
+    } finally {
+      state.update((s) => ({ ...s, logsLoading: false }));
+    }
+  }
+
+  function setPage(page) {
+    state.update((s) => ({ ...s, logsPage: page }));
+    loadLogs();
+  }
+
+  function setFilter(filter) {
+    state.update((s) => ({ ...s, logsUserFilter: filter }));
+  }
+
+  return {
+    subscribe: state.subscribe,
+    set: state.set,
+    update: state.update,
+    loadLogs,
+    setPage,
+    setFilter,
+  };
+}
diff --git a/bot/app/web/frontend/src/lib/admin/stores/paymentsStore.js b/bot/app/web/frontend/src/lib/admin/stores/paymentsStore.js
new file mode 100644
index 0000000..498d4dd
--- /dev/null
+++ b/bot/app/web/frontend/src/lib/admin/stores/paymentsStore.js
@@ -0,0 +1,47 @@
+import { writable } from "svelte/store";
+
+export function createPaymentsStore({ api, at }) {
+  const state = writable({
+    payments: [],
+    paymentsTotal: 0,
+    paymentsPage: 0,
+    paymentsLoading: false,
+  });
+
+  const PAYMENTS_PAGE_SIZE = 25;
+
+  async function loadPayments() {
+    state.update((s) => ({ ...s, paymentsLoading: true }));
+    let currentPage = 0;
+    state.update((s) => {
+      currentPage = s.paymentsPage;
+      return s;
+    });
+
+    try {
+      const data = await api(`/admin/payments?page=${currentPage}&page_size=${PAYMENTS_PAGE_SIZE}`);
+      if (data?.ok) {
+        state.update((s) => ({
+          ...s,
+          payments: data.payments || [],
+          paymentsTotal: data.total || 0,
+        }));
+      }
+    } finally {
+      state.update((s) => ({ ...s, paymentsLoading: false }));
+    }
+  }
+
+  function setPage(page) {
+    state.update((s) => ({ ...s, paymentsPage: page }));
+    loadPayments();
+  }
+
+  return {
+    subscribe: state.subscribe,
+    set: state.set,
+    update: state.update,
+    loadPayments,
+    setPage,
+  };
+}
diff --git a/bot/app/web/frontend/src/lib/admin/stores/promosStore.js b/bot/app/web/frontend/src/lib/admin/stores/promosStore.js
new file mode 100644
index 0000000..9831299
--- /dev/null
+++ b/bot/app/web/frontend/src/lib/admin/stores/promosStore.js
@@ -0,0 +1,112 @@
+import { writable } from "svelte/store";
+
+export function createPromosStore({ api, onToast }) {
+  const state = writable({
+    promos: [],
+    promosTotal: 0,
+    promosPage: 0,
+    promosLoading: false,
+    promoCreateOpen: false,
+    promoDraft: { code: "", bonus_days: 7, max_activations: 1, valid_days: 30 },
+  });
+
+  const PROMOS_PAGE_SIZE = 25;
+
+  async function loadPromos() {
+    state.update((s) => ({ ...s, promosLoading: true }));
+    let currentPage = 0;
+    state.update((s) => {
+      currentPage = s.promosPage;
+      return s;
+    });
+    try {
+      const data = await api(`/admin/promos?page=${currentPage}&page_size=${PROMOS_PAGE_SIZE}`);
+      if (data?.ok) {
+        state.update((s) => ({ ...s, promos: data.promos || [], promosTotal: data.total || 0 }));
+      }
+    } finally {
+      state.update((s) => ({ ...s, promosLoading: false }));
+    }
+  }
+
+  async function createPromo() {
+    let draft = null;
+    state.update((s) => {
+      draft = s.promoDraft;
+      return s;
+    });
+    if (!draft.code.trim()) return;
+    
+    const res = await api("/admin/promos", {
+      method: "POST",
+      body: JSON.stringify(draft),
+    });
+    
+    if (res?.ok) {
+      onToast("Промокод создан");
+      state.update((s) => ({
+        ...s,
+        promoCreateOpen: false,
+        promoDraft: { code: "", bonus_days: 7, max_activations: 1, valid_days: 30 }
+      }));
+      await loadPromos();
+    } else {
+      onToast(res?.error || "Ошибка");
+    }
+  }
+
+  async function togglePromo(promo) {
+    const res = await api(`/admin/promos/${promo.id}`, {
+      method: "PATCH",
+      body: JSON.stringify({ is_active: !promo.is_active }),
+    });
+    if (res?.ok) {
+      state.update((s) => ({
+        ...s,
+        promos: s.promos.map((p) => (p.id === promo.id ? res.promo : p))
+      }));
+    } else {
+      onToast(res?.error || "Ошибка");
+    }
+  }
+
+  async function deletePromo(promo) {
+    const res = await api(`/admin/promos/${promo.id}`, { method: "DELETE" });
+    if (res?.ok) {
+      state.update((s) => ({
+        ...s,
+        promos: s.promos.filter((p) => p.id !== promo.id)
+      }));
+      onToast("Промокод удалён");
+    } else {
+      onToast(res?.error || "Ошибка");
+    }
+  }
+
+  function setPage(page) {
+    state.update((s) => ({ ...s, promosPage: page }));
+    loadPromos();
+  }
+
+  function setCreateOpen(open) {
+    state.update((s) => ({ ...s, promoCreateOpen: open }));
+  }
+
+  function updateDraft(fields) {
+    state.update((s) => ({ ...s, promoDraft: { ...s.promoDraft, ...fields } }));
+  }
+
+  return {
+    subscribe: state.subscribe,
+    set: state.set,
+    update: state.update,
+    loadPromos,
+    createPromo,
+    togglePromo,
+    deletePromo,
+    setPage,
+    setCreateOpen,
+    updateDraft,
+    PROMOS_PAGE_SIZE,
+  };
+}
diff --git a/bot/app/web/frontend/src/lib/admin/stores/settingsStore.js b/bot/app/web/frontend/src/lib/admin/stores/settingsStore.js
new file mode 100644
index 0000000..edd2993
--- /dev/null
+++ b/bot/app/web/frontend/src/lib/admin/stores/settingsStore.js
@@ -0,0 +1,92 @@
+import { writable } from "svelte/store";
+
+export function createSettingsStore({ api, onToast, at }) {
+  const state = writable({
+    settingsSections: [],
+    settingsLoading: false,
+    settingsDirty: {},
+    settingsSaving: false,
+  });
+
+  async function loadSettings(isCompact = false) {
+    state.update((s) => ({ ...s, settingsLoading: true, settingsDirty: {} }));
+    try {
+      const data = await api("/admin/settings");
+      if (data?.ok) {
+        state.update((s) => ({
+          ...s,
+          settingsSections: data.sections || [],
+        }));
+      }
+    } finally {
+      state.update((s) => ({ ...s, settingsLoading: false }));
+    }
+  }
+
+  function markDirty(key, value, deleted = false) {
+    state.update((s) => ({
+      ...s,
+      settingsDirty: { ...s.settingsDirty, [key]: { value, deleted } },
+    }));
+  }
+
+  function clearDirty(key) {
+    state.update((s) => {
+      const next = { ...s.settingsDirty };
+      delete next[key];
+      return { ...s, settingsDirty: next };
+    });
+  }
+
+  async function saveSettings(onSettingsSaved) {
+    let dirty = {};
+    state.update(s => { dirty = s.settingsDirty; return s; });
+    if (!Object.keys(dirty).length) return;
+    
+    state.update(s => ({ ...s, settingsSaving: true }));
+    try {
+      const updates = {};
+      const deletes = [];
+      for (const [key, change] of Object.entries(dirty)) {
+        if (change.deleted) deletes.push(key);
+        else updates[key] = change.value;
+      }
+      const res = await api("/admin/settings", {
+        method: "PATCH",
+        body: JSON.stringify({ updates, deletes }),
+      });
+      if (res?.ok) {
+        onToast(at("settings_saved", {}, "Настройки сохранены"));
+        state.update(s => ({ ...s, settingsDirty: {} }));
+        if (onSettingsSaved) await onSettingsSaved({ updates, deletes });
+        await loadSettings();
+      } else if (res?.errors) {
+        const summary = Object.entries(res.errors).map(([k, v]) => `${k}: ${v}`).join("; ");
+        onToast(`Ошибки: ${summary}`);
+      } else {
+        onToast(res?.error || "Ошибка");
+      }
+    } finally {
+      state.update(s => ({ ...s, settingsSaving: false }));
+    }
+  }
+
+  function resetField(field) {
+    if (field.overridden) {
+      markDirty(field.key, "", true);
+    } else {
+      clearDirty(field.key);
+    }
+  }
+
+  return {
+    subscribe: state.subscribe,
+    set: state.set,
+    update: state.update,
+    loadSettings,
+    markDirty,
+    clearDirty,
+    resetField,
+    saveSettings,
+  };
+}
diff --git a/bot/app/web/frontend/src/lib/admin/stores/statsStore.js b/bot/app/web/frontend/src/lib/admin/stores/statsStore.js
new file mode 100644
index 0000000..e6e35c6
--- /dev/null
+++ b/bot/app/web/frontend/src/lib/admin/stores/statsStore.js
@@ -0,0 +1,53 @@
+import { writable } from "svelte/store";
+
+export function createStatsStore({ api, onToast, at }) {
+  const state = writable({
+    stats: null,
+    statsLoading: false,
+    statsError: "",
+    syncBusy: false,
+  });
+
+  async function loadStats() {
+    state.update((s) => ({ ...s, statsLoading: true, statsError: "" }));
+    try {
+      const data = await api("/admin/stats");
+      if (!data?.ok) {
+        state.update((s) => ({ ...s, statsError: data?.error || "load_failed" }));
+      } else {
+        state.update((s) => ({ ...s, stats: data }));
+      }
+    } catch (e) {
+      state.update((s) => ({ ...s, statsError: e?.message || String(e) }));
+    } finally {
+      state.update((s) => ({ ...s, statsLoading: false }));
+    }
+  }
+
+  async function triggerSync() {
+    let busy = false;
+    state.update(s => { busy = s.syncBusy; return s; });
+    if (busy) return;
+    
+    state.update((s) => ({ ...s, syncBusy: true }));
+    try {
+      const res = await api("/admin/sync", { method: "POST" });
+      if (res?.ok) {
+        onToast(at("sync_started", {}, "Синхронизация запущена"));
+        await loadStats();
+      } else {
+        onToast(res?.error || at("sync_error", {}, "Ошибка синхронизации"));
+      }
+    } finally {
+      state.update((s) => ({ ...s, syncBusy: false }));
+    }
+  }
+
+  return {
+    subscribe: state.subscribe,
+    set: state.set,
+    update: state.update,
+    loadStats,
+    triggerSync,
+  };
+}
diff --git a/bot/app/web/frontend/src/lib/admin/stores/tariffsStore.js b/bot/app/web/frontend/src/lib/admin/stores/tariffsStore.js
new file mode 100644
index 0000000..b572a28
--- /dev/null
+++ b/bot/app/web/frontend/src/lib/admin/stores/tariffsStore.js
@@ -0,0 +1,255 @@
+import { writable } from "svelte/store";
+import {
+  emptyTariffDraft,
+  cloneCatalog,
+  draftFromTariff,
+  tariffFromDraft as tariffFromDraftFn,
+  normalizeUuidList,
+} from "../tariffDraft.js";
+
+export function createTariffsStore({ api, onToast, onTariffsSaved, flash, at }) {
+  const state = writable({
+    tariffsCatalog: {
+      default_tariff: "",
+      topup_packages_default: { rub: [], stars: [] },
+      tariffs: [],
+    },
+    tariffsPath: "",
+    tariffsLoading: false,
+    tariffsSaving: false,
+    tariffEditorOpen: false,
+    tariffEditingKey: "",
+    tariffDeleteOpen: false,
+    tariffDeleteTarget: null,
+    tariffDraft: emptyTariffDraft(),
+    panelSquads: [],
+    panelSquadsLoading: false,
+    selectedBaseSquad: "",
+    selectedPremiumSquad: "",
+    tariffEditorTab: "general",
+  });
+
+  const tariffFromDraft = (draft) => tariffFromDraftFn(draft);
+
+  async function loadTariffs() {
+    state.update((s) => ({ ...s, tariffsLoading: true }));
+    try {
+      loadPanelSquads();
+      const data = await api("/admin/tariffs");
+      if (data?.ok) {
+        state.update((s) => ({
+          ...s,
+          tariffsCatalog: cloneCatalog(data.catalog),
+          tariffsPath: data.path || "",
+        }));
+      } else {
+        flash(data?.message || data?.error || at("load_failed", {}, "Не удалось загрузить тарифы"));
+      }
+    } finally {
+      state.update((s) => ({ ...s, tariffsLoading: false }));
+    }
+  }
+
+  async function loadPanelSquads() {
+    let loading = false;
+    state.update(s => { loading = s.panelSquadsLoading; return s; });
+    if (loading) return;
+    
+    state.update((s) => ({ ...s, panelSquadsLoading: true }));
+    try {
+      const data = await api("/admin/panel/internal-squads");
+      if (data?.ok) state.update(s => ({ ...s, panelSquads: data.squads || [] }));
+    } catch (e) {
+      state.update(s => ({ ...s, panelSquads: [] }));
+    } finally {
+      state.update((s) => ({ ...s, panelSquadsLoading: false }));
+    }
+  }
+
+  function squadLabel(uuid) {
+    let squads = [];
+    state.update(s => { squads = s.panelSquads; return s; });
+    const squad = squads.find((item) => item.uuid === uuid);
+    return squad ? `${squad.name} · ${uuid.slice(0, 8)}…` : uuid;
+  }
+
+  function addSquadToDraft(field, uuid) {
+    if (!uuid) return;
+    state.update(s => {
+      const current = normalizeUuidList(s.tariffDraft[field]);
+      if (current.includes(uuid)) return s;
+      return { ...s, tariffDraft: { ...s.tariffDraft, [field]: [...current, uuid] } };
+    });
+  }
+
+  function removeSquadFromDraft(field, uuid) {
+    state.update(s => {
+      return {
+        ...s,
+        tariffDraft: {
+          ...s.tariffDraft,
+          [field]: normalizeUuidList(s.tariffDraft[field]).filter((item) => item !== uuid),
+        }
+      };
+    });
+  }
+
+  async function persistTariffs(nextCatalog, successText) {
+    state.update((s) => ({ ...s, tariffsSaving: true }));
+    let currentPath = "";
+    state.update(s => { currentPath = s.tariffsPath; return s; });
+    
+    try {
+      const res = await api("/admin/tariffs", {
+        method: "PUT",
+        body: JSON.stringify({ catalog: nextCatalog }),
+      });
+      if (res?.ok) {
+        state.update(s => ({
+          ...s,
+          tariffsCatalog: cloneCatalog(res.catalog),
+          tariffsPath: res.path || currentPath,
+          tariffEditorOpen: false,
+          tariffDeleteOpen: false,
+          tariffDeleteTarget: null,
+        }));
+        if (onTariffsSaved) await onTariffsSaved(res.catalog);
+        flash(successText || at("tariffs_saved", {}, "Тарифы сохранены"));
+      } else {
+        flash(res?.message || res?.error || at("tariffs_save_failed", {}, "Ошибка сохранения тарифов"));
+      }
+    } finally {
+      state.update((s) => ({ ...s, tariffsSaving: false }));
+    }
+  }
+
+  function openCreateTariff() {
+    state.update(s => ({
+      ...s,
+      tariffEditingKey: "",
+      tariffDraft: emptyTariffDraft(),
+      tariffEditorTab: "general",
+      selectedBaseSquad: "",
+      selectedPremiumSquad: "",
+      tariffEditorOpen: true,
+    }));
+  }
+
+  function openEditTariff(tariff) {
+    state.update(s => ({
+      ...s,
+      tariffEditingKey: tariff.key,
+      tariffDraft: draftFromTariff(tariff),
+      tariffEditorTab: "general",
+      selectedBaseSquad: "",
+      selectedPremiumSquad: "",
+      tariffEditorOpen: true,
+    }));
+  }
+
+  async function saveTariffDraft() {
+    let s;
+    state.update(st => { s = st; return st; });
+    const tariff = tariffFromDraft(s.tariffDraft);
+    if (!tariff.key) {
+      flash(at("tariff_error_key_required", {}, "Укажите ключ тарифа"));
+      return;
+    }
+    const existing = (s.tariffsCatalog.tariffs || []).find((item) => item.key === tariff.key && item.key !== s.tariffEditingKey);
+    if (existing) {
+      flash(at("tariff_error_key_exists", {}, "Тариф с таким ключом уже есть"));
+      return;
+    }
+    const current = s.tariffsCatalog.tariffs || [];
+    const tariffs = s.tariffEditingKey
+      ? current.map((item) => (item.key === s.tariffEditingKey ? tariff : item))
+      : [...current, tariff];
+    const enabledKeys = tariffs.filter((item) => item.enabled !== false).map((item) => item.key);
+    if (!enabledKeys.length) {
+      flash(at("tariff_error_min_enabled", {}, "Должен быть хотя бы один включённый тариф"));
+      return;
+    }
+    const currentDefault = s.tariffsCatalog.default_tariff === s.tariffEditingKey ? tariff.key : s.tariffsCatalog.default_tariff;
+    const defaultTariff = enabledKeys.includes(currentDefault)
+      ? currentDefault
+      : enabledKeys[0];
+    await persistTariffs({ ...cloneCatalog(s.tariffsCatalog), default_tariff: defaultTariff, tariffs }, at("tariff_saved", {}, "Тариф сохранён"));
+  }
+
+  async function toggleTariffEnabled(tariff) {
+    let s;
+    state.update(st => { s = st; return st; });
+    const tariffs = (s.tariffsCatalog.tariffs || []).map((item) =>
+      item.key === tariff.key ? { ...item, enabled: item.enabled === false } : item,
+    );
+    const enabledKeys = tariffs.filter((item) => item.enabled !== false).map((item) => item.key);
+    if (!enabledKeys.length) {
+      flash(at("tariff_error_min_enabled", {}, "Должен остаться хотя бы один включённый тариф"));
+      return;
+    }
+    const defaultTariff = enabledKeys.includes(s.tariffsCatalog.default_tariff) ? s.tariffsCatalog.default_tariff : enabledKeys[0];
+    await persistTariffs({ ...cloneCatalog(s.tariffsCatalog), default_tariff: defaultTariff, tariffs }, at("tariff_status_updated", {}, "Статус тарифа обновлён"));
+  }
+
+  async function setDefaultTariff(key) {
+    let s;
+    state.update(st => { s = st; return st; });
+    if (!key || key === s.tariffsCatalog.default_tariff) return;
+    await persistTariffs({ ...cloneCatalog(s.tariffsCatalog), default_tariff: key }, at("tariff_default_updated", {}, "Тариф по умолчанию обновлён"));
+  }
+
+  async function deleteTariff() {
+    let s;
+    state.update(st => { s = st; return st; });
+    if (!s.tariffDeleteTarget) return;
+    const tariffs = (s.tariffsCatalog.tariffs || []).filter((item) => item.key !== s.tariffDeleteTarget.key);
+    const enabledKeys = tariffs.filter((item) => item.enabled !== false).map((item) => item.key);
+    if (!enabledKeys.length) {
+      flash(at("tariff_error_delete_last_enabled", {}, "Нельзя удалить последний включённый тариф"));
+      return;
+    }
+    const defaultTariff = enabledKeys.includes(s.tariffsCatalog.default_tariff) ? s.tariffsCatalog.default_tariff : enabledKeys[0];
+    await persistTariffs({ ...cloneCatalog(s.tariffsCatalog), default_tariff: defaultTariff, tariffs }, at("tariff_deleted", {}, "Тариф удалён"));
+  }
+
+  function addDraftRow(field, row) {
+    state.update(s => ({
+      ...s,
+      tariffDraft: { ...s.tariffDraft, [field]: [...(s.tariffDraft[field] || []), row] }
+    }));
+  }
+
+  function removeDraftRow(field, index) {
+    state.update(s => ({
+      ...s,
+      tariffDraft: {
+        ...s.tariffDraft,
+        [field]: (s.tariffDraft[field] || []).filter((_, idx) => idx !== index),
+      }
+    }));
+  }
+
+  function updateState(updates) {
+    state.update(s => ({ ...s, ...updates }));
+  }
+
+  return {
+    subscribe: state.subscribe,
+    set: state.set,
+    update: state.update,
+    updateState,
+    loadTariffs,
+    loadPanelSquads,
+    squadLabel,
+    addSquadToDraft,
+    removeSquadFromDraft,
+    openCreateTariff,
+    openEditTariff,
+    saveTariffDraft,
+    toggleTariffEnabled,
+    setDefaultTariff,
+    deleteTariff,
+    addDraftRow,
+    removeDraftRow,
+  };
+}
diff --git a/bot/app/web/frontend/src/lib/admin/stores/usersStore.js b/bot/app/web/frontend/src/lib/admin/stores/usersStore.js
new file mode 100644
index 0000000..8c78030
--- /dev/null
+++ b/bot/app/web/frontend/src/lib/admin/stores/usersStore.js
@@ -0,0 +1,295 @@
+import { writable } from "svelte/store";
+
+export function createUsersStore({ api, onToast, at }) {
+  const USERS_PAGE_SIZE = 25;
+
+  const state = writable({
+    users: [],
+    usersTotal: 0,
+    usersPage: 0,
+    usersQuery: "",
+    usersFilter: "all",
+    usersPanelStatus: "all",
+    usersSort: "registered_desc",
+    usersLoading: false,
+
+    openedUser: null,
+    openedUserDetail: null,
+    userDetailLoading: false,
+    userMessageDraft: "",
+    userExtendDays: 30,
+    userActionBusy: false,
+    userDeleteOpen: false,
+    userBanConfirmOpen: false,
+    userMessageConfirmOpen: false,
+    userDetailTab: "profile",
+  });
+
+  let _activeRef = "stats"; // fallback if active isn't tracked
+
+  function setActive(active) {
+    _activeRef = active;
+  }
+
+  function _pushUserPath(userId) {
+    if (typeof window === "undefined") return;
+    if (window.location.protocol === "file:") return;
+    if (_activeRef !== "users") return;
+    const target = userId ? `/admin/users/${userId}` : `/admin/users`;
+    if (window.location.pathname === target) return;
+    window.history.pushState(null, "", `${target}${window.location.search}${window.location.hash}`);
+  }
+
+  async function loadUsers() {
+    state.update((s) => ({ ...s, usersLoading: true }));
+    let s;
+    state.update((st) => { s = st; return st; });
+
+    try {
+      const params = new URLSearchParams({
+        page: String(s.usersPage),
+        page_size: String(USERS_PAGE_SIZE),
+      });
+      if (s.usersQuery.trim()) params.set("q", s.usersQuery.trim());
+      if (s.usersFilter && s.usersFilter !== "all") params.set("filter", s.usersFilter);
+      if (s.usersPanelStatus && s.usersPanelStatus !== "all") params.set("panel_status", s.usersPanelStatus);
+      if (s.usersSort && s.usersSort !== "registered_desc") params.set("sort", s.usersSort);
+      const data = await api(`/admin/users?${params.toString()}`);
+      if (data?.ok) {
+        state.update(st => ({
+          ...st,
+          users: data.users || [],
+          usersTotal: data.total || (data.users || []).length,
+        }));
+      }
+    } finally {
+      state.update((st) => ({ ...st, usersLoading: false }));
+    }
+  }
+
+  async function openUser(userOrId, opts = {}) {
+    const userId = typeof userOrId === "object" && userOrId !== null ? userOrId.user_id : Number(userOrId);
+    if (!userId) return;
+    
+    state.update(s => ({
+      ...s,
+      openedUser: typeof userOrId === "object" && userOrId !== null ? userOrId : { user_id: userId },
+      openedUserDetail: null,
+      userMessageDraft: "",
+      userMessageConfirmOpen: false,
+      userExtendDays: 30,
+      userDetailLoading: true,
+      userDetailTab: "subscription",
+    }));
+
+    if (!opts.skipPush) _pushUserPath(userId);
+    try {
+      const res = await api(`/admin/users/${userId}`);
+      if (res?.ok) {
+        state.update(s => ({
+          ...s,
+          openedUserDetail: res,
+          openedUser: res.user ? { ...res.user, ...s.openedUser, ...res.user } : s.openedUser
+        }));
+      } else {
+        onToast(res?.error || "load_failed");
+        state.update(s => ({ ...s, openedUser: null }));
+        if (!opts.skipPush) _pushUserPath(null);
+      }
+    } finally {
+      state.update(s => ({ ...s, userDetailLoading: false }));
+    }
+  }
+
+  function closeUser(opts = {}) {
+    let wasOpen = false;
+    state.update(s => {
+      wasOpen = Boolean(s.openedUser);
+      return {
+        ...s,
+        openedUser: null,
+        openedUserDetail: null,
+        userDeleteOpen: false,
+        userBanConfirmOpen: false,
+        userMessageConfirmOpen: false,
+      };
+    });
+    if (wasOpen && !opts.skipPush) _pushUserPath(null);
+  }
+
+  function copyToClipboard(text, successMessage = at("link_copied", {}, "Скопировано")) {
+    if (!text) return;
+    if (typeof navigator !== "undefined" && navigator?.clipboard?.writeText) {
+      navigator.clipboard.writeText(text).then(
+        () => onToast(successMessage),
+        () => onToast(text)
+      );
+    } else {
+      onToast(text);
+    }
+  }
+
+  function requestBanToggle() {
+    let s;
+    state.update(st => { s = st; return st; });
+    if (!s.openedUser) return;
+    if (s.openedUser.is_banned) {
+      applyBanToggle(false);
+    } else {
+      state.update(st => ({ ...st, userBanConfirmOpen: true }));
+    }
+  }
+
+  async function applyBanToggle(banned) {
+    let s;
+    state.update(st => { s = st; return st; });
+    if (!s.openedUser) return;
+    state.update(st => ({ ...st, userActionBusy: true }));
+    try {
+      const res = await api(`/admin/users/${s.openedUser.user_id}/ban`, {
+        method: "POST",
+        body: JSON.stringify({ banned }),
+      });
+      if (res?.ok) {
+        state.update(st => {
+          const updatedUser = { ...st.openedUser, is_banned: banned };
+          return {
+            ...st,
+            openedUser: updatedUser,
+            users: st.users.map((u) => (u.user_id === updatedUser.user_id ? updatedUser : u)),
+            userBanConfirmOpen: false,
+          };
+        });
+        onToast(banned ? at("user_banned", {}, "Заблокирован") : at("user_unbanned", {}, "Разблокирован"));
+      } else onToast(res?.error || at("error", {}, "Ошибка"));
+    } finally {
+      state.update(st => ({ ...st, userActionBusy: false }));
+    }
+  }
+
+  async function sendUserMessage() {
+    let s;
+    state.update(st => { s = st; return st; });
+    if (!s.openedUser || !s.userMessageDraft.trim()) return;
+    state.update(st => ({ ...st, userActionBusy: true }));
+    try {
+      const res = await api(`/admin/users/${s.openedUser.user_id}/message`, {
+        method: "POST",
+        body: JSON.stringify({ text: s.userMessageDraft }),
+      });
+      if (res?.ok) {
+        onToast(at("message_sent", {}, "Отправлено"));
+        state.update(st => ({
+          ...st,
+          userMessageDraft: "",
+          userMessageConfirmOpen: false,
+        }));
+      } else onToast(res?.error || at("message_send_failed", {}, "Ошибка отправки"));
+    } finally {
+      state.update(st => ({ ...st, userActionBusy: false }));
+    }
+  }
+
+  function requestSendUserMessage() {
+    state.update(s => {
+      if (!s.openedUser || !s.userMessageDraft.trim()) return s;
+      return { ...s, userMessageConfirmOpen: true };
+    });
+  }
+
+  async function previewUserMessage() {
+    let s;
+    state.update(st => { s = st; return st; });
+    if (!s.openedUser || !s.userMessageDraft.trim()) return;
+    state.update(st => ({ ...st, userActionBusy: true }));
+    try {
+      const res = await api(`/admin/users/${s.openedUser.user_id}/message/preview`, {
+        method: "POST",
+        body: JSON.stringify({ text: s.userMessageDraft }),
+      });
+      if (res?.ok) onToast(at("message_preview_sent", {}, "Превью отправлено в Telegram"));
+      else onToast(res?.error || at("message_preview_failed", {}, "Ошибка отправки превью"));
+    } finally {
+      state.update(st => ({ ...st, userActionBusy: false }));
+    }
+  }
+
+  async function extendUser() {
+    let s;
+    state.update(st => { s = st; return st; });
+    if (!s.openedUser) return;
+    const days = Number(s.userExtendDays);
+    if (!days || days <= 0) return;
+    state.update(st => ({ ...st, userActionBusy: true }));
+    try {
+      const res = await api(`/admin/users/${s.openedUser.user_id}/extend`, {
+        method: "POST",
+        body: JSON.stringify({ days }),
+      });
+      if (res?.ok) {
+        onToast(at("subscription_extended", { days }, `Продлено на ${days} д.`));
+        await openUser(s.openedUser, { skipPush: true });
+      } else onToast(res?.error || at("error", {}, "Ошибка"));
+    } finally {
+      state.update(st => ({ ...st, userActionBusy: false }));
+    }
+  }
+
+  async function resetTrialUser() {
+    let s;
+    state.update(st => { s = st; return st; });
+    if (!s.openedUser) return;
+    state.update(st => ({ ...st, userActionBusy: true }));
+    try {
+      const res = await api(`/admin/users/${s.openedUser.user_id}/reset-trial`, { method: "POST" });
+      if (res?.ok) onToast(at("trial_reset", {}, "Триал сброшен"));
+      else onToast(res?.error || at("error", {}, "Ошибка"));
+    } finally {
+      state.update(st => ({ ...st, userActionBusy: false }));
+    }
+  }
+
+  async function deleteUser() {
+    let s;
+    state.update(st => { s = st; return st; });
+    if (!s.openedUser) return;
+    state.update(st => ({ ...st, userActionBusy: true }));
+    try {
+      const res = await api(`/admin/users/${s.openedUser.user_id}`, { method: "DELETE" });
+      if (res?.ok) {
+        onToast(at("user_deleted", {}, "Удален"));
+        state.update(st => ({
+          ...st,
+          users: st.users.filter((u) => u.user_id !== st.openedUser.user_id)
+        }));
+        closeUser();
+      } else onToast(res?.error || at("error", {}, "Ошибка"));
+    } finally {
+      state.update(st => ({ ...st, userActionBusy: false }));
+    }
+  }
+
+  function updateState(updates) {
+    state.update(s => ({ ...s, ...updates }));
+  }
+
+  return {
+    subscribe: state.subscribe,
+    set: state.set,
+    update: state.update,
+    updateState,
+    setActive,
+    loadUsers,
+    openUser,
+    closeUser,
+    copyToClipboard,
+    requestBanToggle,
+    applyBanToggle,
+    sendUserMessage,
+    requestSendUserMessage,
+    previewUserMessage,
+    extendUser,
+    resetTrialUser,
+    deleteUser,
+  };
+}
diff --git a/bot/app/web/frontend/src/lib/components/ui/button.svelte b/bot/app/web/frontend/src/lib/components/ui/button.svelte
index aef6d9a..86ac524 100644
--- a/bot/app/web/frontend/src/lib/components/ui/button.svelte
+++ b/bot/app/web/frontend/src/lib/components/ui/button.svelte
@@ -28,11 +28,11 @@
 </script>
 
 {#if href}
-  <a class={cn(variants[variant], sizes[size], className)} {href} on:click={onclick} {...$$restProps}>
+  <a class={cn(variants[variant], sizes[size], className)} {href} onclick={onclick} {...$$restProps}>
     <slot />
   </a>
 {:else}
-  <button class={cn(variants[variant], sizes[size], className)} {type} {disabled} on:click={onclick} {...$$restProps}>
+  <button class={cn(variants[variant], sizes[size], className)} {type} {disabled} onclick={onclick} {...$$restProps}>
     <slot />
   </button>
 {/if}
diff --git a/bot/app/web/frontend/src/lib/components/ui/dialog.svelte b/bot/app/web/frontend/src/lib/components/ui/dialog.svelte
index c05d31a..2621776 100644
--- a/bot/app/web/frontend/src/lib/components/ui/dialog.svelte
+++ b/bot/app/web/frontend/src/lib/components/ui/dialog.svelte
@@ -14,7 +14,7 @@
 
 {#if open}
   <div class="dialog" role="dialog" aria-modal="true" aria-label={title}>
-    <button class="dialog-backdrop" type="button" aria-label={closeLabel} on:click={onclose}></button>
+    <button class="dialog-backdrop" type="button" aria-label={closeLabel} onclick={onclose}></button>
     <section class={cn("dialog-card", className)}>
       <div class="dialog-head">
         <div>
diff --git a/bot/app/web/frontend/src/lib/webapp/stores/accountStore.js b/bot/app/web/frontend/src/lib/webapp/stores/accountStore.js
new file mode 100644
index 0000000..81c9c62
--- /dev/null
+++ b/bot/app/web/frontend/src/lib/webapp/stores/accountStore.js
@@ -0,0 +1,215 @@
+import { writable, get } from "svelte/store";
+import { emailError, buildTelegramOAuthStartUrl } from "../authHelpers.js";
+
+export function createAccountStore({ api, publicApi, setToken, loadData, t, showToast, clearToken, markManualLogout, showLogin, telegramSdk, getTg, telegramOAuthClientId, currentLang, normalizeLangCode, updateLocalData }) {
+  const state = writable({
+    linkEmailOpen: false,
+    linkEmailBusy: false,
+    linkTelegramBusy: false,
+    linkEmailValue: "",
+    linkEmailPending: "",
+    linkEmailCode: "",
+    linkEmailStatus: "",
+    linkEmailIsError: false,
+    linkEmailFieldError: "",
+    linkEmailResendCooldown: 0,
+    languageBusy: false,
+  });
+
+  let linkEmailResendTimer = null;
+
+  function setLinkEmailStatus(message, isError = false) {
+    state.update(s => ({ ...s, linkEmailStatus: message, linkEmailIsError: isError }));
+  }
+
+  function clearCooldownTimer() {
+    if (linkEmailResendTimer) {
+      window.clearInterval(linkEmailResendTimer);
+      linkEmailResendTimer = null;
+    }
+  }
+
+  function startCooldownTimer(seconds = 60) {
+    clearCooldownTimer();
+    state.update(s => ({ ...s, linkEmailResendCooldown: Math.max(0, Number(seconds || 60)) }));
+    linkEmailResendTimer = window.setInterval(() => {
+      const s = get(state);
+      if (s.linkEmailResendCooldown <= 1) {
+        state.update(s => ({ ...s, linkEmailResendCooldown: 0 }));
+        clearCooldownTimer();
+        return;
+      }
+      state.update(s => ({ ...s, linkEmailResendCooldown: s.linkEmailResendCooldown - 1 }));
+    }, 1000);
+  }
+
+  function openLinkEmailDialog(email) {
+    state.update(s => ({
+      ...s,
+      linkEmailOpen: true,
+      linkEmailBusy: false,
+      linkEmailCode: "",
+      linkEmailPending: "",
+      linkEmailStatus: "",
+      linkEmailIsError: false,
+      linkEmailFieldError: "",
+      linkEmailValue: email || "",
+      linkEmailResendCooldown: 0,
+    }));
+    clearCooldownTimer();
+  }
+
+  function closeLinkEmailDialog() {
+    state.update(s => ({
+      ...s,
+      linkEmailOpen: false,
+      linkEmailBusy: false,
+      linkEmailCode: "",
+      linkEmailPending: "",
+      linkEmailStatus: "",
+      linkEmailIsError: false,
+      linkEmailFieldError: "",
+      linkEmailResendCooldown: 0,
+    }));
+    clearCooldownTimer();
+  }
+
+  async function requestLinkEmailCode() {
+    const s = get(state);
+    if (s.linkEmailPending && s.linkEmailResendCooldown > 0) return;
+    const normalized = String(s.linkEmailValue || "").trim().toLowerCase();
+    if (!normalized || !normalized.includes("@")) {
+      state.update(s => ({ ...s, linkEmailFieldError: t("wa_auth_invalid_email") }));
+      return;
+    }
+    state.update(s => ({ ...s, linkEmailFieldError: "", linkEmailBusy: true }));
+    setLinkEmailStatus(t("wa_auth_sending_code"));
+    try {
+      const response = await api("/account/email/request", {
+        method: "POST",
+        body: JSON.stringify({ email: normalized }),
+      });
+      if (!response?.ok) throw response;
+      state.update(s => ({ ...s, linkEmailPending: normalized, linkEmailCode: "" }));
+      setLinkEmailStatus("");
+      startCooldownTimer(60);
+    } catch (error) {
+      setLinkEmailStatus(emailError(error, t("wa_auth_send_code_failed"), t), true);
+    } finally {
+      state.update(s => ({ ...s, linkEmailBusy: false }));
+    }
+  }
+
+  async function verifyLinkEmailCode() {
+    const s = get(state);
+    const code = String(s.linkEmailCode || "").replace(/\\D/g, "").slice(0, 6);
+    if (!s.linkEmailPending) {
+      setLinkEmailStatus(t("wa_auth_send_code_failed"), true);
+      return;
+    }
+    if (code.length !== 6) {
+      setLinkEmailStatus(t("wa_auth_enter_code_6digits"), true);
+      return;
+    }
+    state.update(s => ({ ...s, linkEmailBusy: true }));
+    setLinkEmailStatus(t("wa_auth_checking_code"));
+    try {
+      const response = await api("/account/email/verify", {
+        method: "POST",
+        body: JSON.stringify({ email: s.linkEmailPending, code }),
+      });
+      if (!response?.ok) throw response;
+      if (response?.token) setToken(response.token, response.csrf_token);
+      await loadData();
+      closeLinkEmailDialog();
+      showToast(t("wa_settings_linked"));
+    } catch (error) {
+      setLinkEmailStatus(emailError(error, t("wa_auth_invalid_code"), t), true);
+    } finally {
+      state.update(s => ({ ...s, linkEmailBusy: false }));
+    }
+  }
+
+  async function linkTelegramAccountWithPayload(payload) {
+    state.update(s => ({ ...s, linkTelegramBusy: true }));
+    try {
+      const response = await api("/account/telegram/link", {
+        method: "POST",
+        body: JSON.stringify(payload),
+      });
+      if (!response?.ok) throw response;
+      if (response?.token) setToken(response.token, response.csrf_token);
+      await loadData();
+      showToast(t("wa_settings_linked"));
+    } catch (error) {
+      showToast(error?.message || t("wa_auth_telegram_not_confirmed"));
+    } finally {
+      state.update(s => ({ ...s, linkTelegramBusy: false }));
+    }
+  }
+
+  async function linkTelegramAccount(getTelegramMiniAppInitData) {
+    const s = get(state);
+    if (s.linkTelegramBusy) return;
+    const isTelegramMiniAppAttempt = telegramSdk.hasLaunchParams();
+    if (isTelegramMiniAppAttempt) {
+      await telegramSdk.ensureForAction();
+    }
+    const initData = getTelegramMiniAppInitData();
+    if (initData) {
+      await linkTelegramAccountWithPayload({ init_data: initData });
+      return;
+    }
+    if (!telegramOAuthClientId) {
+      showToast(t("wa_auth_telegram_not_configured"));
+      return;
+    }
+    state.update(s => ({ ...s, linkTelegramBusy: true }));
+    window.location.assign(buildTelegramOAuthStartUrl("link", getTg()));
+  }
+
+  async function updateAccountLanguage(nextValue) {
+    const s = get(state);
+    const normalize = typeof normalizeLangCode === "function" ? normalizeLangCode : (v) => v;
+    const language = normalize(nextValue);
+    if (!language || s.languageBusy || language === currentLang()) return;
+    state.update(s => ({ ...s, languageBusy: true }));
+    try {
+      const response = await api("/account/language", {
+        method: "POST",
+        body: JSON.stringify({ language }),
+      });
+      if (!response?.ok) throw response;
+      if (typeof updateLocalData === "function") {
+        updateLocalData(normalize(response.language || language));
+      }
+      await loadData();
+    } catch {
+      showToast(t("wa_settings_language_update_failed"));
+    } finally {
+      state.update(s => ({ ...s, languageBusy: false }));
+    }
+  }
+
+  async function logout() {
+    markManualLogout();
+    clearToken();
+    try {
+      await publicApi("/auth/logout", { keepalive: true });
+    } catch {}
+    showLogin();
+  }
+
+  return {
+    subscribe: state.subscribe,
+    set: state.set,
+    update: state.update,
+    openLinkEmailDialog,
+    closeLinkEmailDialog,
+    requestLinkEmailCode,
+    verifyLinkEmailCode,
+    linkTelegramAccount,
+    updateAccountLanguage,
+    logout,
+  };
+}
diff --git a/bot/app/web/frontend/src/lib/webapp/stores/authStore.js b/bot/app/web/frontend/src/lib/webapp/stores/authStore.js
new file mode 100644
index 0000000..bbfd8c2
--- /dev/null
+++ b/bot/app/web/frontend/src/lib/webapp/stores/authStore.js
@@ -0,0 +1,274 @@
+import { writable, get } from "svelte/store";
+import {
+  readReferralParam,
+  readTelegramAuthStatus,
+  readMagicLoginToken,
+  readTelegramLoginWidgetAuthData,
+  clearAuthQuery,
+  buildTelegramOAuthStartUrl,
+  emailError,
+} from "../authHelpers.js";
+
+export function createAuthStore({
+  publicApi,
+  setToken,
+  loadData,
+  telegramSdk,
+  getTg,
+  t,
+  currentLang,
+  clearManualLogoutFlag
+}) {
+  const state = writable({
+    authStatus: "",
+    authIsError: false,
+    authBusy: false,
+    telegramLoginBusy: false,
+    telegramLoginAttemptId: 0,
+    loginEmailFieldError: "",
+    loginEmailTooltipOpen: false,
+    authResendCooldown: 0,
+    email: "",
+    pendingEmail: "",
+    emailCode: "",
+  });
+
+  let authResendTimer = null;
+  let telegramLoginWatchdogTimer = null;
+
+  function setAuthStatus(message, isError = false) {
+    state.update((s) => ({ ...s, authStatus: message, authIsError: isError }));
+  }
+
+  function clearCooldownTimer() {
+    if (authResendTimer) {
+      window.clearInterval(authResendTimer);
+      authResendTimer = null;
+    }
+  }
+
+  function startCooldownTimer(seconds = 60) {
+    clearCooldownTimer();
+    state.update((s) => ({ ...s, authResendCooldown: Math.max(0, Number(seconds || 60)) }));
+    authResendTimer = window.setInterval(() => {
+      const { authResendCooldown } = get(state);
+      if (authResendCooldown <= 1) {
+        state.update((s) => ({ ...s, authResendCooldown: 0 }));
+        clearCooldownTimer();
+        return;
+      }
+      state.update((s) => ({ ...s, authResendCooldown: authResendCooldown - 1 }));
+    }, 1000);
+  }
+
+  function startTelegramLoginWatchdog() {
+    const TELEGRAM_MINI_APP_AUTH_TIMEOUT_MS = 6000;
+    stopTelegramLoginWatchdog();
+    state.update((s) => ({ ...s, telegramLoginAttemptId: s.telegramLoginAttemptId + 1 }));
+    const { telegramLoginAttemptId } = get(state);
+    
+    telegramLoginWatchdogTimer = window.setTimeout(() => {
+      if (get(state).telegramLoginAttemptId !== telegramLoginAttemptId) return;
+      telegramLoginWatchdogTimer = null;
+      state.update((s) => ({ ...s, telegramLoginBusy: false, authBusy: false }));
+      setAuthStatus(t("wa_auth_telegram_timeout"), true);
+    }, TELEGRAM_MINI_APP_AUTH_TIMEOUT_MS);
+    
+    return telegramLoginAttemptId;
+  }
+
+  function stopTelegramLoginWatchdog(attemptId = null) {
+    if (attemptId !== null && attemptId !== get(state).telegramLoginAttemptId) return;
+    if (telegramLoginWatchdogTimer) {
+      window.clearTimeout(telegramLoginWatchdogTimer);
+      telegramLoginWatchdogTimer = null;
+    }
+  }
+
+  function isActiveTelegramLoginAttempt(attemptId) {
+    const s = get(state);
+    return attemptId === s.telegramLoginAttemptId && s.telegramLoginBusy;
+  }
+
+  async function finalizeMagicLogin(loginToken) {
+    const s = get(state);
+    if (s.authBusy) return false;
+    state.update(s => ({ ...s, authBusy: true }));
+    setAuthStatus(t("wa_auth_checking_login"));
+    try {
+      const payload = { token: loginToken };
+      const referralParam = readReferralParam(getTg());
+      if (referralParam) payload.referral_code = referralParam;
+      const response = await publicApi("/auth/email/magic", payload);
+      if (response.ok && response.token) {
+        setToken(response.token, response.csrf_token);
+        clearAuthQuery();
+        await loadData();
+        return true;
+      }
+      setAuthStatus(t("wa_auth_login_confirm_failed"), true);
+    } catch {
+      setAuthStatus(t("wa_auth_login_confirm_failed"), true);
+    } finally {
+      state.update(s => ({ ...s, authBusy: false }));
+    }
+    return false;
+  }
+
+  async function finalizeTelegramAuth(authData, source = "auth_data", options = {}) {
+    const s = get(state);
+    if (s.authBusy) return false;
+    state.update(s => ({ ...s, authBusy: true }));
+    setAuthStatus(t("wa_auth_checking_telegram"));
+    try {
+      const payload =
+        source === "init_data"
+          ? { init_data: authData }
+          : source === "id_token"
+            ? { id_token: authData.id_token, nonce: authData.nonce }
+            : { auth_data: authData };
+      const referralParam = readReferralParam(getTg());
+      if (referralParam) payload.referral_code = referralParam;
+      const response = await publicApi("/auth/token", payload, { signal: options.signal });
+      if (response.ok && response.token) {
+        setToken(response.token, response.csrf_token);
+        clearAuthQuery();
+        setAuthStatus("");
+        await loadData();
+        return true;
+      }
+      setAuthStatus(response.error === "banned" ? t("wa_auth_access_denied") : t("wa_auth_telegram_not_confirmed"), true);
+    } catch (error) {
+      setAuthStatus(
+        error?.name === "AbortError" ? t("wa_auth_telegram_timeout") : t("wa_auth_telegram_unavailable"),
+        true,
+      );
+    } finally {
+      state.update(s => ({ ...s, authBusy: false }));
+    }
+    return false;
+  }
+
+  async function requestEmailCode(changeScreen) {
+    const s = get(state);
+    if (s.authResendCooldown > 0 && s.pendingEmail) return;
+    const normalized = s.email.trim().toLowerCase();
+    if (!normalized || !normalized.includes("@")) {
+      state.update(s => ({ ...s, loginEmailFieldError: t("wa_auth_invalid_email"), loginEmailTooltipOpen: true }));
+      return;
+    }
+    state.update(s => ({ ...s, loginEmailFieldError: "", loginEmailTooltipOpen: false, authBusy: true }));
+    setAuthStatus(t("wa_auth_sending_code"));
+    try {
+      const payload = { email: normalized, language: currentLang() };
+      const referralParam = readReferralParam(getTg());
+      if (referralParam) payload.referral_code = referralParam;
+      const response = await publicApi("/auth/email/request", payload);
+      if (!response.ok) throw response;
+      state.update(s => ({ ...s, pendingEmail: normalized, emailCode: "" }));
+      changeScreen("code");
+      setAuthStatus("");
+      startCooldownTimer(60);
+    } catch (error) {
+      setAuthStatus(emailError(error, t("wa_auth_send_code_failed"), t), true);
+    } finally {
+      state.update(s => ({ ...s, authBusy: false }));
+    }
+  }
+
+  async function verifyEmailCode() {
+    const s = get(state);
+    const code = s.emailCode.replace(/\\D/g, "").slice(0, 6);
+    if (code.length !== 6) {
+      setAuthStatus(t("wa_auth_enter_code_6digits"), true);
+      return;
+    }
+    state.update(s => ({ ...s, authBusy: true }));
+    setAuthStatus(t("wa_auth_checking_code"));
+    try {
+      const payload = { email: s.pendingEmail, code };
+      const referralParam = readReferralParam(getTg());
+      if (referralParam) payload.referral_code = referralParam;
+      const response = await publicApi("/auth/email/verify", payload);
+      if (!response.ok || !response.token) throw response;
+      setToken(response.token, response.csrf_token);
+      await loadData();
+      setAuthStatus("");
+    } catch (error) {
+      setAuthStatus(emailError(error, t("wa_auth_invalid_code"), t), true);
+    } finally {
+      state.update(s => ({ ...s, authBusy: false }));
+    }
+  }
+
+  async function openTelegramLogin(telegramOAuthClientId, getTelegramMiniAppInitData) {
+    const s = get(state);
+    if (s.authBusy || s.telegramLoginBusy) return;
+    setAuthStatus("");
+
+    const isTelegramMiniAppAttempt = telegramSdk.hasLaunchParams();
+    if (!isTelegramMiniAppAttempt && telegramOAuthClientId) {
+      state.update(s => ({ ...s, telegramLoginBusy: true }));
+      window.location.assign(buildTelegramOAuthStartUrl("login", getTg()));
+      window.setTimeout(() => {
+        state.update(s => ({ ...s, telegramLoginBusy: false }));
+      }, 1500);
+      return;
+    }
+
+    state.update(s => ({ ...s, telegramLoginBusy: true }));
+    const attemptId = startTelegramLoginWatchdog();
+    const loginTimeout = telegramSdk.createMiniAppAuthTimeout();
+    try {
+      await Promise.race([
+        (async () => {
+          await telegramSdk.ensureForAction();
+          if (!isActiveTelegramLoginAttempt(attemptId)) return;
+          const initData = getTelegramMiniAppInitData();
+          if (initData) {
+            await finalizeTelegramAuth(initData, "init_data", { signal: loginTimeout.signal });
+            return;
+          }
+
+          if (!telegramOAuthClientId) {
+            setAuthStatus(t("wa_auth_telegram_not_configured"), true);
+            return;
+          }
+
+          window.location.assign(buildTelegramOAuthStartUrl("login", getTg()));
+        })(),
+        loginTimeout.promise,
+      ]);
+    } catch (error) {
+      if (!isActiveTelegramLoginAttempt(attemptId)) return;
+      if (error?.name === "AbortError") {
+        setAuthStatus(t("wa_auth_telegram_timeout"), true);
+      } else {
+        setAuthStatus(t("wa_auth_telegram_unavailable"), true);
+      }
+    } finally {
+      loginTimeout.clear();
+      if (loginTimeout.timedOut) {
+        setAuthStatus(t("wa_auth_telegram_timeout"), true);
+        state.update(s => ({ ...s, authBusy: false }));
+      }
+      if (isActiveTelegramLoginAttempt(attemptId)) {
+        stopTelegramLoginWatchdog(attemptId);
+        state.update(s => ({ ...s, telegramLoginBusy: false }));
+      }
+    }
+  }
+
+  return {
+    subscribe: state.subscribe,
+    set: state.set,
+    update: state.update,
+    finalizeMagicLogin,
+    finalizeTelegramAuth,
+    requestEmailCode,
+    verifyEmailCode,
+    openTelegramLogin,
+    clearCooldownTimer,
+    setAuthStatus
+  };
+}
diff --git a/bot/app/web/frontend/src/lib/webapp/stores/billingStore.js b/bot/app/web/frontend/src/lib/webapp/stores/billingStore.js
new file mode 100644
index 0000000..3a7c362
--- /dev/null
+++ b/bot/app/web/frontend/src/lib/webapp/stores/billingStore.js
@@ -0,0 +1,360 @@
+import { writable, get } from "svelte/store";
+
+export function createBillingStore({ billing, loadData, t, showToast, openExternalLink, tg }) {
+  const state = writable({
+    paymentModalOpen: false,
+    paymentStep: "tariff",
+    selectedTariffKey: "",
+    selectedPlan: null,
+    selectedMethod: "",
+    topupModalOpen: false,
+    topupKind: "regular",
+    deviceTopupModalOpen: false,
+    changeModalOpen: false,
+    topupOptions: null,
+    deviceTopupOptions: null,
+    changeOptions: null,
+    selectedTopupPlan: null,
+    selectedDeviceTopupPlan: null,
+    selectedChangeTarget: null,
+    selectedChangeAction: null,
+    changeConfirmOpen: false,
+    tariffActionBusy: false,
+    payBusy: false,
+  });
+
+  let topupOptionsRequestId = 0;
+
+  function openPaymentModal(tariffMode, singleTariffMode, tariffCatalog, subscription, plans, defaultMethod = "") {
+    state.update((s) => {
+      let step = s.paymentStep;
+      let plan = s.selectedPlan;
+      let tariffKey = s.selectedTariffKey;
+
+      if (tariffMode) {
+        if (singleTariffMode && tariffCatalog[0]?.key) {
+          tariffKey = tariffCatalog[0].key;
+          plan = plans.find((p) => p?.tariff_key === tariffKey) || null;
+          step = "checkout";
+        } else if (subscription?.active && subscription?.tariff_key && tariffCatalog.some((t) => t.key === subscription.tariff_key)) {
+          tariffKey = subscription.tariff_key;
+          plan = plans.find((p) => p?.tariff_key === tariffKey) || null;
+          step = "checkout";
+        } else {
+          step = "tariff";
+          tariffKey = "";
+          plan = null;
+        }
+      } else {
+        step = "checkout";
+      }
+      return {
+        ...s,
+        paymentModalOpen: true,
+        paymentStep: step,
+        selectedTariffKey: tariffKey,
+        selectedPlan: plan,
+        selectedMethod: s.selectedMethod || defaultMethod,
+      };
+    });
+  }
+
+  function closePaymentModal() {
+    state.update((s) => ({ ...s, paymentModalOpen: false }));
+  }
+
+  function selectTariff(tariff, plans = []) {
+    const key = String(tariff?.key || "").trim();
+    if (!key) return;
+    state.update((s) => ({
+      ...s,
+      selectedTariffKey: key,
+      selectedPlan: plans.find((plan) => plan?.tariff_key === key) || null,
+    }));
+  }
+
+  function continueWithSelectedTariff(selectedTariffPlans = []) {
+    state.update((s) => {
+      if (!s.selectedTariffKey) return s;
+      return {
+        ...s,
+        selectedPlan: s.selectedPlan || selectedTariffPlans[0] || null,
+        paymentStep: "checkout",
+      };
+    });
+  }
+
+  function backToTariffList(subscription, tariffCatalog = []) {
+    if (subscription?.active && subscription?.tariff_key && tariffCatalog.some((t) => t.key === subscription.tariff_key)) {
+      return;
+    }
+    state.update((s) => ({ ...s, paymentStep: "tariff" }));
+  }
+
+  function openTopupModal(kind = "regular", defaultMethod = "") {
+    const normalizedKind = kind === "premium" ? "premium" : "regular";
+    state.update((s) => ({
+      ...s,
+      topupKind: normalizedKind,
+      topupModalOpen: true,
+      topupOptions: s.topupOptions?.topup_kind === normalizedKind ? s.topupOptions : null,
+      selectedTopupPlan: s.topupOptions?.topup_kind === normalizedKind ? s.selectedTopupPlan : null,
+      selectedMethod: s.selectedMethod || defaultMethod,
+    }));
+    loadTopupOptions(normalizedKind);
+  }
+
+  function closeTopupModal() {
+    state.update((s) => ({ ...s, topupModalOpen: false }));
+  }
+
+  function openDeviceTopupModal(defaultMethod = "") {
+    state.update((s) => ({
+      ...s,
+      deviceTopupModalOpen: true,
+      selectedMethod: s.selectedMethod || defaultMethod,
+    }));
+    loadDeviceTopupOptions();
+  }
+
+  function closeDeviceTopupModal() {
+    state.update((s) => ({ ...s, deviceTopupModalOpen: false }));
+  }
+
+  function openTariffChangeModal(defaultMethod = "") {
+    state.update((s) => ({
+      ...s,
+      changeModalOpen: true,
+      selectedMethod: s.selectedMethod || defaultMethod,
+    }));
+    loadTariffChangeOptions();
+  }
+
+  function closeTariffChangeModal() {
+    state.update((s) => ({ ...s, changeModalOpen: false }));
+  }
+
+  function openTariffChangeConfirm() {
+    const s = get(state);
+    if (!s.selectedChangeTarget || !s.selectedChangeAction) return;
+    state.update((s) => ({ ...s, changeConfirmOpen: true }));
+  }
+
+  function closeTariffChangeConfirm() {
+    state.update((s) => ({ ...s, changeConfirmOpen: false }));
+  }
+
+  function openTelegramInvoice(url) {
+    if (!url) return;
+    if (tg?.openInvoice) {
+      tg.openInvoice(url, (status) => {
+        if (status === "paid") {
+          showToast(t("wa_payment_success", {}, "Payment successful"));
+          loadData();
+        } else if (status === "failed") {
+          showToast(t("wa_payment_create_failed"));
+        }
+      });
+      return;
+    }
+    openExternalLink(url);
+  }
+
+  async function createPayment() {
+    const s = get(state);
+    if (!s.selectedPlan || !s.selectedMethod || s.payBusy) return;
+    state.update(s => ({ ...s, payBusy: true }));
+    try {
+      const response = await billing.postPayment(billing.planPaymentBody(s.selectedPlan, s.selectedMethod));
+      if (!response.ok) throw response;
+      showToast(t("wa_payment_created"));
+      if (response.action === "open_invoice") {
+        if (!response.payment_url) throw response;
+        openTelegramInvoice(response.payment_url);
+      } else if (response.action === "invoice_sent") {
+        state.update(s => ({ ...s, paymentModalOpen: false }));
+        return;
+      } else {
+        if (!response.payment_url) throw response;
+        openExternalLink(response.payment_url);
+      }
+      state.update(s => ({ ...s, paymentModalOpen: false }));
+    } catch (error) {
+      showToast(error?.message || t("wa_payment_create_failed"));
+    } finally {
+      state.update(s => ({ ...s, payBusy: false }));
+    }
+  }
+
+  async function loadTopupOptions(kind) {
+    const s = get(state);
+    if (s.topupOptions?.topup_kind === kind) return;
+    const requestId = ++topupOptionsRequestId;
+    state.update(s => ({ ...s, tariffActionBusy: true, topupOptions: null, selectedTopupPlan: null }));
+    try {
+      const response = await billing.fetchTopupOptions(kind);
+      if (requestId !== topupOptionsRequestId || kind !== get(state).topupKind) return;
+      if (!response?.ok) throw response;
+      state.update(s => ({ ...s, topupOptions: response, selectedTopupPlan: response.plans?.[0] || null }));
+    } catch (error) {
+      if (requestId !== topupOptionsRequestId || kind !== get(state).topupKind) return;
+      showToast(error?.message || t("wa_tariff_options_failed"));
+      state.update(s => ({ ...s, topupModalOpen: false }));
+    } finally {
+      if (requestId === topupOptionsRequestId) {
+        state.update(s => ({ ...s, tariffActionBusy: false }));
+      }
+    }
+  }
+
+  async function createTopupPayment() {
+    const s = get(state);
+    if (!s.selectedTopupPlan || !s.selectedMethod || s.payBusy) return;
+    state.update(s => ({ ...s, payBusy: true }));
+    try {
+      const response = await billing.postPayment(
+        billing.topupPaymentBody(s.selectedTopupPlan, s.selectedMethod, s.topupOptions?.tariff_key),
+      );
+      if (!response.ok || !response.payment_url) throw response;
+      showToast(t("wa_payment_created"));
+      openExternalLink(response.payment_url);
+      state.update(s => ({ ...s, topupModalOpen: false }));
+    } catch (error) {
+      showToast(error?.message || t("wa_payment_create_failed"));
+    } finally {
+      state.update(s => ({ ...s, payBusy: false }));
+    }
+  }
+
+  async function loadTariffChangeOptions() {
+    const s = get(state);
+    if (s.changeOptions || s.tariffActionBusy) return;
+    state.update(s => ({ ...s, tariffActionBusy: true }));
+    try {
+      const response = await billing.fetchTariffChangeOptions();
+      if (!response?.ok) throw response;
+      state.update(s => ({ 
+        ...s, 
+        changeOptions: response, 
+        selectedChangeTarget: response.targets?.[0] || null,
+        selectedChangeAction: response.targets?.[0]?.actions?.[0] || null
+      }));
+    } catch (error) {
+      showToast(error?.message || t("wa_tariff_options_failed"));
+      state.update(s => ({ ...s, changeModalOpen: false }));
+    } finally {
+      state.update(s => ({ ...s, tariffActionBusy: false }));
+    }
+  }
+
+  async function applyTariffChange() {
+    const s = get(state);
+    if (!s.selectedChangeTarget || !s.selectedChangeAction || s.tariffActionBusy) return;
+    if (s.selectedChangeAction.kind === "payment") {
+      await createTariffChangePayment();
+      return;
+    }
+    state.update(s => ({ ...s, tariffActionBusy: true }));
+    try {
+      const response = await billing.postTariffChange({
+        tariff_key: s.selectedChangeTarget.tariff_key,
+        mode: s.selectedChangeAction.mode,
+      });
+      if (!response?.ok) throw response;
+      showToast(t("wa_tariff_change_applied"));
+      state.update(s => ({ ...s, changeConfirmOpen: false, changeModalOpen: false, changeOptions: null }));
+      await loadData();
+    } catch (error) {
+      showToast(error?.message || t("wa_tariff_change_failed"));
+    } finally {
+      state.update(s => ({ ...s, tariffActionBusy: false }));
+    }
+  }
+
+  async function createTariffChangePayment() {
+    const s = get(state);
+    if (!s.selectedChangeTarget || !s.selectedChangeAction || !s.selectedMethod || s.payBusy) return;
+    state.update(s => ({ ...s, payBusy: true }));
+    try {
+      const body = billing.changePaymentBody(s.selectedChangeAction, s.selectedChangeTarget, s.selectedMethod);
+      const response =
+        s.selectedChangeAction.mode === "buy_package" || s.selectedChangeAction.mode === "buy_period"
+          ? await billing.postPayment(body)
+          : await billing.postTariffChangePayment(body);
+      if (!response.ok || !response.payment_url) throw response;
+      showToast(t("wa_payment_created"));
+      openExternalLink(response.payment_url);
+      state.update(s => ({ ...s, changeConfirmOpen: false, changeModalOpen: false }));
+    } catch (error) {
+      showToast(error?.message || t("wa_payment_create_failed"));
+    } finally {
+      state.update(s => ({ ...s, payBusy: false }));
+    }
+  }
+
+  async function loadDeviceTopupOptions() {
+    const s = get(state);
+    if (s.deviceTopupOptions || s.tariffActionBusy) return;
+    state.update(s => ({ ...s, tariffActionBusy: true }));
+    try {
+      const response = await billing.fetchDeviceTopupOptions();
+      if (!response?.ok) throw response;
+      state.update(s => ({ 
+        ...s, 
+        deviceTopupOptions: response, 
+        selectedDeviceTopupPlan: response.plans?.[0] || null 
+      }));
+    } catch (error) {
+      showToast(error?.message || t("wa_device_topup_options_failed"));
+      state.update(s => ({ ...s, deviceTopupModalOpen: false }));
+    } finally {
+      state.update(s => ({ ...s, tariffActionBusy: false }));
+    }
+  }
+
+  async function createDeviceTopupPayment() {
+    const s = get(state);
+    if (!s.selectedDeviceTopupPlan || !s.selectedMethod || s.payBusy) return;
+    state.update(s => ({ ...s, payBusy: true }));
+    try {
+      const response = await billing.postPayment(
+        billing.deviceTopupPaymentBody(s.selectedDeviceTopupPlan, s.selectedMethod, s.deviceTopupOptions?.tariff_key),
+      );
+      if (!response.ok || !response.payment_url) throw response;
+      showToast(t("wa_payment_created"));
+      openExternalLink(response.payment_url);
+      state.update(s => ({ ...s, deviceTopupModalOpen: false }));
+    } catch (error) {
+      showToast(error?.message || t("wa_payment_create_failed"));
+    } finally {
+      state.update(s => ({ ...s, payBusy: false }));
+    }
+  }
+
+  return {
+    subscribe: state.subscribe,
+    set: state.set,
+    update: state.update,
+    openPaymentModal,
+    closePaymentModal,
+    selectTariff,
+    continueWithSelectedTariff,
+    backToTariffList,
+    createPayment,
+    openTopupModal,
+    closeTopupModal,
+    loadTopupOptions,
+    createTopupPayment,
+    openTariffChangeModal,
+    closeTariffChangeModal,
+    openTariffChangeConfirm,
+    closeTariffChangeConfirm,
+    loadTariffChangeOptions,
+    applyTariffChange,
+    createTariffChangePayment,
+    openDeviceTopupModal,
+    closeDeviceTopupModal,
+    loadDeviceTopupOptions,
+    createDeviceTopupPayment
+  };
+}
diff --git a/bot/app/web/frontend/src/lib/webapp/stores/devicesStore.js b/bot/app/web/frontend/src/lib/webapp/stores/devicesStore.js
new file mode 100644
index 0000000..2fa7641
--- /dev/null
+++ b/bot/app/web/frontend/src/lib/webapp/stores/devicesStore.js
@@ -0,0 +1,100 @@
+import { writable, get } from "svelte/store";
+
+export function createDevicesStore({ api, t, showToast }) {
+  const state = writable({
+    devicesData: null,
+    devicesLoaded: false,
+    devicesBusy: false,
+    devicesStatus: "",
+    devicesIsError: false,
+    deviceConfirmOpen: false,
+    deviceToDisconnect: null,
+    deviceDisconnectBusy: false,
+  });
+
+  async function loadDevices(devicesEnabled, force = false) {
+    const s = get(state);
+    if (!devicesEnabled || s.devicesBusy || (s.devicesLoaded && !force)) return;
+    state.update(s => ({ ...s, devicesBusy: true, devicesStatus: "", devicesIsError: false }));
+    try {
+      const response = await api("/devices");
+      if (!response?.ok) throw response;
+      state.update(s => ({ ...s, devicesData: response, devicesLoaded: true }));
+    } catch (error) {
+      state.update(s => ({ 
+        ...s, 
+        devicesStatus: error?.message || t("wa_devices_load_failed"), 
+        devicesIsError: true, 
+        devicesLoaded: true 
+      }));
+    } finally {
+      state.update(s => ({ ...s, devicesBusy: false }));
+    }
+  }
+
+  function openDeviceDisconnectDialog(device) {
+    state.update(s => ({ ...s, deviceToDisconnect: device, deviceConfirmOpen: true }));
+  }
+
+  function closeDeviceDisconnectDialog() {
+    const s = get(state);
+    if (s.deviceDisconnectBusy) return;
+    state.update(s => ({ ...s, deviceConfirmOpen: false, deviceToDisconnect: null }));
+  }
+
+  async function disconnectDevice(devicesEnabled) {
+    const s = get(state);
+    const token = String(s.deviceToDisconnect?.token || "").trim();
+    if (!token || s.deviceDisconnectBusy) return;
+    state.update(s => ({ ...s, deviceDisconnectBusy: true }));
+    try {
+      const response = await api("/devices/disconnect", {
+        method: "POST",
+        body: JSON.stringify({ token }),
+      });
+      if (!response?.ok) throw response;
+      showToast(t("wa_device_disconnected"));
+      state.update(s => ({ ...s, deviceConfirmOpen: false, deviceToDisconnect: null, devicesLoaded: false }));
+      await loadDevices(devicesEnabled, true);
+    } catch (error) {
+      showToast(error?.message || t("wa_device_disconnect_failed"));
+    } finally {
+      state.update(s => ({ ...s, deviceDisconnectBusy: false }));
+    }
+  }
+
+  function devicesLimitLabel() {
+    const s = get(state);
+    const value = s.devicesData?.max_devices;
+    const numeric = Number(value ?? 0);
+    if (!Number.isFinite(numeric) || numeric <= 0) return t("wa_devices_unlimited");
+    return String(Math.trunc(numeric));
+  }
+
+  function devicesCountLabel() {
+    const s = get(state);
+    const current = Number(s.devicesData?.current_devices ?? s.devicesData?.devices?.length ?? 0);
+    return t("wa_devices_count", { current, max: devicesLimitLabel() });
+  }
+
+  function devicesPercent() {
+    const s = get(state);
+    const current = Number(s.devicesData?.current_devices ?? s.devicesData?.devices?.length ?? 0);
+    const max = Number(s.devicesData?.max_devices || 0);
+    if (!max || max <= 0) return 100;
+    return Math.max(0, Math.min(100, Math.round((current / max) * 100)));
+  }
+
+  return {
+    subscribe: state.subscribe,
+    set: state.set,
+    update: state.update,
+    loadDevices,
+    openDeviceDisconnectDialog,
+    closeDeviceDisconnectDialog,
+    disconnectDevice,
+    devicesLimitLabel,
+    devicesCountLabel,
+    devicesPercent,
+  };
+}
diff --git a/bot/app/web/frontend/src/lib/webapp/tariffs.js b/bot/app/web/frontend/src/lib/webapp/tariffs.js
index 89b5ff7..b472192 100644
--- a/bot/app/web/frontend/src/lib/webapp/tariffs.js
+++ b/bot/app/web/frontend/src/lib/webapp/tariffs.js
@@ -71,11 +71,10 @@ export function actionKey(action) {
   return `${action?.mode || ""}:${action?.months || ""}:${action?.traffic_gb || ""}:${action?.price || ""}`;
 }
 
-function formatMonthsForClient(value, lang) {
+function formatMonthsForClient(value, { t, termUnitLabel }) {
   const months = Number(value || 0);
-  if (months === 1) return lang === "en" ? "1 month" : "1 месяц";
-  if (months === 12) return lang === "en" ? "1 year" : "1 год";
-  return lang === "en" ? `${months} months` : `${months} мес.`;
+  if (months === 12) return t("wa_plan_one_year");
+  return t("wa_sub_term_value_unit", { value: String(months), unit: termUnitLabel(months, "month") });
 }
 
 export function planDisplayTitle(plan, { trafficMode, t }) {
@@ -90,7 +89,7 @@ export function planDisplayTitle(plan, { trafficMode, t }) {
   return plan?.title || "";
 }
 
-export function planSubtitle(plan, { lang }) {
+export function planSubtitle(plan, { t, termUnitLabel }) {
   if (!plan?.tariff_key) return "";
   if (plan?.subtitle) return plan.subtitle;
   if (
@@ -101,7 +100,7 @@ export function planSubtitle(plan, { lang }) {
   ) {
     return formatTrafficGb(plan?.traffic_gb || plan?.months);
   }
-  return formatMonthsForClient(plan?.months, lang);
+  return formatMonthsForClient(plan?.months, { t, termUnitLabel });
 }
 
 export function planUnitHint(plan, { trafficMode, selectedMethod, t }) {
diff --git a/bot/app/web/frontend/src/styles.css b/bot/app/web/frontend/src/styles.css
index 61f3a79..696e053 100644
--- a/bot/app/web/frontend/src/styles.css
+++ b/bot/app/web/frontend/src/styles.css
@@ -1,4 +1,7 @@
+@import "./styles/base.css";
 @import "./styles/controls.css";
 @import "./styles/dialogs.css";
 @import "./styles/webapp.css";
 @import "./styles/admin.css";
+@import "./styles/admin-controls.css";
+@import "./styles/admin-dialogs.css";
diff --git a/bot/app/web/frontend/src/styles/admin-controls.css b/bot/app/web/frontend/src/styles/admin-controls.css
new file mode 100644
index 0000000..acfca78
--- /dev/null
+++ b/bot/app/web/frontend/src/styles/admin-controls.css
@@ -0,0 +1,277 @@
+
+
+.admin-toolbar-search .input,
+.admin-toolbar-search .admin-btn {
+  height: 36px;
+}
+
+.admin-toolbar > .input,
+.admin-toolbar input[type="text"],
+.admin-toolbar input[type="number"],
+.admin-toolbar input[type="search"] {
+  flex: 1 1 200px;
+  min-width: 180px;
+}
+
+.admin-toolbar > .admin-btn {
+  height: 36px;
+}
+
+.admin-table td.admin-cell-actions .admin-btn {
+  margin-left: 4px;
+}
+
+.admin-screen-wrap input,
+.admin-screen-wrap textarea,
+.admin-screen-wrap select,
+.admin-screen-wrap .input,
+.admin-dialog input,
+.admin-dialog textarea,
+.admin-dialog select,
+.admin-dialog .input {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.admin-screen-wrap .input,
+.admin-screen-wrap input[type="text"],
+.admin-screen-wrap input[type="number"],
+.admin-screen-wrap input[type="email"],
+.admin-screen-wrap input[type="search"],
+.admin-screen-wrap input[type="password"],
+.admin-screen-wrap input[type="url"],
+.admin-screen-wrap select,
+.admin-dialog .input,
+.admin-dialog input[type="text"],
+.admin-dialog input[type="number"],
+.admin-dialog input[type="email"],
+.admin-dialog input[type="search"],
+.admin-dialog input[type="password"],
+.admin-dialog input[type="url"],
+.admin-dialog select {
+  height: 36px;
+  border-radius: 8px;
+  border: 1px solid var(--admin-border-strong);
+  background: var(--admin-bg);
+  color: var(--admin-text);
+  padding: 0 12px;
+  font-size: 13px;
+  outline: none;
+  transition: border-color 0.12s ease, box-shadow 0.12s ease;
+}
+
+.admin-screen-wrap .input::placeholder,
+.admin-screen-wrap input::placeholder,
+.admin-screen-wrap textarea::placeholder,
+.admin-dialog .input::placeholder,
+.admin-dialog input::placeholder,
+.admin-dialog textarea::placeholder {
+  color: var(--admin-dim);
+}
+
+.admin-screen-wrap .input:focus,
+.admin-screen-wrap input:focus,
+.admin-screen-wrap select:focus,
+.admin-dialog .input:focus,
+.admin-dialog input:focus,
+.admin-dialog select:focus {
+  border-color: var(--admin-ring);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
+}
+
+.admin-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 34px;
+  padding: 0 14px;
+  border-radius: 8px;
+  border: 1px solid var(--admin-border);
+  background: var(--admin-surface-2);
+  color: var(--admin-text);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
+}
+
+.admin-btn:hover:not(:disabled) {
+  background: var(--admin-elev);
+}
+
+.admin-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.admin-btn.admin-btn-primary {
+  background: var(--accent);
+  color: #02110a;
+  border-color: color-mix(in srgb, var(--accent) 70%, #000);
+  font-weight: 600;
+}
+
+.admin-btn.admin-btn-primary:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--accent) 90%, #fff);
+}
+
+.admin-btn.admin-btn-ghost {
+  background: transparent;
+  border-color: transparent;
+  color: var(--admin-muted);
+}
+
+.admin-btn.admin-btn-ghost:hover:not(:disabled) {
+  background: var(--admin-surface-2);
+  color: var(--admin-text);
+}
+
+.admin-btn.admin-btn-danger {
+  background: color-mix(in srgb, #ff5757 80%, #000);
+  color: #fff;
+  border-color: color-mix(in srgb, #ff5757 60%, #000);
+  font-weight: 600;
+}
+
+.admin-btn.admin-btn-danger:hover:not(:disabled) {
+  background: #ff5757;
+  border-color: #ff5757;
+}
+
+.admin-btn.admin-btn-danger-soft {
+  color: #ffb4b4;
+  background: var(--admin-surface-2);
+  border-color: color-mix(in srgb, #ff6b6b 30%, transparent);
+}
+
+.admin-btn.admin-btn-danger-soft:hover:not(:disabled) {
+  background: color-mix(in srgb, #ff6b6b 14%, var(--admin-surface));
+  border-color: color-mix(in srgb, #ff6b6b 50%, transparent);
+}
+
+.admin-btn.admin-btn-icon {
+  width: 34px;
+  padding: 0;
+}
+
+.admin-btn.admin-btn-sm {
+  height: 28px;
+  padding: 0 10px;
+  font-size: 12px;
+  border-radius: 6px;
+}
+
+.admin-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 999px;
+  border: 1px solid var(--admin-border);
+  background: var(--admin-surface-2);
+  color: var(--admin-muted);
+  white-space: nowrap;
+}
+
+.admin-badge.admin-badge-success {
+  border-color: color-mix(in srgb, var(--accent) 36%, transparent);
+  color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 12%, var(--admin-surface));
+}
+
+.admin-badge.admin-badge-danger {
+  border-color: color-mix(in srgb, #ff6b6b 32%, transparent);
+  color: #ffb4b4;
+  background: color-mix(in srgb, #ff6b6b 12%, var(--admin-surface));
+}
+
+.admin-badge.admin-badge-warning {
+  border-color: color-mix(in srgb, #ffd166 32%, transparent);
+  color: #ffd166;
+  background: color-mix(in srgb, #ffd166 12%, var(--admin-surface));
+}
+
+.admin-badge.admin-badge-muted {
+  color: var(--admin-muted);
+}
+
+.admin-setting-control .input,
+.admin-setting-control input[type="text"],
+.admin-setting-control input[type="number"] {
+  flex: 1 1 160px;
+  min-width: 0;
+  width: 100%;
+}
+
+.admin-btn.admin-btn-icon {
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+}
+
+.admin-row-editor-line .admin-btn {
+  width: 32px;
+  padding: 0;
+}
+
+.admin-action-grid > .admin-btn {
+  width: 100%;
+  height: 36px;
+  align-self: end;
+}
+
+.admin-extend-control .input {
+  height: 100%;
+  min-height: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  padding: 0 12px;
+  line-height: 34px;
+  box-shadow: none;
+}
+
+.admin-extend-control .input:focus {
+  box-shadow: none;
+}
+
+.admin-extend-control .admin-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 0;
+  padding: 0 12px;
+  border-width: 0 0 0 1px;
+  border-radius: 0;
+  border-color: var(--admin-border-strong);
+  background: var(--admin-surface-2);
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.admin-extend-control .admin-btn svg {
+  flex: 0 0 auto;
+}
+
+.admin-input-row .input,
+.admin-input-row .admin-btn {
+  height: 36px;
+}
+
+.admin-actions-tab > .admin-btn {
+  width: 100%;
+  height: 36px;
+}
+
+.admin-message-actions .admin-btn {
+  height: 36px;
+}
\ No newline at end of file
diff --git a/bot/app/web/frontend/src/styles/admin-dialogs.css b/bot/app/web/frontend/src/styles/admin-dialogs.css
new file mode 100644
index 0000000..6dbacc3
--- /dev/null
+++ b/bot/app/web/frontend/src/styles/admin-dialogs.css
@@ -0,0 +1,8 @@
+
+.dialog:has(.admin-dialog) {
+  padding: max(12px, env(safe-area-inset-top))
+           max(12px, env(safe-area-inset-right))
+           max(12px, env(safe-area-inset-bottom))
+           max(12px, env(safe-area-inset-left));
+  z-index: 90;
+}
\ No newline at end of file
diff --git a/bot/app/web/frontend/src/styles/admin.css b/bot/app/web/frontend/src/styles/admin.css
index dc900e7..e324d6d 100644
--- a/bot/app/web/frontend/src/styles/admin.css
+++ b/bot/app/web/frontend/src/styles/admin.css
@@ -293,6 +293,7 @@
 
 /* Flex children must NOT shrink — otherwise they collapse to fit the
    container and the main never overflows, breaking scroll. */
+
 .admin-main > * {
   flex-shrink: 0;
 }
@@ -451,11 +452,6 @@
   grid-template-columns: minmax(0, 1fr) auto auto;
 }
 
-.admin-toolbar-search .input,
-.admin-toolbar-search .admin-btn {
-  height: 36px;
-}
-
 .admin-toolbar-controls {
   display: grid;
   grid-template-columns: repeat(3, minmax(150px, 1fr)) minmax(96px, auto);
@@ -463,18 +459,6 @@
   gap: 8px;
 }
 
-.admin-toolbar > .input,
-.admin-toolbar input[type="text"],
-.admin-toolbar input[type="number"],
-.admin-toolbar input[type="search"] {
-  flex: 1 1 200px;
-  min-width: 180px;
-}
-
-.admin-toolbar > .admin-btn {
-  height: 36px;
-}
-
 .admin-toolbar-field {
   display: grid;
   align-items: start;
@@ -597,10 +581,6 @@
   white-space: nowrap;
 }
 
-.admin-table td.admin-cell-actions .admin-btn {
-  margin-left: 4px;
-}
-
 .admin-table td.admin-cell-wrap {
   white-space: normal;
   max-width: 320px;
@@ -830,53 +810,14 @@
   gap: 6px;
 }
 
-.admin-screen-wrap input,
-.admin-screen-wrap textarea,
-.admin-screen-wrap select,
-.admin-screen-wrap .input {
-  min-width: 0;
-  max-width: 100%;
-}
-
-.admin-screen-wrap .input,
-.admin-screen-wrap input[type="text"],
-.admin-screen-wrap input[type="number"],
-.admin-screen-wrap input[type="email"],
-.admin-screen-wrap input[type="search"],
-.admin-screen-wrap input[type="password"],
-.admin-screen-wrap input[type="url"],
-.admin-screen-wrap select {
-  height: 36px;
-  border-radius: 8px;
-  border: 1px solid var(--admin-border-strong);
-  background: var(--admin-bg);
-  color: var(--admin-text);
-  padding: 0 12px;
-  font-size: 13px;
-  outline: none;
-  transition: border-color 0.12s ease, box-shadow 0.12s ease;
-}
-
-.admin-screen-wrap .input::placeholder,
-.admin-screen-wrap input::placeholder,
-.admin-screen-wrap textarea::placeholder {
-  color: var(--admin-dim);
-}
-
-.admin-screen-wrap .input:focus,
-.admin-screen-wrap input:focus,
-.admin-screen-wrap select:focus {
-  border-color: var(--admin-ring);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
-}
-
 .admin-select {
   width: 100%;
   appearance: auto;
 }
 
 .admin-textarea,
-.admin-screen-wrap textarea {
+.admin-screen-wrap textarea,
+.admin-dialog textarea {
   width: 100%;
   min-height: 110px;
   border-radius: 10px;
@@ -891,7 +832,8 @@
   transition: border-color 0.12s ease, box-shadow 0.12s ease;
 }
 
-.admin-textarea:focus {
+.admin-textarea:focus,
+.admin-dialog textarea:focus {
   border-color: var(--admin-ring);
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
 }
@@ -935,90 +877,6 @@
   display: flex;
 }
 
-.admin-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  height: 34px;
-  padding: 0 14px;
-  border-radius: 8px;
-  border: 1px solid var(--admin-border);
-  background: var(--admin-surface-2);
-  color: var(--admin-text);
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  white-space: nowrap;
-  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
-}
-
-.admin-btn:hover:not(:disabled) {
-  background: var(--admin-elev);
-}
-
-.admin-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.admin-btn.admin-btn-primary {
-  background: var(--accent);
-  color: #02110a;
-  border-color: color-mix(in srgb, var(--accent) 70%, #000);
-  font-weight: 600;
-}
-
-.admin-btn.admin-btn-primary:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--accent) 90%, #fff);
-}
-
-.admin-btn.admin-btn-ghost {
-  background: transparent;
-  border-color: transparent;
-  color: var(--admin-muted);
-}
-
-.admin-btn.admin-btn-ghost:hover:not(:disabled) {
-  background: var(--admin-surface-2);
-  color: var(--admin-text);
-}
-
-.admin-btn.admin-btn-danger {
-  background: color-mix(in srgb, #ff5757 80%, #000);
-  color: #fff;
-  border-color: color-mix(in srgb, #ff5757 60%, #000);
-  font-weight: 600;
-}
-
-.admin-btn.admin-btn-danger:hover:not(:disabled) {
-  background: #ff5757;
-  border-color: #ff5757;
-}
-
-.admin-btn.admin-btn-danger-soft {
-  color: #ffb4b4;
-  background: var(--admin-surface-2);
-  border-color: color-mix(in srgb, #ff6b6b 30%, transparent);
-}
-
-.admin-btn.admin-btn-danger-soft:hover:not(:disabled) {
-  background: color-mix(in srgb, #ff6b6b 14%, var(--admin-surface));
-  border-color: color-mix(in srgb, #ff6b6b 50%, transparent);
-}
-
-.admin-btn.admin-btn-icon {
-  width: 34px;
-  padding: 0;
-}
-
-.admin-btn.admin-btn-sm {
-  height: 28px;
-  padding: 0 10px;
-  font-size: 12px;
-  border-radius: 6px;
-}
-
 /* ============================================================
    Admin skeletons (users list, payments / logs / promos / ads
    tables). Rendered while data is loading to soften the empty
@@ -1109,42 +967,6 @@
   }
 }
 
-.admin-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 11px;
-  font-weight: 600;
-  padding: 2px 8px;
-  border-radius: 999px;
-  border: 1px solid var(--admin-border);
-  background: var(--admin-surface-2);
-  color: var(--admin-muted);
-  white-space: nowrap;
-}
-
-.admin-badge.admin-badge-success {
-  border-color: color-mix(in srgb, var(--accent) 36%, transparent);
-  color: var(--accent);
-  background: color-mix(in srgb, var(--accent) 12%, var(--admin-surface));
-}
-
-.admin-badge.admin-badge-danger {
-  border-color: color-mix(in srgb, #ff6b6b 32%, transparent);
-  color: #ffb4b4;
-  background: color-mix(in srgb, #ff6b6b 12%, var(--admin-surface));
-}
-
-.admin-badge.admin-badge-warning {
-  border-color: color-mix(in srgb, #ffd166 32%, transparent);
-  color: #ffd166;
-  background: color-mix(in srgb, #ffd166 12%, var(--admin-surface));
-}
-
-.admin-badge.admin-badge-muted {
-  color: var(--admin-muted);
-}
-
 .admin-detail-grid {
   display: grid;
   grid-template-columns: 1fr;
@@ -1353,14 +1175,6 @@
   min-width: 0;
 }
 
-.admin-setting-control .input,
-.admin-setting-control input[type="text"],
-.admin-setting-control input[type="number"] {
-  flex: 1 1 160px;
-  min-width: 0;
-  width: 100%;
-}
-
 .admin-setting-control .admin-color {
   width: 36px;
   height: 36px;
@@ -1408,13 +1222,6 @@
 /* Admin dialogs don't share the user-facing bottom-nav, so reset the .dialog
    wrapper's padding (which reserves space for the mobile nav) and let the
    card use the full viewport for its scroll area. */
-.dialog:has(.admin-dialog) {
-  padding: max(12px, env(safe-area-inset-top))
-           max(12px, env(safe-area-inset-right))
-           max(12px, env(safe-area-inset-bottom))
-           max(12px, env(safe-area-inset-left));
-  z-index: 90;
-}
 
 .admin-dialog {
   max-height: 100%;
@@ -1426,6 +1233,7 @@
 
 /* User-detail dialog: constrain on desktop and lay out as a two-column
    sidebar (profile facts) + main content (tabs). On mobile it stacks. */
+
 .admin-user-dialog {
   width: min(100%, 1040px);
   max-height: min(100%, 760px);
@@ -1532,16 +1340,6 @@
   text-decoration: underline;
 }
 
-.admin-btn.admin-btn-icon {
-  width: 30px;
-  height: 30px;
-  padding: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 auto;
-}
-
 .admin-meta-truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1758,6 +1556,7 @@
 /* Section title block: stacks `<strong>` heading + `<small>` description.
    Higher specificity than `.admin-editor-section-head > div` (which would
    otherwise force flex-row on the wrapper). */
+
 .admin-editor-section-head > .admin-editor-section-title {
   display: flex;
   flex-direction: column;
@@ -1777,6 +1576,7 @@
 
 /* Column headers above an `.admin-row-editor` list — visually distinct,
    inherits the same grid template as input rows so columns line up. */
+
 .admin-row-editor-line.admin-row-editor-header {
   color: var(--admin-muted);
   font-size: 11px;
@@ -1810,11 +1610,6 @@
   grid-template-columns: minmax(80px, 0.8fr) minmax(100px, 1fr) minmax(100px, 1fr) 32px;
 }
 
-.admin-row-editor-line .admin-btn {
-  width: 32px;
-  padding: 0;
-}
-
 .admin-package-columns {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -2111,6 +1906,7 @@
 }
 
 /* Switch (bits-ui Switch.Root + Thumb) */
+
 .admin-switch-root {
   appearance: none;
   position: relative;
@@ -2158,6 +1954,7 @@
 }
 
 /* Select (bits-ui Select.Root + Trigger + Content + Item) */
+
 .admin-select-trigger {
   display: inline-flex;
   align-items: center;
@@ -2270,6 +2067,7 @@
 }
 
 /* Label primitive (bits-ui Label.Root) */
+
 .admin-field-label {
   display: flex;
   flex-direction: column;
@@ -2311,6 +2109,7 @@
 }
 
 /* Action rows in dialogs */
+
 .admin-action-row {
   display: flex;
   align-items: center;
@@ -2353,12 +2152,6 @@
   align-items: end;
 }
 
-.admin-action-grid > .admin-btn {
-  width: 100%;
-  height: 36px;
-  align-self: end;
-}
-
 .admin-user-quick-actions {
   display: grid;
   grid-template-columns: minmax(180px, 0.75fr) minmax(260px, 1.25fr);
@@ -2392,40 +2185,6 @@
   overflow: hidden;
 }
 
-.admin-extend-control .input {
-  height: 100%;
-  min-height: 0;
-  border: 0;
-  border-radius: 0;
-  background: transparent;
-  padding: 0 12px;
-  line-height: 34px;
-  box-shadow: none;
-}
-
-.admin-extend-control .input:focus {
-  box-shadow: none;
-}
-
-.admin-extend-control .admin-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  min-height: 0;
-  padding: 0 12px;
-  border-width: 0 0 0 1px;
-  border-radius: 0;
-  border-color: var(--admin-border-strong);
-  background: var(--admin-surface-2);
-  line-height: 1;
-  white-space: nowrap;
-}
-
-.admin-extend-control .admin-btn svg {
-  flex: 0 0 auto;
-}
-
 .admin-extend-control:focus-within {
   border-color: var(--admin-ring);
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
@@ -2439,26 +2198,12 @@
   min-width: 0;
 }
 
-.admin-input-row .input,
-.admin-input-row .admin-btn {
-  height: 36px;
-}
-
-.admin-actions-tab > .admin-btn {
-  width: 100%;
-  height: 36px;
-}
-
 .admin-message-actions {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   gap: 8px;
 }
 
-.admin-message-actions .admin-btn {
-  height: 36px;
-}
-
 .admin-confirm-message-preview {
   max-height: min(280px, 45vh);
   overflow: auto;
@@ -2497,6 +2242,7 @@
 }
 
 /* Two-column variant of admin-form-row */
+
 .admin-form-row.admin-form-row-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -2508,6 +2254,7 @@
 }
 
 /* User summary header inside the user dialog */
+
 .admin-user-summary {
   display: grid;
   grid-template-columns: 56px minmax(0, 1fr);
@@ -2583,6 +2330,7 @@
 }
 
 /* Editor section header tweaks */
+
 .admin-editor-section-actions {
   display: flex;
   flex-wrap: wrap;
@@ -2597,7 +2345,6 @@
   letter-spacing: 0.05em;
 }
 
-
 .admin-danger-zone {
   border: 1px solid color-mix(in srgb, #ff6b6b 32%, transparent);
   border-radius: 12px;
@@ -2632,6 +2379,7 @@
 /* Subsection grouping inside settings sections (per-payment-provider).
    Each subsection is a nested Accordion.Item that defaults to closed —
    users see provider names and expand only the one they want to edit. */
+
 .admin-subsection-accordion {
   display: flex;
   flex-direction: column;
@@ -2731,4 +2479,4 @@
     grid-area: meta;
     white-space: normal;
   }
-}
+}
\ No newline at end of file
diff --git a/bot/app/web/frontend/src/styles/base.css b/bot/app/web/frontend/src/styles/base.css
new file mode 100644
index 0000000..199d5cc
--- /dev/null
+++ b/bot/app/web/frontend/src/styles/base.css
@@ -0,0 +1,95 @@
+@font-face {
+  font-family: "Twemoji Country Flags";
+  src: url("https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1/dist/TwemojiCountryFlags.woff2")
+    format("woff2");
+  font-display: swap;
+  unicode-range:
+    U+1F1E6-1F1FF,
+    U+1F3F4,
+    U+E0062-E0063,
+    U+E0065,
+    U+E0067,
+    U+E006C,
+    U+E006E,
+    U+E0073-E0074,
+    U+E0077,
+    U+E007F;
+}
+
+:root {
+  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
+  --font-mono: "JetBrains Mono", "Fira Code", monospace;
+  color-scheme: dark;
+  --accent: #00fe7a;
+  --bg: #03070b;
+  --panel: #111820;
+  --panel-2: #0b1118;
+  --panel-3: #17212b;
+  --border: rgba(255, 255, 255, 0.12);
+  --border-strong: rgba(255, 255, 255, 0.2);
+  --text: #f2f7f4;
+  --muted: #a9b4b0;
+  --dim: #68736f;
+  --danger: #ff6b6b;
+  --blue: #2d9cff;
+  --radius: 8px;
+
+  /* Admin design tokens — kept on :root so portal-rendered admin
+     surfaces (dialogs, bits-ui Select.Portal content) inherit them. */
+  --admin-bg: var(--bg);
+  --admin-surface: var(--panel);
+  --admin-surface-2: var(--panel-2);
+  --admin-elev: var(--panel-3);
+  --admin-border: var(--border);
+  --admin-border-strong: var(--border-strong);
+  --admin-text: var(--text);
+  --admin-muted: var(--muted);
+  --admin-dim: var(--dim);
+  --admin-ring: color-mix(in srgb, var(--accent) 50%, transparent);
+  --screen-gutter: 18px;
+  --safe-inline: max(env(safe-area-inset-left), env(safe-area-inset-right));
+  --nav-inline-gutter: max(var(--screen-gutter), var(--safe-inline));
+  --bottom-nav-height: 64px;
+  --bottom-nav-offset: 10px;
+  --bottom-nav-left: calc(max(0px, (100% - 440px) / 2) + var(--nav-inline-gutter));
+  --bottom-nav-width: min(
+    calc(100% - (var(--nav-inline-gutter) * 2)),
+    calc(440px - (var(--nav-inline-gutter) * 2))
+  );
+  font-family: var(--font-sans);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+  min-height: 100%;
+  margin: 0;
+  overflow-x: clip;
+}
+
+body {
+  background: #02070b;
+  color: var(--text);
+  -webkit-font-smoothing: antialiased;
+  letter-spacing: 0;
+}
+
+button,
+input {
+  font: inherit;
+  letter-spacing: 0;
+}
+
+.app-shell {
+  min-height: 100dvh;
+  background: #02070b !important;
+}
+
+:root {
+  --desktop-rail-width: 252px;
+  --desktop-page-gutter: clamp(28px, 4vw, 72px);
+}
\ No newline at end of file
diff --git a/bot/app/web/frontend/src/styles/controls.css b/bot/app/web/frontend/src/styles/controls.css
index 9d84e03..5aa9bee 100644
--- a/bot/app/web/frontend/src/styles/controls.css
+++ b/bot/app/web/frontend/src/styles/controls.css
@@ -1,101 +1,173 @@
-/* Shared control primitives: buttons, inputs. */
+
+
+button:disabled {
+  cursor: progress;
+  opacity: 0.58;
+}
 
 .btn {
   display: inline-flex;
-  min-height: 44px;
-  min-width: 0;
   align-items: center;
   justify-content: center;
   gap: 8px;
+  min-height: 46px;
+  padding: 0 16px;
   border: 1px solid transparent;
   border-radius: var(--radius);
-  padding: 10px 14px;
+  background: var(--panel-2);
+  color: var(--text);
+  font: inherit;
+  font-size: 14px;
+  font-weight: 800;
+  line-height: 1.1;
   text-align: center;
   text-decoration: none;
-  font-size: 14px;
-  font-weight: 850;
-  line-height: 1.1;
-  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
+  cursor: pointer;
+  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
+  transition:
+    transform 0.16s ease,
+    border-color 0.16s ease,
+    background 0.16s ease,
+    box-shadow 0.16s ease,
+    color 0.16s ease;
 }
 
-.btn:hover {
+.btn:hover:not(:disabled) {
   transform: translateY(-1px);
+  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
+}
+
+.btn:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.btn:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent),
+    0 14px 32px rgba(0, 0, 0, 0.22);
+}
+
+.btn.wide,
+.wide {
+  width: 100%;
 }
 
 .btn-primary {
-  border-color: color-mix(in srgb, var(--accent) 72%, transparent);
-  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 94%, white), var(--accent));
-  color: #031009;
-  box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 20%, transparent);
+  border-color: color-mix(in srgb, var(--accent) 72%, white);
+  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 76%, white));
+  color: #03100a;
 }
 
-.btn-secondary,
-.btn-outline {
-  border-color: var(--border-strong);
-  background: rgba(255, 255, 255, 0.045);
+.btn-secondary {
+  border-color: var(--border);
+  background: var(--panel-3);
   color: var(--text);
 }
 
 .btn-outline {
-  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
-  color: var(--accent);
+  border-color: var(--border-strong);
+  background: transparent;
+  color: var(--text);
 }
 
 .btn-ghost {
+  border-color: transparent;
   background: transparent;
-  color: var(--muted);
+  color: var(--text);
+  box-shadow: none;
 }
 
 .btn-telegram {
-  border-color: #2d9cff;
-  background: linear-gradient(180deg, #2f9ff4, #1786df);
-  color: white;
-}
-
-.btn-icon {
-  border-color: var(--border);
-  background: rgba(255, 255, 255, 0.04);
-  color: var(--text);
+  border-color: color-mix(in srgb, #229ed9 78%, white);
+  background: #229ed9;
+  color: #fff;
 }
 
+.btn-icon,
 .btn-square {
   width: 42px;
   min-width: 42px;
   height: 42px;
+  min-height: 42px;
   padding: 0;
 }
 
 .btn-sm {
   min-height: 36px;
-  padding: 8px 10px;
-  font-size: 12px;
+  padding: 0 12px;
+  font-size: 13px;
 }
 
-.wide {
-  width: 100%;
+.btn-lg {
+  min-height: 52px;
+  padding: 0 18px;
+  font-size: 16px;
+}
+
+.progress {
+  position: relative;
+  height: 8px;
+  margin-top: 12px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.progress span {
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 0;
+  border-radius: inherit;
+  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 72%, white));
+  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 40%, transparent);
 }
 
 .input {
   width: 100%;
-  min-height: 44px;
-  min-width: 0;
+  min-height: 46px;
+  padding: 8px 16px;
   border: 1px solid var(--border);
   border-radius: var(--radius);
-  background: rgba(4, 8, 11, 0.48);
+  background: var(--panel-2);
   color: var(--text);
-  outline: none;
-  padding: 11px 12px;
-  font-size: 13px;
-  font-weight: 700;
+  font: inherit;
+  font-size: 14px;
+  line-height: 1.5;
+  transition:
+    border-color 0.16s ease,
+    box-shadow 0.16s ease;
 }
 
 .input:focus {
-  border-color: color-mix(in srgb, var(--accent) 68%, var(--border));
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent);
 }
 
-.input.muted {
-  display: flex;
-  align-items: center;
+.input::placeholder {
   color: var(--dim);
 }
+
+.input:disabled {
+  opacity: 0.52;
+  cursor: not-allowed;
+}
+
+.input.input-error {
+  border-color: var(--danger);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 70%, transparent);
+}
+
+.preview-phone .btn {
+  min-height: 38px;
+  font-size: 12px;
+  padding: 8px 10px;
+}
+
+.preview-phone .btn-square {
+  width: 36px;
+  min-width: 36px;
+  height: 36px;
+  padding: 0;
+}
diff --git a/bot/app/web/frontend/src/styles/dialogs.css b/bot/app/web/frontend/src/styles/dialogs.css
index 3cec9f1..8a18761 100644
--- a/bot/app/web/frontend/src/styles/dialogs.css
+++ b/bot/app/web/frontend/src/styles/dialogs.css
@@ -1,62 +1,78 @@
-/* Modal/dialog primitives — bottom-sheet style cards used across the webapp. */
+
+
+.dialog-skeleton {
+  display: grid;
+  gap: 12px;
+}
 
 .dialog {
   position: fixed;
   inset: 0;
-  z-index: 70;
+  z-index: 220;
   display: grid;
-  place-items: center;
-  overflow: hidden;
+  align-items: center;
+  justify-items: center;
   padding:
-    16px
-    var(--screen-gutter)
-    calc(var(--bottom-nav-height) + var(--bottom-nav-offset) + 16px + env(safe-area-inset-bottom));
+    max(14px, env(safe-area-inset-top))
+    max(14px, env(safe-area-inset-right))
+    max(14px, env(safe-area-inset-bottom))
+    max(14px, env(safe-area-inset-left));
+  overflow: hidden;
+  isolation: isolate;
 }
 
 .dialog-backdrop {
   position: absolute;
   inset: 0;
+  z-index: 0;
   border: 0;
-  background: rgba(2, 7, 11, 0.54);
+  background: rgba(0, 0, 0, 0.56);
   backdrop-filter: blur(10px);
-  animation: fade-in 0.18s ease-out both;
+  cursor: pointer;
+  animation: dialog-fade-in 0.18s ease-out both;
 }
 
 .dialog-card {
   position: relative;
   z-index: 1;
   display: grid;
-  width: min(100%, 420px);
-  gap: 12px;
-  border: 1px solid var(--border-strong);
-  border-radius: var(--radius);
-  background: var(--panel);
-  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5);
-  padding: 14px;
-  transform-origin: center;
-  animation: modal-enter 0.2s ease-out both;
+  gap: 16px;
+  width: min(100%, 520px);
+  max-height: min(86dvh, 760px);
+  overflow: auto;
+  overscroll-behavior: contain;
+  padding: 18px;
+  border: 1px solid var(--border);
+  border-radius: 24px;
+  background: color-mix(in srgb, var(--panel) 94%, #07111a);
+  color: var(--text);
+  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.46);
+  animation: dialog-slide-up 0.2s ease-out both;
 }
 
 .dialog-head {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 42px;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 12px;
   align-items: start;
-  gap: 10px;
 }
 
 .dialog-head h2 {
   margin: 0;
   color: var(--text);
-  font-size: 18px;
-  line-height: 1.16;
-  font-weight: 850;
+  font-size: 19px;
+  line-height: 1.18;
 }
 
 .dialog-head p {
-  margin: 4px 0 0;
+  margin: 6px 0 0;
   color: var(--muted);
-  font-size: 12px;
-  line-height: 1.3;
+  font-size: 13px;
+  line-height: 1.45;
+}
+
+.dialog-card .bottom-action {
+  margin-top: 2px;
 }
 
 .payment-dialog-card {
@@ -64,38 +80,6 @@
   overflow-y: auto;
 }
 
-.link-email-dialog-card {
-  display: grid;
-  grid-template-rows: auto minmax(0, 1fr);
-  height: min(100%, 560px);
-  max-height: 100%;
-  overflow: hidden;
-}
-
-.link-email-dialog-card .dialog-head {
-  position: relative;
-  z-index: 2;
-}
-
-.link-email-dialog-card .payment-dialog-body {
-  min-height: 0;
-}
-
-.link-email-code-layout {
-  display: grid;
-  min-height: 0;
-  height: 100%;
-  grid-template-rows: minmax(0, 1fr) auto;
-}
-
-.link-email-code-center {
-  align-self: center;
-}
-
-.link-email-resend {
-  align-self: end;
-}
-
 .payment-dialog-body {
   display: grid;
   gap: 10px;
@@ -117,22 +101,42 @@
     0 0 26px color-mix(in srgb, var(--accent) 42%, transparent);
 }
 
-@keyframes fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+.link-email-dialog-card {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  height: min(100%, 560px);
+  max-height: 100%;
+  overflow: hidden;
 }
 
-@keyframes modal-enter {
+.link-email-dialog-card .dialog-head {
+  position: relative;
+  z-index: 2;
+}
+
+.link-email-dialog-card .payment-dialog-body {
+  min-height: 0;
+}
+
+@keyframes dialog-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes dialog-slide-up {
   from {
     opacity: 0;
-    transform: translateY(10px) scale(0.98);
+    transform: translateY(18px) scale(0.98);
   }
   to {
     opacity: 1;
     transform: translateY(0) scale(1);
   }
 }
+
+@media (min-width: 720px) {
+  .dialog-card {
+    border-radius: var(--radius-lg);
+    padding: 20px;
+  }
+}
diff --git a/bot/app/web/frontend/src/styles/webapp.css b/bot/app/web/frontend/src/styles/webapp.css
index aaa08b5..0cc93f0 100644
--- a/bot/app/web/frontend/src/styles/webapp.css
+++ b/bot/app/web/frontend/src/styles/webapp.css
@@ -1,107 +1,11 @@
-@font-face {
-  font-family: "Twemoji Country Flags";
-  src: url("https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1/dist/TwemojiCountryFlags.woff2")
-    format("woff2");
-  font-display: swap;
-  unicode-range:
-    U+1F1E6-1F1FF,
-    U+1F3F4,
-    U+E0062-E0063,
-    U+E0065,
-    U+E0067,
-    U+E006C,
-    U+E006E,
-    U+E0073-E0074,
-    U+E0077,
-    U+E007F;
-}
-
-:root {
-  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
-  --font-mono: "JetBrains Mono", "Fira Code", monospace;
-  color-scheme: dark;
-  --accent: #00fe7a;
-  --bg: #03070b;
-  --panel: #111820;
-  --panel-2: #0b1118;
-  --panel-3: #17212b;
-  --border: rgba(255, 255, 255, 0.12);
-  --border-strong: rgba(255, 255, 255, 0.2);
-  --text: #f2f7f4;
-  --muted: #a9b4b0;
-  --dim: #68736f;
-  --danger: #ff6b6b;
-  --blue: #2d9cff;
-  --radius: 8px;
-
-  /* Admin design tokens — kept on :root so portal-rendered admin
-     surfaces (dialogs, bits-ui Select.Portal content) inherit them. */
-  --admin-bg: var(--bg);
-  --admin-surface: var(--panel);
-  --admin-surface-2: var(--panel-2);
-  --admin-elev: var(--panel-3);
-  --admin-border: var(--border);
-  --admin-border-strong: var(--border-strong);
-  --admin-text: var(--text);
-  --admin-muted: var(--muted);
-  --admin-dim: var(--dim);
-  --admin-ring: color-mix(in srgb, var(--accent) 50%, transparent);
-  --screen-gutter: 18px;
-  --safe-inline: max(env(safe-area-inset-left), env(safe-area-inset-right));
-  --nav-inline-gutter: max(var(--screen-gutter), var(--safe-inline));
-  --bottom-nav-height: 64px;
-  --bottom-nav-offset: 10px;
-  --bottom-nav-left: calc(max(0px, (100% - 440px) / 2) + var(--nav-inline-gutter));
-  --bottom-nav-width: min(
-    calc(100% - (var(--nav-inline-gutter) * 2)),
-    calc(440px - (var(--nav-inline-gutter) * 2))
-  );
-  font-family: var(--font-sans);
-}
-
-* {
-  box-sizing: border-box;
-}
-
-html,
-body,
-#app {
-  min-height: 100%;
-  margin: 0;
-  overflow-x: clip;
-}
-
-body {
-  background: #02070b;
-  color: var(--text);
-  -webkit-font-smoothing: antialiased;
-  letter-spacing: 0;
-}
-
-button,
-input {
-  font: inherit;
-  letter-spacing: 0;
-}
-
 button {
   cursor: pointer;
 }
 
-button:disabled {
-  cursor: progress;
-  opacity: 0.58;
-}
-
 a {
   color: inherit;
 }
 
-.app-shell {
-  min-height: 100dvh;
-  background: #02070b !important;
-}
-
 .phone-screen {
   position: relative;
   width: min(100%, 440px);
@@ -109,10 +13,7 @@ a {
   margin: 0 auto;
   overflow-x: hidden;
   padding:
-    max(16px, env(safe-area-inset-top))
-    max(var(--screen-gutter), var(--safe-inline))
-    max(18px, env(safe-area-inset-bottom))
-    max(var(--screen-gutter), var(--safe-inline));
+    max(16px, env(safe-area-inset-top)) max(var(--screen-gutter), var(--safe-inline)) max(18px, env(safe-area-inset-bottom)) max(var(--screen-gutter), var(--safe-inline));
 }
 
 .content {
@@ -366,24 +267,6 @@ a {
   gap: 8px;
 }
 
-.progress {
-  position: relative;
-  height: 8px;
-  margin-top: 12px;
-  overflow: hidden;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.08);
-}
-
-.progress span {
-  position: absolute;
-  inset: 0 auto 0 0;
-  width: 0;
-  border-radius: inherit;
-  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 72%, white));
-  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 40%, transparent);
-}
-
 .traffic-meta {
   display: flex;
   align-items: center;
@@ -407,7 +290,7 @@ a {
 
 .card-click-target {
   position: absolute;
-  z-index: 2;
+  z-index: 6;
   inset: 0;
   width: 100%;
   border: 0;
@@ -439,7 +322,7 @@ a {
 
 .premium-server-dropdown {
   position: relative;
-  z-index: 3;
+  z-index: 7;
   min-width: 0;
 }
 
@@ -509,7 +392,7 @@ a {
   gap: 6px;
 }
 
-.premium-server-list > div {
+.premium-server-list>div {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
@@ -533,7 +416,7 @@ a {
   padding: 12px;
 }
 
-.topup-summary-card > div:not(.premium-server-list) {
+.topup-summary-card>div:not(.premium-server-list) {
   display: grid;
   gap: 3px;
 }
@@ -557,7 +440,7 @@ a {
   gap: 11px;
 }
 
-.trial-card-head > svg {
+.trial-card-head>svg {
   flex: 0 0 auto;
   color: var(--accent);
 }
@@ -592,7 +475,7 @@ a {
   gap: 11px;
 }
 
-.devices-summary-head > svg {
+.devices-summary-head>svg {
   color: var(--accent);
 }
 
@@ -881,17 +764,12 @@ a {
   align-items: flex-start;
 }
 
-.change-action-row > svg {
+.change-action-row>svg {
   flex: 0 0 auto;
   margin-top: 1px;
   color: var(--accent);
 }
 
-.dialog-skeleton {
-  display: grid;
-  gap: 12px;
-}
-
 .topup-carryover-note {
   display: grid;
   gap: 6px;
@@ -921,12 +799,10 @@ a {
   overflow: hidden;
   border-radius: 999px;
   background:
-    linear-gradient(
-      90deg,
+    linear-gradient(90deg,
       rgba(255, 255, 255, 0.07) 0%,
       rgba(255, 255, 255, 0.14) 42%,
-      rgba(255, 255, 255, 0.07) 84%
-    );
+      rgba(255, 255, 255, 0.07) 84%);
   background-size: 220% 100%;
   animation: skeleton-shimmer 1.15s ease-in-out infinite;
 }
@@ -978,6 +854,7 @@ a {
   0% {
     background-position: 120% 0;
   }
+
   100% {
     background-position: -120% 0;
   }
@@ -1153,11 +1030,6 @@ a {
   min-width: 0;
 }
 
-.input.input-error {
-  border-color: var(--danger);
-  box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 70%, transparent);
-}
-
 .field-error-icon {
   color: var(--danger);
   pointer-events: none;
@@ -1205,6 +1077,7 @@ a {
     opacity: 0;
     transform: translateY(4px) scale(0.98);
   }
+
   to {
     opacity: 1;
     transform: translateY(0) scale(1);
@@ -1216,6 +1089,7 @@ a {
     opacity: 1;
     transform: translateY(0) scale(1);
   }
+
   to {
     opacity: 0;
     transform: translateY(2px) scale(0.98);
@@ -1254,7 +1128,7 @@ a {
   gap: 14px;
 }
 
-.bonus-card-head > svg {
+.bonus-card-head>svg {
   flex: 0 0 auto;
   color: var(--accent);
 }
@@ -1370,12 +1244,12 @@ a {
   background: rgba(255, 255, 255, 0.03);
 }
 
-.settings-row > svg:first-child {
+.settings-row>svg:first-child {
   color: var(--text);
   opacity: 0.9;
 }
 
-.settings-row > svg:last-child {
+.settings-row>svg:last-child {
   color: var(--muted);
 }
 
@@ -1402,7 +1276,7 @@ a {
   background: color-mix(in srgb, var(--accent) 11%, rgba(255, 255, 255, 0.03));
 }
 
-.settings-row-linked > svg:first-child {
+.settings-row-linked>svg:first-child {
   color: var(--accent);
 }
 
@@ -1447,7 +1321,7 @@ a {
   border-radius: 6px;
 }
 
-.language-select-trigger > svg {
+.language-select-trigger>svg {
   color: var(--muted);
 }
 
@@ -1531,11 +1405,11 @@ a {
   text-overflow: ellipsis;
 }
 
-.language-select-item-main > span {
+.language-select-item-main>span {
   display: inline-block !important;
 }
 
-.language-select-item-main > span:last-child {
+.language-select-item-main>span:last-child {
   margin-left: 6px;
   white-space: nowrap !important;
   overflow: hidden;
@@ -1591,9 +1465,11 @@ a {
   0% {
     box-shadow: 0 0 0 0 rgba(255, 75, 75, 0.75);
   }
+
   70% {
     box-shadow: 0 0 0 8px rgba(255, 75, 75, 0);
   }
+
   100% {
     box-shadow: 0 0 0 0 rgba(255, 75, 75, 0);
   }
@@ -1924,6 +1800,7 @@ a {
     opacity: 0;
     transform: translateY(8px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -1935,6 +1812,7 @@ a {
     opacity: 0;
     transform: translateY(-6px) scale(0.97);
   }
+
   to {
     opacity: 1;
     transform: translateY(0) scale(1);
@@ -1946,6 +1824,7 @@ a {
     opacity: 0;
     transform: translateY(10px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -2023,19 +1902,6 @@ a {
   padding: 14px;
 }
 
-.preview-phone .btn {
-  min-height: 38px;
-  font-size: 12px;
-  padding: 8px 10px;
-}
-
-.preview-phone .btn-square {
-  width: 36px;
-  min-width: 36px;
-  height: 36px;
-  padding: 0;
-}
-
 .preview-phone .period-card {
   min-height: 72px;
 }
@@ -2141,6 +2007,7 @@ a {
 }
 
 @media (prefers-reduced-motion: reduce) {
+
   .content,
   .home-layout,
   .language-select-content,
@@ -2166,11 +2033,6 @@ a {
    Mobile (≤ 1023px) is intentionally untouched.
    ============================================================ */
 
-:root {
-  --desktop-rail-width: 252px;
-  --desktop-page-gutter: clamp(28px, 4vw, 72px);
-}
-
 @media (min-width: 1024px) {
   body {
     background: #02070b;
@@ -2195,18 +2057,15 @@ a {
     background: transparent;
     box-shadow: none;
     padding:
-      max(28px, env(safe-area-inset-top))
-      var(--desktop-page-gutter)
-      40px
-      calc(var(--desktop-rail-width) + var(--desktop-page-gutter));
+      max(28px, env(safe-area-inset-top)) var(--desktop-page-gutter) 40px calc(var(--desktop-rail-width) + var(--desktop-page-gutter));
     overflow-x: visible;
   }
 
   /* Centre and cap the width of the actual content blocks. */
-  .phone-screen > .app-header,
-  .phone-screen > main,
-  .phone-screen > .home-layout,
-  .phone-screen > nav.bottom-nav ~ * {
+  .phone-screen>.app-header,
+  .phone-screen>main,
+  .phone-screen>.home-layout,
+  .phone-screen>nav.bottom-nav~* {
     max-width: 1080px;
     margin-left: auto;
     margin-right: auto;
@@ -2217,13 +2076,11 @@ a {
     width: min(100%, 460px);
     min-height: 100dvh;
     padding:
-      max(48px, env(safe-area-inset-top))
-      clamp(24px, 4vw, 48px)
-      48px;
+      max(16px, env(safe-area-inset-top)) clamp(24px, 4vw, 16px) 16px;
     margin: 0 auto;
   }
 
-  .phone-screen.auth-screen ~ .bottom-nav,
+  .phone-screen.auth-screen~.bottom-nav,
   .auth-screen .bottom-nav {
     display: none !important;
   }
@@ -2234,10 +2091,7 @@ a {
     align-items: stretch;
     min-height: 100dvh;
     padding:
-      max(32px, env(safe-area-inset-top))
-      var(--desktop-page-gutter)
-      42px
-      calc(var(--desktop-rail-width) + var(--desktop-page-gutter));
+      max(32px, env(safe-area-inset-top)) var(--desktop-page-gutter) 42px calc(var(--desktop-rail-width) + var(--desktop-page-gutter));
   }
 
   /* Home: keep the phone-style vertical flow, but center it in the
@@ -2255,7 +2109,7 @@ a {
     align-items: stretch;
   }
 
-  .home-layout > .home-brand {
+  .home-layout>.home-brand {
     grid-column: auto;
     align-self: center;
     justify-items: center;
@@ -2342,12 +2196,12 @@ a {
     transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
   }
 
-  .bottom-nav button > svg {
+  .bottom-nav button>svg {
     width: 20px;
     height: 20px;
   }
 
-  .bottom-nav button > span {
+  .bottom-nav button>span {
     text-align: left !important;
     font-size: 13px !important;
     font-weight: 600;
@@ -2372,11 +2226,12 @@ a {
   .bottom-nav .rail-admin-entry {
     display: grid !important;
   }
+
   .settings-admin-block {
     display: none !important;
   }
 
-  .phone-screen > main.content.with-nav {
+  .phone-screen>main.content.with-nav {
     padding-top: 0;
   }
 
@@ -2431,6 +2286,7 @@ a {
 }
 
 /* Brand block sits at the top of the desktop side rail; hidden on mobile. */
+
 .rail-brand {
   display: none;
 }
@@ -2455,4 +2311,4 @@ a {
     white-space: nowrap;
     min-width: 0;
   }
-}
+}
\ No newline at end of file
diff --git a/bot/app/web/frontend/src/webapp/BottomNav.svelte b/bot/app/web/frontend/src/webapp/BottomNav.svelte
index 40376c1..c49e8ce 100644
--- a/bot/app/web/frontend/src/webapp/BottomNav.svelte
+++ b/bot/app/web/frontend/src/webapp/BottomNav.svelte
@@ -23,21 +23,21 @@
     <BrandMark logoUrl={logoUrl} emoji={logoEmoji} />
     <strong>{brandTitle}</strong>
   </div>
-  <button class:active={activeTab === "home"} type="button" on:click={onHome}>
+  <button class:active={activeTab === "home"} type="button" onclick={onHome}>
     <Home size={21} />
     <span>{t("wa_nav_home")}</span>
   </button>
-  <button class:active={activeTab === "invite"} type="button" on:click={onInvite}>
+  <button class:active={activeTab === "invite"} type="button" onclick={onInvite}>
     <Gift size={21} />
     <span>{t("wa_nav_bonuses")}</span>
   </button>
   {#if devicesEnabled}
-    <button class:active={activeTab === "devices"} type="button" on:click={onDevices}>
+    <button class:active={activeTab === "devices"} type="button" onclick={onDevices}>
       <Smartphone size={21} />
       <span>{t("wa_nav_devices")}</span>
     </button>
   {/if}
-  <button class:active={activeTab === "settings"} class="attention-wrap" type="button" on:click={onSettings}>
+  <button class:active={activeTab === "settings"} class="attention-wrap" type="button" onclick={onSettings}>
     {#if hasUnlinkedIdentity}
       <span class="attention-dot nav-attention-dot" aria-hidden="true"></span>
     {/if}
@@ -45,7 +45,7 @@
     <span>{t("wa_nav_settings")}</span>
   </button>
   {#if isAdmin}
-    <button class="rail-admin-entry" type="button" on:click={onAdmin}>
+    <button class="rail-admin-entry" type="button" onclick={onAdmin}>
       <Shield size={21} />
       <span>{t("admin_nav_title", {}, "Админ-панель")}</span>
     </button>
diff --git a/bot/app/web/frontend/src/webapp/PaymentDialogs.svelte b/bot/app/web/frontend/src/webapp/PaymentDialogs.svelte
index f9633b4..19f1b5c 100644
--- a/bot/app/web/frontend/src/webapp/PaymentDialogs.svelte
+++ b/bot/app/web/frontend/src/webapp/PaymentDialogs.svelte
@@ -6,6 +6,16 @@
   import Card from "../lib/components/ui/card.svelte";
   import Dialog from "../lib/components/ui/dialog.svelte";
   import Input from "../lib/components/ui/input.svelte";
+  import {
+    planKey as planKeyFn,
+    planDisplayTitle as planDisplayTitleFn,
+    planSubtitle as planSubtitleFn,
+    planUnitHint as planUnitHintFn,
+    tariffLimitLabel as tariffLimitLabelFn,
+    priceLabel as priceLabelFn,
+  } from "../lib/webapp/tariffs.js";
+  import { Bitcoin, CreditCard } from "lucide-svelte";
+
 
   export let createPayment = () => {};
   export let deviceConfirmOpen = false;
@@ -21,6 +31,7 @@
   export let linkEmailResendCooldown = 0;
   export let linkEmailStatus = "";
   export let linkEmailValue = "";
+  export let hasMultipleTariffs = false;
   export let methods = [];
   export let payBusy = false;
   export let paymentModalOpen = false;
@@ -35,21 +46,58 @@
   export let subscription = {};
   export let tariffCatalog = [];
   export let tariffMode = false;
+  export let trafficMode = false;
+  
+  function methodMeta(method) {
+    const id = String(method?.id || "").toLowerCase();
+    if (id.includes("platega_sbp")) return { title: t("wa_method_platega_sbp_card"), icon: CreditCard };
+    if (id.includes("platega_crypto")) return { title: t("wa_method_platega_crypto"), icon: Bitcoin };
+    if (id.includes("yookassa") || id.includes("card")) return { title: t("pay_with_yookassa_button"), icon: null };
+    if (id.includes("severpay")) return { title: t("pay_with_severpay_button"), icon: null };
+    if (id.includes("freekassa")) return { title: t("pay_with_sbp_button"), icon: null };
+    if (id.includes("cryptopay") || id.includes("crypto")) return { title: t("pay_with_cryptopay_button"), icon: null };
+    if (id.includes("stars")) return { title: t("pay_with_stars_button"), icon: null };
+    if (id.includes("sbp")) return { title: t("pay_with_sbp_button"), icon: null };
+    return { title: t("wa_method_other_title"), icon: null };
+  }
+
+  function priceLabel(plan) { return priceLabelFn(plan, selectedMethod); }
+  function planKey(plan) { return planKeyFn(plan); }
+  function planDisplayTitle(plan) { return planDisplayTitleFn(plan, { trafficMode, t }); }
+  function planSubtitle(plan) { return planSubtitleFn(plan, { t, termUnitLabel }); }
+  function planUnitHint(plan) { return planUnitHintFn(plan, { trafficMode, selectedMethod, t }); }
+  function tariffLimitLabel(tariff) { return tariffLimitLabelFn(tariff, { t }); }
+
+  function paymentTitle() {
+    if (singleTariffMode) {
+      return selectedTariff?.billing_model === "traffic" ? t("wa_traffic_packages_title") : t("wa_subscription_title");
+    }
+    if (tariffMode) return t("wa_tariffs_title");
+    return trafficMode ? t("wa_traffic_packages_title") : t("wa_subscription_title");
+  }
+
+  function paymentDescription() {
+    if (tariffMode) {
+      if (singleTariffMode) {
+        return selectedTariff?.billing_model === "traffic" ? t("wa_traffic_packages_choose") : t("wa_subscription_choose_period");
+      }
+      return paymentStep === "checkout" && selectedTariff
+        ? t("wa_tariff_choose_period_payment", { tariff: selectedTariff.title })
+        : t("wa_tariffs_choose");
+    }
+    return trafficMode ? t("wa_traffic_packages_choose") : t("wa_subscription_choose_period");
+  }
+
 
   export let closeDeviceDisconnectDialog = () => {};
   export let closeLinkEmailDialog = () => {};
   export let closePaymentModal = () => {};
+  export let backToTariffList = () => {};
   export let continueWithSelectedTariff = () => {};
-  export let methodMeta = () => ({});
-  export let paymentDescription = () => "";
-  export let paymentTitle = () => "";
-  export let planKey = () => "";
-  export let planSubtitle = () => "";
-  export let planUnitHint = () => "";
-  export let priceLabel = () => "";
   export let requestLinkEmailCode = () => {};
   export let selectTariff = () => {};
   export let t = (key) => key;
+  export let termUnitLabel = () => "";
   export let verifyLinkEmailCode = () => {};
 </script>
 
@@ -70,7 +118,7 @@
               class:active={selectedTariffKey === tariff.key}
               class="option-row tariff-row"
               type="button"
-              on:click={() => selectTariff(tariff)}
+              onclick={() => selectTariff(tariff)}
             >
               <span class="option-row-main">
                 <strong>{tariff.title}</strong>
@@ -97,7 +145,7 @@
     {:else}
       {#if tariffMode}
         {#if !singleTariffMode && !(subscription?.active && subscription?.tariff_key && tariffCatalog.some((t) => t.key === subscription.tariff_key))}
-          <button class="back-inline" type="button" on:click={backToTariffList}>
+          <button class="back-inline" type="button" onclick={backToTariffList}>
             <ArrowLeft size={16} />
             {t("wa_back_to_tariffs")}
           </button>
@@ -113,7 +161,7 @@
               class:active={planKey(selectedPlan) === planKey(plan)}
               class="period-card"
               type="button"
-              on:click={() => (selectedPlan = plan)}
+              onclick={() => (selectedPlan = plan)}
             >
               <strong>{planSubtitle(plan) || planDisplayTitle(plan)}</strong>
               <span>{priceLabel(plan)}</span>
@@ -135,7 +183,7 @@
                 class:active={selectedMethod === method.id}
                 class="method-card"
                 type="button"
-                on:click={() => (selectedMethod = method.id)}
+                onclick={() => (selectedMethod = method.id)}
               >
                 <span class="method-card-main">
                   {#if meta.icon}
@@ -164,7 +212,7 @@
             class:active={planKey(selectedPlan) === planKey(plan)}
             class="period-card"
             type="button"
-            on:click={() => (selectedPlan = plan)}
+            onclick={() => (selectedPlan = plan)}
           >
             <strong>{planDisplayTitle(plan)}</strong>
             {#if planSubtitle(plan)}
@@ -189,7 +237,7 @@
               class:active={selectedMethod === method.id}
               class="method-card"
               type="button"
-              on:click={() => (selectedMethod = method.id)}
+              onclick={() => (selectedMethod = method.id)}
             >
               <span class="method-card-main">
                 {#if meta.icon}
@@ -291,7 +339,7 @@
         <button
           class="link-button link-email-resend"
           type="button"
-          on:click={requestLinkEmailCode}
+          onclick={requestLinkEmailCode}
           disabled={linkEmailBusy || linkEmailResendCooldown > 0}
         >
           <RefreshCw size={15} />
diff --git a/bot/app/web/frontend/src/webapp/TariffDialogs.svelte b/bot/app/web/frontend/src/webapp/TariffDialogs.svelte
index c75a44c..a1aa8d3 100644
--- a/bot/app/web/frontend/src/webapp/TariffDialogs.svelte
+++ b/bot/app/web/frontend/src/webapp/TariffDialogs.svelte
@@ -2,12 +2,20 @@
   import { ArrowRight, CheckCircle2, LockKeyhole } from "lucide-svelte";
 
   import Button from "../lib/components/ui/button.svelte";
+  import {
+    planKey as planKeyFn,
+    planUnitHint as planUnitHintFn,
+    priceLabel as priceLabelFn,
+    actionKey as actionKeyFn,
+  } from "../lib/webapp/tariffs.js";
+  import { premiumTitle as premiumTitleFn, trafficPercent as trafficPercentFn } from "../lib/webapp/traffic.js";
+  import { formatCompactNumber } from "../lib/webapp/formatters.js";
+  import { Bitcoin, CreditCard } from "lucide-svelte";
+
   import Card from "../lib/components/ui/card.svelte";
   import Dialog from "../lib/components/ui/dialog.svelte";
 
-  export let actionKey = () => "";
   export let applyTariffChange = () => {};
-  export let changeActionTitle = () => "";
   export let changeConfirmOpen = false;
   export let changeModalOpen = false;
   export let changeOptions = null;
@@ -17,16 +25,11 @@
   export let closeTopupModal = () => {};
   export let createDeviceTopupPayment = () => {};
   export let createTopupPayment = () => {};
-  export let deviceTopupModalDescription = () => "";
   export let deviceTopupModalOpen = false;
   export let deviceTopupOptions = null;
   export let methods = [];
-  export let methodMeta = () => ({});
   export let openTariffChangeConfirm = () => {};
   export let payBusy = false;
-  export let planKey = () => "";
-  export let planUnitHint = () => "";
-  export let priceLabel = () => "";
   export let selectedChangeAction = null;
   export let selectedChangeTarget = null;
   export let selectedDeviceTopupPlan = null;
@@ -34,14 +37,110 @@
   export let selectedTopupPlan = null;
   export let singleTariffMode = false;
   export let tariffActionBusy = false;
-  export let tariffChangeModalDescription = () => "";
-  export let tariffChangeSummary = () => [];
-  export let topupCarryoverNotes = () => [];
-  export let topupModalDescription = () => "";
   export let topupModalOpen = false;
-  export let topupModalTitle = () => "";
   export let topupOptions = null;
+  export let topupKind = "regular";
+  export let subscription = {};
+  export let trafficMode = false;
+
+  function methodMeta(method) {
+    const id = String(method?.id || "").toLowerCase();
+    if (id.includes("platega_sbp")) return { title: t("wa_method_platega_sbp_card"), icon: CreditCard };
+    if (id.includes("platega_crypto")) return { title: t("wa_method_platega_crypto"), icon: Bitcoin };
+    if (id.includes("yookassa") || id.includes("card")) return { title: t("pay_with_yookassa_button"), icon: null };
+    if (id.includes("severpay")) return { title: t("pay_with_severpay_button"), icon: null };
+    if (id.includes("freekassa")) return { title: t("pay_with_sbp_button"), icon: null };
+    if (id.includes("cryptopay") || id.includes("crypto")) return { title: t("pay_with_cryptopay_button"), icon: null };
+    if (id.includes("stars")) return { title: t("pay_with_stars_button"), icon: null };
+    if (id.includes("sbp")) return { title: t("pay_with_sbp_button"), icon: null };
+    return { title: t("wa_method_other_title"), icon: null };
+  }
+
+  function priceLabel(plan) { return priceLabelFn(plan, selectedMethod); }
+  function planKey(plan) { return planKeyFn(plan); }
+  function planUnitHint(plan) { return planUnitHintFn(plan, { trafficMode, selectedMethod, t }); }
+  function actionKey(action) { return actionKeyFn(action); }
+
+  function changeActionTitle(action) {
+    const mode = String(action?.mode || "");
+    if (mode === "recalc_days") {
+      return t("wa_tariff_change_recalc_days", { days: Number(action?.days_after || 0) });
+    }
+    if (mode === "convert_days_to_gb") {
+      return t("wa_tariff_change_convert_gb", { gb: formatCompactNumber(action?.converted_gb || 0) });
+    }
+    if (mode === "paid_diff") {
+      return t("wa_tariff_change_pay_diff", { price: priceLabel(action) });
+    }
+    if (mode === "buy_package") {
+      return t("wa_tariff_change_buy_package", { gb: formatCompactNumber(action?.traffic_gb || 0), price: priceLabel(action) });
+    }
+    if (mode === "buy_period") {
+      return `${action?.title || ""} · ${priceLabel(action)}`;
+    }
+    return action?.title || mode;
+  }
+
+  function tariffChangeSummary() {
+    if (!selectedChangeTarget || !selectedChangeAction) return [];
+    const rows = [
+      t("wa_tariff_change_confirm_target", { tariff: selectedChangeTarget.title }),
+      t("wa_tariff_change_confirm_action", { action: changeActionTitle(selectedChangeAction) }),
+    ];
+    const mode = String(selectedChangeAction.mode || "");
+    if (mode === "recalc_days") {
+      rows.push(t("wa_tariff_change_confirm_recalc", { days: Number(selectedChangeAction.days_after || 0) }));
+    } else if (mode === "convert_days_to_gb") {
+      rows.push(t("wa_tariff_change_confirm_convert", { gb: formatCompactNumber(selectedChangeAction.converted_gb || 0) }));
+    } else if (selectedChangeAction.kind === "payment") {
+      rows.push(t("wa_tariff_change_confirm_payment", { price: priceLabel(selectedChangeAction) }));
+    }
+    return rows;
+  }
+
+  function topupCarryoverNotes() {
+    const plans = topupOptions?.plans || [];
+    if (!plans.length) return [];
+    return [
+      t(
+        "wa_topup_carryover",
+        {},
+        "Докупленный трафик не сгорает: сначала расходуется месячный лимит, затем докупленный остаток."
+      ),
+    ];
+  }
+
+  function deviceTopupModalDescription() {
+    if (!deviceTopupOptions) return "";
+    return deviceTopupOptions?.tariff_name ? t("wa_device_topup_for_tariff", { tariff: deviceTopupOptions.tariff_name }) : "";
+  }
+
+  function tariffChangeModalDescription() {
+    if (!changeOptions) return "";
+    return changeOptions?.current ? t("wa_current_tariff", { tariff: changeOptions.current.title }) : "";
+  }
+  
+  function isPremiumTopupContext() {
+    if (selectedTopupPlan?.sale_mode === "premium_topup") return true;
+    if (topupOptions?.topup_kind) return topupOptions.topup_kind === "premium";
+    return topupKind === "premium";
+  }
+
+  function topupModalDescription() {
+    if (!topupOptions) return "";
+    if (isPremiumTopupContext()) return topupOptions?.tariff_name ? t("wa_topup_for_tariff", { tariff: topupOptions.tariff_name }) : "";
+    if (singleTariffMode) return "";
+    return topupOptions?.tariff_name ? t("wa_topup_for_tariff", { tariff: topupOptions.tariff_name }) : "";
+  }
+
+  function topupModalTitle() {
+    if (isPremiumTopupContext()) return premiumTitleFn({ ...subscription, ...(topupOptions || {}) }, t);
+    return t("wa_topup_traffic");
+  }
+
+
   export let t = (key) => key;
+  export let termUnitLabel = () => "";
 </script>
 
 <Dialog
@@ -87,7 +186,7 @@
             class:active={selectedChangeTarget?.tariff_key === target.tariff_key}
             class="tariff-action-card"
             type="button"
-            on:click={() => {
+            onclick={() => {
               selectedChangeTarget = target;
               selectedChangeAction = target.actions?.[0] || null;
             }}
@@ -109,7 +208,7 @@
               class:active={actionKey(selectedChangeAction) === actionKey(action)}
               class="option-row change-action-row"
               type="button"
-              on:click={() => (selectedChangeAction = action)}
+              onclick={() => (selectedChangeAction = action)}
             >
               <span class="option-row-main">
                 <strong>{changeActionTitle(action)}</strong>
@@ -135,7 +234,7 @@
                 class:active={selectedMethod === method.id}
                 class="method-card"
                 type="button"
-                on:click={() => (selectedMethod = method.id)}
+                onclick={() => (selectedMethod = method.id)}
               >
                 <span class="method-card-main">
                   {#if meta.icon}
@@ -209,6 +308,10 @@
             </div>
           {/each}
         </div>
+        <div class="topup-carryover-note skeleton-carryover-note">
+          <span class="skeleton-line"></span>
+          <span class="skeleton-line skeleton-line-short"></span>
+        </div>
         <div class="method-grid">
           {#each [1, 2] as _}
             <div class="method-card skeleton-method">
@@ -226,7 +329,7 @@
             class:active={planKey(selectedTopupPlan) === planKey(plan)}
             class="option-row plan-row"
             type="button"
-            on:click={() => (selectedTopupPlan = plan)}
+            onclick={() => (selectedTopupPlan = plan)}
           >
             <span class="option-row-main">
               <strong>{plan.title}</strong>
@@ -258,7 +361,7 @@
             class:active={selectedMethod === method.id}
             class="method-card"
             type="button"
-            on:click={() => (selectedMethod = method.id)}
+            onclick={() => (selectedMethod = method.id)}
           >
             <span class="method-card-main">
               {#if meta.icon}
@@ -320,7 +423,7 @@
             class:active={planKey(selectedDeviceTopupPlan) === planKey(plan)}
             class="option-row plan-row"
             type="button"
-            on:click={() => (selectedDeviceTopupPlan = plan)}
+            onclick={() => (selectedDeviceTopupPlan = plan)}
           >
             <span class="option-row-main">
               <strong>{t("wa_hwid_devices_package", { count: Number(plan.device_count || plan.months || 0) })}</strong>
@@ -342,7 +445,7 @@
             class:active={selectedMethod === method.id}
             class="method-card"
             type="button"
-            on:click={() => (selectedMethod = method.id)}
+            onclick={() => (selectedMethod = method.id)}
           >
             <span class="method-card-main">
               {#if meta.icon}
diff --git a/bot/app/web/frontend/src/webapp/auth/AuthScreen.svelte b/bot/app/web/frontend/src/webapp/auth/AuthScreen.svelte
index 1079321..98befb5 100644
--- a/bot/app/web/frontend/src/webapp/auth/AuthScreen.svelte
+++ b/bot/app/web/frontend/src/webapp/auth/AuthScreen.svelte
@@ -73,7 +73,7 @@
       <button
         class="link-button"
         type="button"
-        on:click={requestEmailCode}
+        onclick={requestEmailCode}
         disabled={authBusy || authResendCooldown > 0}
       >
         <RefreshCw size={15} />
@@ -159,7 +159,7 @@
                 href={privacyPolicyUrl}
                 target="_blank"
                 rel="noopener noreferrer"
-                on:click|preventDefault={() => openExternalLink(privacyPolicyUrl)}
+                onclick={(e) => { e.preventDefault(); openExternalLink(privacyPolicyUrl); }}
               >
                 {t("wa_auth_legal_privacy")}
               </a>
@@ -172,7 +172,7 @@
                 href={userAgreementUrl}
                 target="_blank"
                 rel="noopener noreferrer"
-                on:click|preventDefault={() => openExternalLink(userAgreementUrl)}
+                onclick={(e) => { e.preventDefault(); openExternalLink(userAgreementUrl); }}
               >
                 {t("wa_auth_legal_agreement")}
               </a>
diff --git a/bot/app/web/frontend/src/webapp/screens/DevicesScreen.svelte b/bot/app/web/frontend/src/webapp/screens/DevicesScreen.svelte
index 59387f0..4b01644 100644
--- a/bot/app/web/frontend/src/webapp/screens/DevicesScreen.svelte
+++ b/bot/app/web/frontend/src/webapp/screens/DevicesScreen.svelte
@@ -11,13 +11,28 @@
   export let devicesStatus = "";
   export let subscription = {};
 
-  export let devicesCountLabel = () => "";
-  export let devicesLimitLabel = () => "";
-  export let devicesPercent = () => 0;
   export let loadDevices = () => {};
   export let openDeviceDisconnectDialog = () => {};
   export let openDeviceTopupModal = () => {};
   export let t = (key) => key;
+  function devicesLimitLabel(value = devicesData?.max_devices) {
+    const numeric = Number(value ?? 0);
+    if (!Number.isFinite(numeric) || numeric <= 0) return t("wa_devices_unlimited");
+    return String(Math.trunc(numeric));
+  }
+
+  function devicesCountLabel() {
+    const current = Number(devicesData?.current_devices ?? devicesData?.devices?.length ?? 0);
+    return t("wa_devices_count", { current, max: devicesLimitLabel() });
+  }
+
+  function devicesPercent() {
+    const current = Number(devicesData?.current_devices ?? devicesData?.devices?.length ?? 0);
+    const max = Number(devicesData?.max_devices || 0);
+    if (!max || max <= 0) return 100;
+    return Math.max(0, Math.min(100, Math.round((current / max) * 100)));
+  }
+
 </script>
 
 <main class="content with-nav">
diff --git a/bot/app/web/frontend/src/webapp/screens/HomeScreen.svelte b/bot/app/web/frontend/src/webapp/screens/HomeScreen.svelte
index a225f1b..e6c40ea 100644
--- a/bot/app/web/frontend/src/webapp/screens/HomeScreen.svelte
+++ b/bot/app/web/frontend/src/webapp/screens/HomeScreen.svelte
@@ -4,6 +4,18 @@
   import BrandMark from "../../BrandMark.svelte";
   import Button from "../../lib/components/ui/button.svelte";
   import Card from "../../lib/components/ui/card.svelte";
+  import { formatTrafficGb } from "../../lib/webapp/formatters.js";
+  import {
+    trafficPercent as trafficPercentFn,
+    trafficLabel as trafficLabelFn,
+    trafficResetLabel as trafficResetLabelFn,
+    premiumTrafficPercent as premiumTrafficPercentFn,
+    premiumTrafficLabel as premiumTrafficLabelFn,
+    premiumTitle as premiumTitleFn,
+    premiumServerLabels as premiumServerLabelsFn,
+    activeSubscriptionTermLabel as activeSubscriptionTermLabelFn,
+  } from "../../lib/webapp/traffic.js";
+
 
   export let CFG = {};
   export let appSettings = {};
@@ -19,23 +31,30 @@
   export let subscription = {};
   export let trafficMode = false;
   export let trialBusy = false;
+  export let termUnitLabel = () => ""; // We need this passed from App or context. Actually, App.svelte doesn't pass it yet. We'll pass it.
+
+  function trafficPercent(sub) { return trafficPercentFn(sub); }
+  function trafficLabel(sub) { return trafficLabelFn(sub, t); }
+  function trafficResetLabel(sub) { return trafficResetLabelFn(sub, t); }
+  function premiumTrafficPercent(sub) { return premiumTrafficPercentFn(sub); }
+  function premiumTrafficLabel(sub) { return premiumTrafficLabelFn(sub, t); }
+  function premiumTitle(sub = subscription) { return premiumTitleFn(sub, t); }
+  function premiumServerLabels(sub) { return premiumServerLabelsFn(sub); }
+  function activeSubscriptionTermLabel(sub) { return activeSubscriptionTermLabelFn(sub, { t, termUnitLabel }); }
+  function trialTrafficLabel() {
+    const limit = Number(appSettings?.trial_traffic_limit_gb || 0);
+    return limit > 0 ? formatTrafficGb(limit) : t("wa_unlimited_traffic");
+  }
+
 
-  export let activeSubscriptionTermLabel = () => "";
   export let activateTrial = () => {};
   export let openConnectLink = () => {};
   export let openPaymentModal = () => {};
+  export let openRegularTopupModal = () => {};
+  export let openPremiumTopupModal = () => {};
   export let openTariffChangeModal = () => {};
-  export let openTopupModal = () => {};
-  export let premiumServerLabels = () => [];
-  export let premiumTitle = () => "";
-  export let premiumTrafficLabel = () => "";
-  export let premiumTrafficPercent = () => 0;
   export let primaryPayActionLabel = () => "";
   export let t = (key) => key;
-  export let trafficLabel = () => "";
-  export let trafficPercent = () => 0;
-  export let trafficResetLabel = () => "";
-  export let trialTrafficLabel = () => "";
 </script>
 
 <main class="home-layout">
@@ -68,7 +87,7 @@
     {#if subscription.active}
       <Card class={canOpenRegularTopupModal ? "traffic-card-clickable" : ""}>
         {#if canOpenRegularTopupModal}
-          <button class="card-click-target" type="button" on:click={() => openTopupModal("regular")} aria-label={t("wa_topup_traffic")}></button>
+          <button class="card-click-target" type="button" onclick={openRegularTopupModal} aria-label={t("wa_topup_traffic")}></button>
         {/if}
         <div class="traffic-top">
           <span>{t("wa_home_traffic_used")}</span>
@@ -85,7 +104,7 @@
       {#if Number(subscription?.premium_limit_bytes || 0) > 0}
         <Card class={`${canOpenPremiumTopupModal ? "traffic-card-clickable " : ""}premium-traffic-card${subscription?.premium_is_limited ? " premium-traffic-card-limited" : ""}`}>
           {#if canOpenPremiumTopupModal}
-            <button class="card-click-target" type="button" on:click={() => openTopupModal("premium")} aria-label={premiumTitle(subscription)}></button>
+            <button class="card-click-target" type="button" onclick={openPremiumTopupModal} aria-label={premiumTitle(subscription)}></button>
           {/if}
           <div class="traffic-top">
             <span>{premiumTitle(subscription)}</span>
@@ -157,7 +176,7 @@
         </Button>
       {/if}
       {#if canShowTopupButton}
-        <Button class="wide" variant="secondary" onclick={() => openTopupModal(canOpenRegularTopupModal ? "regular" : "premium")}>
+        <Button class="wide" variant="secondary" onclick={canOpenRegularTopupModal ? openRegularTopupModal : openPremiumTopupModal}>
           <Database size={18} />
           {t("wa_topup_traffic")}
         </Button>
diff --git a/bot/app/web/frontend/src/webapp/screens/SettingsScreen.svelte b/bot/app/web/frontend/src/webapp/screens/SettingsScreen.svelte
index 897cab3..c7c572e 100644
--- a/bot/app/web/frontend/src/webapp/screens/SettingsScreen.svelte
+++ b/bot/app/web/frontend/src/webapp/screens/SettingsScreen.svelte
@@ -54,11 +54,11 @@
   {#if isAdmin}
     <div class="settings-admin-block">
       <div class="settings-divider" aria-hidden="true"></div>
-      <button class="settings-row settings-row-admin" type="button" on:click={openAdminPanel}>
+      <button class="settings-row settings-row-admin" type="button" onclick={openAdminPanel}>
         <Shield size={21} />
         <span>
-          <strong>Админ-панель</strong>
-          <small>Управление приложением</small>
+          <strong>{t("wa_settings_admin_panel", {}, "Админ-панель")}</strong>
+          <small>{t("wa_settings_admin_panel_hint", {}, "Управление приложением")}</small>
         </span>
         <ArrowRight size={17} />
       </button>
@@ -95,7 +95,7 @@
         </span>
       </div>
     {:else}
-      <button class="settings-row attention-wrap" type="button" on:click={openLinkEmailDialog} disabled={linkEmailBusy}>
+      <button class="settings-row attention-wrap" type="button" onclick={openLinkEmailDialog} disabled={linkEmailBusy}>
         <span class="attention-dot" aria-hidden="true"></span>
         <Mail size={21} />
         <span>
@@ -113,8 +113,8 @@
       class:language-select-guard--armed={languageClickGuardArmed}
       type="button"
       aria-label={t("wa_close")}
-      on:pointerdown|preventDefault|stopPropagation={() => languageClickGuardArmed && setLanguageMenuOpen(false)}
-      on:click|preventDefault|stopPropagation={() => languageClickGuardArmed && setLanguageMenuOpen(false)}
+      onpointerdown={(e) => { e.preventDefault(); e.stopPropagation(); if (languageClickGuardArmed) setLanguageMenuOpen(false); }}
+      onclick={(e) => { e.preventDefault(); e.stopPropagation(); if (languageClickGuardArmed) setLanguageMenuOpen(false); }}
     ></button>
   {/if}
   <div class="settings-list" class:settings-list--language-open={languageMenuOpen}>
@@ -155,27 +155,27 @@
       </Select.Root>
     </div>
     {#if supportUrl}
-      <button class="settings-row settings-row-support" type="button" on:click={() => openExternalLink(supportUrl)}>
+      <button class="settings-row settings-row-support" type="button" onclick={() => openExternalLink(supportUrl)}>
         <Send size={21} />
         <span><strong>{t("menu_support_button")}</strong></span>
         <ArrowRight size={17} />
       </button>
     {/if}
     {#if userAgreementUrl}
-      <button class="settings-row settings-row-policy" type="button" on:click={() => openExternalLink(userAgreementUrl)}>
+      <button class="settings-row settings-row-policy" type="button" onclick={() => openExternalLink(userAgreementUrl)}>
         <FileText size={21} />
         <span><strong>{t("wa_settings_user_agreement")}</strong></span>
         <ArrowRight size={17} />
       </button>
     {/if}
     {#if privacyPolicyUrl}
-      <button class="settings-row settings-row-policy" type="button" on:click={() => openExternalLink(privacyPolicyUrl)}>
+      <button class="settings-row settings-row-policy" type="button" onclick={() => openExternalLink(privacyPolicyUrl)}>
         <Shield size={21} />
         <span><strong>{t("wa_settings_privacy_policy")}</strong></span>
         <ArrowRight size={17} />
       </button>
     {/if}
-    <button class="settings-row settings-row-logout" type="button" on:click={logout}>
+    <button class="settings-row settings-row-logout" type="button" onclick={logout}>
       <UserRound size={21} />
       <span><strong>{t("wa_logout")}</strong><small>{t("wa_end_session")}</small></span>
       <ArrowRight size={17} />
diff --git a/locales/en.json b/locales/en.json
index 9d5e72e..ff3f723 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -889,5 +889,210 @@
   "admin_broadcast_target_active": "With subscription",
   "admin_broadcast_target_inactive": "No subscription",
   "admin_expired_at": "Expired {date}",
-  "admin_expired_badge": "Expired {date}"
+  "admin_expired_badge": "Expired {date}",
+  "admin_stats_error": "Failed to load statistics: {error}",
+  "admin_stats_label_users": "Users",
+  "admin_stats_trend_banned": "Banned: {count}",
+  "admin_stats_label_paid_subs": "Paid Subscriptions",
+  "admin_stats_trend_trials": "Trials: {count}",
+  "admin_stats_label_today_rev": "Today's Revenue",
+  "admin_stats_trend_payments": "{count} payments",
+  "admin_stats_label_week": "This Week",
+  "admin_stats_trend_month": "Month: {value}",
+  "admin_stats_label_all_time": "All Time",
+  "admin_stats_sync_label": "Sync",
+  "admin_stats_label_queue": "Queue",
+  "admin_stats_trend_groups": "Groups: {count}",
+  "admin_stats_recent_payments": "Recent Payments",
+  "admin_stats_records_count": "{count} records",
+  "admin_id": "ID",
+  "admin_status_default": "Default",
+  "admin_tariff_squads": "Squads",
+  "admin_tariff_premium": "Premium",
+  "admin_settings_badge_secret": "Secret",
+  "admin_settings_badge_override": "Override",
+  "admin_status_limited": "Limited",
+  "admin_status_expired": "Expired",
+  "admin_status_disabled": "Disabled",
+  "admin_status_bot_only": "Bot Only",
+  "admin_user_detail_title": "User #{id}",
+  "admin_close": "Close",
+  "admin_loading": "Loading…",
+  "admin_badge_banned": "Banned",
+  "admin_badge_active": "Active",
+  "admin_badge_subscription": "Subscription",
+  "admin_badge_no_subscription": "No subscription",
+  "admin_user_label_paid": "Total Paid",
+  "admin_user_label_logs": "Logs",
+  "admin_user_section_profile": "Profile",
+  "admin_user_label_registration": "Registration",
+  "admin_user_label_ref_code": "Referral Code",
+  "admin_user_section_links": "Links",
+  "admin_user_copy_tooltip": "Copy",
+  "admin_user_sub_link_copied": "Subscription link copied",
+  "admin_user_ref_link_copied": "Referral link copied",
+  "admin_user_tab_subscription": "Subscription",
+  "admin_user_tab_activity": "Activity",
+  "admin_user_tab_actions": "Actions",
+  "admin_user_label_active_until": "Active until",
+  "admin_user_label_tariff": "Tariff",
+  "admin_user_label_auto_renew": "Auto-renew",
+  "admin_user_label_provider": "Provider",
+  "admin_user_label_main_traffic": "Main Traffic",
+  "admin_user_traffic_left": "Left: {left}",
+  "admin_user_label_premium_squads": "Premium Squads",
+  "admin_user_no_active_subscription": "No active subscription",
+  "admin_user_history_title": "Subscription History · {count}",
+  "admin_user_history_no_tariff": "No tariff",
+  "admin_user_history_until": "until {date}",
+  "admin_user_history_active": "Active",
+  "admin_user_history_status_panel": "History",
+  "admin_user_recent_payments_title": "Recent Payments · {count}",
+  "admin_user_no_payments": "No payments",
+  "admin_user_btn_reset_trial": "Reset Trial",
+  "admin_user_label_extend": "Extend Subscription",
+  "admin_user_label_extend_days": "Days",
+  "admin_user_btn_extend": "Extend",
+  "admin_user_label_telegram_msg": "Telegram Message",
+  "admin_user_hint_telegram_msg": "Telegram HTML formatting supported",
+  "admin_user_placeholder_msg": "Message text",
+  "admin_user_btn_preview_tg": "Preview in Telegram",
+  "admin_user_btn_send_msg": "Send Message",
+  "admin_user_danger_zone_title": "Danger Zone",
+  "admin_user_danger_zone_subtitle": "These actions require confirmation and (for deletion) are irreversible",
+  "admin_user_btn_unban": "Unban user",
+  "admin_user_btn_ban": "Ban user",
+  "admin_user_btn_delete_account": "Delete account",
+  "admin_user_msg_confirm_title": "Send message to user?",
+  "admin_user_msg_confirm_recipient": "Recipient: {name}",
+  "admin_user_btn_cancel": "Cancel",
+  "admin_user_btn_confirm_send": "Confirm Send",
+  "admin_user_ban_confirm_title": "Ban user?",
+  "admin_user_ban_confirm_subtitle": "{name} will no longer be able to interact with the bot. This can be undone later.",
+  "admin_user_delete_confirm_title": "Delete user?",
+  "admin_user_delete_confirm_subtitle": "This action is irreversible. All payments, subscriptions, and logs will be deleted.",
+  "admin_user_btn_confirm_delete": "Confirm Delete",
+  "admin_btn_add_premium_squad": "Add premium squad",
+  "admin_tariff_col_volume_gb": "Volume, GB",
+  "admin_tariff_col_price_rub": "Price, ₽",
+  "admin_tariff_col_price_stars": "Price, ⭐",
+  "admin_tariff_col_price_stars_full": "Price, ⭐ Stars",
+  "admin_tariff_col_period_months": "Period, mo.",
+  "admin_tariff_col_hwid_count": "+ devices",
+  "admin_tariff_label_hwid_count_full": "How many devices does this package add",
+  "admin_tariff_label_price_rub": "Price in Rubles",
+  "admin_tariff_label_price_stars": "Price in Telegram Stars",
+  "admin_status_active": "Active",
+  "admin_aria_label_main_traffic": "Main traffic usage",
+  "admin_aria_label_premium_traffic": "Premium traffic usage",
+  "admin_btn_delete": "Delete",
+  "admin_promos_empty": "No promo codes found",
+  "admin_btn_create": "Create",
+  "admin_ads_empty": "No campaigns found",
+  "admin_btn_campaign": "Campaign",
+  "admin_btn_tariff": "Tariff",
+  "admin_btn_sync": "Synchronize",
+  "admin_btn_syncing": "Synchronizing...",
+  "admin_btn_save": "Save",
+  "admin_btn_saving": "Saving...",
+  "admin_btn_enable": "On",
+  "admin_btn_disable": "Off",
+  "admin_btn_show_more": "Show more",
+  "admin_settings_dirty_count": "Changes: {count}",
+  "admin_nav_overview": "Overview",
+  "admin_nav_dashboard": "Dashboard",
+  "admin_nav_operations": "Operations",
+  "admin_nav_users": "Users",
+  "admin_nav_payments": "Payments",
+  "admin_nav_promos": "Promos",
+  "admin_nav_ads": "Ads",
+  "admin_nav_communication": "Communication",
+  "admin_nav_broadcast": "Broadcast",
+  "admin_nav_logs": "Logs",
+  "admin_nav_system": "System",
+  "admin_nav_tariffs": "Tariffs",
+  "admin_nav_settings": "Settings",
+  "admin_section_stats_title": "Dashboard",
+  "admin_section_stats_subtitle": "Shop and panel overview",
+  "admin_section_users_title": "Users",
+  "admin_section_users_subtitle": "Search, bans, and account actions",
+  "admin_section_payments_title": "Payments",
+  "admin_section_payments_subtitle": "Transaction history and export",
+  "admin_section_promos_title": "Promos",
+  "admin_section_promos_subtitle": "Create and manage promo codes",
+  "admin_section_ads_title": "Ad Campaigns",
+  "admin_section_ads_subtitle": "UTM sources and attribution",
+  "admin_section_broadcast_title": "Broadcast",
+  "admin_section_broadcast_subtitle": "Mass messaging in Telegram",
+  "admin_section_logs_title": "Activity Logs",
+  "admin_section_logs_subtitle": "User events and admin actions",
+  "admin_section_tariffs_title": "Tariffs",
+  "admin_section_tariffs_subtitle": "Sales catalog, periods, packages, and limits",
+  "admin_section_settings_title": "App Settings",
+  "admin_section_settings_subtitle": "Overrides for .env, applied instantly",
+  "admin_panel_title": "Admin Panel",
+  "admin_promo_col_code": "Code",
+  "admin_promo_col_bonus": "Bonus",
+  "admin_promo_col_activations": "Activations",
+  "admin_promo_col_valid_until": "Valid until",
+  "admin_promo_col_status": "Status",
+  "admin_promo_create_title": "Create promo code",
+  "admin_promo_label_code": "Code",
+  "admin_promo_label_bonus_days": "Bonus (days)",
+  "admin_promo_label_max_activations": "Max activations",
+  "admin_promo_label_valid_days": "Validity (days)",
+  "admin_ad_create_title": "New campaign",
+  "admin_ad_label_source": "Source",
+  "admin_ad_label_param": "start parameter",
+  "admin_ad_hint_param": "Unique identifier for the referral link",
+  "admin_ad_label_cost": "Cost, RUB",
+  "admin_ads_col_source": "Source",
+  "admin_ads_col_param": "Parameter",
+  "admin_ads_col_cost": "Cost",
+  "admin_ads_col_registrations": "Registrations",
+  "admin_ads_col_conversions": "Conversions",
+  "admin_ads_col_status": "Status",
+  "admin_no_data": "No data",
+  "admin_settings_hint": "Changes in the admin panel take precedence over .env. The 'Reset' button returns the value from environment variables.",
+  "admin_collapse_all": "Collapse all",
+  "admin_expand_all": "Expand all",
+  "admin_settings_params_count": "{count} parameters",
+  "admin_settings_overridden_count": "{count} override",
+  "admin_settings_fields_count": "{count} fields",
+  "admin_show": "Show",
+  "admin_hide": "Hide",
+  "admin_tariffs_stat_total": "Total tariffs",
+  "admin_tariffs_stat_enabled": "Enabled",
+  "admin_tariffs_stat_default": "Default",
+  "admin_tariffs_stat_default_hint": "Used for new subscriptions",
+  "admin_tariffs_stat_disabled": "Disabled",
+  "admin_tariffs_stat_disabled_hint": "Hidden from showcase",
+  "admin_tariffs_catalog_empty": "The catalog is empty. Add your first tariff; a catalog JSON file will be created after saving.",
+  "admin_no_description": "No description",
+  "admin_tariff_model_traffic": "Traffic",
+  "admin_tariff_model_periods": "Periods",
+  "admin_tariff_devices": "Devices",
+  "admin_btn_configure": "Configure",
+  "admin_btn_set_default": "Set Default",
+  "admin_btn_delete_tariff": "Delete Tariff",
+  "admin_months_short": "mo.",
+  "admin_at": "for",
+  "admin_tariff_traffic_packages": "Traffic packages",
+  "admin_btn_refresh": "Refresh",
+  "admin_btn_create_tariff": "Create Tariff",
+  "admin_enabled": "Enabled",
+  "admin_disabled": "Disabled",
+  "admin_broadcast_title": "Broadcast",
+  "admin_broadcast_subtitle": "Delivery via message queue",
+  "admin_broadcast_label_audience": "Audience",
+  "admin_broadcast_label_text": "Message Text",
+  "admin_broadcast_hint_text": "Telegram HTML formatting supported",
+  "admin_btn_queue": "Queue Message",
+  "admin_btn_sending": "Sending...",
+  "admin_broadcast_stat_queued": "Queued",
+  "admin_broadcast_stat_failed": "Failed",
+  "admin_broadcast_started": "Broadcast started",
+  "admin_broadcast_failed": "Broadcast failed",
+  "admin_user_short": "User",
+  "admin_target_short": "Target"
 }
diff --git a/locales/ru.json b/locales/ru.json
index 74a88ee..6b13470 100644
--- a/locales/ru.json
+++ b/locales/ru.json
@@ -889,5 +889,210 @@
   "admin_broadcast_target_active": "С подпиской",
   "admin_broadcast_target_inactive": "Без подписки",
   "admin_expired_at": "Истекла {date}",
-  "admin_expired_badge": "Expired {date}"
+  "admin_expired_badge": "Expired {date}",
+  "admin_stats_error": "Не удалось загрузить статистику: {error}",
+  "admin_stats_label_users": "Пользователи",
+  "admin_stats_trend_banned": "В бане: {count}",
+  "admin_stats_label_paid_subs": "Платные подписки",
+  "admin_stats_trend_trials": "Триалы: {count}",
+  "admin_stats_label_today_rev": "Доход за день",
+  "admin_stats_trend_payments": "{count} платежей",
+  "admin_stats_label_week": "За неделю",
+  "admin_stats_trend_month": "Месяц: {value}",
+  "admin_stats_label_all_time": "Всё время",
+  "admin_stats_sync_label": "Sync",
+  "admin_stats_label_queue": "Очередь",
+  "admin_stats_trend_groups": "Группы: {count}",
+  "admin_stats_recent_payments": "Последние платежи",
+  "admin_stats_records_count": "{count} записей",
+  "admin_id": "ID",
+  "admin_status_default": "По умолчанию",
+  "admin_tariff_squads": "Squads",
+  "admin_tariff_premium": "Premium",
+  "admin_settings_badge_secret": "Secret",
+  "admin_settings_badge_override": "Override",
+  "admin_status_limited": "Ограничен",
+  "admin_status_expired": "Истёк",
+  "admin_status_disabled": "Выключен",
+  "admin_status_bot_only": "Только бот",
+  "admin_user_detail_title": "Пользователь #{id}",
+  "admin_close": "Закрыть",
+  "admin_loading": "Загрузка…",
+  "admin_badge_banned": "Бан",
+  "admin_badge_active": "Активен",
+  "admin_badge_subscription": "Подписка",
+  "admin_badge_no_subscription": "Без подписки",
+  "admin_user_label_paid": "Заплачено",
+  "admin_user_label_logs": "Логов",
+  "admin_user_section_profile": "Профиль",
+  "admin_user_label_registration": "Регистрация",
+  "admin_user_label_ref_code": "Реф. код",
+  "admin_user_section_links": "Ссылки",
+  "admin_user_copy_tooltip": "Скопировать",
+  "admin_user_sub_link_copied": "Ссылка на подписку скопирована",
+  "admin_user_ref_link_copied": "Реф. ссылка скопирована",
+  "admin_user_tab_subscription": "Подписка",
+  "admin_user_tab_activity": "Активность",
+  "admin_user_tab_actions": "Действия",
+  "admin_user_label_active_until": "Активна до",
+  "admin_user_label_tariff": "Тариф",
+  "admin_user_label_auto_renew": "Авто-продление",
+  "admin_user_label_provider": "Провайдер",
+  "admin_user_label_main_traffic": "Основной трафик",
+  "admin_user_traffic_left": "Осталось: {left}",
+  "admin_user_label_premium_squads": "Premium-сквады",
+  "admin_user_no_active_subscription": "Активной подписки нет",
+  "admin_user_history_title": "История подписок · {count}",
+  "admin_user_history_no_tariff": "Без тарифа",
+  "admin_user_history_until": "до {date}",
+  "admin_user_history_active": "Активна",
+  "admin_user_history_status_panel": "История",
+  "admin_user_recent_payments_title": "Последние платежи · {count}",
+  "admin_user_no_payments": "Платежей нет",
+  "admin_user_btn_reset_trial": "Сбросить триал",
+  "admin_user_label_extend": "Продлить подписку",
+  "admin_user_label_extend_days": "Дней",
+  "admin_user_btn_extend": "Продлить",
+  "admin_user_label_telegram_msg": "Сообщение в Telegram",
+  "admin_user_hint_telegram_msg": "Поддерживается HTML-разметка Telegram",
+  "admin_user_placeholder_msg": "Текст сообщения",
+  "admin_user_btn_preview_tg": "Превью в Telegram",
+  "admin_user_btn_send_msg": "Отправить сообщение",
+  "admin_user_danger_zone_title": "Опасные действия",
+  "admin_user_danger_zone_subtitle": "Эти действия требуют подтверждения и (для удаления) необратимы",
+  "admin_user_btn_unban": "Разбанить пользователя",
+  "admin_user_btn_ban": "Заблокировать",
+  "admin_user_btn_delete_account": "Удалить аккаунт",
+  "admin_user_msg_confirm_title": "Отправить сообщение пользователю?",
+  "admin_user_msg_confirm_recipient": "Получатель: {name}",
+  "admin_user_btn_cancel": "Отмена",
+  "admin_user_btn_confirm_send": "Подтвердить отправку",
+  "admin_user_ban_confirm_title": "Заблокировать пользователя?",
+  "admin_user_ban_confirm_subtitle": "{name} больше не сможет взаимодействовать с ботом. Действие можно отменить позже.",
+  "admin_user_delete_confirm_title": "Удалить пользователя?",
+  "admin_user_delete_confirm_subtitle": "Действие необратимо. Удалятся все платежи, подписки и логи.",
+  "admin_user_btn_confirm_delete": "Подтвердить удаление",
+  "admin_btn_add_premium_squad": "Добавить premium-сквад",
+  "admin_tariff_col_volume_gb": "Объём, GB",
+  "admin_tariff_col_price_rub": "Цена, ₽",
+  "admin_tariff_col_price_stars": "Цена, ⭐",
+  "admin_tariff_col_price_stars_full": "Цена, ⭐ Stars",
+  "admin_tariff_col_period_months": "Срок, мес.",
+  "admin_tariff_col_hwid_count": "+ устройств",
+  "admin_tariff_label_hwid_count_full": "Сколько устройств добавляет пакет",
+  "admin_tariff_label_price_rub": "Цена в рублях",
+  "admin_tariff_label_price_stars": "Цена в Telegram Stars",
+  "admin_status_active": "Активен",
+  "admin_aria_label_main_traffic": "Использование основного трафика",
+  "admin_aria_label_premium_traffic": "Использование premium-трафика",
+  "admin_btn_delete": "Удалить",
+  "admin_promos_empty": "Промокодов нет",
+  "admin_btn_create": "Создать",
+  "admin_ads_empty": "Кампаний нет",
+  "admin_btn_campaign": "Кампания",
+  "admin_btn_tariff": "Тариф",
+  "admin_btn_sync": "Синхронизировать",
+  "admin_btn_syncing": "Синхронизация...",
+  "admin_btn_save": "Сохранить",
+  "admin_btn_saving": "Сохранение...",
+  "admin_btn_enable": "Вкл",
+  "admin_btn_disable": "Выкл",
+  "admin_btn_show_more": "Показать еще",
+  "admin_settings_dirty_count": "Изменений: {count}",
+  "admin_nav_overview": "Обзор",
+  "admin_nav_dashboard": "Дашборд",
+  "admin_nav_operations": "Управление",
+  "admin_nav_users": "Пользователи",
+  "admin_nav_payments": "Платежи",
+  "admin_nav_promos": "Промокоды",
+  "admin_nav_ads": "Реклама",
+  "admin_nav_communication": "Коммуникации",
+  "admin_nav_broadcast": "Рассылка",
+  "admin_nav_logs": "Логи",
+  "admin_nav_system": "Система",
+  "admin_nav_tariffs": "Тарифы",
+  "admin_nav_settings": "Настройки",
+  "admin_section_stats_title": "Дашборд",
+  "admin_section_stats_subtitle": "Сводка по магазину и панели",
+  "admin_section_users_title": "Пользователи",
+  "admin_section_users_subtitle": "Поиск, баны и действия над аккаунтами",
+  "admin_section_payments_title": "Платежи",
+  "admin_section_payments_subtitle": "История транзакций и экспорт",
+  "admin_section_promos_title": "Промокоды",
+  "admin_section_promos_subtitle": "Создание и управление кодами",
+  "admin_section_ads_title": "Рекламные кампании",
+  "admin_section_ads_subtitle": "UTM-источники и атрибуция",
+  "admin_section_broadcast_title": "Рассылка",
+  "admin_section_broadcast_subtitle": "Массовая отправка сообщений в Telegram",
+  "admin_section_logs_title": "Логи активности",
+  "admin_section_logs_subtitle": "События пользователей и админ-действия",
+  "admin_section_tariffs_title": "Тарифы",
+  "admin_section_tariffs_subtitle": "Каталог продаж, периоды, пакеты и лимиты",
+  "admin_section_settings_title": "Настройки приложения",
+  "admin_section_settings_subtitle": "Оверрайды над .env, применяются мгновенно",
+  "admin_panel_title": "Админ-панель",
+  "admin_promo_col_code": "Код",
+  "admin_promo_col_bonus": "Бонус",
+  "admin_promo_col_activations": "Активаций",
+  "admin_promo_col_valid_until": "Действует до",
+  "admin_promo_col_status": "Статус",
+  "admin_promo_create_title": "Создать промокод",
+  "admin_promo_label_code": "Код",
+  "admin_promo_label_bonus_days": "Бонус (дней)",
+  "admin_promo_label_max_activations": "Макс. активаций",
+  "admin_promo_label_valid_days": "Срок действия (дней)",
+  "admin_ad_create_title": "Новая кампания",
+  "admin_ad_label_source": "Источник",
+  "admin_ad_label_param": "start-параметр",
+  "admin_ad_hint_param": "Unique identifier for the referral link",
+  "admin_ad_label_cost": "Стоимость, RUB",
+  "admin_ads_col_source": "Источник",
+  "admin_ads_col_param": "Параметр",
+  "admin_ads_col_cost": "Стоимость",
+  "admin_ads_col_registrations": "Регистрации",
+  "admin_ads_col_conversions": "Конверсии",
+  "admin_ads_col_status": "Статус",
+  "admin_no_data": "Нет данных",
+  "admin_settings_hint": "Изменения в админке имеют приоритет над .env. Кнопка «Сбросить» возвращает значение из переменных окружения.",
+  "admin_collapse_all": "Свернуть всё",
+  "admin_expand_all": "Развернуть всё",
+  "admin_settings_params_count": "{count} параметров",
+  "admin_settings_overridden_count": "{count} override",
+  "admin_settings_fields_count": "{count} полей",
+  "admin_show": "Показать",
+  "admin_hide": "Скрыть",
+  "admin_tariffs_stat_total": "Всего тарифов",
+  "admin_tariffs_stat_enabled": "Включено",
+  "admin_tariffs_stat_default": "По умолчанию",
+  "admin_tariffs_stat_default_hint": "Используется для новых подписок",
+  "admin_tariffs_stat_disabled": "Отключено",
+  "admin_tariffs_stat_disabled_hint": "Скрыто с витрины",
+  "admin_tariffs_catalog_empty": "Каталог пуст. Добавьте первый тариф, после сохранения будет создан JSON-файл каталога.",
+  "admin_no_description": "Без описания",
+  "admin_tariff_model_traffic": "Трафик",
+  "admin_tariff_model_periods": "Периоды",
+  "admin_tariff_devices": "Устройства",
+  "admin_btn_configure": "Настроить",
+  "admin_btn_set_default": "По умолчанию",
+  "admin_btn_delete_tariff": "Удалить тариф",
+  "admin_months_short": "мес.",
+  "admin_at": "за",
+  "admin_tariff_traffic_packages": "Пакеты трафика",
+  "admin_btn_refresh": "Обновить",
+  "admin_btn_create_tariff": "Создать тариф",
+  "admin_enabled": "Включено",
+  "admin_disabled": "Выключено",
+  "admin_broadcast_title": "Рассылка",
+  "admin_broadcast_subtitle": "Доставка через очередь сообщений",
+  "admin_broadcast_label_audience": "Аудитория",
+  "admin_broadcast_label_text": "Текст сообщения",
+  "admin_broadcast_hint_text": "Поддерживается HTML-разметка Telegram",
+  "admin_btn_queue": "Поставить в очередь",
+  "admin_btn_sending": "Отправка...",
+  "admin_broadcast_stat_queued": "В очереди",
+  "admin_broadcast_stat_failed": "Неудач",
+  "admin_broadcast_started": "Рассылка запущена",
+  "admin_broadcast_failed": "Ошибка рассылки",
+  "admin_user_short": "Пользователь",
+  "admin_target_short": "Цель"
 }
diff --git a/scratch_divs.py b/scratch_divs.py
deleted file mode 100644
index da834b9..0000000
--- a/scratch_divs.py
+++ /dev/null
@@ -1,159 +0,0 @@
-import re
-
-html_path = "bot/app/web/templates/subscription_webapp.html"
-
-with open(html_path, 'r', encoding='utf-8') as f:
-    html = f.read()
-
-replacements = {
-    r'class="flex items-start justify-between gap-3"': 'class="panel-head"',
-    r'class="text-lg font-extrabold leading-tight text-\[var\(--text-primary\)\]"': 'class="section-title"',
-    r'class="mt-\[3px\] text-\[13px\] text-\[var\(--text-secondary\)\]"': 'class="section-caption"',
-    r'class="min-w-0 font-\[family-name:var\(--font-mono\)\] text-\[11px\] font-bold text-\[var\(--text-muted\)\]"': 'class="metric-label"',
-    r'class="min-w-0 text-right text-sm font-bold text-\[var\(--text-primary\)\]"': 'class="metric-value"',
-    r'class="m-0 text-\[32px\] font-extrabold leading-\[1\.08\] text-\[var\(--text-primary\)\]"': 'class="main-value"',
-    r'class="mt-1\.5 mb-0 text-sm leading-\[1\.45\] text-\[var\(--text-secondary\)\]"': 'class="main-caption"',
-    r'class="login-text login-status hidden m-0 min-h-5 text-sm leading-\[1\.45\] text-\[var\(--text-secondary\)\]"': 'class="status-text hidden"',
-    r'class="login-text login-status hidden"': 'class="status-text hidden"',
-    r'class="actions grid min-w-0 grid-cols-\[minmax\(0,1fr\)_48px\] gap-2"': 'class="actions-row"',
-    r'class="hidden flex flex-wrap justify-center gap-x-4 gap-y-1\.5"': 'class="legal-links hidden"',
-    r'class="flex min-h-12 items-center justify-between gap-3"': 'class="app-header"',
-    r'class="flex min-w-0 items-center gap-2\.5"': 'class="app-header-title"',
-    r'class="flex min-w-0 items-center gap-2"': 'class="app-header-actions"',
-    r'class="flex min-w-0 items-center justify-between gap-2\.5"': 'class="panel-head-sm"',
-    r'class="flex min-w-0 items-center justify-center gap-3\.5"': 'class="login-head"',
-}
-
-for pattern, repl in replacements.items():
-    html = re.sub(pattern, repl, html)
-
-with open(html_path, 'w', encoding='utf-8') as f:
-    f.write(html)
-
-js_path = "bot/app/web/templates/subscription_webapp.js"
-with open(js_path, 'r', encoding='utf-8') as f:
-    js = f.read()
-
-js_replacements = {
-    r"panelHead: 'flex items-start justify-between gap-3',": "panelHead: 'panel-head',",
-    r"flowCaption: 'mt-\[3px\] text-\[13px\] text-\[var\(--text-secondary\)\]',": "flowCaption: 'section-caption',",
-    r"sectionTitle: 'text-lg font-extrabold leading-tight text-\[var\(--text-primary\)\]',": "sectionTitle: 'section-title',",
-    r"metricLabel: 'min-w-0 font-\[family-name:var\(--font-mono\)\] text-\[11px\] font-bold text-\[var\(--text-muted\)\]',": "metricLabel: 'metric-label',",
-    r"metricValue: 'min-w-0 text-right text-sm font-bold text-\[var\(--text-primary\)\]',": "metricValue: 'metric-value',",
-    r"referralLinkRow: 'grid min-h-\[58px\] grid-cols-\[minmax\(0,1fr\)_48px\] items-center gap-2\.5 rounded-\[var\(--radius-md\)\] border border-\[var\(--border\)\] bg-\[rgba\(255,255,255,0\.02\)\] px-3 py-\[11px\]',": "referralLinkRow: 'referral-link-row',",
-    r"referralLinkValue: 'mt-1 font-\[family-name:var\(--font-mono\)\] text-xs font-bold leading-\[1\.35\] text-\[var\(--text-primary\)\]',": "referralLinkValue: 'referral-link-value',",
-    r"bonusRow: 'grid min-h-\[58px\] grid-cols-\[minmax\(0,0\.8fr\)_minmax\(0,1\.2fr\)\] items-center gap-2\.5 rounded-\[var\(--radius-md\)\] border border-\[var\(--border\)\] bg-\[rgba\(255,255,255,0\.02\)\] px-3 py-\[11px\]',": "bonusRow: 'bonus-row',",
-    r"empty: 'rounded-\[var\(--radius-md\)\] border border-\[var\(--border\)\] bg-\[rgba\(255,255,255,0\.02\)\] p-\[13px\] text-sm leading-\[1\.45\] text-\[var\(--text-secondary\)\]',": "empty: 'empty-state',",
-    r"planCard: 'flex min-h-16 w-full min-w-0 items-center justify-between gap-3 rounded-\[var\(--radius-md\)\] border border-\[var\(--border\)\] bg-\[rgba\(255,255,255,0\.02\)\] p-\[13px\] text-left text-\[var\(--text-primary\)\] transition-\[transform,border-color,background,box-shadow\] hover:-translate-y-0\.5 hover:border-\[color-mix\(in_srgb,var\(--accent\)_42%,var\(--border\)\)\] hover:bg-\[var\(--bg-card-hover\)\]',": "planCard: 'plan-card',",
-    r"planCardActive: 'border-\[var\(--accent\)\] bg-\[color-mix\(in_srgb,var\(--accent\)_8%,transparent\)\] ring-1 ring-\[color-mix\(in_srgb,var\(--accent\)_58%,transparent\)\] shadow-\[0_12px_30px_rgba\(0,0,0,0\.2\)\]',": "planCardActive: 'plan-card-active',",
-    r"planName: 'block text-\[15px\] font-extrabold leading-tight',": "planName: 'plan-name',",
-    r"planMeta: 'mt-1 block font-\[family-name:var\(--font-mono\)\] text-\[11px\] font-bold leading-\[1\.3\] text-\[var\(--text-muted\)\]',": "planMeta: 'plan-meta',",
-    r"planPrice: 'block max-w-\[48%\] flex-none text-right font-\[family-name:var\(--font-mono\)\] text-\[15px\] font-extrabold leading-tight text-\[var\(--accent\)\]',": "planPrice: 'plan-price',",
-    r"notice: 'rounded-\[var\(--radius-md\)\] border border-\[var\(--border\)\] bg-\[rgba\(255,255,255,0\.02\)\] p-\[13px\] text-sm leading-\[1\.45\] text-\[var\(--text-secondary\)\]',": "notice: 'notice',",
-    r"stepNum: 'block font-\[family-name:var\(--font-mono\)\] text-\[11px\] font-extrabold leading-\[1\.1\] text-current',": "stepNum: 'step-num',",
-    r"stepName: 'mt-1 block text-xs font-extrabold leading-\[1\.15\] text-current'": "stepName: 'step-name'"
-}
-
-for pattern, repl in js_replacements.items():
-    js = re.sub(pattern, repl, js)
-
-with open(js_path, 'w', encoding='utf-8') as f:
-    f.write(js)
-
-# CSS additions
-css_path = "bot/app/web/templates/subscription_webapp.tailwind.css"
-with open(css_path, 'r', encoding='utf-8') as f:
-    css = f.read()
-
-new_components = """
-  .panel-head {
-    @apply flex items-start justify-between gap-3;
-  }
-  .section-title {
-    @apply text-lg font-extrabold leading-tight text-[var(--text-primary)];
-  }
-  .section-caption {
-    @apply mt-[3px] text-[13px] text-[var(--text-secondary)];
-  }
-  .metric-label {
-    @apply min-w-0 font-[family-name:var(--font-mono)] text-[11px] font-bold text-[var(--text-muted)];
-  }
-  .metric-value {
-    @apply min-w-0 text-right text-sm font-bold text-[var(--text-primary)];
-  }
-  .referral-link-row {
-    @apply grid min-h-[58px] grid-cols-[minmax(0,1fr)_48px] items-center gap-2.5 rounded-[var(--radius-md)] border border-[var(--border)] bg-[rgba(255,255,255,0.02)] px-3 py-[11px];
-  }
-  .referral-link-value {
-    @apply mt-1 font-[family-name:var(--font-mono)] text-xs font-bold leading-[1.35] text-[var(--text-primary)];
-  }
-  .bonus-row {
-    @apply grid min-h-[58px] grid-cols-[minmax(0,0.8fr)_minmax(0,1.2fr)] items-center gap-2.5 rounded-[var(--radius-md)] border border-[var(--border)] bg-[rgba(255,255,255,0.02)] px-3 py-[11px];
-  }
-  .empty-state {
-    @apply rounded-[var(--radius-md)] border border-[var(--border)] bg-[rgba(255,255,255,0.02)] p-[13px] text-sm leading-[1.45] text-[var(--text-secondary)];
-  }
-  .plan-card {
-    @apply flex min-h-16 w-full min-w-0 items-center justify-between gap-3 rounded-[var(--radius-md)] border border-[var(--border)] bg-[rgba(255,255,255,0.02)] p-[13px] text-left text-[var(--text-primary)] transition-[transform,border-color,background,box-shadow] hover:-translate-y-0.5 hover:border-[color-mix(in_srgb,var(--accent)_42%,var(--border))] hover:bg-[var(--bg-card-hover)];
-    transition-duration: 200ms;
-  }
-  .plan-card-active {
-    @apply border-[var(--accent)] bg-[color-mix(in_srgb,var(--accent)_8%,transparent)] ring-1 ring-[color-mix(in_srgb,var(--accent)_58%,transparent)] shadow-[0_12px_30px_rgba(0,0,0,0.2)];
-  }
-  .plan-name {
-    @apply block text-[15px] font-extrabold leading-tight;
-  }
-  .plan-meta {
-    @apply mt-1 block font-[family-name:var(--font-mono)] text-[11px] font-bold leading-[1.3] text-[var(--text-muted)];
-  }
-  .plan-price {
-    @apply block max-w-[48%] flex-none text-right font-[family-name:var(--font-mono)] text-[15px] font-extrabold leading-tight text-[var(--accent)];
-  }
-  .notice {
-    @apply rounded-[var(--radius-md)] border border-[var(--border)] bg-[rgba(255,255,255,0.02)] p-[13px] text-sm leading-[1.45] text-[var(--text-secondary)];
-  }
-  .step-num {
-    @apply block font-[family-name:var(--font-mono)] text-[11px] font-extrabold leading-[1.1] text-current;
-  }
-  .step-name {
-    @apply mt-1 block text-xs font-extrabold leading-[1.15] text-current;
-  }
-  .main-value {
-    @apply m-0 text-[32px] font-extrabold leading-[1.08] text-[var(--text-primary)];
-  }
-  .main-caption {
-    @apply mt-1.5 mb-0 text-sm leading-[1.45] text-[var(--text-secondary)];
-  }
-  .status-text {
-    @apply m-0 min-h-5 text-sm leading-[1.45] text-[var(--text-secondary)];
-  }
-  .legal-links {
-    @apply flex flex-wrap justify-center gap-x-4 gap-y-1.5;
-  }
-  .actions-row {
-    @apply grid min-w-0 grid-cols-[minmax(0,1fr)_48px] gap-2;
-  }
-  .app-header {
-    @apply flex min-h-12 items-center justify-between gap-3;
-  }
-  .app-header-title {
-    @apply flex min-w-0 items-center gap-2.5;
-  }
-  .app-header-actions {
-    @apply flex min-w-0 items-center gap-2;
-  }
-  .panel-head-sm {
-    @apply flex min-w-0 items-center justify-between gap-2.5;
-  }
-  .login-head {
-    @apply flex min-w-0 items-center justify-center gap-3.5;
-  }
-"""
-
-css_split = css.split('.btn {')
-new_css = css_split[0] + new_components + '\n  .btn {' + css_split[1]
-
-with open(css_path, 'w', encoding='utf-8') as f:
-    f.write(new_css)
-
-print("Done")
diff --git a/scratch_find.py b/scratch_find.py
deleted file mode 100644
index f9a30b1..0000000
--- a/scratch_find.py
+++ /dev/null
@@ -1,8 +0,0 @@
-import re
-
-with open('bot/app/web/templates/subscription_webapp.html', 'r', encoding='utf-8') as f:
-    html = f.read()
-
-long_classes = set(re.findall(r'class="([^"]{40,})"', html))
-for cls in long_classes:
-    print(f"--- LONG CLASS ({len(cls)} chars) ---\n{cls}\n")