diff --git a/public/miniapp/index.html b/public/miniapp/index.html
deleted file mode 100644
index 66d4e21..0000000
--- a/public/miniapp/index.html
+++ /dev/null
@@ -1,26894 +0,0 @@
-<!DOCTYPE html>
-<html lang="ru" data-theme="dark">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <meta name="theme-color" content="#0f0f0f">
-    <title>Pedzeo VPN</title>
-    <script src="https://telegram.org/js/telegram-web-app.js"></script>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            -webkit-tap-highlight-color: transparent;
-        }
-
-        :root {
-            --tg-theme-bg-color: #0f0f0f;
-            --tg-theme-text-color: #ffffff;
-            --tg-theme-hint-color: #8e8e93;
-            --tg-theme-link-color: #3b82f6;
-            --tg-theme-button-color: #3b82f6;
-            --tg-theme-button-text-color: #ffffff;
-            --tg-theme-secondary-bg-color: #1c1c1e;
-
-            --primary: #3b82f6;
-            --primary-rgb: 59, 130, 246;
-            --accent-blue: #3b82f6;
-            --accent-blue-dark: #1e40af;
-            --accent-blue-light: #60a5fa;
-            --accent-gold: #3b82f6;
-            --accent-gold-dark: #1e40af;
-            --accent-gold-light: #60a5fa;
-            --text-primary: #ffffff;
-            --text-secondary: #8e8e93;
-            --text-muted: #636366;
-            --bg-primary: #0f0f0f;
-            --bg-secondary: #1c1c1e;
-            --bg-card: #252525;
-            --border-color: rgba(255, 255, 255, 0.1);
-            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
-            --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
-            --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
-            --radius-sm: 8px;
-            --radius: 12px;
-            --radius-lg: 16px;
-            --radius-xl: 20px;
-            --success: #34c759;
-            --success-rgb: 52, 199, 89;
-            --warning: #ff9500;
-            --warning-rgb: 255, 149, 0;
-            --danger: #ff3b30;
-            --danger-rgb: 255, 59, 48;
-            --info: #007aff;
-            --safe-area-top: env(safe-area-inset-top, 0px);
-            --safe-area-bottom: env(safe-area-inset-bottom, 0px);
-        }
-
-        :root[data-theme="dark"] {
-            color-scheme: dark;
-            --bg-primary: #0f0f0f;
-            --bg-secondary: #1c1c1e;
-            --bg-card: #252525;
-            --text-primary: #ffffff;
-            --text-secondary: #8e8e93;
-            --border-color: rgba(255, 255, 255, 0.1);
-            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
-            --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
-            --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
-        }
-
-        :root[data-theme="light"] {
-            color-scheme: light;
-            --tg-theme-bg-color: #f5f5f7;
-            --tg-theme-text-color: #1d1d1f;
-            --tg-theme-hint-color: #86868b;
-            --tg-theme-link-color: #3b82f6;
-            --tg-theme-button-color: #3b82f6;
-            --tg-theme-button-text-color: #ffffff;
-            --tg-theme-secondary-bg-color: #ffffff;
-
-            --bg-primary: #f5f5f7;
-            --bg-secondary: #ffffff;
-            --bg-card: #ffffff;
-            --text-primary: #1d1d1f;
-            --text-secondary: #86868b;
-            --text-muted: #636366;
-            --border-color: rgba(0, 0, 0, 0.1);
-            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
-            --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
-            --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
-        }
-
-        html, body {
-            height: 100%;
-            width: 100%;
-            overflow-x: hidden;
-            position: relative;
-        }
-
-        html {
-            box-sizing: border-box;
-        }
-
-        *, *::before, *::after {
-            box-sizing: inherit;
-        }
-
-        body {
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            min-height: 100vh;
-            overflow-x: hidden;
-            overflow-y: auto;
-            line-height: 1.5;
-            -webkit-font-smoothing: antialiased;
-            position: relative;
-            width: 100%;
-            max-width: 100vw;
-        }
-
-        body.modal-open {
-            overflow: hidden;
-            position: fixed;
-            width: 100%;
-            height: 100%;
-        }
-
-        /* Hide bottom navigation when referral modal is open */
-        body.modal-open .bottom-nav {
-            display: none;
-        }
-
-        .container {
-            max-width: 480px;
-            width: 100%;
-            margin: 0 auto;
-            margin-top: -24px;
-            padding: 16px;
-            padding-top: 32px;
-            padding-bottom: calc(140px + var(--safe-area-bottom));
-            box-sizing: border-box;
-            overflow-x: hidden;
-            background: var(--bg-primary);
-            border-radius: 24px 24px 0 0;
-            position: relative;
-            z-index: 1;
-        }
-
-        /* ===== bedolaga VPN Header ===== */
-        .asb-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 12px 16px;
-            padding-top: calc(12px + var(--safe-area-top));
-            background: var(--bg-primary);
-            position: sticky;
-            top: 0;
-            z-index: 1000;
-            width: 100%;
-            max-width: 100vw;
-            box-sizing: border-box;
-            overflow: visible;
-            transition: opacity 0.3s ease, transform 0.3s ease;
-        }
-
-        /* Hide header when referral modal is open */
-        body.modal-open .asb-header,
-        #referralModal:not(.hidden) ~ .asb-header,
-        body:has(#referralModal:not(.hidden)) .asb-header {
-            display: none !important;
-            visibility: hidden !important;
-            opacity: 0 !important;
-            height: 0 !important;
-            overflow: hidden !important;
-        }
-
-        .asb-logo {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-
-        .asb-logo-icon {
-            width: 32px;
-            height: 32px;
-            color: var(--accent-gold);
-        }
-
-        .asb-logo-text {
-            display: flex;
-            flex-direction: column;
-        }
-
-        .asb-logo-title {
-            font-size: 18px;
-            font-weight: 800;
-            letter-spacing: 1px;
-            color: var(--text-primary);
-        }
-
-        .asb-logo-subtitle {
-            font-size: 10px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-        }
-
-        .asb-header-actions {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .asb-header-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: var(--radius);
-            border: none;
-            background: var(--bg-secondary);
-            color: var(--text-primary);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            transition: all 0.2s ease;
-        }
-
-        .asb-header-btn:active {
-            transform: scale(0.95);
-        }
-
-        .asb-header-btn.active {
-            background: rgba(var(--primary-rgb), 0.2);
-            color: var(--primary);
-        }
-
-        .asb-header-btn svg {
-            width: 20px;
-            height: 20px;
-        }
-
-        /* ===== Header Menu ===== */
-        .header-menu {
-            position: relative;
-            z-index: 1001;
-        }
-
-        .header-menu-btn {
-            width: 44px;
-            height: 44px;
-            border-radius: var(--radius);
-            border: 2px solid var(--border-color);
-            background: var(--bg-secondary);
-            color: var(--text-primary);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            transition: all 0.3s ease;
-        }
-
-        .header-menu-btn:hover {
-            border-color: var(--primary);
-            transform: translateY(-1px);
-            box-shadow: var(--shadow-sm);
-        }
-
-        .header-menu-btn svg {
-            width: 22px;
-            height: 22px;
-        }
-
-        .header-menu-dropdown {
-            position: fixed;
-            background: var(--bg-card);
-            border: 1px solid var(--border-color);
-            border-radius: var(--radius);
-            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
-            min-width: 220px;
-            opacity: 0;
-            visibility: hidden;
-            transform: translateY(-10px);
-            transition: all 0.3s ease;
-            z-index: 10000;
-            overflow: hidden;
-        }
-
-        .header-menu-dropdown.open {
-            opacity: 1;
-            visibility: visible;
-            transform: translateY(0);
-        }
-
-        .header-menu-item {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            padding: 12px 16px;
-            color: var(--text-primary);
-            cursor: pointer;
-            transition: all 0.2s ease;
-            border-bottom: 1px solid var(--border-color);
-            text-decoration: none;
-        }
-
-        .header-menu-item:last-child {
-            border-bottom: none;
-        }
-
-        .header-menu-item:hover {
-            background: var(--bg-secondary);
-        }
-
-        .header-menu-item-icon {
-            width: 20px;
-            height: 20px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex-shrink: 0;
-        }
-
-        .header-menu-item-icon svg {
-            width: 18px;
-            height: 18px;
-        }
-
-        .header-menu-item-content {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            gap: 2px;
-        }
-
-        .header-menu-item-label {
-            font-size: 14px;
-            font-weight: 600;
-            color: var(--text-primary);
-        }
-
-        .header-menu-item-sublabel {
-            font-size: 12px;
-            color: var(--text-secondary);
-        }
-
-        .header-menu-item-action {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .header-menu-item-toggle {
-            width: 44px;
-            height: 24px;
-            border-radius: 12px;
-            background: var(--bg-secondary);
-            border: 2px solid var(--border-color);
-            position: relative;
-            cursor: pointer;
-            transition: all 0.3s ease;
-        }
-
-        .header-menu-item-toggle.active {
-            background: var(--primary);
-            border-color: var(--primary);
-        }
-
-        .header-menu-item-toggle::after {
-            content: '';
-            position: absolute;
-            top: 2px;
-            left: 2px;
-            width: 18px;
-            height: 18px;
-            border-radius: 50%;
-            background: var(--text-primary);
-            transition: all 0.3s ease;
-        }
-
-        .header-menu-item-toggle.active::after {
-            transform: translateX(20px);
-        }
-
-        .header-menu-item-select {
-            padding: 4px 8px;
-            border-radius: var(--radius);
-            border: 1px solid var(--border-color);
-            background: var(--bg-secondary);
-            color: var(--text-primary);
-            font-size: 13px;
-            font-weight: 600;
-            cursor: pointer;
-            appearance: none;
-            min-width: 80px;
-        }
-
-        /* Hide original buttons - they are already hidden with inline styles */
-
-        /* Header Menu Responsive */
-        @media (max-width: 480px) {
-            .header-menu-dropdown {
-                min-width: 200px;
-            }
-
-            .header-menu-item {
-                padding: 10px 14px;
-            }
-
-            .header-menu-item-label {
-                font-size: 13px;
-            }
-
-            .header-menu-item-sublabel {
-                font-size: 11px;
-            }
-
-            .header-menu-item-select {
-                min-width: 70px;
-                font-size: 12px;
-                padding: 3px 6px;
-            }
-        }
-
-        /* ===== Hero Banner - Starfield ===== */
-        .asb-hero {
-            height: 140px;
-            background:
-                radial-gradient(2px 2px at 20px 30px, #fff, transparent),
-                radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
-                radial-gradient(1px 1px at 90px 40px, #fff, transparent),
-                radial-gradient(2px 2px at 130px 80px, rgba(255,255,255,0.6), transparent),
-                radial-gradient(1px 1px at 160px 20px, #fff, transparent),
-                radial-gradient(1.5px 1.5px at 200px 60px, #fff, transparent),
-                radial-gradient(1px 1px at 250px 30px, rgba(255,255,255,0.7), transparent),
-                radial-gradient(2px 2px at 300px 90px, #fff, transparent),
-                radial-gradient(1px 1px at 350px 50px, rgba(255,255,255,0.8), transparent),
-                radial-gradient(1.5px 1.5px at 400px 25px, #fff, transparent),
-                radial-gradient(1px 1px at 450px 75px, rgba(255,255,255,0.6), transparent),
-                radial-gradient(1px 1px at 500px 40px, rgba(255,255,255,0.7), transparent),
-                radial-gradient(2px 2px at 550px 80px, #fff, transparent),
-                linear-gradient(180deg, #0a0e1a 0%, #151d30 100%);
-            background-size: 600px 140px;
-            animation: twinkle 3s ease-in-out infinite;
-            position: relative;
-            overflow: hidden;
-            width: 100%;
-            max-width: 100vw;
-            box-sizing: border-box;
-            z-index: 1;
-        }
-
-        @keyframes twinkle {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.7; }
-        }
-
-        .asb-hero-content {
-            position: relative;
-            z-index: 2;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            height: 100%;
-            padding: 20px;
-        }
-
-        .asb-hero-title {
-            font-size: 28px;
-            font-weight: 800;
-            color: #ffffff;
-            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
-            margin-bottom: 4px;
-            letter-spacing: -0.5px;
-        }
-
-        .asb-hero-subtitle {
-            font-size: 14px;
-            color: rgba(255, 255, 255, 0.8);
-            font-weight: 500;
-        }
-
-        /* ===== Bottom Navigation - Minimalist Modern ===== */
-        .bottom-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            width: 100%;
-            max-width: 100vw;
-            box-sizing: border-box;
-            overflow: visible;
-            padding: 8px 12px;
-            padding-bottom: calc(8px + var(--safe-area-bottom));
-            display: flex;
-            justify-content: space-around;
-            align-items: center;
-            z-index: 1000;
-            pointer-events: auto;
-            background: rgba(15, 23, 42, 0.95);
-            backdrop-filter: blur(20px) saturate(180%);
-            -webkit-backdrop-filter: blur(20px) saturate(180%);
-            border-top: 1px solid rgba(255, 255, 255, 0.08);
-            box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
-        }
-
-        .bottom-nav::before {
-            display: none;
-        }
-
-        .nav-item {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            gap: 4px;
-            padding: 6px 12px;
-            background: transparent;
-            border: none;
-            border-radius: 12px;
-            cursor: pointer;
-            color: rgba(255, 255, 255, 0.6);
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            position: relative;
-            overflow: visible;
-            -webkit-tap-highlight-color: transparent;
-            pointer-events: auto;
-            touch-action: manipulation;
-            user-select: none;
-            min-width: 48px;
-            flex: 1;
-            max-width: 80px;
-        }
-
-        .nav-item::before {
-            content: '';
-            position: absolute;
-            inset: -4px;
-            background: radial-gradient(
-                circle at center,
-                rgba(59, 130, 246, 0.15) 0%,
-                transparent 70%
-            );
-            opacity: 0;
-            transition: opacity 0.3s ease;
-            pointer-events: none;
-            border-radius: 16px;
-        }
-
-        .nav-item:hover {
-            background: rgba(255, 255, 255, 0.05);
-            color: rgba(255, 255, 255, 0.9);
-            transform: translateY(-2px);
-        }
-
-        .nav-item:hover span {
-            color: rgba(255, 255, 255, 0.9);
-        }
-
-        .nav-item:hover::before {
-            opacity: 0.5;
-        }
-
-        .nav-item.active {
-            background: rgba(59, 130, 246, 0.15);
-            color: #60a5fa;
-            transform: translateY(-1px);
-        }
-
-        .nav-item.active::before {
-            opacity: 1;
-            background: radial-gradient(
-                circle at center,
-                rgba(96, 165, 250, 0.25) 0%,
-                transparent 70%
-            );
-        }
-
-        .nav-item.active::after {
-            content: '';
-            position: absolute;
-            bottom: -8px;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 24px;
-            height: 3px;
-            background: #60a5fa;
-            border-radius: 2px;
-            box-shadow: 0 0 8px rgba(96, 165, 250, 0.6);
-        }
-
-        .nav-item svg {
-            width: 20px;
-            height: 20px;
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            position: relative;
-            z-index: 1;
-        }
-
-        .nav-item:hover svg {
-            transform: scale(1.1);
-        }
-
-        .nav-item.active svg {
-            transform: scale(1.05);
-            filter: drop-shadow(0 0 6px rgba(96, 165, 250, 0.5));
-        }
-
-        .nav-item span {
-            font-size: 10px;
-            font-weight: 500;
-            letter-spacing: 0.01em;
-            position: relative;
-            z-index: 1;
-            color: rgba(255, 255, 255, 0.6);
-            transition: all 0.3s ease;
-            line-height: 1.2;
-        }
-
-        .nav-item.active span {
-            font-weight: 600;
-            color: #60a5fa;
-        }
-
-        .nav-item:hover span {
-            color: rgba(255, 255, 255, 0.9);
-        }
-
-        /* Light theme bottom nav */
-        :root[data-theme="light"] .bottom-nav {
-            background: rgba(255, 255, 255, 0.95);
-            border-top: 1px solid rgba(0, 0, 0, 0.08);
-            box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
-        }
-
-        :root[data-theme="light"] .nav-item {
-            color: rgba(0, 0, 0, 0.5);
-        }
-
-        :root[data-theme="light"] .nav-item:hover {
-            background: rgba(0, 0, 0, 0.05);
-            color: rgba(0, 0, 0, 0.8);
-        }
-
-        :root[data-theme="light"] .nav-item:hover span {
-            color: rgba(0, 0, 0, 0.8);
-        }
-
-        :root[data-theme="light"] .nav-item span {
-            color: rgba(0, 0, 0, 0.5);
-        }
-
-        :root[data-theme="light"] .nav-item.active {
-            background: rgba(59, 130, 246, 0.12);
-            color: #3b82f6;
-        }
-
-        :root[data-theme="light"] .nav-item.active span {
-            color: #3b82f6;
-        }
-
-        :root[data-theme="light"] .nav-item.active::after {
-            background: #3b82f6;
-            box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
-        }
-
-        /* ===== Screen Tabs ===== */
-        .screen-container {
-            display: none;
-            width: 100%;
-            max-width: 100%;
-            box-sizing: border-box;
-            overflow-x: hidden;
-            padding-bottom: calc(40px + var(--safe-area-bottom));
-        }
-
-        .screen-container.active {
-            display: block;
-            animation: screenFadeIn 0.3s ease;
-            width: 100%;
-            max-width: 100%;
-            box-sizing: border-box;
-            overflow-x: hidden;
-            padding-bottom: calc(40px + var(--safe-area-bottom));
-        }
-
-        /* Make home and subscriptions screens longer */
-        .screen-container[data-screen="home"],
-        .screen-container[data-screen="subscriptions"] {
-            min-height: calc(100vh + 200px);
-            padding-bottom: calc(200px + var(--safe-area-bottom));
-        }
-
-
-        @keyframes screenFadeIn {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-
-        /* ===== Connect Button ===== */
-        .connect-floating-btn {
-            position: fixed;
-            bottom: calc(80px + var(--safe-area-bottom) + 16px);
-            left: 50%;
-            transform: translateX(-50%);
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            padding: 16px 32px;
-            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1e40af 100%);
-            color: #ffffff;
-            border: none;
-            border-radius: 999px;
-            font-size: 16px;
-            font-weight: 700;
-            cursor: pointer;
-            box-shadow:
-                0 4px 20px rgba(59, 130, 246, 0.4),
-                0 0 30px rgba(59, 130, 246, 0.2);
-            transition: all 0.3s ease;
-            z-index: 500;
-            overflow: hidden;
-        }
-
-        .connect-floating-btn::after {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-            transition: left 0.5s ease;
-            pointer-events: none;
-        }
-
-        .connect-floating-btn:hover::after {
-            left: 100%;
-        }
-
-        .connect-floating-btn:hover {
-            background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%);
-            box-shadow:
-                0 6px 30px rgba(59, 130, 246, 0.5),
-                0 0 40px rgba(59, 130, 246, 0.3);
-            transform: translateX(-50%) translateY(-2px);
-        }
-
-        .connect-floating-btn:active {
-            transform: translateX(-50%) scale(0.95);
-        }
-
-        .connect-floating-btn.hidden {
-            display: none;
-        }
-
-        .connect-floating-btn svg {
-            width: 20px;
-            height: 20px;
-        }
-
-        /* Animations */
-        @keyframes fadeIn {
-            from {
-                opacity: 0;
-                transform: translateY(10px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-
-        @keyframes slideDown {
-            from {
-                opacity: 0;
-                max-height: 0;
-            }
-            to {
-                opacity: 1;
-                max-height: 2000px;
-            }
-        }
-
-        /* ===== Toast Notifications ===== */
-        .toast-container {
-            position: fixed;
-            top: calc(var(--safe-area-top) + 16px);
-            left: 50%;
-            transform: translateX(-50%);
-            z-index: 10000;
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-            pointer-events: none;
-            max-width: calc(100% - 32px);
-            width: 100%;
-            max-width: 400px;
-        }
-
-        .toast {
-            background: rgba(15, 23, 42, 0.95);
-            backdrop-filter: blur(20px) saturate(180%);
-            -webkit-backdrop-filter: blur(20px) saturate(180%);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            border-radius: 12px;
-            padding: 14px 16px;
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            box-shadow:
-                0 8px 32px rgba(0, 0, 0, 0.4),
-                0 2px 8px rgba(0, 0, 0, 0.2);
-            pointer-events: auto;
-            animation: toastSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-            position: relative;
-            overflow: hidden;
-        }
-
-        .toast::before {
-            content: '';
-            position: absolute;
-            left: 0;
-            top: 0;
-            bottom: 0;
-            width: 4px;
-            background: var(--primary);
-        }
-
-        .toast.success::before {
-            background: var(--success);
-        }
-
-        .toast.error::before {
-            background: var(--danger);
-        }
-
-        .toast.warning::before {
-            background: var(--warning);
-        }
-
-        .toast.info::before {
-            background: var(--info);
-        }
-
-        @keyframes toastSlideIn {
-            from {
-                opacity: 0;
-                transform: translateY(-20px) scale(0.95);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0) scale(1);
-            }
-        }
-
-        .toast.hiding {
-            animation: toastSlideOut 0.25s ease forwards;
-        }
-
-        @keyframes toastSlideOut {
-            to {
-                opacity: 0;
-                transform: translateY(-10px) scale(0.95);
-            }
-        }
-
-        .toast-icon {
-            width: 20px;
-            height: 20px;
-            flex-shrink: 0;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .toast.success .toast-icon {
-            color: var(--success);
-        }
-
-        .toast.error .toast-icon {
-            color: var(--danger);
-        }
-
-        .toast.warning .toast-icon {
-            color: var(--warning);
-        }
-
-        .toast.info .toast-icon {
-            color: var(--info);
-        }
-
-        .toast-content {
-            flex: 1;
-            color: var(--text-primary);
-            font-size: 14px;
-            font-weight: 500;
-            line-height: 1.4;
-        }
-
-        .toast-close {
-            width: 20px;
-            height: 20px;
-            flex-shrink: 0;
-            background: transparent;
-            border: none;
-            color: var(--text-secondary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 0;
-            transition: color 0.2s ease;
-        }
-
-        .toast-close:hover {
-            color: var(--text-primary);
-        }
-
-        .toast-close svg {
-            width: 16px;
-            height: 16px;
-        }
-
-        /* ===== Skeleton Loading ===== */
-        .skeleton {
-            background: linear-gradient(
-                90deg,
-                rgba(255, 255, 255, 0.05) 0%,
-                rgba(255, 255, 255, 0.1) 50%,
-                rgba(255, 255, 255, 0.05) 100%
-            );
-            background-size: 200% 100%;
-            animation: skeleton-loading 1.5s ease-in-out infinite;
-            border-radius: var(--radius);
-        }
-
-        @keyframes skeleton-loading {
-            0% {
-                background-position: 200% 0;
-            }
-            100% {
-                background-position: -200% 0;
-            }
-        }
-
-        .skeleton-card {
-            background: var(--bg-card);
-            border: 1px solid var(--border-color);
-            border-radius: var(--radius);
-            padding: 16px;
-            margin-bottom: 12px;
-        }
-
-        .skeleton-line {
-            height: 16px;
-            margin-bottom: 12px;
-            border-radius: 4px;
-        }
-
-        .skeleton-line:last-child {
-            margin-bottom: 0;
-        }
-
-        .skeleton-line.short {
-            width: 60%;
-        }
-
-        .skeleton-line.medium {
-            width: 80%;
-        }
-
-        .skeleton-avatar {
-            width: 48px;
-            height: 48px;
-            border-radius: 50%;
-        }
-
-        .skeleton-button {
-            height: 40px;
-            border-radius: var(--radius);
-        }
-
-        /* ===== Screen Transitions ===== */
-        .screen-container {
-            animation: screenFadeIn 0.3s ease-out;
-        }
-
-        @keyframes screenFadeIn {
-            from {
-                opacity: 0;
-                transform: translateY(10px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-
-        .screen-container.switching {
-            animation: screenFadeOut 0.2s ease-in forwards;
-        }
-
-        @keyframes screenFadeOut {
-            to {
-                opacity: 0;
-                transform: translateY(-10px);
-            }
-        }
-
-        /* ===== Pull to Refresh ===== */
-        .pull-to-refresh {
-            position: absolute;
-            top: -60px;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 40px;
-            height: 40px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            opacity: 0;
-            pointer-events: none;
-            transition: opacity 0.3s ease;
-        }
-
-        .pull-to-refresh.active {
-            opacity: 1;
-        }
-
-        .pull-to-refresh.spinning svg {
-            animation: spin 0.6s linear infinite;
-        }
-
-        .pull-to-refresh svg {
-            width: 24px;
-            height: 24px;
-            color: var(--primary);
-        }
-
-        @keyframes pulse {
-            0%, 100% { transform: scale(1); }
-            50% { transform: scale(1.05); }
-        }
-
-        @keyframes spin {
-            to { transform: rotate(360deg); }
-        }
-
-        @keyframes shimmer {
-            to { transform: translateX(100%); }
-        }
-
-        .animate-in {
-            animation: fadeIn 0.5s ease-out forwards;
-        }
-
-        /* Language Switcher */
-        .top-bar {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 20px;
-            gap: 12px;
-        }
-
-        .language-switcher {
-            position: relative;
-        }
-
-        .language-select {
-            padding: 6px 28px 6px 10px;
-            border-radius: var(--radius);
-            border: 2px solid var(--border-color);
-            background: var(--bg-secondary);
-            color: var(--text-primary);
-            font-size: 13px;
-            font-weight: 600;
-            cursor: pointer;
-            appearance: none;
-            transition: all 0.3s ease;
-            position: relative;
-            min-width: 100px;
-        }
-
-        .language-select:hover {
-            border-color: var(--primary);
-            transform: translateY(-1px);
-            box-shadow: var(--shadow-sm);
-        }
-
-        .language-select:focus {
-            outline: none;
-            border-color: var(--primary);
-            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
-        }
-
-        .language-switcher::after {
-            content: '▼';
-            position: absolute;
-            right: 10px;
-            top: 50%;
-            transform: translateY(-50%);
-            pointer-events: none;
-            font-size: 10px;
-            color: var(--text-secondary);
-        }
-
-        /* Theme Toggle */
-        .theme-toggle {
-            width: 44px;
-            height: 44px;
-            border-radius: var(--radius);
-            border: 2px solid var(--border-color);
-            background: var(--bg-secondary);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: all 0.3s ease;
-        }
-
-        .theme-toggle:hover {
-            border-color: var(--primary);
-            transform: translateY(-1px);
-            box-shadow: var(--shadow-sm);
-        }
-
-        /* Header */
-        .header {
-            text-align: center;
-            margin-bottom: 32px;
-            position: relative;
-        }
-
-        .header::before {
-            content: '';
-            position: absolute;
-            top: -50%;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 200px;
-            height: 200px;
-            background: radial-gradient(circle, rgba(var(--primary-rgb), 0.1) 0%, transparent 70%);
-            pointer-events: none;
-            z-index: -1;
-        }
-
-        .logo-container {
-            width: 100px;
-            height: 100px;
-            margin: 0 auto 16px;
-            background: linear-gradient(135deg, var(--primary), rgba(var(--primary-rgb), 0.7));
-            border-radius: var(--radius-xl);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            box-shadow: var(--shadow-md);
-            position: relative;
-            overflow: hidden;
-        }
-
-        .logo-container::after {
-            content: '';
-            position: absolute;
-            top: -50%;
-            left: -50%;
-            width: 200%;
-            height: 200%;
-            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
-            transform: rotate(45deg);
-            /* shimmer animation removed */
-        }
-
-        .logo-icon {
-            font-size: 50px;
-            color: white;
-            z-index: 1;
-        }
-
-        .logo-icon.has-image {
-            font-size: 0;
-            line-height: 0;
-        }
-
-        .logo-icon.has-image img {
-            width: 110px;
-            height: 110px;
-            object-fit: contain;
-            display: block;
-        }
-
-        .logo {
-            font-size: 28px;
-            font-weight: 800;
-            background: linear-gradient(135deg, var(--primary), rgba(var(--primary-rgb), 0.7));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 8px;
-        }
-
-        .subtitle {
-            font-size: 15px;
-            color: var(--text-secondary);
-            font-weight: 500;
-        }
-
-        /* Loading State */
-        .loading {
-            text-align: center;
-            padding: 80px 20px;
-        }
-
-        .maintenance-banner {
-            display: flex;
-            gap: 12px;
-            align-items: flex-start;
-            padding: 14px 16px;
-            margin-bottom: 16px;
-            border-radius: var(--radius-lg);
-            border: 1px solid rgba(var(--warning-rgb), 0.18);
-            background: linear-gradient(135deg, rgba(var(--warning-rgb), 0.08), rgba(var(--warning-rgb), 0.02));
-            color: var(--text-primary);
-            box-shadow: var(--shadow-sm);
-        }
-
-        .maintenance-icon {
-            font-size: 22px;
-            line-height: 1;
-        }
-
-        .maintenance-content {
-            display: flex;
-            flex-direction: column;
-            gap: 4px;
-        }
-
-        .maintenance-title {
-            font-weight: 800;
-            font-size: 15px;
-        }
-
-        .maintenance-text {
-            font-size: 13px;
-            color: var(--text-secondary);
-            line-height: 1.4;
-        }
-
-        .maintenance-state {
-            background: var(--bg-secondary);
-            border: 1px solid var(--border-color);
-            border-radius: var(--radius-lg);
-            padding: 24px;
-            box-shadow: var(--shadow-lg);
-            margin-bottom: 24px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            text-align: center;
-            gap: 12px;
-        }
-
-        /* News Section */
-        .news-card {
-            margin-top: 12px;
-            margin-bottom: 16px;
-        }
-
-        .news-header {
-            display: flex;
-            align-items: flex-start;
-            justify-content: space-between;
-            gap: 12px;
-            margin-bottom: 16px;
-        }
-
-        .news-title {
-            font-size: 18px;
-            font-weight: 700;
-        }
-
-        .news-subtitle {
-            font-size: 13px;
-            color: var(--text-secondary);
-            margin-top: 4px;
-        }
-
-        .news-link-btn {
-            border: none;
-            background: rgba(var(--primary-rgb), 0.15);
-            color: var(--primary);
-            font-weight: 600;
-            border-radius: 999px;
-            padding: 8px 14px;
-            cursor: pointer;
-            transition: background 0.2s ease, color 0.2s ease;
-            font-size: 13px;
-        }
-
-        .news-link-btn:hover,
-        .news-link-btn:focus-visible {
-            background: rgba(var(--primary-rgb), 0.25);
-            outline: none;
-        }
-
-        .news-list {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-        }
-
-        .news-item {
-            border: 1px solid var(--border-color);
-            border-radius: var(--radius);
-            padding: 12px 14px;
-            background: var(--bg-secondary);
-            transition: border-color 0.2s ease, transform 0.2s ease;
-        }
-
-        .news-item--clickable {
-            cursor: pointer;
-        }
-
-        .news-item--clickable:hover {
-            border-color: rgba(var(--primary-rgb), 0.4);
-            transform: translateY(-1px);
-        }
-
-        .news-item-date {
-            font-size: 11px;
-            text-transform: uppercase;
-            letter-spacing: 0.04em;
-            color: var(--text-muted);
-        }
-
-        .news-item-title {
-            font-size: 15px;
-            font-weight: 600;
-            margin: 4px 0;
-            line-height: 1.3;
-        }
-
-        .news-item-description {
-            font-size: 13px;
-            color: var(--text-secondary);
-            line-height: 1.4;
-        }
-
-        .maintenance-state .maintenance-icon {
-            width: 54px;
-            height: 54px;
-            font-size: 28px;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            background: rgba(var(--primary-rgb), 0.1);
-            border-radius: 50%;
-            color: var(--primary);
-            box-shadow: var(--shadow-sm);
-        }
-
-        .maintenance-state .maintenance-title {
-            font-size: 20px;
-            font-weight: 800;
-            color: var(--text-primary);
-        }
-
-        .maintenance-state .maintenance-text {
-            font-size: 15px;
-            color: var(--text-secondary);
-            line-height: 1.7;
-        }
-
-        .spinner {
-            width: 48px;
-            height: 48px;
-            border: 4px solid var(--bg-secondary);
-            border-top-color: var(--primary);
-            border-radius: 50%;
-            animation: spin 0.8s linear infinite;
-            margin: 0 auto 20px;
-        }
-
-        .loading-text {
-            font-size: 16px;
-            color: var(--text-secondary);
-            font-weight: 500;
-        }
-
-        /* Error State */
-        .error {
-            text-align: center;
-            padding: 60px 20px;
-            background: var(--bg-secondary);
-            border-radius: var(--radius-xl);
-            margin: 20px 0;
-        }
-
-        .error-icon {
-            font-size: 64px;
-            margin-bottom: 16px;
-            animation: pulse 2s infinite;
-        }
-
-        .error-title {
-            font-size: 20px;
-            font-weight: 700;
-            margin-bottom: 12px;
-            color: var(--text-primary);
-        }
-
-        .error-text {
-            font-size: 15px;
-            color: var(--text-secondary);
-            line-height: 1.6;
-        }
-
-        .error-actions {
-            margin-top: 24px;
-            display: flex;
-            justify-content: center;
-        }
-
-        .error-actions .btn {
-            width: auto;
-            min-width: 220px;
-        }
-
-        .error.error-user-missing {
-            background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.14), rgba(var(--primary-rgb), 0.08));
-            box-shadow: var(--shadow-md);
-            border: 1px solid rgba(var(--primary-rgb), 0.25);
-        }
-
-        .error.error-user-missing .error-text {
-            color: var(--text-primary);
-        }
-
-        /* Cards - Enhanced Glassmorphism */
-        .card {
-            background: linear-gradient(
-                135deg,
-                rgba(30, 41, 59, 0.5) 0%,
-                rgba(15, 23, 42, 0.6) 50%,
-                rgba(30, 41, 59, 0.5) 100%
-            );
-            backdrop-filter: blur(24px) saturate(200%);
-            -webkit-backdrop-filter: blur(24px) saturate(200%);
-            border: 1px solid rgba(255, 255, 255, 0.12);
-            border-radius: var(--radius-xl);
-            margin-bottom: 16px;
-            box-shadow:
-                0 8px 32px rgba(0, 0, 0, 0.25),
-                0 0 0 1px rgba(255, 255, 255, 0.05),
-                inset 0 1px 0 rgba(255, 255, 255, 0.1),
-                inset 0 -1px 0 rgba(0, 0, 0, 0.1);
-            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-            overflow: hidden;
-            width: 100%;
-            max-width: 100%;
-            box-sizing: border-box;
-            position: relative;
-        }
-
-        .card::before {
-            content: '';
-            position: absolute;
-            inset: 0;
-            background:
-                radial-gradient(ellipse 80% 50% at 20% 20%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
-                radial-gradient(ellipse 60% 40% at 80% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
-                radial-gradient(ellipse 40% 30% at 50% 50%, rgba(59, 130, 246, 0.05) 0%, transparent 50%);
-            animation: card-glow 6s ease-in-out infinite;
-            pointer-events: none;
-            z-index: 0;
-        }
-
-        .card::after {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(
-                90deg,
-                transparent,
-                rgba(255, 255, 255, 0.03),
-                transparent
-            );
-            transition: left 0.6s ease;
-            pointer-events: none;
-            z-index: 0;
-        }
-
-        .card:hover::after {
-            left: 100%;
-        }
-
-        .card:hover {
-            box-shadow:
-                0 16px 48px rgba(0, 0, 0, 0.35),
-                0 0 0 1px rgba(255, 255, 255, 0.1),
-                inset 0 1px 0 rgba(255, 255, 255, 0.15),
-                0 0 30px rgba(59, 130, 246, 0.15);
-            transform: translateY(-3px);
-            border-color: rgba(255, 255, 255, 0.18);
-        }
-
-        /* Light theme cards */
-        :root[data-theme="light"] .card {
-            background: linear-gradient(
-                135deg,
-                rgba(255, 255, 255, 0.9) 0%,
-                rgba(248, 250, 252, 0.95) 50%,
-                rgba(255, 255, 255, 0.9) 100%
-            );
-            border: 1px solid rgba(0, 0, 0, 0.08);
-            box-shadow:
-                0 4px 16px rgba(0, 0, 0, 0.08),
-                inset 0 1px 0 rgba(255, 255, 255, 0.8);
-        }
-
-        :root[data-theme="light"] .card::before {
-            background:
-                radial-gradient(ellipse 60% 40% at 20% 30%, rgba(59, 130, 246, 0.06) 0%, transparent 50%),
-                radial-gradient(ellipse 50% 35% at 80% 70%, rgba(59, 130, 246, 0.04) 0%, transparent 50%);
-        }
-
-        :root[data-theme="light"] .card:hover {
-            box-shadow:
-                0 8px 24px rgba(0, 0, 0, 0.12),
-                inset 0 1px 0 rgba(255, 255, 255, 0.9),
-                0 0 16px rgba(59, 130, 246, 0.1);
-            border-color: rgba(0, 0, 0, 0.12);
-        }
-
-        /* Light theme news items */
-        :root[data-theme="light"] .news-item {
-            background: rgba(248, 250, 252, 0.8);
-            border-color: rgba(0, 0, 0, 0.08);
-        }
-
-        :root[data-theme="light"] .news-item--clickable:hover {
-            border-color: rgba(59, 130, 246, 0.3);
-            background: rgba(248, 250, 252, 1);
-        }
-
-        :root[data-theme="light"] .news-link-btn {
-            background: rgba(59, 130, 246, 0.1);
-        }
-
-        :root[data-theme="light"] .news-link-btn:hover,
-        :root[data-theme="light"] .news-link-btn:focus-visible {
-            background: rgba(59, 130, 246, 0.18);
-        }
-
-        .card-header {
-            padding: 16px;
-            cursor: pointer;
-            user-select: none;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            transition: all 0.3s ease;
-            position: relative;
-            z-index: 1;
-        }
-
-        .card.expandable .card-header:hover {
-            background: rgba(var(--primary-rgb), 0.05);
-        }
-
-        .card-title {
-            font-size: 14px;
-            font-weight: 700;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .card-icon {
-            width: 20px;
-            height: 20px;
-            color: var(--primary);
-        }
-
-        .expand-icon {
-            width: 24px;
-            height: 24px;
-            color: var(--text-secondary);
-            transition: transform 0.3s ease;
-        }
-
-        .card.expanded .expand-icon {
-            transform: rotate(180deg);
-        }
-
-        .card-content {
-            padding: 0 16px;
-            max-height: 0;
-            opacity: 0;
-            overflow: hidden;
-            transition: all 0.3s ease;
-            position: relative;
-            z-index: 1;
-        }
-
-        .card.expanded .card-content,
-        .card:not(.expandable) .card-content {
-            max-height: 2000px;
-            opacity: 1;
-            padding: 0 16px 16px;
-        }
-
-        .subscription-settings-card {
-            position: relative;
-        }
-
-        .subscription-settings-summary {
-            margin-left: auto;
-            display: flex;
-            flex-wrap: wrap;
-            gap: 8px;
-            align-items: center;
-        }
-
-        .subscription-settings-chip {
-            display: inline-flex;
-            align-items: center;
-            gap: 6px;
-            padding: 6px 12px;
-            border-radius: 999px;
-            background: rgba(var(--primary-rgb), 0.12);
-            color: var(--primary);
-            font-size: 12px;
-            font-weight: 700;
-            letter-spacing: 0.02em;
-            white-space: nowrap;
-        }
-
-        .subscription-settings-chip span {
-            color: inherit;
-        }
-
-        .subscription-settings-content {
-            display: flex;
-            flex-direction: column;
-            gap: 18px;
-            padding-top: 12px;
-        }
-
-        .subscription-settings-section {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-            padding: 16px 0;
-            border-bottom: 1px solid var(--border-color);
-        }
-
-        .subscription-settings-section:last-child {
-            border-bottom: none;
-        }
-
-        .subscription-settings-section-header {
-            display: flex;
-            justify-content: space-between;
-            gap: 12px;
-            align-items: flex-start;
-        }
-
-        .subscription-settings-section-title {
-            font-size: 16px;
-            font-weight: 700;
-            color: var(--text-primary);
-        }
-
-        .subscription-settings-section-description {
-            font-size: 13px;
-            color: var(--text-secondary);
-            line-height: 1.45;
-        }
-
-        .subscription-settings-section-meta {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 0.04em;
-        }
-
-        .subscription-settings-list {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 10px;
-        }
-
-        .subscription-settings-item {
-            display: flex;
-            flex-direction: column;
-            gap: 6px;
-            min-width: 140px;
-        }
-
-        .subscription-settings-toggle {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            gap: 10px;
-            padding: 12px 14px;
-            border-radius: var(--radius);
-            border: 1px solid var(--border-color);
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            font-size: 14px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.2s ease;
-            min-width: 0;
-        }
-
-        .subscription-settings-toggle:hover:not(.disabled) {
-            border-color: rgba(var(--primary-rgb), 0.5);
-            box-shadow: var(--shadow-sm);
-            transform: translateY(-1px);
-        }
-
-        .subscription-settings-toggle.active {
-            border-color: var(--primary);
-            color: var(--primary);
-            background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.1), rgba(var(--primary-rgb), 0.02));
-            box-shadow: var(--shadow-sm);
-        }
-
-        .subscription-settings-toggle.disabled {
-            opacity: 0.6;
-            cursor: not-allowed;
-        }
-
-        .subscription-settings-toggle-label {
-            display: flex;
-            flex-direction: column;
-            gap: 4px;
-            min-width: 0;
-        }
-
-        .subscription-settings-toggle-title {
-            font-weight: 700;
-            font-size: 14px;
-            color: inherit;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
-        .subscription-settings-toggle-meta {
-            font-size: 12px;
-            font-weight: 600;
-            color: var(--text-secondary);
-        }
-
-        .subscription-settings-toggle.active .subscription-settings-toggle-meta {
-            color: inherit;
-        }
-
-        .subscription-settings-actions {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 10px;
-            align-items: center;
-        }
-
-        .subscription-settings-apply {
-            padding: 12px 18px;
-            border-radius: var(--radius);
-            border: none;
-            background: var(--primary);
-            color: #fff;
-            font-weight: 700;
-            font-size: 14px;
-            cursor: pointer;
-            transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
-        }
-
-        .subscription-settings-apply:hover:not(:disabled) {
-            transform: translateY(-1px);
-            box-shadow: var(--shadow-sm);
-        }
-
-        .subscription-settings-apply:disabled {
-            opacity: 0.6;
-            cursor: not-allowed;
-            box-shadow: none;
-            transform: none;
-        }
-
-        .subscription-settings-inline-hint {
-            font-size: 12px;
-            color: var(--text-secondary);
-        }
-
-        .subscription-settings-loading {
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            padding: 8px 0 12px;
-        }
-
-        .subscription-settings-loading-line {
-            height: 12px;
-            border-radius: 999px;
-            background: rgba(var(--primary-rgb), 0.08);
-            position: relative;
-            overflow: hidden;
-        }
-
-        .subscription-settings-loading-line::after {
-            content: '';
-            position: absolute;
-            inset: 0;
-            background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), 0.2), transparent);
-            /* shimmer animation removed */
-        }
-
-        .subscription-settings-error {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-            padding: 16px 0;
-            color: var(--danger);
-            font-size: 14px;
-        }
-
-        .subscription-settings-retry {
-            align-self: flex-start;
-            padding: 10px 16px;
-            border-radius: var(--radius);
-            border: 1px solid rgba(var(--danger-rgb, 239, 68, 68), 0.4);
-            background: transparent;
-            color: var(--danger);
-            font-weight: 600;
-            cursor: pointer;
-            transition: background 0.2s ease, transform 0.2s ease;
-        }
-
-        .subscription-settings-retry:hover {
-            background: rgba(var(--danger-rgb, 239, 68, 68), 0.1);
-            transform: translateY(-1px);
-        }
-
-        .subscription-settings-stepper {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-        }
-
-        .subscription-settings-stepper button {
-            width: 40px;
-            height: 40px;
-            border-radius: var(--radius);
-            border: 1px solid var(--border-color);
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            font-size: 20px;
-            font-weight: 700;
-            cursor: pointer;
-            transition: all 0.2s ease;
-        }
-
-        .subscription-settings-stepper button:hover:not(:disabled) {
-            border-color: rgba(var(--primary-rgb), 0.5);
-            box-shadow: var(--shadow-sm);
-        }
-
-        .subscription-settings-stepper button:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-            box-shadow: none;
-        }
-
-        .subscription-settings-stepper-value {
-            font-size: 20px;
-            font-weight: 700;
-            color: var(--text-primary);
-        }
-
-        .subscription-settings-price-note {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-weight: 600;
-        }
-
-        .subscription-settings-disabled-note {
-            font-size: 13px;
-            color: var(--text-secondary);
-            font-style: italic;
-        }
-
-        .subscription-settings-empty {
-            font-size: 13px;
-            color: var(--text-secondary);
-            padding: 6px 0;
-        }
-
-        .subscription-settings-status-text {
-            font-size: 13px;
-            color: var(--text-secondary);
-        }
-
-        :root[data-theme="dark"] .subscription-settings-toggle {
-            background: rgba(15, 23, 42, 0.6);
-        }
-
-        :root[data-theme="dark"] .subscription-settings-chip {
-            background: rgba(var(--primary-rgb), 0.22);
-            color: #fff;
-        }
-
-        .subscription-purchase-card {
-            position: relative;
-            margin-top: 16px;
-        }
-
-        .subscription-purchase-card.as-modal {
-            margin: 0;
-            border: none;
-            box-shadow: none;
-            background: transparent;
-        }
-
-        .subscription-purchase-card.as-modal .card-content {
-            padding: 0;
-        }
-
-        .subscription-purchase-status {
-            font-size: 13px;
-            color: var(--text-secondary);
-        }
-
-        .subscription-purchase-content {
-            display: flex;
-            flex-direction: column;
-            gap: 18px;
-            padding-top: 12px;
-        }
-
-        .subscription-purchase-loading {
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            padding: 8px 0 12px;
-        }
-
-        .subscription-purchase-error {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-            padding: 16px 0;
-            color: var(--danger);
-            font-size: 14px;
-        }
-
-        .subscription-purchase-section {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-            padding: 16px 0;
-            border-bottom: 1px solid var(--border-color);
-        }
-
-        .subscription-purchase-section:last-child {
-            border-bottom: none;
-        }
-
-        .subscription-purchase-section-header {
-            display: flex;
-            justify-content: space-between;
-            gap: 12px;
-            align-items: flex-start;
-        }
-
-        .subscription-purchase-section-title {
-            font-size: 16px;
-            font-weight: 700;
-            color: var(--text-primary);
-        }
-
-        .subscription-purchase-section-description {
-            font-size: 13px;
-            color: var(--text-secondary);
-            line-height: 1.45;
-        }
-
-        .subscription-purchase-section-meta {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 0.04em;
-        }
-
-        .subscription-purchase-options {
-            display: grid;
-            gap: 14px;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-        }
-
-        .subscription-settings-options {
-            display: grid;
-            gap: 14px;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            width: 100%;
-            max-width: 100%;
-            box-sizing: border-box;
-        }
-
-        .subscription-purchase-option-card {
-            position: relative;
-            flex-direction: column;
-            align-items: stretch;
-            justify-content: center;
-            gap: 14px;
-            padding: 16px 18px;
-            border-radius: var(--radius-lg);
-            border: 1px solid rgba(var(--primary-rgb), 0.18);
-            background: linear-gradient(160deg, rgba(var(--primary-rgb), 0.08), rgba(var(--primary-rgb), 0.02));
-            box-shadow: var(--shadow-sm);
-            transition: transform 0.2s ease, box-shadow 0.2s ease, border 0.2s ease;
-        }
-
-        .subscription-purchase-option-card:hover:not(.disabled) {
-            transform: translateY(-2px);
-            box-shadow: var(--shadow-md);
-            border-color: rgba(var(--primary-rgb), 0.3);
-        }
-
-        .subscription-purchase-option-card.active {
-            border-color: rgba(var(--primary-rgb), 0.6);
-            box-shadow: var(--shadow-md);
-            background: linear-gradient(155deg, rgba(var(--primary-rgb), 0.14), rgba(var(--primary-rgb), 0.04));
-        }
-
-        .subscription-purchase-option-content {
-            display: flex;
-            align-items: flex-start;
-            justify-content: space-between;
-            gap: 18px;
-            width: 100%;
-        }
-
-        .subscription-purchase-option-info {
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-            min-width: 0;
-        }
-
-        .subscription-purchase-option-description {
-            font-size: 12px;
-            color: var(--text-secondary);
-            margin-top: 0;
-            line-height: 1.45;
-        }
-
-        .subscription-purchase-option-meta {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 6px;
-            align-items: baseline;
-        }
-
-        .subscription-purchase-option-price {
-            display: flex;
-            flex-direction: column;
-            align-items: flex-end;
-            gap: 4px;
-            font-size: 12px;
-            font-weight: 600;
-            color: var(--text-secondary);
-            text-align: right;
-        }
-
-        .subscription-purchase-option-price-current {
-            color: var(--primary);
-        }
-
-        .subscription-purchase-option-price-original {
-            text-decoration: line-through;
-            color: var(--text-secondary);
-            opacity: 0.8;
-        }
-
-        .subscription-purchase-section-hint {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-style: italic;
-        }
-
-        .subscription-purchase-empty {
-            font-size: 13px;
-            color: var(--text-secondary);
-            padding: 6px 0;
-        }
-
-        .subscription-purchase-card .subscription-settings-toggle {
-            align-items: stretch;
-            gap: 16px;
-        }
-
-        .subscription-purchase-option-card .subscription-settings-toggle-label {
-            gap: 8px;
-        }
-
-        .subscription-purchase-option-card .subscription-settings-toggle-title {
-            font-size: 15px;
-            white-space: normal;
-            line-height: 1.35;
-        }
-
-        .subscription-purchase-option-card .subscription-purchase-option-price-current {
-            font-size: 16px;
-        }
-
-        .subscription-purchase-option-card .subscription-purchase-option-price-original {
-            font-size: 13px;
-        }
-
-        .subscription-purchase-option-card .subscription-purchase-option-note {
-            font-size: 12px;
-        }
-
-        .subscription-purchase-option-aside {
-            margin-left: auto;
-            display: flex;
-            flex-direction: column;
-            align-items: flex-end;
-            gap: 6px;
-            min-width: 120px;
-        }
-
-        .subscription-purchase-option-badges {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 6px;
-        }
-
-        .subscription-purchase-option-badge {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            padding: 4px 10px;
-            border-radius: 999px;
-            background: rgba(var(--primary-rgb), 0.12);
-            color: var(--primary);
-            font-size: 11px;
-            font-weight: 700;
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-        }
-
-        .subscription-purchase-option-card.has-discount .subscription-purchase-option-badge {
-            background: rgba(var(--danger-rgb), 0.14);
-            color: var(--danger);
-        }
-
-        .subscription-purchase-option-note {
-            font-size: 12px;
-            color: var(--text-secondary);
-        }
-
-        .subscription-purchase-option-discount {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            gap: 4px;
-            padding: 2px 8px;
-            border-radius: 999px;
-            background: rgba(var(--success-rgb), 0.12);
-            color: var(--success);
-            font-size: 12px;
-            font-weight: 600;
-        }
-
-        .subscription-purchase-option-card--period .subscription-purchase-option-content {
-            width: 100%;
-        }
-
-        .subscription-purchase-option-card--period .subscription-settings-toggle-label {
-            gap: 8px;
-        }
-
-        .subscription-purchase-option-card--period .subscription-settings-toggle-title {
-            white-space: normal;
-            overflow: visible;
-            text-overflow: initial;
-            font-size: 16px;
-            line-height: 1.35;
-        }
-
-        .subscription-purchase-option-card--period .subscription-purchase-option-description {
-            font-size: 13px;
-        }
-
-        .subscription-purchase-option-card--period .subscription-purchase-option-aside {
-            min-width: 140px;
-            gap: 10px;
-        }
-
-        .subscription-purchase-option-card--period .subscription-purchase-option-price {
-            align-items: flex-end;
-        }
-
-        .subscription-purchase-option-card--period .subscription-purchase-option-price-current {
-            font-size: 18px;
-            font-weight: 700;
-            color: var(--text-primary);
-            word-break: break-word;
-        }
-
-        .subscription-purchase-option-card--period .subscription-purchase-option-price-original {
-            font-size: 13px;
-        }
-
-        .subscription-purchase-option-card--period .subscription-purchase-option-note {
-            font-size: 12px;
-            color: var(--text-secondary);
-        }
-
-        .subscription-purchase-option-card--period .subscription-purchase-option-discount {
-            align-self: flex-end;
-        }
-
-        @media (max-width: 400px) {
-            .subscription-purchase-card .subscription-settings-toggle {
-                padding: 10px 12px;
-                gap: 12px;
-            }
-
-            .subscription-purchase-option-card--period .subscription-purchase-option-content {
-                flex-direction: column;
-                align-items: stretch;
-                gap: 12px;
-            }
-
-            .subscription-purchase-option-card--period .subscription-settings-toggle-label {
-                gap: 4px;
-            }
-
-            .subscription-purchase-option-card--period .subscription-settings-toggle-title {
-                font-size: 15px;
-            }
-
-            .subscription-purchase-option-card--period .subscription-purchase-option-description,
-            .subscription-purchase-option-card--period .subscription-purchase-option-note,
-            .subscription-purchase-option-card--period .subscription-purchase-option-price-original {
-                font-size: 12px;
-            }
-
-            .subscription-purchase-option-card--period .subscription-purchase-option-aside {
-                align-items: flex-start;
-                text-align: left;
-                gap: 6px;
-                min-width: 0;
-            }
-
-            .subscription-purchase-option-card--period .subscription-purchase-option-discount {
-                align-self: flex-start;
-            }
-
-            .subscription-purchase-option-badges {
-                gap: 4px;
-            }
-
-            .subscription-purchase-option-badge {
-                font-size: 10px;
-                padding: 3px 8px;
-            }
-        }
-
-        .subscription-purchase-summary {
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            padding: 16px;
-            border-radius: var(--radius-lg);
-            border: 1px solid rgba(var(--primary-rgb), 0.15);
-            background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.08), rgba(var(--primary-rgb), 0.02));
-        }
-
-        .subscription-purchase-summary-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: baseline;
-            gap: 12px;
-        }
-
-        .subscription-purchase-summary-prices {
-            display: flex;
-            flex-direction: column;
-            align-items: flex-end;
-            gap: 2px;
-        }
-
-        .subscription-purchase-summary-label {
-            font-size: 12px;
-            font-weight: 700;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 0.04em;
-        }
-
-        .subscription-purchase-price-current {
-            font-size: 22px;
-            font-weight: 800;
-            color: var(--text-primary);
-        }
-
-        .subscription-purchase-price-original {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-decoration: line-through;
-        }
-
-        .subscription-purchase-price-discount {
-            font-size: 13px;
-            color: var(--success);
-            font-weight: 600;
-        }
-
-        .subscription-purchase-price-per-month {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-weight: 600;
-        }
-
-        .subscription-purchase-breakdown {
-            display: flex;
-            flex-direction: column;
-            gap: 6px;
-            font-size: 13px;
-            color: var(--text-secondary);
-        }
-
-        .subscription-purchase-breakdown-item {
-            display: flex;
-            flex-direction: column;
-            gap: 4px;
-        }
-
-        .subscription-purchase-breakdown-row {
-            display: flex;
-            justify-content: space-between;
-            gap: 12px;
-        }
-
-        .subscription-purchase-breakdown-item strong {
-            color: var(--text-primary);
-        }
-
-        .subscription-purchase-breakdown-note {
-            font-size: 12px;
-            color: var(--success);
-            font-weight: 600;
-        }
-
-        .subscription-purchase-balance {
-            padding: 12px;
-            border-radius: var(--radius);
-            background: rgba(var(--danger-rgb), 0.08);
-            color: var(--danger);
-            font-size: 13px;
-            margin-bottom: 6px;
-        }
-
-        .card.subscription-purchase-card {
-            margin-bottom: 32px;
-        }
-
-        .card.subscription-purchase-card:not(.as-modal) .card-content {
-            padding: 0 16px 0;
-        }
-
-        .subscription-purchase-card.has-promo-details .card-content {
-            max-height: none;
-        }
-
-        .subscription-purchase-actions {
-            display: flex;
-            flex-direction: column;
-            gap: 14px;
-            margin: 18px -16px 0;
-            padding: 18px 16px calc(24px + env(safe-area-inset-bottom, 0));
-            background: rgba(var(--primary-rgb), 0.08);
-            border-top: 1px solid rgba(var(--primary-rgb), 0.12);
-            box-shadow: 0 -12px 32px rgba(15, 23, 42, 0.15);
-        }
-
-        .subscription-purchase-actions .btn {
-            width: 100%;
-        }
-
-        .subscription-purchase-card .btn-secondary {
-            justify-content: center;
-        }
-
-        .subscription-purchase-card .subscription-settings-toggle-label {
-            gap: 6px;
-        }
-
-        .subscription-purchase-card .subscription-settings-toggle-meta {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 6px;
-        }
-
-        .subscription-purchase-card .subscription-settings-toggle-meta span {
-            display: inline-flex;
-            align-items: center;
-            gap: 4px;
-        }
-
-        .subscription-purchase-devices-card {
-            display: flex;
-            flex-direction: column;
-            gap: 14px;
-            padding: 16px 18px;
-            border-radius: var(--radius-lg);
-            border: 1px solid rgba(var(--primary-rgb), 0.18);
-            background: linear-gradient(160deg, rgba(var(--primary-rgb), 0.08), rgba(var(--primary-rgb), 0.02));
-            box-shadow: var(--shadow-sm);
-        }
-
-        .subscription-purchase-devices-main {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            gap: 16px;
-        }
-
-        .subscription-purchase-devices-card .subscription-settings-stepper {
-            gap: 16px;
-        }
-
-        .subscription-purchase-devices-card .subscription-settings-stepper button {
-            border-radius: 14px;
-            border: 1px solid rgba(var(--primary-rgb), 0.25);
-            background: rgba(var(--primary-rgb), 0.08);
-            color: var(--primary);
-        }
-
-        .subscription-purchase-devices-card .subscription-settings-stepper button:hover:not(:disabled) {
-            background: rgba(var(--primary-rgb), 0.16);
-            border-color: rgba(var(--primary-rgb), 0.4);
-        }
-
-        .subscription-purchase-devices-card .subscription-settings-stepper-value {
-            font-size: 26px;
-        }
-
-        .subscription-purchase-devices-price {
-            display: flex;
-            flex-direction: column;
-            align-items: flex-end;
-            gap: 6px;
-            min-width: 0;
-        }
-
-        .subscription-purchase-devices-card .subscription-settings-price-note {
-            font-size: 15px;
-            color: var(--primary);
-        }
-
-        .subscription-purchase-devices-card .subscription-purchase-section-hint {
-            margin: 0;
-        }
-
-        .subscription-purchase-devices-control {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-        }
-
-        .subscription-purchase-devices-selector {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 20px;
-            padding: 16px;
-            border-radius: var(--radius-lg);
-            border: 1px solid rgba(var(--primary-rgb), 0.18);
-            background: linear-gradient(160deg, rgba(var(--primary-rgb), 0.08), rgba(var(--primary-rgb), 0.02));
-        }
-
-        .subscription-purchase-devices-btn {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 44px;
-            height: 44px;
-            border-radius: var(--radius);
-            border: 1px solid rgba(var(--primary-rgb), 0.3);
-            background: rgba(var(--primary-rgb), 0.1);
-            color: var(--primary);
-            cursor: pointer;
-            transition: all 0.2s ease;
-            flex-shrink: 0;
-        }
-
-        .subscription-purchase-devices-btn:hover:not(:disabled) {
-            background: rgba(var(--primary-rgb), 0.2);
-            border-color: rgba(var(--primary-rgb), 0.5);
-            transform: scale(1.05);
-        }
-
-        .subscription-purchase-devices-btn:active:not(:disabled) {
-            transform: scale(0.95);
-        }
-
-        .subscription-purchase-devices-btn:disabled {
-            opacity: 0.4;
-            cursor: not-allowed;
-        }
-
-        .subscription-purchase-devices-btn svg {
-            width: 20px;
-            height: 20px;
-        }
-
-        .subscription-purchase-devices-value-wrapper {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 4px;
-            min-width: 80px;
-        }
-
-        .subscription-purchase-devices-value {
-            font-size: 32px;
-            font-weight: 800;
-            color: var(--text-primary);
-            line-height: 1;
-        }
-
-        .subscription-purchase-devices-price {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-align: center;
-        }
-
-        .subscription-purchase-devices-hint {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-align: center;
-            padding: 8px;
-        }
-
-        :root[data-theme="dark"] .subscription-purchase-summary {
-            border-color: rgba(var(--primary-rgb), 0.22);
-            background: rgba(37, 99, 235, 0.08);
-        }
-
-        :root[data-theme="dark"] .subscription-purchase-balance {
-            background: rgba(var(--danger-rgb), 0.16);
-        }
-
-        :root[data-theme="dark"] .subscription-purchase-option-card,
-        :root[data-theme="dark"] .subscription-purchase-devices-card {
-            border-color: rgba(var(--primary-rgb), 0.35);
-            background: linear-gradient(160deg, rgba(var(--primary-rgb), 0.18), rgba(var(--primary-rgb), 0.06));
-            box-shadow: var(--shadow-md);
-        }
-
-        :root[data-theme="dark"] .subscription-purchase-option-card.has-discount .subscription-purchase-option-badge {
-            background: rgba(var(--danger-rgb), 0.28);
-            color: #fff;
-        }
-
-        :root[data-theme="dark"] .subscription-purchase-option-badge {
-            background: rgba(var(--primary-rgb), 0.28);
-            color: #fff;
-        }
-
-        :root[data-theme="dark"] .subscription-purchase-actions {
-            background: rgba(15, 23, 42, 0.75);
-            box-shadow: 0 -12px 32px rgba(2, 6, 23, 0.65);
-        }
-
-        @media (max-width: 520px) {
-            .subscription-purchase-options {
-                grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-            }
-        }
-
-        @media (max-width: 480px) {
-            .card.subscription-purchase-card:not(.as-modal) .card-content {
-                padding: 0 16px 0;
-            }
-
-            .subscription-purchase-card.has-promo-details {
-                overflow: visible;
-            }
-
-            .subscription-purchase-card.has-promo-details .card-content {
-                max-height: none;
-            }
-
-            .subscription-purchase-option-content {
-                flex-direction: column;
-                gap: 12px;
-            }
-
-            .subscription-purchase-option-aside {
-                align-items: flex-start;
-                min-width: 0;
-            }
-
-            .subscription-purchase-devices-main {
-                flex-direction: column;
-                align-items: stretch;
-            }
-
-            .subscription-purchase-devices-price {
-                align-items: flex-start;
-            }
-
-            .subscription-purchase-actions {
-                margin: 16px -16px 0;
-                padding-bottom: calc(28px + env(safe-area-inset-bottom, 0));
-            }
-
-            .subscription-purchase-card .btn-primary {
-                min-height: 52px;
-                font-size: 16px;
-            }
-        }
-
-        @media (max-width: 360px) {
-            .container {
-                border-radius: 16px 16px 0 0;
-                margin-top: -16px;
-                padding-top: 24px;
-            }
-
-            .card.subscription-purchase-card:not(.as-modal) .card-content {
-                padding: 0 12px 0;
-            }
-
-            .subscription-purchase-actions {
-                margin: 14px -12px 0;
-                padding: 16px 12px calc(30px + env(safe-area-inset-bottom, 0));
-            }
-
-            .subscription-purchase-option-card,
-            .subscription-purchase-devices-card {
-                padding: 14px 16px;
-            }
-        }
-
-        @media (max-width: 480px) {
-            .container {
-                padding: 12px;
-                padding-top: 28px;
-                padding-bottom: calc(140px + var(--safe-area-bottom));
-                border-radius: 20px 20px 0 0;
-                margin-top: -20px;
-            }
-
-            .history-item-header {
-                flex-wrap: wrap;
-                gap: 8px;
-            }
-
-            .history-amount {
-                font-size: 16px;
-                flex-shrink: 0;
-            }
-
-            .history-type {
-                font-size: 12px;
-                padding: 3px 8px;
-                flex-shrink: 0;
-            }
-
-            .history-meta {
-                font-size: 12px;
-                display: flex;
-                flex-direction: column;
-                gap: 3px;
-            }
-
-            .history-meta-item {
-                display: block;
-            }
-
-            .history-meta-separator {
-                display: none;
-            }
-
-            .subscription-details-actions {
-                grid-template-columns: 1fr;
-                gap: 10px;
-                padding: 16px;
-            }
-
-            .subscription-action-settings,
-            .subscription-action-renew {
-                padding: 12px 16px;
-                font-size: 14px;
-            }
-
-            .legal-doc-title {
-                font-size: 13px;
-            }
-
-            .promo-code-input-group,
-            .promo-code-input-group-inline {
-                flex-direction: column;
-                align-items: stretch;
-                padding: 10px 12px;
-                gap: 10px;
-            }
-
-            .promo-code-input,
-            .promo-code-input-inline {
-                font-size: 14px;
-                width: 100% !important;
-                min-width: 0 !important;
-                max-width: 100% !important;
-            }
-
-            .promo-code-button,
-            .promo-code-button-inline {
-                font-size: 12px;
-                padding: 10px 12px;
-                width: 100%;
-                min-width: 0 !important;
-                max-width: 100% !important;
-            }
-
-            .subscription-action-btn {
-                padding: 12px 6px;
-                font-size: 11px;
-            }
-
-            .action-btn-text {
-                font-size: 11px;
-            }
-
-            .subscription-action-settings,
-            .subscription-action-renew {
-                font-size: 12px;
-                padding: 12px 6px;
-            }
-
-            .legal-doc-item {
-                padding: 0 12px;
-            }
-
-            .legal-doc-summary {
-                padding: 14px 0;
-                font-size: 14px;
-            }
-
-            .subscription-settings-options {
-                grid-template-columns: 1fr;
-            }
-        }
-
-        .subscription-renewal-card .card-title {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-
-        .subscription-renewal-card .card-title svg {
-            width: 20px;
-            height: 20px;
-            opacity: 0.8;
-        }
-
-        .subscription-renewal-summary-chip {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 6px;
-            margin-left: auto;
-            font-size: 12px;
-            color: var(--text-secondary);
-        }
-
-        .subscription-renewal-chip {
-            display: inline-flex;
-            align-items: center;
-            gap: 4px;
-            padding: 4px 10px;
-            border-radius: 999px;
-            background: var(--bg-secondary);
-            color: var(--text-secondary);
-            font-weight: 600;
-        }
-
-        .subscription-renewal-content {
-            display: flex;
-            flex-direction: column;
-            gap: 16px;
-        }
-
-        .subscription-renewal-body {
-            display: flex;
-            flex-direction: column;
-            gap: 16px;
-        }
-
-        .subscription-renewal-info-block {
-            display: flex;
-            flex-direction: column;
-            gap: 0;
-            margin: 0;
-            padding: 16px;
-            border-radius: 0;
-            background: var(--bg-card);
-            border: none;
-            box-shadow: none;
-        }
-
-        .subscription-renewal-card .subscription-renewal-info-block {
-            margin: 0;
-            border-top: 1px solid var(--border-color);
-            border-bottom: 1px solid var(--border-color);
-        }
-
-        .subscription-renewal-info-header {
-            display: flex;
-            align-items: flex-start;
-            gap: 12px;
-            flex-wrap: nowrap;
-        }
-
-        .subscription-renewal-info-icon {
-            width: 20px;
-            height: 20px;
-            color: var(--accent-blue-light);
-            flex-shrink: 0;
-            margin-top: 2px;
-            stroke-width: 2;
-        }
-
-        .subscription-renewal-info-content {
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-            flex: 1;
-        }
-
-        .subscription-renewal-info-title {
-            font-size: 15px;
-            font-weight: 700;
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-            color: var(--text-primary);
-            line-height: 1.4;
-            white-space: nowrap;
-        }
-
-        .subscription-renewal-info-description {
-            font-size: 14px;
-            line-height: 1.5;
-            color: var(--text-secondary);
-            margin: 0;
-        }
-
-        .subscription-renewal-meta {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-            margin-top: 12px;
-        }
-
-        .subscription-renewal-meta-block {
-            display: flex;
-            flex-direction: column;
-            gap: 6px;
-            padding: 12px;
-            border-radius: var(--radius-lg);
-            background: rgba(var(--primary-rgb), 0.06);
-        }
-
-        .subscription-renewal-meta-title {
-            font-size: 12px;
-            font-weight: 700;
-            text-transform: uppercase;
-            letter-spacing: 0.04em;
-            color: var(--text-secondary);
-        }
-
-        .subscription-renewal-meta-body {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 8px;
-            align-items: center;
-        }
-
-        .subscription-renewal-meta-empty {
-            font-size: 12px;
-            color: var(--text-secondary);
-        }
-
-        .subscription-renewal-offer {
-            display: flex;
-            flex-direction: column;
-            gap: 4px;
-        }
-
-        .subscription-renewal-offer-badge {
-            display: inline-flex;
-            align-items: center;
-            gap: 6px;
-            padding: 6px 12px;
-            border-radius: 999px;
-            background: rgba(var(--primary-rgb), 0.12);
-            color: var(--primary);
-            font-size: 12px;
-            font-weight: 700;
-        }
-
-        .subscription-renewal-offer-note {
-            font-size: 12px;
-            color: var(--text-secondary);
-        }
-
-        .subscription-renewal-options {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-        }
-
-        .subscription-renewal-section {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-        }
-
-        .subscription-renewal-section-title {
-            font-size: 14px;
-            font-weight: 700;
-            color: var(--text-primary);
-        }
-
-        .subscription-renewal-option .subscription-settings-toggle-label {
-            gap: 8px;
-        }
-
-        .subscription-renewal-option-badge {
-            display: inline-flex;
-            align-items: center;
-            gap: 4px;
-            padding: 4px 10px;
-            border-radius: 999px;
-            background: rgba(var(--primary-rgb), 0.16);
-            color: var(--primary);
-            font-size: 11px;
-            text-transform: uppercase;
-            letter-spacing: 0.04em;
-            font-weight: 700;
-        }
-
-        .subscription-settings-toggle.active .subscription-renewal-option-badge {
-            background: var(--primary);
-            color: var(--tg-theme-button-text-color);
-        }
-
-        .subscription-renewal-option-price {
-            display: flex;
-            align-items: baseline;
-            gap: 8px;
-            font-size: 14px;
-            font-weight: 700;
-            color: var(--text-primary);
-        }
-
-        .subscription-renewal-option-price-current {
-            color: var(--primary);
-        }
-
-        .subscription-renewal-option-price-original {
-            font-size: 12px;
-            text-decoration: line-through;
-            color: var(--text-secondary);
-            font-weight: 600;
-        }
-
-        .subscription-renewal-option-discount {
-            font-size: 12px;
-            font-weight: 700;
-            color: var(--success);
-        }
-
-        .subscription-renewal-option-note {
-            font-size: 12px;
-            color: var(--text-secondary);
-            margin-top: 2px;
-        }
-
-        .subscription-renewal-option-description {
-            font-size: 12px;
-            color: var(--text-secondary);
-            margin-top: 6px;
-        }
-
-        .subscription-renewal-summary {
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-            padding: 16px;
-            border-radius: var(--radius-lg);
-            background: var(--bg-secondary);
-            box-shadow: var(--shadow-sm);
-        }
-
-        .subscription-autopay-section {
-            display: flex;
-            flex-direction: column;
-            gap: 16px;
-            margin-top: 20px;
-            padding: 16px;
-            border-radius: var(--radius-lg);
-            background: var(--bg-primary);
-            border: 1px solid rgba(15, 23, 42, 0.08);
-        }
-
-        .subscription-autopay-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-start;
-            gap: 12px;
-        }
-
-        .subscription-autopay-title {
-            font-size: 15px;
-            font-weight: 700;
-            color: var(--text-primary);
-        }
-
-        .subscription-autopay-description {
-            margin-top: 4px;
-            font-size: 13px;
-            color: var(--text-secondary);
-            line-height: 1.4;
-        }
-
-        .subscription-autopay-status {
-            font-size: 13px;
-            font-weight: 600;
-            color: var(--text-secondary);
-            display: inline-flex;
-            align-items: center;
-            gap: 6px;
-            white-space: nowrap;
-        }
-
-        .subscription-autopay-status::before {
-            content: '';
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            background: currentColor;
-            opacity: 0.7;
-        }
-
-        .subscription-autopay-status.enabled {
-            color: var(--success);
-        }
-
-        .subscription-autopay-status.disabled {
-            color: var(--text-secondary);
-        }
-
-        .subscription-autopay-status.saving {
-            color: var(--primary);
-        }
-
-        .subscription-autopay-status.loading {
-            color: var(--text-secondary);
-        }
-
-        .subscription-autopay-toggle-group {
-            display: flex;
-            gap: 12px;
-        }
-
-        .subscription-autopay-toggle {
-            flex: 1;
-            padding: 14px;
-            border-radius: var(--radius);
-            border: 1px solid var(--border-color);
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            font-size: 14px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.2s ease;
-        }
-
-        .subscription-autopay-toggle:hover:not(:disabled) {
-            border-color: var(--primary);
-            box-shadow: var(--shadow-sm);
-            transform: translateY(-1px);
-        }
-
-        .subscription-autopay-toggle.active {
-            background: linear-gradient(135deg, var(--primary), rgba(var(--primary-rgb), 0.85));
-            color: var(--tg-theme-button-text-color);
-            border-color: transparent;
-            box-shadow: var(--shadow-md);
-        }
-
-        .subscription-autopay-toggle:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-            transform: none;
-        }
-
-        .subscription-autopay-days {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-        }
-
-        .subscription-autopay-days-title {
-            font-size: 13px;
-            font-weight: 600;
-            color: var(--text-secondary);
-        }
-
-        .subscription-autopay-days-options {
-            display: flex;
-            gap: 12px;
-            overflow-x: auto;
-            padding-bottom: 4px;
-            margin-right: -8px;
-            padding-right: 8px;
-        }
-
-        .subscription-autopay-days-options::-webkit-scrollbar {
-            display: none;
-        }
-
-        .subscription-autopay-days-options .subscription-settings-toggle {
-            min-width: 140px;
-            flex: 0 0 auto;
-        }
-
-        .subscription-autopay-hint {
-            font-size: 13px;
-            color: var(--text-secondary);
-        }
-
-        :root[data-theme="dark"] .subscription-autopay-section {
-            border-color: rgba(148, 163, 184, 0.2);
-            background: rgba(15, 23, 42, 0.6);
-        }
-
-        .subscription-renewal-summary-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: baseline;
-            gap: 12px;
-        }
-
-        .subscription-renewal-summary-prices {
-            display: flex;
-            align-items: baseline;
-            gap: 8px;
-        }
-
-        .subscription-renewal-summary-label {
-            font-size: 12px;
-            font-weight: 700;
-            text-transform: uppercase;
-            letter-spacing: 0.04em;
-            color: var(--text-secondary);
-        }
-
-        .subscription-renewal-price-current {
-            font-size: 22px;
-            font-weight: 800;
-            color: var(--text-primary);
-        }
-
-        .subscription-renewal-price-original {
-            font-size: 14px;
-            text-decoration: line-through;
-            color: var(--text-secondary);
-        }
-
-        .subscription-renewal-price-discount {
-            font-size: 13px;
-            font-weight: 600;
-            color: var(--success);
-        }
-
-        .subscription-renewal-price-note {
-            font-size: 12px;
-            color: var(--text-secondary);
-        }
-
-        .subscription-renewal-balance-warning {
-            font-size: 12px;
-            font-weight: 600;
-            color: var(--danger);
-        }
-
-        .subscription-renewal-status-text {
-            font-size: 13px;
-            color: var(--text-secondary);
-        }
-
-        .subscription-renewal-actions {
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-        }
-
-        :root[data-theme="dark"] .subscription-renewal-meta-block {
-            background: rgba(var(--primary-rgb), 0.12);
-        }
-
-        :root[data-theme="dark"] .subscription-renewal-summary {
-            background: rgba(15, 23, 42, 0.65);
-        }
-
-        :root[data-theme="dark"] .subscription-renewal-info-block {
-            background: #1a1a1f;
-        }
-
-        :root[data-theme="light"] .subscription-renewal-card {
-            background: var(--bg-card);
-            border: 1px solid var(--border-color);
-        }
-
-        :root[data-theme="light"] .subscription-renewal-info-block {
-            background: var(--bg-secondary);
-        }
-
-        :root[data-theme="light"] .subscription-renewal-meta-block {
-            background: rgba(var(--primary-rgb), 0.06);
-        }
-
-        :root[data-theme="light"] .subscription-renewal-summary {
-            background: rgba(var(--primary-rgb), 0.04);
-            border: 1px solid var(--border-color);
-        }
-
-        .promo-offers {
-            display: flex;
-            flex-direction: column;
-            gap: 16px;
-            margin-bottom: 16px;
-        }
-
-        .promo-offer-card {
-            position: relative;
-            padding: 18px;
-            border-radius: var(--radius-lg);
-            border: 1px solid rgba(var(--primary-rgb), 0.12);
-            background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.12), rgba(var(--primary-rgb), 0.04));
-            color: var(--text-primary);
-            box-shadow: var(--shadow-md);
-            overflow: hidden;
-        }
-
-        .promo-offer-card.active {
-            background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.24), rgba(var(--primary-rgb), 0.08));
-            border-color: rgba(var(--primary-rgb), 0.2);
-        }
-
-        .promo-offer-header {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            margin-bottom: 12px;
-        }
-
-        .promo-offer-icon {
-            width: 44px;
-            height: 44px;
-            border-radius: 14px;
-            background: rgba(var(--primary-rgb), 0.12);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 22px;
-        }
-
-        .promo-offer-card.active .promo-offer-icon {
-            background: rgba(255, 255, 255, 0.18);
-            color: #fff;
-        }
-
-        .promo-offer-heading {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            gap: 4px;
-        }
-
-        .promo-offer-title {
-            font-size: 18px;
-            font-weight: 700;
-        }
-
-        .promo-offer-subtitle {
-            font-size: 13px;
-            color: var(--text-secondary);
-        }
-
-        .promo-offer-card.active .promo-offer-subtitle {
-            color: rgba(255, 255, 255, 0.85);
-        }
-
-        .promo-offer-badge {
-            font-weight: 700;
-            font-size: 16px;
-            padding: 6px 12px;
-            border-radius: 999px;
-            background: rgba(var(--primary-rgb), 0.16);
-            color: var(--text-primary);
-        }
-
-        .promo-offer-card.active .promo-offer-badge {
-            background: rgba(255, 255, 255, 0.2);
-            color: #fff;
-        }
-
-        .promo-offer-message {
-            font-size: 14px;
-            line-height: 1.55;
-            color: inherit;
-        }
-
-        .promo-offer-details {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 8px;
-            margin-top: 12px;
-        }
-
-        .promo-offer-chip {
-            padding: 6px 10px;
-            border-radius: 999px;
-            font-size: 12px;
-            font-weight: 600;
-            background: rgba(var(--primary-rgb), 0.15);
-            color: var(--text-primary);
-        }
-
-        .promo-offer-footer {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            margin-top: 16px;
-            flex-wrap: wrap;
-        }
-
-        .promo-offer-timer {
-            font-size: 13px;
-            font-weight: 600;
-            color: var(--text-secondary);
-        }
-
-        .promo-offer-card.active .promo-offer-timer {
-            color: rgba(255, 255, 255, 0.9);
-        }
-
-        .promo-offer-action {
-            margin-left: auto;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .promo-offer-btn {
-            padding: 10px 20px;
-            border-radius: var(--radius-lg);
-            border: none;
-            font-weight: 700;
-            font-size: 14px;
-            cursor: pointer;
-            background: var(--primary);
-            color: var(--tg-theme-button-text-color);
-            transition: all 0.2s ease;
-            box-shadow: var(--shadow-sm);
-        }
-
-        .promo-offer-btn:hover:not(:disabled) {
-            transform: translateY(-1px);
-            box-shadow: var(--shadow-md);
-        }
-
-        .promo-offer-btn:disabled {
-            opacity: 0.6;
-            cursor: default;
-            box-shadow: none;
-        }
-
-        .promo-offer-progress {
-            position: relative;
-            height: 6px;
-            border-radius: 999px;
-            overflow: hidden;
-            background: rgba(var(--primary-rgb), 0.18);
-            margin-top: 12px;
-        }
-
-        .promo-offer-progress-bar {
-            position: absolute;
-            top: 0;
-            left: 0;
-            height: 100%;
-            width: 100%;
-            background: linear-gradient(90deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.55));
-            transform-origin: left;
-            transition: width 0.4s ease;
-        }
-
-        .promo-offer-card:not(.active) .promo-offer-progress {
-            background: rgba(var(--primary-rgb), 0.12);
-        }
-
-        .promo-offer-card:not(.active) .promo-offer-progress-bar {
-            background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.6), rgba(var(--primary-rgb), 0.3));
-        }
-
-        :root[data-theme="dark"] .promo-offer-card {
-            background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.24), rgba(255, 255, 255, 0.04));
-            border-color: rgba(255, 255, 255, 0.08);
-        }
-
-        :root[data-theme="dark"] .promo-offer-card.active {
-            background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.4), rgba(var(--primary-rgb), 0.2));
-            border-color: rgba(255, 255, 255, 0.18);
-        }
-
-        :root[data-theme="dark"] .promo-offer-icon {
-            background: rgba(255, 255, 255, 0.12);
-        }
-
-        :root[data-theme="dark"] .promo-offer-card.active .promo-offer-icon {
-            background: rgba(255, 255, 255, 0.2);
-        }
-
-        :root[data-theme="dark"] .subscription-missing-card {
-            background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.28), rgba(var(--primary-rgb), 0.12));
-            border-color: rgba(var(--primary-rgb), 0.5);
-        }
-
-        :root[data-theme="dark"] .subscription-missing-icon {
-            background: rgba(var(--primary-rgb), 0.3);
-            color: #bfdbfe;
-        }
-
-        :root[data-theme="dark"] .status-missing {
-            background: rgba(59, 130, 246, 0.18);
-            color: #bfdbfe;
-        }
-
-        :root[data-theme="dark"] .promo-offer-chip {
-            background: rgba(255, 255, 255, 0.08);
-            color: rgba(255, 255, 255, 0.9);
-        }
-
-        /* User Card Specific */
-        .user-card {
-            background: linear-gradient(135deg, var(--bg-secondary), rgba(var(--primary-rgb), 0.05));
-            border: 2px solid rgba(var(--primary-rgb), 0.1);
-        }
-
-        .user-header {
-            display: flex;
-            align-items: center;
-            gap: 16px;
-            padding: 20px;
-        }
-
-        .user-avatar {
-            width: 64px;
-            height: 64px;
-            border-radius: 50%;
-            background: linear-gradient(135deg, var(--accent-blue), var(--accent-blue-dark));
-            color: #ffffff;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 26px;
-            font-weight: 700;
-            flex-shrink: 0;
-            box-shadow: var(--shadow-md);
-            position: relative;
-            overflow: hidden;
-        }
-
-        .user-avatar::after {
-            content: '';
-            position: absolute;
-            top: -50%;
-            left: -50%;
-            width: 200%;
-            height: 200%;
-            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
-            /* shimmer animation removed */
-        }
-
-        .user-info {
-            flex: 1;
-            min-width: 0;
-        }
-
-        .subscription-missing-card {
-            display: flex;
-            gap: 16px;
-            padding: 20px;
-            align-items: center;
-            background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.06), rgba(var(--primary-rgb), 0.12));
-            border: 2px dashed rgba(var(--primary-rgb), 0.35);
-        }
-
-        .subscription-missing-icon {
-            width: 56px;
-            height: 56px;
-            border-radius: 16px;
-            background: rgba(var(--primary-rgb), 0.15);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 28px;
-            flex-shrink: 0;
-            color: var(--primary);
-        }
-
-        .subscription-missing-content {
-            flex: 1;
-            min-width: 0;
-        }
-
-        .subscription-missing-title {
-            font-size: 18px;
-            font-weight: 700;
-            margin-bottom: 6px;
-            color: var(--text-primary);
-        }
-
-        .subscription-missing-description {
-            font-size: 14px;
-            color: var(--text-secondary);
-            margin-bottom: 12px;
-        }
-
-        .subscription-missing-hint {
-            font-size: 13px;
-            color: var(--text-secondary);
-            margin-bottom: 16px;
-        }
-
-        .subscription-missing-actions {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 10px;
-        }
-
-        .subscription-missing-actions .btn-primary,
-        .subscription-missing-actions .btn-secondary {
-            flex: 1;
-            min-width: 140px;
-        }
-
-        .user-name {
-            font-size: 20px;
-            font-weight: 700;
-            margin-bottom: 6px;
-            color: var(--text-primary);
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-
-        .status-badge {
-            display: inline-flex;
-            align-items: center;
-            gap: 6px;
-            padding: 6px 12px;
-            border-radius: 20px;
-            font-size: 13px;
-            font-weight: 600;
-            transition: all 0.3s ease;
-        }
-
-        .status-badge::before {
-            content: '';
-            width: 6px;
-            height: 6px;
-            border-radius: 50%;
-            background: currentColor;
-            animation: pulse 2s infinite;
-        }
-
-        .status-active {
-            background: linear-gradient(135deg, #d4f4dd, #e6f7ed);
-            color: #0f5132;
-        }
-
-        .status-expired {
-            background: linear-gradient(135deg, #f8d7da, #fce4e6);
-            color: #842029;
-        }
-
-        .status-trial {
-            background: linear-gradient(135deg, #fff3cd, #fff8e1);
-            color: #664d03;
-        }
-
-        .status-disabled {
-            background: linear-gradient(135deg, #e2e3e5, #eeeff1);
-            color: #41464b;
-        }
-
-        .status-missing {
-            background: linear-gradient(135deg, #e0e7ff, #eef2ff);
-            color: #1e3a8a;
-        }
-
-        /* Stats Grid */
-        .stats-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
-            gap: 12px;
-            padding: 0 20px 20px;
-        }
-
-        .stat-item {
-            text-align: center;
-            padding: 16px 8px;
-            background: var(--bg-primary);
-            border-radius: var(--radius);
-            border: 2px solid var(--border-color);
-            transition: all 0.3s ease;
-        }
-
-        .stat-item:hover {
-            border-color: var(--primary);
-            transform: translateY(-2px);
-            box-shadow: var(--shadow-sm);
-        }
-
-        .stat-value {
-            font-size: 28px;
-            font-weight: 800;
-            color: var(--accent-gold);
-            background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-light));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 4px;
-        }
-
-        .stat-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-        }
-
-        /* Info Items */
-        .info-list {
-            padding: 0 20px 20px;
-        }
-
-        .info-item {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 14px 0;
-            border-bottom: 1px solid var(--border-color);
-            transition: all 0.3s ease;
-        }
-
-        .info-item:last-child {
-            border-bottom: none;
-        }
-
-        .info-item.promo-group-info {
-            align-items: flex-start;
-        }
-
-        .info-item:hover {
-            padding-left: 8px;
-            background: rgba(var(--primary-rgb), 0.02);
-            margin: 0 -8px;
-            padding-right: 8px;
-            border-radius: var(--radius-sm);
-        }
-
-        .info-label {
-            font-size: 14px;
-            color: var(--text-secondary);
-            font-weight: 500;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .info-value {
-            font-size: 14px;
-            font-weight: 700;
-            color: var(--text-primary);
-            text-align: right;
-        }
-
-        /* New Subscription Card Design */
-        .user-card-new {
-            background: var(--bg-secondary);
-            border: 1px solid var(--border-color);
-        }
-
-        /* Stagger Animation for Card Sections */
-        .user-card-new > * {
-            animation: slideUpFade 0.5s ease-out backwards;
-        }
-
-        .user-card-new > *:nth-child(1) { animation-delay: 0.1s; }
-        .user-card-new > *:nth-child(2) { animation-delay: 0.15s; }
-        .user-card-new > *:nth-child(3) { animation-delay: 0.2s; }
-        .user-card-new > *:nth-child(4) { animation-delay: 0.25s; }
-        .user-card-new > *:nth-child(5) { animation-delay: 0.3s; }
-
-        @keyframes slideUpFade {
-            from {
-                opacity: 0;
-                transform: translateY(16px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-
-        /* Quick action stagger */
-        .quick-action {
-            animation: scaleIn 0.4s ease-out backwards;
-        }
-
-        .quick-action:nth-child(1) { animation-delay: 0.25s; }
-        .quick-action:nth-child(2) { animation-delay: 0.3s; }
-        .quick-action:nth-child(3) { animation-delay: 0.35s; }
-        .quick-action:nth-child(4) { animation-delay: 0.4s; }
-
-        @keyframes scaleIn {
-            from {
-                opacity: 0;
-                transform: scale(0.9);
-            }
-            to {
-                opacity: 1;
-                transform: scale(1);
-            }
-        }
-
-        /* Stat items stagger */
-        .subscription-stat-item-new {
-            animation: fadeInUp 0.4s ease-out backwards;
-        }
-
-        .subscription-stat-item-new:nth-child(1) { animation-delay: 0.2s; }
-        .subscription-stat-item-new:nth-child(2) { animation-delay: 0.25s; }
-        .subscription-stat-item-new:nth-child(3) { animation-delay: 0.3s; }
-
-        @keyframes fadeInUp {
-            from {
-                opacity: 0;
-                transform: translateY(12px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-
-        .subscription-header-new {
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-start;
-            padding: 20px;
-            border-bottom: 1px solid var(--border-color);
-        }
-
-        .subscription-type-section {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-        }
-
-        .subscription-type-icon {
-            width: 32px;
-            height: 32px;
-            flex-shrink: 0;
-        }
-
-        .subscription-gift-icon-main {
-            color: #ff9500;
-            display: block;
-        }
-
-        .subscription-card-icon-main {
-            color: var(--success);
-            display: none;
-        }
-
-        .subscription-type-section.subscription-type-paid .subscription-gift-icon-main {
-            display: none !important;
-        }
-
-        .subscription-type-section.subscription-type-paid .subscription-card-icon-main {
-            display: block !important;
-        }
-
-        .subscription-type-section.subscription-type-trial .subscription-gift-icon-main {
-            display: block !important;
-        }
-
-        .subscription-type-section.subscription-type-trial .subscription-card-icon-main {
-            display: none !important;
-        }
-
-        .subscription-type-info {
-            display: flex;
-            flex-direction: column;
-            gap: 4px;
-        }
-
-        .subscription-type-name {
-            font-size: 18px;
-            font-weight: 700;
-            color: var(--text-primary);
-        }
-
-        .subscription-install-status {
-            font-size: 14px;
-        }
-
-        .status-text {
-            font-weight: 500;
-        }
-
-        .status-not-installed {
-            color: var(--danger);
-        }
-
-        .status-installed {
-            color: var(--success);
-        }
-
-        .subscription-expires-section {
-            display: flex;
-            flex-direction: column;
-            align-items: flex-end;
-            gap: 4px;
-        }
-
-        .subscription-expires-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: lowercase;
-        }
-
-        .subscription-expires-date {
-            font-size: 14px;
-            font-weight: 600;
-            color: var(--text-primary);
-        }
-
-        .subscription-stats-new {
-            display: flex;
-            justify-content: space-around;
-            padding: 16px 20px;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-            gap: 12px;
-            position: relative;
-            z-index: 1;
-        }
-
-        .subscription-stat-item-new {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 8px;
-            flex: 1;
-            padding: 12px 8px;
-            border-radius: 14px;
-            background: rgba(255, 255, 255, 0.03);
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            cursor: default;
-        }
-
-        .subscription-stat-item-new:hover {
-            background: rgba(255, 255, 255, 0.06);
-            transform: translateY(-2px);
-        }
-
-        .subscription-stat-item-new .stat-icon-wrapper {
-            width: 40px;
-            height: 40px;
-            border-radius: 12px;
-            background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.2), rgba(var(--primary-rgb), 0.05));
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: all 0.3s ease;
-        }
-
-        .subscription-stat-item-new:hover .stat-icon-wrapper {
-            background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.3), rgba(var(--primary-rgb), 0.1));
-            box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.2);
-        }
-
-        .subscription-stat-item-new .stat-icon {
-            width: 20px;
-            height: 20px;
-            color: var(--primary);
-            transition: all 0.3s ease;
-        }
-
-        .subscription-stat-item-new:hover .stat-icon {
-            transform: scale(1.1);
-        }
-
-        .stat-value-new {
-            font-size: 18px;
-            font-weight: 700;
-            color: var(--text-primary);
-            transition: all 0.3s ease;
-        }
-
-        .subscription-stat-item-new:hover .stat-value-new {
-            color: var(--primary);
-        }
-
-        .stat-label-new {
-            font-size: 11px;
-            font-weight: 500;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-        }
-
-        /* Light theme stats */
-        :root[data-theme="light"] .subscription-stat-item-new {
-            background: rgba(0, 0, 0, 0.02);
-        }
-
-        :root[data-theme="light"] .subscription-stat-item-new:hover {
-            background: rgba(0, 0, 0, 0.04);
-        }
-
-        :root[data-theme="light"] .subscription-stat-item-new .stat-icon-wrapper {
-            background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.12), rgba(var(--primary-rgb), 0.03));
-        }
-
-        :root[data-theme="light"] .subscription-stats-new {
-            border-bottom-color: rgba(0, 0, 0, 0.06);
-        }
-
-        :root[data-theme="light"] .subscription-header-new {
-            border-bottom-color: rgba(0, 0, 0, 0.06);
-        }
-
-        :root[data-theme="light"] .subscription-expires-info {
-            border-left-color: rgba(0, 0, 0, 0.08);
-        }
-
-        :root[data-theme="light"] .subscription-status-badge {
-            background: rgba(var(--success-rgb), 0.1);
-        }
-
-        :root[data-theme="light"] .user-card-new {
-            background: linear-gradient(
-                135deg,
-                rgba(255, 255, 255, 0.95) 0%,
-                rgba(248, 250, 252, 0.98) 50%,
-                rgba(255, 255, 255, 0.95) 100%
-            );
-        }
-
-        .subscription-progress-bar {
-            padding: 18px 20px;
-            background: linear-gradient(135deg, #1e40af 0%, #2563eb 40%, #3b82f6 70%, #60a5fa 100%);
-            border-radius: 0 0 var(--radius-xl) var(--radius-xl);
-            position: relative;
-            overflow: hidden;
-            z-index: 1;
-        }
-
-        .subscription-progress-bar::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: linear-gradient(90deg,
-                transparent 0%,
-                rgba(255, 255, 255, 0.15) 50%,
-                transparent 100%
-            );
-            animation: progressShine 2.5s ease-in-out infinite;
-        }
-
-        .subscription-progress-bar::after {
-            content: '';
-            position: absolute;
-            inset: 0;
-            background:
-                radial-gradient(circle at 20% 50%, rgba(255,255,255,0.12) 0%, transparent 40%),
-                radial-gradient(circle at 80% 30%, rgba(255,255,255,0.08) 0%, transparent 35%);
-            animation: floatingParticles 6s ease-in-out infinite alternate;
-        }
-
-        @keyframes progressShine {
-            0% { transform: translateX(-100%); }
-            100% { transform: translateX(100%); }
-        }
-
-        @keyframes floatingParticles {
-            0% { opacity: 0.5; transform: translateX(0); }
-            100% { opacity: 1; transform: translateX(10px); }
-        }
-
-        .progress-bar-content {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            position: relative;
-            z-index: 2;
-        }
-
-        .progress-label-left {
-            font-size: 13px;
-            font-weight: 500;
-            color: rgba(255, 255, 255, 0.85);
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-        }
-
-        .progress-label-right {
-            font-size: 20px;
-            font-weight: 700;
-            color: #ffffff;
-            text-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
-        }
-
-        /* Quick Actions Grid */
-        .quick-actions {
-            display: grid;
-            grid-template-columns: repeat(4, 1fr);
-            gap: 8px;
-            padding: 16px 20px;
-            width: 100%;
-            position: relative;
-            z-index: 1;
-            box-sizing: border-box;
-        }
-
-        .quick-action {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 8px;
-            padding: 14px 6px;
-            border-radius: 16px;
-            background: rgba(255, 255, 255, 0.05);
-            border: 1px solid rgba(255, 255, 255, 0.08);
-            color: var(--text-primary);
-            cursor: pointer;
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            text-align: center;
-            width: 100%;
-            box-sizing: border-box;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .quick-action::before {
-            content: '';
-            position: absolute;
-            inset: 0;
-            background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.15), transparent);
-            opacity: 0;
-            transition: opacity 0.3s ease;
-            border-radius: 16px;
-        }
-
-        .quick-action:hover {
-            background: rgba(255, 255, 255, 0.08);
-            border-color: rgba(var(--primary-rgb), 0.4);
-            transform: translateY(-3px);
-            box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.2);
-        }
-
-        .quick-action:hover::before {
-            opacity: 1;
-        }
-
-        .quick-action:active {
-            transform: translateY(-1px) scale(0.98);
-        }
-
-        .quick-action-icon {
-            width: 44px;
-            height: 44px;
-            border-radius: 14px;
-            background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.25), rgba(var(--primary-rgb), 0.1));
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            position: relative;
-            z-index: 1;
-            transition: all 0.3s ease;
-        }
-
-        .quick-action:hover .quick-action-icon {
-            background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.4), rgba(var(--primary-rgb), 0.2));
-            box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.3);
-        }
-
-        .quick-action-icon svg {
-            width: 22px;
-            height: 22px;
-            stroke-width: 2;
-            color: var(--primary);
-            transition: all 0.3s ease;
-        }
-
-        .quick-action:hover .quick-action-icon svg {
-            transform: scale(1.1);
-        }
-
-        .quick-action span {
-            font-size: 11px;
-            font-weight: 500;
-            color: var(--text-secondary);
-            position: relative;
-            z-index: 1;
-            line-height: 1.2;
-            transition: color 0.3s ease;
-        }
-
-        .quick-action:hover span {
-            color: var(--text-primary);
-        }
-
-        /* Success state for connect button */
-        .quick-action[data-action="connect"].connected .quick-action-icon {
-            background: linear-gradient(135deg, rgba(var(--success-rgb), 0.25), rgba(var(--success-rgb), 0.1));
-        }
-
-        .quick-action[data-action="connect"].connected .quick-action-icon svg {
-            color: var(--success);
-        }
-
-        /* Light theme for quick actions */
-        :root[data-theme="light"] .quick-action {
-            background: rgba(0, 0, 0, 0.03);
-            border-color: rgba(0, 0, 0, 0.06);
-        }
-
-        :root[data-theme="light"] .quick-action:hover {
-            background: rgba(0, 0, 0, 0.05);
-            border-color: rgba(var(--primary-rgb), 0.3);
-        }
-
-        :root[data-theme="light"] .quick-action-icon {
-            background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.15), rgba(var(--primary-rgb), 0.05));
-        }
-
-        :root[data-theme="light"] .quick-action:hover .quick-action-icon {
-            background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.25), rgba(var(--primary-rgb), 0.1));
-        }
-
-        /* New Subscription Details Card Design - Liquid Glass */
-        .subscription-details-card {
-            background: linear-gradient(
-                135deg,
-                rgba(30, 41, 59, 0.7) 0%,
-                rgba(15, 23, 42, 0.8) 50%,
-                rgba(30, 41, 59, 0.7) 100%
-            );
-            backdrop-filter: blur(20px) saturate(180%);
-            -webkit-backdrop-filter: blur(20px) saturate(180%);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            box-shadow:
-                0 8px 32px rgba(0, 0, 0, 0.3),
-                inset 0 1px 0 rgba(255, 255, 255, 0.1);
-            position: relative;
-            overflow: hidden;
-        }
-
-        .subscription-details-card::before {
-            content: '';
-            position: absolute;
-            inset: 0;
-            background:
-                radial-gradient(ellipse 60% 40% at 20% 30%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
-                radial-gradient(ellipse 50% 35% at 80% 70%, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
-            animation: card-glow 8s ease-in-out infinite;
-            pointer-events: none;
-        }
-
-        .subscription-details-card::after {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 50%;
-            height: 100%;
-            background: linear-gradient(
-                90deg,
-                transparent 0%,
-                rgba(255, 255, 255, 0.05) 20%,
-                rgba(255, 255, 255, 0.1) 50%,
-                rgba(255, 255, 255, 0.05) 80%,
-                transparent 100%
-            );
-            /* Shimmer animation removed */
-            pointer-events: none;
-        }
-
-        @keyframes card-glow {
-            0%, 100% {
-                opacity: 0.6;
-                transform: scale(1);
-            }
-            50% {
-                opacity: 1;
-                transform: scale(1.02);
-            }
-        }
-
-        /* card-shimmer animation removed */
-
-        .subscription-details-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-start;
-            padding: 20px;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-            position: relative;
-            z-index: 1;
-        }
-
-        .subscription-details-left {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            flex: 1;
-        }
-
-        .subscription-icon-wrapper {
-            width: 48px;
-            height: 48px;
-            background: rgba(var(--success-rgb), 0.1);
-            border: 2px solid var(--success);
-            border-radius: var(--radius);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex-shrink: 0;
-        }
-
-        .subscription-gift-icon {
-            width: 28px;
-            height: 28px;
-            color: #ff9500;
-            display: block;
-        }
-
-        .subscription-card-icon {
-            width: 28px;
-            height: 28px;
-            color: var(--success);
-            display: none;
-        }
-
-        .subscription-icon-wrapper.subscription-type-paid .subscription-gift-icon {
-            display: none !important;
-        }
-
-        .subscription-icon-wrapper.subscription-type-paid .subscription-card-icon {
-            display: block !important;
-        }
-
-        .subscription-icon-wrapper.subscription-type-trial .subscription-gift-icon {
-            display: block !important;
-        }
-
-        .subscription-icon-wrapper.subscription-type-trial .subscription-card-icon {
-            display: none !important;
-        }
-
-        .subscription-icon-wrapper.subscription-type-paid {
-            background: rgba(var(--success-rgb), 0.1);
-            border-color: var(--success);
-        }
-
-        .subscription-icon-wrapper.subscription-type-trial {
-            background: rgba(255, 149, 0, 0.1);
-            border-color: #ff9500;
-        }
-
-
-        .subscription-details-info {
-            display: flex;
-            flex-direction: column;
-            gap: 4px;
-        }
-
-        .subscription-type-name-large {
-            font-size: 20px;
-            font-weight: 700;
-            color: var(--text-primary);
-        }
-
-        .subscription-id {
-            font-size: 13px;
-            color: var(--text-secondary);
-            font-family: 'Courier New', monospace;
-        }
-
-        .subscription-details-right {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-        }
-
-        .subscription-status-badge {
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-            padding: 6px 14px;
-            background: rgba(var(--success-rgb), 0.12);
-            color: var(--success);
-            border-radius: 20px;
-            font-size: 13px;
-            font-weight: 600;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .subscription-status-badge::before {
-            content: '';
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            background: var(--success);
-            box-shadow: 0 0 8px var(--success);
-            animation: statusPulse 2s ease-in-out infinite;
-        }
-
-        .subscription-status-badge::after {
-            content: '';
-            position: absolute;
-            width: 8px;
-            height: 8px;
-            left: 14px;
-            border-radius: 50%;
-            background: var(--success);
-            opacity: 0.4;
-            animation: statusRipple 2s ease-out infinite;
-        }
-
-        .subscription-status-badge.expiring {
-            background: rgba(var(--warning-rgb), 0.12);
-            color: var(--warning);
-        }
-
-        .subscription-status-badge.expiring::before,
-        .subscription-status-badge.expiring::after {
-            background: var(--warning);
-            box-shadow: 0 0 8px var(--warning);
-        }
-
-        .subscription-status-badge.expired {
-            background: rgba(var(--danger-rgb), 0.12);
-            color: var(--danger);
-        }
-
-        .subscription-status-badge.expired::before {
-            background: var(--danger);
-            box-shadow: 0 0 8px var(--danger);
-            animation: none;
-        }
-
-        .subscription-status-badge.expired::after {
-            display: none;
-        }
-
-        @keyframes statusPulse {
-            0%, 100% {
-                opacity: 1;
-                transform: scale(1);
-            }
-            50% {
-                opacity: 0.6;
-                transform: scale(0.9);
-            }
-        }
-
-        @keyframes statusRipple {
-            0% {
-                transform: scale(1);
-                opacity: 0.4;
-            }
-            100% {
-                transform: scale(2.5);
-                opacity: 0;
-            }
-        }
-
-        .subscription-menu-btn {
-            width: 36px;
-            height: 36px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background: var(--bg-secondary);
-            border: 1px solid var(--border-color);
-            border-radius: 50%;
-            color: var(--accent-blue);
-            cursor: pointer;
-            transition: all 0.2s ease;
-        }
-
-        .subscription-menu-btn:hover {
-            background: rgba(var(--primary-rgb), 0.1);
-            border-color: var(--accent-blue);
-        }
-
-        .subscription-menu-btn svg {
-            width: 20px;
-            height: 20px;
-        }
-
-        .subscription-details-list {
-            padding: 0;
-        }
-
-        .subscription-detail-item {
-            display: flex;
-            align-items: center;
-            gap: 16px;
-            padding: 16px 20px;
-            border-bottom: 1px solid var(--border-color);
-            cursor: pointer;
-            transition: background 0.2s ease;
-        }
-
-        .subscription-detail-item:last-child {
-            border-bottom: none;
-        }
-
-        .subscription-detail-item:hover {
-            background: rgba(var(--primary-rgb), 0.05);
-        }
-
-        .subscription-detail-item.active {
-            background: rgba(var(--primary-rgb), 0.1);
-            border-left: 3px solid var(--accent-blue);
-        }
-
-        .detail-item-icon {
-            width: 24px;
-            height: 24px;
-            color: var(--accent-blue);
-            flex-shrink: 0;
-        }
-
-        .detail-item-icon svg {
-            width: 100%;
-            height: 100%;
-        }
-
-        .detail-item-content {
-            flex: 1;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-
-        .detail-item-label {
-            font-size: 14px;
-            color: var(--text-secondary);
-            font-weight: 500;
-        }
-
-        .detail-item-value {
-            font-size: 14px;
-            color: var(--text-primary);
-            font-weight: 600;
-            text-align: right;
-        }
-
-        .detail-item-value > div:first-child {
-            margin-bottom: 2px;
-        }
-
-        .detail-item-hint {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-weight: 400;
-        }
-
-        .subscription-details-actions {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 12px;
-            padding: 20px;
-            border-top: 1px solid var(--border-color);
-            width: 100%;
-            max-width: 100%;
-            box-sizing: border-box;
-            overflow: hidden;
-        }
-
-        .subscription-action-settings {
-            background: var(--bg-secondary);
-            color: var(--text-primary);
-            border: 1px solid var(--border-color);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 6px;
-            padding: 12px 8px;
-            border-radius: var(--radius);
-            font-size: 13px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.2s ease;
-            width: 100%;
-            max-width: 100%;
-            box-sizing: border-box;
-            min-width: 0;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-
-        .subscription-action-settings:hover {
-            background: rgba(var(--primary-rgb), 0.1);
-            border-color: var(--accent-blue);
-        }
-
-        .subscription-action-settings svg {
-            width: 20px;
-            height: 20px;
-        }
-
-        .subscription-action-renew {
-            background: var(--bg-secondary);
-            color: var(--text-primary);
-            border: 1px solid var(--border-color);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 12px 8px;
-            border-radius: var(--radius);
-            font-size: 13px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.2s ease;
-            width: 100%;
-            max-width: 100%;
-            box-sizing: border-box;
-            min-width: 0;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-
-        .subscription-action-renew:hover {
-            background: rgba(var(--primary-rgb), 0.1);
-            border-color: var(--accent-blue);
-        }
-
-        .subscription-action-renew svg {
-            width: 20px;
-            height: 20px;
-            flex-shrink: 0;
-        }
-
-        /* Devices Modal */
-        .devices-modal-backdrop {
-            position: fixed;
-            inset: 0;
-            background: rgba(0, 0, 0, 0.7);
-            display: flex;
-            align-items: flex-end;
-            justify-content: center;
-            z-index: 10000;
-            padding: 0;
-        }
-
-        .devices-modal-backdrop.hidden {
-            display: none;
-        }
-
-        .devices-modal {
-            background: var(--bg-secondary);
-            border-radius: var(--radius-lg) var(--radius-lg) 0 0;
-            width: 100%;
-            max-width: 480px;
-            max-height: 90vh;
-            min-height: 60vh;
-            overflow-y: auto;
-            padding: 20px;
-            padding-bottom: 40px;
-        }
-
-        .devices-modal-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 20px;
-        }
-
-        .devices-modal-title {
-            font-size: 20px;
-            font-weight: 700;
-            color: var(--text-primary);
-        }
-
-        .devices-modal-subtitle {
-            font-size: 14px;
-            color: var(--text-secondary);
-            margin-top: 4px;
-        }
-
-        .devices-modal-close {
-            width: 32px;
-            height: 32px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background: var(--bg-secondary);
-            border: 1px solid var(--border-color);
-            border-radius: 50%;
-            color: var(--text-primary);
-            cursor: pointer;
-            transition: all 0.2s ease;
-        }
-
-        .devices-modal-close:hover {
-            background: rgba(var(--primary-rgb), 0.1);
-        }
-
-        .devices-modal-close svg {
-            width: 18px;
-            height: 18px;
-        }
-
-        .devices-modal-content {
-            color: var(--text-secondary);
-            text-align: center;
-            padding: 40px 20px;
-            padding-bottom: 60px;
-            min-height: 400px;
-        }
-
-        .devices-list-modal {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-        }
-
-        .device-item-modal {
-            background: var(--bg-primary);
-            border: 1px solid var(--border-color);
-            border-radius: var(--radius);
-            padding: 16px;
-            transition: all 0.2s ease;
-        }
-
-        .device-item-modal:hover {
-            border-color: var(--accent-blue);
-            background: rgba(var(--primary-rgb), 0.05);
-        }
-
-        .device-header-modal {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 8px;
-        }
-
-        .device-title-modal {
-            font-size: 15px;
-            font-weight: 600;
-            color: var(--text-primary);
-            flex: 1;
-        }
-
-        .device-remove-button-modal {
-            width: 32px;
-            height: 32px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background: rgba(var(--danger-rgb), 0.1);
-            border: 1px solid rgba(var(--danger-rgb), 0.3);
-            border-radius: 50%;
-            color: var(--danger);
-            cursor: pointer;
-            transition: all 0.2s ease;
-            flex-shrink: 0;
-        }
-
-        .device-remove-button-modal:hover {
-            background: rgba(var(--danger-rgb), 0.2);
-            border-color: var(--danger);
-            transform: scale(1.1);
-        }
-
-        .device-remove-button-modal svg {
-            width: 16px;
-            height: 16px;
-        }
-
-        .device-meta-modal {
-            font-size: 13px;
-            color: var(--text-secondary);
-            margin-top: 4px;
-        }
-
-        .device-meta-modal span {
-            margin: 0 4px;
-        }
-
-        .device-meta-modal span:first-child {
-            margin-left: 0;
-        }
-
-        /* Referral Modal Styles */
-        .referral-modal {
-            max-height: 95vh;
-            min-height: 85vh;
-            overflow-y: auto;
-            overflow-x: visible !important;
-            background: var(--bg-primary) !important;
-            position: relative;
-            padding-bottom: 40px;
-        }
-
-        .referral-modal .modal-header {
-            text-align: left;
-        }
-
-        .referral-modal-header {
-            display: flex !important;
-            justify-content: space-between !important;
-            align-items: center !important;
-            margin-bottom: 24px;
-            padding-top: calc(20px + var(--safe-area-top));
-            padding-bottom: 16px;
-            border-bottom: 1px solid var(--border-color);
-            position: relative;
-            z-index: 10051;
-            background: var(--bg-primary);
-            margin-top: 0;
-            margin-left: -20px;
-            margin-right: -20px;
-            padding-left: 20px;
-            padding-right: 20px;
-            gap: 12px;
-        }
-
-        .referral-modal-title-wrapper {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            flex: 1;
-        }
-
-        .referral-modal-icon {
-            width: 24px;
-            height: 24px;
-            color: var(--accent-blue-light);
-            flex-shrink: 0;
-        }
-
-        .referral-modal-title {
-            font-size: 18px;
-            font-weight: 800;
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-            color: var(--text-primary);
-            line-height: 1.3;
-        }
-
-        .referral-modal-close {
-            width: 40px !important;
-            height: 40px !important;
-            min-width: 40px !important;
-            min-height: 40px !important;
-            display: flex !important;
-            align-items: center !important;
-            justify-content: center !important;
-            background: var(--bg-secondary) !important;
-            border: 2px solid var(--border-color) !important;
-            border-radius: 50% !important;
-            color: var(--text-primary) !important;
-            cursor: pointer !important;
-            transition: all 0.2s ease;
-            flex-shrink: 0 !important;
-            visibility: visible !important;
-            opacity: 1 !important;
-            z-index: 10052 !important;
-            position: relative !important;
-            margin-left: auto !important;
-        }
-
-
-        .referral-modal-close-header {
-            display: flex !important;
-            visibility: visible !important;
-            opacity: 1 !important;
-            width: 42px !important;
-            height: 42px !important;
-            min-width: 42px !important;
-            min-height: 42px !important;
-            background: var(--bg-secondary) !important;
-            border: 2px solid var(--accent-blue-light) !important;
-            align-items: center !important;
-            justify-content: center !important;
-            border-radius: 50% !important;
-            cursor: pointer !important;
-            flex-shrink: 0 !important;
-        }
-
-        .referral-modal-close-header svg {
-            color: var(--text-primary) !important;
-        }
-
-        .referral-modal-close-header:hover {
-            background: var(--accent-blue-light) !important;
-            border-color: var(--accent-blue) !important;
-        }
-
-        .referral-modal-close svg {
-            width: 24px !important;
-            height: 24px !important;
-            stroke-width: 3 !important;
-        }
-
-        .referral-modal-close-absolute svg {
-            width: 28px !important;
-            height: 28px !important;
-            stroke-width: 3.5 !important;
-            color: var(--bg-primary) !important;
-        }
-
-        .referral-modal-close-absolute:hover {
-            background: var(--accent-blue) !important;
-            transform: scale(1.15) !important;
-        }
-
-        .referral-modal-close-header:hover {
-            background: var(--accent-blue-light) !important;
-            color: var(--bg-primary) !important;
-        }
-
-        .referral-modal-close:hover {
-            background: rgba(var(--primary-rgb), 0.1);
-            color: var(--text-primary);
-        }
-
-        .referral-modal-body {
-            display: flex;
-            flex-direction: column;
-            gap: 24px;
-            padding: 20px;
-            padding-bottom: calc(20px + var(--safe-area-bottom));
-            background: var(--bg-primary) !important;
-            min-height: 100%;
-            margin-bottom: 0;
-        }
-
-        /* Referral Link Section */
-        .referral-link-section-new {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-            padding: 16px;
-            background: var(--bg-primary);
-            border: 1px solid var(--border-color);
-            border-radius: var(--radius-lg);
-        }
-
-        .referral-link-label-new {
-            font-size: 13px;
-            font-weight: 600;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 0.03em;
-        }
-
-        .referral-link-container-new {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-        }
-
-        .referral-link-value-new {
-            flex: 1;
-            font-size: 15px;
-            font-weight: 600;
-            color: var(--accent-blue-light);
-            word-break: break-all;
-        }
-
-        .referral-copy-btn-new {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            padding: 10px 16px;
-            background: var(--accent-blue-light);
-            border: none;
-            border-radius: var(--radius);
-            color: var(--bg-primary);
-            font-size: 14px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.2s ease;
-            white-space: nowrap;
-            flex-shrink: 0;
-        }
-
-        .referral-copy-btn-new:hover {
-            background: var(--accent-blue);
-            transform: translateY(-1px);
-        }
-
-        .referral-copy-btn-new:active {
-            transform: translateY(0);
-        }
-
-        .referral-copy-btn-new svg {
-            width: 16px;
-            height: 16px;
-        }
-
-        /* Referral Stats Dashboard */
-        .referral-stats-dashboard {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 12px;
-        }
-
-        .referral-stat-box-row3 {
-            grid-column: span 1;
-        }
-
-        @media (max-width: 480px) {
-            .referral-stats-dashboard {
-                grid-template-columns: repeat(2, 1fr);
-            }
-
-            .referral-stat-box-row3 {
-                grid-column: span 1;
-            }
-        }
-
-        .referral-stat-box {
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-            padding: 16px;
-            background: var(--bg-primary);
-            border: 1px solid var(--border-color);
-            border-radius: var(--radius-lg);
-            min-height: 80px;
-        }
-
-        .referral-stat-label {
-            font-size: 11px;
-            font-weight: 700;
-            text-transform: uppercase;
-            letter-spacing: 0.04em;
-            color: var(--text-secondary);
-            line-height: 1.3;
-        }
-
-        .referral-stat-value {
-            font-size: 18px;
-            font-weight: 700;
-            color: var(--text-primary);
-            line-height: 1.2;
-        }
-
-        /* Referral Conditions Section */
-        .referral-conditions-section {
-            display: flex;
-            flex-direction: column;
-            gap: 16px;
-        }
-
-        .referral-conditions-title {
-            font-size: 15px;
-            font-weight: 700;
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-            color: var(--text-primary);
-        }
-
-        .referral-conditions-list {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-        }
-
-        .referral-condition-item {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 14px 16px;
-            background: var(--bg-primary);
-            border: 1px solid var(--border-color);
-            border-radius: var(--radius-lg);
-        }
-
-        .referral-condition-text {
-            flex: 1;
-            font-size: 14px;
-            line-height: 1.5;
-            color: var(--text-primary);
-        }
-
-        .referral-condition-value {
-            font-size: 15px;
-            font-weight: 700;
-            color: var(--accent-blue-light);
-            margin-left: 16px;
-            white-space: nowrap;
-        }
-
-        /* My Referrals Button */
-        .referral-my-referrals-btn {
-            width: 100%;
-            padding: 16px;
-            margin-top: 8px;
-        }
-
-        /* Referral List Section in Modal */
-        .referral-list-section-modal {
-            display: flex;
-            flex-direction: column;
-            gap: 16px;
-            margin-top: 24px;
-        }
-
-        .referral-list-title-modal {
-            font-size: 15px;
-            font-weight: 700;
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-            color: var(--text-primary);
-        }
-
-        .referral-list-modal {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-            list-style: none;
-            padding: 0;
-            margin: 0;
-        }
-
-        .referral-item-modal {
-            background: var(--bg-primary);
-            border: 1px solid var(--border-color);
-            border-radius: var(--radius-lg);
-            padding: 16px;
-            transition: all 0.2s ease;
-        }
-
-        .referral-item-modal:hover {
-            border-color: var(--accent-blue);
-            background: rgba(var(--primary-rgb), 0.05);
-        }
-
-        .referral-item-header-modal {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 8px;
-        }
-
-        .referral-item-name-modal {
-            font-size: 15px;
-            font-weight: 600;
-            color: var(--text-primary);
-            flex: 1;
-        }
-
-        .referral-status-modal {
-            font-size: 12px;
-            font-weight: 600;
-            padding: 4px 10px;
-            border-radius: 999px;
-            text-transform: uppercase;
-            letter-spacing: 0.03em;
-        }
-
-        .referral-status-modal.active {
-            background: rgba(var(--success-rgb), 0.15);
-            color: var(--success);
-        }
-
-        .referral-status-modal.inactive {
-            background: rgba(var(--text-secondary-rgb), 0.15);
-            color: var(--text-secondary);
-        }
-
-        .referral-status-modal.new {
-            background: rgba(var(--primary-rgb), 0.15);
-            color: var(--accent-blue-light);
-        }
-
-        .referral-item-username-modal {
-            font-size: 13px;
-            color: var(--text-secondary);
-            margin-bottom: 12px;
-        }
-
-        .referral-item-grid-modal {
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            gap: 12px;
-            margin-bottom: 12px;
-        }
-
-        .referral-item-metric-modal {
-            display: flex;
-            flex-direction: column;
-            gap: 4px;
-        }
-
-        .referral-item-label-modal {
-            font-size: 11px;
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 0.03em;
-            color: var(--text-secondary);
-        }
-
-        .referral-item-value-modal {
-            font-size: 14px;
-            font-weight: 700;
-            color: var(--text-primary);
-        }
-
-        .referral-item-dates-modal {
-            display: flex;
-            flex-direction: column;
-            gap: 6px;
-            font-size: 12px;
-            color: var(--text-secondary);
-        }
-
-        .referral-item-date-modal {
-            line-height: 1.5;
-        }
-
-        .referral-item-date-modal strong {
-            color: var(--text-primary);
-            font-weight: 600;
-        }
-
-        .referral-list-empty-modal {
-            text-align: center;
-            padding: 40px 20px;
-            color: var(--text-secondary);
-            font-size: 14px;
-        }
-
-        /* Promo card */
-        .promo-card .card-header {
-            gap: 12px;
-        }
-
-        .promo-card-summary {
-            margin-left: auto;
-            display: flex;
-            flex-direction: column;
-            align-items: flex-end;
-            gap: 4px;
-        }
-
-        .promo-card-summary-label {
-            font-size: 11px;
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-            color: var(--text-secondary);
-        }
-
-        .promo-card-summary-value {
-            font-size: 15px;
-            font-weight: 700;
-            color: var(--text-primary);
-        }
-
-        .promo-card-summary-discount {
-            font-size: 12px;
-            font-weight: 600;
-            color: var(--primary);
-            background: rgba(var(--primary-rgb), 0.12);
-            padding: 4px 8px;
-            border-radius: 999px;
-        }
-
-        .promo-section {
-            padding: 16px 0;
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-        }
-
-        .promo-section-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-start;
-            gap: 12px;
-        }
-
-        .promo-section-title {
-            font-size: 13px;
-            font-weight: 700;
-            color: var(--text-primary);
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-        }
-
-        .promo-section-value {
-            font-size: 14px;
-            font-weight: 600;
-            color: var(--text-secondary);
-            text-align: right;
-        }
-
-        .promo-section-meta {
-            display: flex;
-            flex-direction: column;
-            gap: 4px;
-            align-items: flex-end;
-        }
-
-        .promo-section-meta-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-        }
-
-        .promo-section-meta-value {
-            font-size: 16px;
-            font-weight: 700;
-            color: var(--text-primary);
-        }
-
-        .promo-divider {
-            border-top: 1px solid var(--border-color);
-            margin: 0 -16px;
-        }
-
-        .promo-discount-list {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 6px;
-        }
-
-        .promo-periods {
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-        }
-
-        .promo-periods-title,
-        .promo-periods-label {
-            font-size: 12px;
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-            color: var(--text-secondary);
-        }
-
-        .promo-period-list {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 6px;
-        }
-
-        .promo-period-badge {
-            display: inline-flex;
-            align-items: center;
-            gap: 6px;
-            padding: 4px 10px;
-            border-radius: 999px;
-            border: 1px solid rgba(var(--primary-rgb), 0.12);
-            background: rgba(var(--primary-rgb), 0.05);
-            font-size: 12px;
-            font-weight: 600;
-            color: var(--text-secondary);
-            white-space: nowrap;
-        }
-
-        .promo-period-badge .promo-period-value {
-            color: var(--primary);
-        }
-
-        .promo-period-label {
-            color: var(--text-secondary);
-        }
-
-        .promo-level-list {
-            list-style: none;
-            padding: 0;
-            margin: 0;
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-        }
-
-        .promo-level-item {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            gap: 16px;
-            padding: 14px 16px;
-            border-radius: var(--radius);
-            border: 1px solid var(--border-color);
-            background: var(--bg-secondary);
-            transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
-        }
-
-        .promo-level-item:hover {
-            border-color: rgba(var(--primary-rgb), 0.4);
-            box-shadow: var(--shadow-sm);
-            transform: translateY(-1px);
-        }
-
-        .promo-level-item.current {
-            border-color: var(--primary);
-            box-shadow: var(--shadow-sm);
-        }
-
-        .promo-level-info {
-            display: flex;
-            flex-direction: column;
-            gap: 6px;
-        }
-
-        .promo-level-name {
-            font-weight: 700;
-            color: var(--text-primary);
-            font-size: 15px;
-        }
-
-        .promo-level-threshold {
-            font-size: 13px;
-            color: var(--text-secondary);
-        }
-
-        .promo-level-benefits {
-            display: flex;
-            flex-direction: column;
-            gap: 6px;
-        }
-
-        .promo-level-badge {
-            padding: 6px 12px;
-            border-radius: 999px;
-            font-size: 12px;
-            font-weight: 600;
-            letter-spacing: 0.3px;
-        }
-
-        .promo-level-item.current .promo-level-badge {
-            background: rgba(var(--primary-rgb), 0.18);
-            color: var(--primary);
-        }
-
-        .promo-level-item.reached .promo-level-badge {
-            background: rgba(16, 185, 129, 0.18);
-            color: var(--success);
-        }
-
-        .promo-level-item.locked .promo-level-badge {
-            background: rgba(148, 163, 184, 0.18);
-            color: var(--text-secondary);
-        }
-
-        .promo-discount-badge {
-            display: inline-flex;
-            align-items: center;
-            gap: 4px;
-            padding: 4px 8px;
-            border-radius: 999px;
-            border: 1px solid rgba(var(--primary-rgb), 0.12);
-            background: rgba(var(--primary-rgb), 0.08);
-            color: var(--text-secondary);
-            font-size: 12px;
-            font-weight: 600;
-            white-space: nowrap;
-        }
-
-        .promo-discount-badge .promo-discount-value {
-            color: var(--text-primary);
-        }
-
-        .promo-discount-badge.muted {
-            background: rgba(var(--primary-rgb), 0.05);
-            border-color: rgba(var(--primary-rgb), 0.08);
-        }
-
-        .promo-discount-badge.muted .promo-discount-value {
-            color: var(--text-secondary);
-        }
-
-        .promo-level-item.current .promo-discount-badge {
-            border-color: rgba(var(--primary-rgb), 0.35);
-            color: var(--primary);
-        }
-
-        .promo-level-item.current .promo-discount-badge .promo-discount-value {
-            color: var(--primary);
-        }
-
-        .promo-level-item.reached .promo-discount-badge {
-            border-color: rgba(16, 185, 129, 0.35);
-            color: var(--success);
-        }
-
-        .promo-level-item.reached .promo-discount-badge .promo-discount-value {
-            color: var(--success);
-        }
-
-        .promo-level-item.locked .promo-discount-badge {
-            opacity: 0.8;
-        }
-
-        /* Balance Card */
-        .balance-card {
-            background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.1), rgba(var(--primary-rgb), 0.05));
-            border: 2px solid rgba(var(--primary-rgb), 0.2);
-        }
-
-        .balance-content {
-            padding: 20px;
-            text-align: center;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        }
-
-        .balance-amount {
-            font-size: 36px;
-            font-weight: 800;
-            color: var(--text-primary);
-            margin-bottom: 8px;
-        }
-
-        .balance-label {
-            font-size: 13px;
-            color: var(--text-secondary);
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-        }
-
-        .balance-actions {
-            margin-top: 16px;
-            display: flex;
-            justify-content: center;
-        }
-
-        .topup-button {
-            padding: 8px 16px;
-            border-radius: var(--radius);
-            border: 1px solid rgba(255, 255, 255, 0.15);
-            background: linear-gradient(
-                135deg,
-                rgba(59, 130, 246, 0.4) 0%,
-                rgba(37, 99, 235, 0.45) 50%,
-                rgba(59, 130, 246, 0.4) 100%
-            );
-            backdrop-filter: blur(20px) saturate(180%);
-            -webkit-backdrop-filter: blur(20px) saturate(180%);
-            color: #ffffff;
-            font-size: 13px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            display: inline-flex;
-            align-items: center;
-            gap: 6px;
-            position: relative;
-            overflow: hidden;
-            box-shadow:
-                0 3px 15px rgba(59, 130, 246, 0.25),
-                inset 0 1px 0 rgba(255, 255, 255, 0.15);
-        }
-
-        .topup-button::before {
-            content: '';
-            position: absolute;
-            inset: 0;
-            background:
-                radial-gradient(ellipse 60% 40% at 50% 50%, rgba(100, 180, 255, 0.3) 0%, transparent 70%);
-            animation: button-glow 3s ease-in-out infinite;
-            pointer-events: none;
-        }
-
-        .topup-button::after {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 50%;
-            height: 100%;
-            background: linear-gradient(
-                90deg,
-                transparent 0%,
-                rgba(255, 255, 255, 0.15) 20%,
-                rgba(255, 255, 255, 0.25) 50%,
-                rgba(255, 255, 255, 0.15) 80%,
-                transparent 100%
-            );
-            /* button-shimmer animation removed */
-            pointer-events: none;
-        }
-
-        @keyframes button-glow {
-            0%, 100% { opacity: 0.6; }
-            50% { opacity: 1; }
-        }
-
-        /* button-shimmer animation removed */
-
-        .topup-button:hover {
-            box-shadow:
-                0 5px 22px rgba(59, 130, 246, 0.4),
-                inset 0 1px 0 rgba(255, 255, 255, 0.2),
-                0 0 20px rgba(59, 130, 246, 0.35);
-            transform: translateY(-1px);
-            border-color: rgba(255, 255, 255, 0.25);
-            background: linear-gradient(
-                135deg,
-                rgba(59, 130, 246, 0.5) 0%,
-                rgba(37, 99, 235, 0.55) 50%,
-                rgba(59, 130, 246, 0.5) 100%
-            );
-        }
-
-        .topup-button:active {
-            transform: scale(0.98) translateY(0);
-        }
-
-        .topup-button:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-            box-shadow: none;
-            transform: none;
-            background: linear-gradient(
-                135deg,
-                rgba(59, 130, 246, 0.2) 0%,
-                rgba(37, 99, 235, 0.25) 50%,
-                rgba(59, 130, 246, 0.2) 100%
-            );
-        }
-
-        .topup-button span,
-        .topup-button svg {
-            position: relative;
-            z-index: 1;
-        }
-
-        .topup-button svg {
-            width: 18px;
-            height: 18px;
-            flex-shrink: 0;
-        }
-
-        /* Profile Styles */
-        .profile-user-card {
-            padding: 20px;
-        }
-
-        .profile-user-header {
-            display: flex;
-            align-items: center;
-            gap: 16px;
-            margin-bottom: 24px;
-        }
-
-        .profile-avatar {
-            width: 64px;
-            height: 64px;
-            border-radius: 50%;
-            background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.3), rgba(var(--primary-rgb), 0.1));
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 24px;
-            font-weight: 700;
-            color: var(--text-primary);
-            flex-shrink: 0;
-        }
-
-        .profile-user-info {
-            flex: 1;
-            min-width: 0;
-        }
-
-        .profile-username {
-            font-size: 20px;
-            font-weight: 700;
-            color: var(--text-primary);
-            margin-bottom: 4px;
-        }
-
-        .profile-handle {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-
-        .profile-user-details {
-            display: flex;
-            flex-direction: column;
-            gap: 16px;
-            margin-bottom: 20px;
-        }
-
-        .profile-detail-item {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-        }
-
-        .profile-detail-icon {
-            width: 20px;
-            height: 20px;
-            color: var(--text-secondary);
-            flex-shrink: 0;
-        }
-
-        .profile-detail-content {
-            flex: 1;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            min-width: 0;
-        }
-
-        .profile-detail-label {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-
-        .profile-detail-value {
-            font-size: 14px;
-            color: var(--text-primary);
-            font-weight: 500;
-        }
-
-        .profile-detail-value-group {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .profile-detail-value-empty {
-            color: var(--danger);
-        }
-
-        .profile-detail-edit-icon {
-            width: 16px;
-            height: 16px;
-            color: var(--text-secondary);
-            cursor: pointer;
-        }
-
-        .profile-birthday-btn {
-            width: 100%;
-            margin-top: 8px;
-        }
-
-        .balance-status-card {
-            padding: 16px;
-        }
-
-        .balance-status-header {
-            margin-bottom: 16px;
-        }
-
-        .balance-status-title {
-            font-size: 14px;
-            font-weight: 700;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-        }
-
-        .balance-status-content {
-            display: flex;
-            flex-direction: column;
-            gap: 16px;
-        }
-
-        .balance-status-message {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            padding: 12px;
-            border-radius: var(--radius);
-            background: rgba(var(--primary-rgb), 0.05);
-        }
-
-        .balance-status-icon {
-            width: 20px;
-            height: 20px;
-            color: var(--text-primary);
-            flex-shrink: 0;
-        }
-
-        .balance-status-message span {
-            font-size: 14px;
-            color: var(--text-primary);
-        }
-
-        .balance-status-stats {
-            display: flex;
-            gap: 12px;
-        }
-
-        .balance-stat-card {
-            flex: 1;
-            padding: 16px;
-            border-radius: var(--radius);
-            background: rgba(var(--primary-rgb), 0.05);
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-        }
-
-        .balance-stat-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-weight: 600;
-        }
-
-        .balance-stat-value {
-            font-size: 20px;
-            font-weight: 800;
-            color: var(--text-primary);
-        }
-
-        .balance-stat-value-green {
-            color: var(--text-primary);
-        }
-
-        .balance-status-promo {
-            margin-top: 20px;
-            padding-top: 20px;
-            border-top: 1px solid var(--border-color);
-        }
-
-        .promo-code-header-inline {
-            display: flex;
-            flex-direction: column;
-            gap: 6px;
-            margin-bottom: 16px;
-        }
-
-        .promo-code-title-inline {
-            font-size: 18px;
-            font-weight: 700;
-            color: var(--text-primary);
-        }
-
-        .promo-code-subtitle-inline {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-
-        .promo-code-form-inline {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-        }
-
-        .promo-code-input-group-inline {
-            display: flex;
-            align-items: stretch;
-            gap: 8px;
-            width: 100%;
-            max-width: 100%;
-            box-sizing: border-box;
-            flex-wrap: wrap;
-        }
-
-        .promo-code-input-inline {
-            flex: 1 1 auto;
-            padding: 12px 16px;
-            background: rgba(var(--primary-rgb), 0.05);
-            border: 1px solid var(--border-color);
-            border-radius: var(--radius);
-            color: var(--text-primary);
-            font-size: 14px;
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            transition: border-color 0.2s ease, background 0.2s ease;
-            min-width: 120px;
-            max-width: calc(100% - 130px);
-            box-sizing: border-box;
-        }
-
-        .promo-code-input-inline::placeholder {
-            color: var(--text-secondary);
-            opacity: 0.75;
-        }
-
-        .promo-code-input-inline:focus {
-            outline: none;
-            border-color: rgba(var(--primary-rgb), 0.5);
-            background: rgba(var(--primary-rgb), 0.08);
-        }
-
-        .promo-code-button-inline {
-            flex-shrink: 0;
-            padding: 10px 14px;
-            background: var(--primary);
-            color: var(--tg-theme-button-text-color);
-            border: none;
-            border-radius: var(--radius);
-            font-size: 12px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
-            white-space: nowrap;
-            min-width: 100px;
-            max-width: none;
-        }
-
-        .promo-code-button-inline:hover:not(:disabled) {
-            transform: translateY(-1px);
-            box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
-        }
-
-        .promo-code-button-inline:active:not(:disabled) {
-            transform: translateY(0);
-        }
-
-        .promo-code-button-inline:disabled {
-            opacity: 0.6;
-            cursor: not-allowed;
-        }
-
-        .profile-menu-card {
-            padding: 0;
-        }
-
-        .profile-menu-item {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            padding: 16px;
-            cursor: pointer;
-            transition: background 0.2s ease;
-            border-bottom: 1px solid var(--border-color);
-        }
-
-        .profile-menu-item:last-child {
-            border-bottom: none;
-        }
-
-        .profile-menu-item:hover {
-            background: rgba(var(--primary-rgb), 0.05);
-        }
-
-        .profile-menu-item:active {
-            background: rgba(var(--primary-rgb), 0.1);
-        }
-
-        .profile-menu-icon {
-            width: 24px;
-            height: 24px;
-            color: var(--text-primary);
-            flex-shrink: 0;
-        }
-
-        .profile-menu-text {
-            flex: 1;
-            font-size: 15px;
-            color: var(--text-primary);
-            font-weight: 500;
-        }
-
-        .profile-menu-arrow {
-            width: 20px;
-            height: 20px;
-            color: var(--text-secondary);
-            flex-shrink: 0;
-        }
-
-        .modal-backdrop {
-            position: fixed;
-            inset: 0;
-            background: rgba(15, 23, 42, 0.55);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 24px;
-            z-index: 10050;
-            backdrop-filter: blur(4px);
-        }
-
-        .modal-backdrop.hidden {
-            display: none;
-        }
-
-        .modal {
-            width: 100%;
-            max-width: 420px;
-            background: var(--bg-primary) !important;
-            border-radius: var(--radius-lg);
-            box-shadow: var(--shadow-lg);
-            padding: 20px;
-            display: flex;
-            flex-direction: column;
-            gap: 0;
-            overflow-y: auto;
-        }
-
-        .referral-modal {
-            padding: 0;
-            background: var(--bg-primary) !important;
-        }
-
-        @media (max-width: 600px) {
-            .modal-backdrop {
-                padding: 0;
-                align-items: stretch;
-            }
-
-            .modal {
-                max-width: none;
-                height: 100vh;
-                max-height: 100vh;
-                border-radius: 0;
-                box-shadow: none;
-                background: var(--bg-primary) !important;
-                padding: 0;
-            }
-
-            .referral-modal {
-                background: var(--bg-primary) !important;
-                max-height: 100vh;
-                height: 100vh;
-                overflow-y: auto;
-            }
-
-            .referral-modal-header {
-                padding-top: calc(20px + var(--safe-area-top));
-                margin-left: 0;
-                margin-right: 0;
-                padding-left: 20px;
-                padding-right: 20px;
-                background: var(--bg-primary) !important;
-            }
-
-            .referral-modal-body {
-                flex: 1;
-                min-height: 0;
-                padding: 20px;
-                padding-bottom: calc(20px + var(--safe-area-bottom));
-                background: var(--bg-primary) !important;
-                margin-left: 0;
-                margin-right: 0;
-            }
-
-            .referral-modal-close {
-                display: flex !important;
-                visibility: visible !important;
-                opacity: 1 !important;
-                background: var(--bg-secondary) !important;
-                border: 1px solid var(--border-color) !important;
-                color: var(--text-primary) !important;
-            }
-        }
-
-        .modal-header {
-            text-align: center;
-        }
-
-        .modal-title {
-            font-size: 20px;
-            font-weight: 800;
-            color: var(--text-primary);
-            margin-bottom: 4px;
-        }
-
-        .modal-subtitle {
-            font-size: 14px;
-            color: var(--text-secondary);
-            margin-bottom: 24px;
-        }
-
-        #topupModalBody {
-            padding: 0 20px 20px 20px;
-        }
-
-        .payment-methods-list {
-            display: flex;
-            flex-direction: column;
-            gap: 0;
-        }
-
-        .payment-option-group {
-            margin-top: 16px;
-        }
-
-        .payment-option-title {
-            font-size: 14px;
-            font-weight: 600;
-            margin-bottom: 8px;
-        }
-
-        .payment-option-list {
-            display: flex;
-            flex-direction: column;
-            gap: 0;
-        }
-
-        .payment-option-button {
-            display: flex;
-            align-items: center;
-            justify-content: flex-start;
-            gap: 12px;
-            padding: 16px;
-            border: none;
-            border-radius: var(--radius-lg);
-            background: var(--bg-secondary);
-            box-shadow: var(--shadow-sm);
-            cursor: pointer;
-            transition: all 0.3s ease;
-            margin-bottom: 12px;
-        }
-
-        .payment-option-button:hover {
-            transform: translateY(-2px);
-            box-shadow: var(--shadow-md);
-            background: rgba(var(--primary-rgb), 0.05);
-        }
-
-        .payment-option-button.active {
-            background: rgba(var(--primary-rgb), 0.1);
-            box-shadow: var(--shadow-md);
-            transform: translateY(-2px);
-        }
-
-        .payment-option-icon {
-            font-size: 20px;
-        }
-
-        .payment-option-text {
-            display: flex;
-            flex-direction: column;
-            align-items: flex-start;
-            gap: 2px;
-            text-align: left;
-        }
-
-        .payment-option-label {
-            font-size: 14px;
-            font-weight: 600;
-        }
-
-        .payment-option-description {
-            font-size: 13px;
-            color: var(--text-secondary);
-        }
-
-        .payment-method-card {
-            border: none;
-            border-radius: var(--radius-lg);
-            padding: 16px;
-            background: var(--bg-secondary);
-            box-shadow: var(--shadow-sm);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            gap: 12px;
-            transition: all 0.3s ease;
-            margin-bottom: 12px;
-            width: 100%;
-            max-width: 100%;
-            box-sizing: border-box;
-        }
-
-        .payment-method-card:hover {
-            transform: translateY(-2px);
-            box-shadow: var(--shadow-md);
-            background: rgba(var(--primary-rgb), 0.05);
-        }
-
-        .payment-method-card:active {
-            transform: translateY(0);
-            box-shadow: var(--shadow-sm);
-        }
-
-        .payment-method-info {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            flex: 1;
-        }
-
-        .payment-method-icon {
-            font-size: 26px;
-            width: 40px;
-            height: 40px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex-shrink: 0;
-        }
-
-        .payment-method-icon img {
-            width: 100%;
-            height: 100%;
-            object-fit: contain;
-        }
-
-        .payment-method-text {
-            display: flex;
-            flex-direction: column;
-            gap: 2px;
-            flex: 1;
-            min-width: 0;
-            align-items: flex-start;
-        }
-
-        .payment-method-label {
-            font-weight: 700;
-            color: var(--text-primary);
-            font-size: 15px;
-            line-height: 1.4;
-            word-wrap: break-word;
-        }
-
-        .payment-method-description {
-            font-size: 13px;
-            color: var(--text-secondary);
-        }
-
-        .amount-form {
-            display: flex;
-            flex-direction: column;
-            gap: 16px;
-        }
-
-        .amount-input {
-            width: 100%;
-            padding: 12px 14px;
-            border-radius: var(--radius);
-            border: 2px solid var(--border-color);
-            background: var(--bg-secondary);
-            color: var(--text-primary);
-            font-size: 16px;
-            font-weight: 600;
-            transition: border-color 0.2s ease, box-shadow 0.2s ease;
-        }
-
-        .amount-input:focus {
-            outline: none;
-            border-color: var(--primary);
-            box-shadow: var(--shadow-sm);
-        }
-
-        .amount-hint {
-            font-size: 13px;
-            color: var(--text-secondary);
-            line-height: 1.5;
-        }
-
-        .amount-hint.warning {
-            color: var(--warning);
-        }
-
-        .modal-actions {
-            display: flex;
-            gap: 12px;
-            justify-content: center;
-        }
-
-        .modal-button {
-            flex: 1;
-            padding: 10px 14px;
-            border-radius: var(--radius);
-            border: none;
-            font-weight: 600;
-            font-size: 13px;
-            cursor: pointer;
-            transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
-        }
-
-        .modal-button.primary {
-            background: var(--primary);
-            color: var(--tg-theme-button-text-color);
-        }
-
-        .modal-button.secondary {
-            background: transparent;
-            color: var(--text-primary);
-            border: 2px solid var(--border-color);
-        }
-
-        #topupModalCancelBtn {
-            padding: 8px 14px;
-            font-size: 13px;
-        }
-
-        .modal-button:hover:not(:disabled) {
-            box-shadow: var(--shadow-sm);
-            transform: translateY(-1px);
-        }
-
-        .modal-button:disabled {
-            opacity: 0.6;
-            cursor: not-allowed;
-            box-shadow: none;
-            transform: none;
-        }
-
-        .modal-error {
-            font-size: 13px;
-            color: var(--danger);
-            text-align: center;
-        }
-
-        .payment-summary {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 8px;
-            text-align: center;
-        }
-
-        .payment-status {
-            margin-top: 16px;
-            padding: 14px 16px;
-            border-radius: var(--radius);
-            border: 1px solid rgba(var(--primary-rgb), 0.2);
-            background: rgba(var(--primary-rgb), 0.06);
-            display: flex;
-            gap: 12px;
-            align-items: flex-start;
-        }
-
-        .payment-status.success {
-            border-color: rgba(16, 185, 129, 0.35);
-            background: rgba(16, 185, 129, 0.1);
-        }
-
-        .payment-status.error {
-            border-color: rgba(var(--danger-rgb), 0.35);
-            background: rgba(var(--danger-rgb), 0.1);
-        }
-
-        .payment-status-icon {
-            width: 24px;
-            height: 24px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 18px;
-        }
-
-        .payment-status-spinner {
-            width: 16px;
-            height: 16px;
-            border: 2px solid rgba(var(--primary-rgb), 0.2);
-            border-top-color: var(--primary);
-            border-radius: 50%;
-            animation: spin 0.8s linear infinite;
-        }
-
-        .payment-status-content {
-            flex: 1;
-        }
-
-        .payment-status-title {
-            font-size: 14px;
-            font-weight: 600;
-        }
-
-        .payment-status-description {
-            margin-top: 4px;
-            font-size: 13px;
-            color: var(--text-secondary);
-            line-height: 1.4;
-        }
-
-        .payment-summary-amount {
-            font-size: 22px;
-            font-weight: 700;
-            color: var(--text-primary);
-        }
-
-        .promo-code-card {
-            padding: 20px;
-            display: flex;
-            flex-direction: column;
-            gap: 16px;
-        }
-
-        .promo-code-header {
-            display: flex;
-            flex-direction: column;
-            gap: 6px;
-        }
-
-        .promo-code-title {
-            font-size: 18px;
-            font-weight: 700;
-            color: var(--text-primary);
-        }
-
-        .promo-code-subtitle {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-
-        .promo-code-form {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-        }
-
-        .promo-code-input-group {
-            display: flex;
-            align-items: stretch;
-            gap: 8px;
-            padding: 12px 14px;
-            background: rgba(var(--primary-rgb), 0.04);
-            border: 2px solid rgba(var(--primary-rgb), 0.12);
-            border-radius: var(--radius-lg);
-            box-shadow: var(--shadow-sm);
-            transition: border-color 0.2s ease, box-shadow 0.2s ease;
-            width: 100%;
-            max-width: 100%;
-            box-sizing: border-box;
-            flex-wrap: wrap;
-        }
-
-        .promo-code-input-group:focus-within {
-            border-color: rgba(var(--primary-rgb), 0.45);
-            box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.18);
-        }
-
-        .promo-code-input {
-            flex: 1 1 auto;
-            border: none;
-            background: transparent;
-            color: var(--text-primary);
-            font-size: 16px;
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 1.2px;
-            min-width: 120px;
-            max-width: calc(100% - 120px);
-        }
-
-        .promo-code-input::placeholder {
-            color: var(--text-secondary);
-            opacity: 0.75;
-        }
-
-        .promo-code-input:focus {
-            outline: none;
-        }
-
-        .promo-code-button {
-            border: none;
-            border-radius: var(--radius);
-            background: var(--primary);
-            color: var(--tg-theme-button-text-color);
-            font-weight: 600;
-            font-size: 12px;
-            padding: 8px 14px;
-            cursor: pointer;
-            transition: transform 0.2s ease, box-shadow 0.2s ease;
-            white-space: nowrap;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex-shrink: 0;
-            min-width: 90px;
-            max-width: none;
-        }
-
-        .promo-code-button:hover:not(:disabled) {
-            transform: translateY(-1px);
-            box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.3);
-        }
-
-        .promo-code-button:disabled {
-            opacity: 0.6;
-            cursor: not-allowed;
-            box-shadow: none;
-        }
-
-        .promo-code-feedback {
-            font-size: 14px;
-            border-radius: var(--radius);
-            padding: 12px 14px;
-            line-height: 1.5;
-        }
-
-        .promo-code-feedback.hidden {
-            display: none;
-        }
-
-        .promo-code-feedback.error {
-            background: rgba(239, 68, 68, 0.12);
-            color: #b91c1c;
-            border: 1px solid rgba(239, 68, 68, 0.3);
-        }
-
-        .promo-code-feedback.success {
-            background: rgba(16, 185, 129, 0.12);
-            color: #047857;
-            border: 1px solid rgba(16, 185, 129, 0.3);
-        }
-
-        .promo-code-result {
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            border-radius: var(--radius);
-            padding: 14px 16px;
-            background: rgba(var(--primary-rgb), 0.06);
-            border: 1px solid rgba(var(--primary-rgb), 0.1);
-        }
-
-        .promo-code-result.hidden {
-            display: none;
-        }
-
-        .promo-code-result-title {
-            font-size: 13px;
-            font-weight: 700;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-            color: var(--text-secondary);
-        }
-
-        .promo-code-result-list {
-            list-style: none;
-            display: flex;
-            flex-direction: column;
-            gap: 6px;
-            margin: 0;
-            padding: 0;
-        }
-
-        .promo-code-result-item {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            font-size: 15px;
-            color: var(--text-primary);
-        }
-
-        .promo-code-result-icon {
-            font-size: 18px;
-        }
-
-        /* Referral Section */
-        .referral-card-summary {
-            margin-left: auto;
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            flex-wrap: wrap;
-            justify-content: flex-end;
-        }
-
-        .referral-card-summary-item {
-            display: flex;
-            flex-direction: column;
-            gap: 4px;
-            align-items: flex-end;
-            padding: 8px 12px;
-            border-radius: var(--radius-sm);
-            background: rgba(var(--primary-rgb), 0.08);
-        }
-
-        .referral-card-summary-label {
-            font-size: 11px;
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-            color: var(--text-secondary);
-        }
-
-        .referral-card-summary-value {
-            font-size: 15px;
-            font-weight: 700;
-            color: var(--text-primary);
-        }
-
-        .referral-content {
-            display: flex;
-            flex-direction: column;
-            gap: 16px;
-            margin-top: 16px;
-        }
-
-        .referral-link-section {
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-            padding: 16px;
-            border: 1px solid var(--border-color);
-            border-radius: var(--radius);
-            background: rgba(var(--primary-rgb), 0.04);
-        }
-
-        .referral-link-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            gap: 12px;
-        }
-
-        .referral-link-label {
-            font-size: 13px;
-            font-weight: 600;
-            color: var(--text-secondary);
-        }
-
-        .referral-link-value {
-            font-size: 15px;
-            font-weight: 600;
-            color: var(--primary);
-            word-break: break-word;
-        }
-
-        .referral-copy-btn {
-            border: none;
-            border-radius: var(--radius-sm);
-            padding: 8px 12px;
-            background: var(--primary);
-            color: var(--tg-theme-button-text-color);
-            font-size: 13px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: transform 0.2s ease, box-shadow 0.2s ease;
-        }
-
-        .referral-copy-btn:disabled {
-            opacity: 0.6;
-            cursor: not-allowed;
-        }
-
-        .referral-copy-btn:not(:disabled):active {
-            transform: scale(0.98);
-        }
-
-        .referral-stats {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
-            gap: 12px;
-        }
-
-        .referral-stat-card {
-            border: 1px solid var(--border-color);
-            border-radius: var(--radius);
-            padding: 12px;
-            background: rgba(var(--primary-rgb), 0.03);
-        }
-
-        .referral-stat-label {
-            font-size: 12px;
-            text-transform: uppercase;
-            color: var(--text-secondary);
-            letter-spacing: 0.04em;
-            margin-bottom: 6px;
-            display: block;
-        }
-
-        .referral-stat-value {
-            font-size: 18px;
-            font-weight: 700;
-        }
-
-        .referral-terms {
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-        }
-
-        .referral-section-title {
-            font-size: 13px;
-            font-weight: 700;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-        }
-
-        .referral-terms-list {
-            list-style: none;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            margin: 0;
-            padding: 0;
-        }
-
-        .referral-term-item {
-            display: flex;
-            justify-content: space-between;
-            gap: 12px;
-            padding: 12px;
-            border: 1px solid var(--border-color);
-            border-radius: var(--radius);
-            background: rgba(var(--primary-rgb), 0.02);
-        }
-
-        .referral-term-label {
-            font-size: 13px;
-            color: var(--text-secondary);
-        }
-
-        .referral-term-value {
-            font-size: 14px;
-            font-weight: 600;
-        }
-
-        .referral-toggle-btn {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            gap: 8px;
-            border: 1px solid var(--border-color);
-            border-radius: var(--radius);
-            padding: 10px 14px;
-            background: transparent;
-            font-size: 14px;
-            font-weight: 600;
-            color: var(--text-primary);
-            cursor: pointer;
-            transition: background 0.2s ease, transform 0.2s ease;
-        }
-
-        .referral-toggle-btn:hover {
-            background: rgba(var(--primary-rgb), 0.06);
-        }
-
-        .referral-toggle-btn:active {
-            transform: scale(0.98);
-        }
-
-        .referral-list {
-            list-style: none;
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-            margin: 0;
-            padding: 0;
-        }
-
-        .referral-item {
-            border: 1px solid var(--border-color);
-            border-radius: var(--radius);
-            padding: 14px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            background: rgba(var(--primary-rgb), 0.02);
-        }
-
-        .referral-item-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            gap: 12px;
-        }
-
-        .referral-item-name {
-            font-size: 15px;
-            font-weight: 600;
-        }
-
-        .referral-item-username {
-            font-size: 13px;
-            color: var(--text-secondary);
-            margin-top: 2px;
-        }
-
-        .referral-status {
-            font-size: 12px;
-            font-weight: 600;
-            padding: 4px 8px;
-            border-radius: 999px;
-            text-transform: uppercase;
-            letter-spacing: 0.04em;
-        }
-
-        .referral-status.active {
-            background: rgba(16, 185, 129, 0.12);
-            color: #047857;
-        }
-
-        .referral-status.inactive {
-            background: rgba(148, 163, 184, 0.12);
-            color: #475569;
-        }
-
-        .referral-status.new {
-            background: rgba(59, 130, 246, 0.12);
-            color: #1d4ed8;
-        }
-
-        .referral-item-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-            gap: 10px;
-        }
-
-        .referral-item-metric {
-            display: flex;
-            flex-direction: column;
-            gap: 4px;
-        }
-
-        .referral-item-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-        }
-
-        .referral-item-value {
-            font-size: 14px;
-            font-weight: 600;
-        }
-
-        .referral-item-dates {
-            display: flex;
-            flex-direction: column;
-            gap: 4px;
-        }
-
-        .referral-item-date {
-            font-size: 12px;
-            color: var(--text-secondary);
-        }
-
-        .referral-item-date strong {
-            color: var(--text-primary);
-            font-weight: 600;
-        }
-
-        /* Transaction History */
-        .history-list,
-        .transaction-history-list {
-            list-style: none;
-            padding: 0;
-            margin: 0;
-        }
-
-        .transaction-history-list li {
-            list-style: none;
-        }
-
-        .transaction-history-list li::before,
-        .transaction-history-list li::after {
-            content: none !important;
-        }
-
-        .history-item {
-            padding: 16px;
-            border-bottom: 1px solid var(--border-color);
-            transition: all 0.3s ease;
-            cursor: pointer;
-            width: 100%;
-            max-width: 100%;
-            box-sizing: border-box;
-            overflow-wrap: break-word;
-            word-wrap: break-word;
-            list-style: none !important;
-        }
-
-        .history-item::before,
-        .history-item::after {
-            content: none !important;
-            display: none !important;
-        }
-
-        .history-item:last-child {
-            border-bottom: none;
-        }
-
-        .history-item:hover {
-            background: rgba(var(--primary-rgb), 0.03);
-            padding-left: 20px;
-        }
-
-        .history-item-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            margin-bottom: 8px;
-            gap: 12px;
-            flex-wrap: wrap;
-            width: 100%;
-            max-width: 100%;
-            box-sizing: border-box;
-            overflow: hidden;
-        }
-
-        .history-amount {
-            font-size: 18px;
-            font-weight: 700;
-            display: flex;
-            align-items: center;
-            gap: 4px;
-        }
-
-        .history-amount.positive {
-            color: var(--success);
-        }
-
-        .history-amount.negative {
-            color: var(--danger);
-        }
-
-        .history-amount-icon {
-            width: 20px;
-            height: 20px;
-        }
-
-        .history-type {
-            font-size: 14px;
-            font-weight: 600;
-            color: var(--text-primary);
-            padding: 4px 10px;
-            background: var(--bg-primary);
-            border-radius: var(--radius-sm);
-            white-space: nowrap;
-            flex-shrink: 0;
-        }
-
-        .history-meta {
-            font-size: 13px;
-            color: var(--text-secondary);
-            line-height: 1.5;
-            word-break: break-word;
-            overflow-wrap: break-word;
-            width: 100%;
-            max-width: 100%;
-            box-sizing: border-box;
-            display: flex;
-            flex-direction: column;
-            gap: 4px;
-            overflow: hidden;
-        }
-
-        .history-meta::before,
-        .history-meta::after {
-            content: none !important;
-            display: none !important;
-        }
-
-        .history-meta-item {
-            display: block;
-        }
-
-        .history-meta-item::before,
-        .history-meta-item::after {
-            content: none !important;
-        }
-
-        .history-meta-separator {
-            display: none !important;
-        }
-
-        .history-meta-separator::before,
-        .history-meta-separator::after {
-            content: none !important;
-        }
-
-        .history-description {
-            font-size: 13px;
-            color: var(--text-secondary);
-            margin-top: 8px;
-            padding: 8px;
-            background: var(--bg-primary);
-            border-radius: var(--radius-sm);
-            line-height: 1.5;
-        }
-
-        /* Servers & Devices */
-        .server-list,
-        .device-list {
-            list-style: none;
-            padding: 0;
-            margin: 0;
-            display: grid;
-            gap: 12px;
-        }
-
-        .server-item {
-            display: flex;
-            align-items: center;
-            gap: 14px;
-            padding: 16px;
-            background: linear-gradient(135deg, var(--bg-primary), rgba(var(--primary-rgb), 0.02));
-            border-radius: var(--radius-lg);
-            border: 2px solid var(--border-color);
-            transition: all 0.3s ease;
-            cursor: pointer;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .server-item::after {
-            content: '';
-            position: absolute;
-            top: 0;
-            right: 0;
-            width: 60px;
-            height: 100%;
-            background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), 0.05));
-            transform: translateX(100%);
-            transition: transform 0.5s ease;
-        }
-
-        .server-item:hover {
-            border-color: var(--primary);
-            transform: translateY(-2px);
-            box-shadow: var(--shadow-md);
-            background: linear-gradient(135deg, var(--bg-primary), rgba(var(--primary-rgb), 0.05));
-        }
-
-        .server-item:hover::after {
-            transform: translateX(0);
-        }
-
-        .server-flag {
-            width: 48px;
-            height: 48px;
-            border-radius: 50%;
-            background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.15), rgba(var(--primary-rgb), 0.05));
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 28px;
-            flex-shrink: 0;
-            box-shadow: var(--shadow-sm);
-        }
-
-        .server-info {
-            flex: 1;
-            min-width: 0;
-        }
-
-        .server-name {
-            font-size: 16px;
-            font-weight: 600;
-            color: var(--text-primary);
-            margin-bottom: 4px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-
-        .server-status {
-            display: flex;
-            align-items: center;
-            gap: 6px;
-            font-size: 13px;
-            color: var(--text-secondary);
-        }
-
-        .server-status::before {
-            content: '';
-            width: 6px;
-            height: 6px;
-            border-radius: 50%;
-            background: var(--success);
-            animation: pulse 2s infinite;
-        }
-
-        .device-item {
-            padding: 18px;
-            background: linear-gradient(135deg, var(--bg-primary), rgba(var(--primary-rgb), 0.02));
-            border-radius: var(--radius-lg);
-            border: 2px solid var(--border-color);
-            transition: all 0.3s ease;
-            cursor: default;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .device-item::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 4px;
-            height: 100%;
-            background: linear-gradient(180deg, var(--primary), rgba(var(--primary-rgb), 0.3));
-            opacity: 0;
-            transition: opacity 0.3s ease;
-        }
-
-        .device-item:hover {
-            border-color: var(--primary);
-            transform: translateY(-2px);
-            box-shadow: var(--shadow-md);
-            background: linear-gradient(135deg, var(--bg-primary), rgba(var(--primary-rgb), 0.05));
-        }
-
-        .device-item:hover::before {
-            opacity: 1;
-        }
-
-        .device-header {
-            display: flex;
-            align-items: flex-start;
-            justify-content: space-between;
-            gap: 12px;
-            margin-bottom: 12px;
-        }
-
-        .device-title {
-            font-size: 16px;
-            font-weight: 600;
-            color: var(--text-primary);
-            margin: 0;
-            flex: 1;
-            word-break: break-word;
-        }
-
-        .device-actions {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            flex-shrink: 0;
-        }
-
-        .device-remove-button {
-            width: 36px;
-            height: 36px;
-            border-radius: var(--radius);
-            border: 2px solid rgba(var(--danger-rgb), 0.4);
-            background: rgba(var(--danger-rgb), 0.08);
-            color: var(--danger);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 18px;
-            font-weight: 700;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .device-remove-button:hover {
-            background: rgba(var(--danger-rgb), 0.16);
-            border-color: rgba(var(--danger-rgb), 0.6);
-            box-shadow: var(--shadow-sm);
-            transform: translateY(-1px);
-        }
-
-        .device-remove-button:active {
-            transform: scale(0.95);
-        }
-
-        .device-remove-button:disabled,
-        .device-remove-button.is-removing {
-            opacity: 0.6;
-            cursor: default;
-            box-shadow: none;
-            transform: none;
-        }
-
-        .device-remove-button span {
-            line-height: 1;
-            transition: opacity 0.2s ease;
-        }
-
-        .device-remove-button.is-removing span {
-            opacity: 0;
-        }
-
-        .device-remove-button.is-removing::after {
-            content: '';
-            position: absolute;
-            width: 16px;
-            height: 16px;
-            border-radius: 50%;
-            border: 2px solid currentColor;
-            border-right-color: transparent;
-            animation: spin 0.8s linear infinite;
-        }
-
-        .device-type-badge {
-            padding: 4px 10px;
-            background: rgba(var(--primary-rgb), 0.1);
-            color: var(--primary);
-            border-radius: var(--radius-sm);
-            font-size: 11px;
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-        }
-
-        .device-meta {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-            gap: 12px;
-        }
-
-        .device-meta-item {
-            display: flex;
-            flex-direction: column;
-            gap: 2px;
-        }
-
-        .device-meta-label {
-            font-size: 11px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-            opacity: 0.7;
-        }
-
-        .device-meta-value {
-            font-size: 13px;
-            color: var(--text-primary);
-            font-weight: 500;
-        }
-
-        /* Empty States */
-        .empty-state {
-            text-align: center;
-            padding: 32px 20px;
-            color: var(--text-secondary);
-            font-size: 14px;
-        }
-
-        .empty-state::before {
-            content: '📭';
-            display: block;
-            font-size: 48px;
-            margin-bottom: 12px;
-            opacity: 0.5;
-        }
-
-        /* Buttons */
-        .btn {
-            width: 100%;
-            padding: 12px 18px;
-            border: none;
-            border-radius: var(--radius);
-            font-size: 13px;
-            font-weight: 600;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 8px;
-            transition: all 0.3s ease;
-            position: relative;
-            overflow: hidden;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-        }
-
-        .btn::before {
-            content: '';
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            width: 0;
-            height: 0;
-            border-radius: 50%;
-            background: rgba(255, 255, 255, 0.3);
-            transform: translate(-50%, -50%);
-            transition: width 0.6s, height 0.6s;
-        }
-
-        .btn:active::before {
-            width: 300px;
-            height: 300px;
-        }
-
-        .btn-primary {
-            background: var(--accent-gold);
-            color: #000000;
-            box-shadow: 0 3px 12px rgba(59, 130, 246, 0.25);
-            font-weight: 600;
-        }
-
-        .btn-primary:hover:not(:disabled) {
-            transform: translateY(-1px);
-            box-shadow: 0 5px 18px rgba(59, 130, 246, 0.35);
-        }
-
-        .btn-primary:active {
-            transform: scale(0.98);
-        }
-
-        .btn-secondary {
-            background: var(--bg-primary);
-            color: var(--primary);
-            border: 2px solid var(--primary);
-        }
-
-        .btn-secondary:hover:not(:disabled) {
-            background: rgba(var(--primary-rgb), 0.1);
-            transform: translateY(-2px);
-            box-shadow: var(--shadow-sm);
-        }
-
-        .btn:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-            transform: none !important;
-        }
-
-        .btn-icon {
-            width: 20px;
-            height: 20px;
-            stroke-width: 2.5;
-        }
-
-        .btn-group {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-            margin: 20px 0;
-        }
-
-        /* App Installation */
-        .platform-selector {
-            display: grid;
-            grid-template-columns: repeat(4, 1fr);
-            gap: 10px;
-            margin-top: 16px;
-            margin-bottom: 20px;
-        }
-
-        .platform-subselector {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 8px;
-            margin: 0 0 16px;
-        }
-
-        .platform-btn {
-            padding: 10px 6px;
-            background: var(--bg-primary);
-            border: 2px solid var(--border-color);
-            border-radius: var(--radius);
-            font-size: 12px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            text-align: center;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 3px;
-        }
-
-        .platform-btn:hover {
-            transform: translateY(-1px);
-            box-shadow: var(--shadow-sm);
-        }
-
-        .platform-btn.active {
-            border-color: var(--primary);
-            background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.1), rgba(var(--primary-rgb), 0.05));
-            color: var(--primary);
-        }
-
-        .platform-filter-btn {
-            padding: 8px 14px;
-            border-radius: var(--radius-sm);
-            border: 1px solid var(--border-color);
-            background: var(--bg-secondary);
-            color: var(--text-secondary);
-            font-size: 13px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.2s ease;
-        }
-
-        .platform-filter-btn:hover {
-            border-color: var(--primary);
-            color: var(--primary);
-        }
-
-        .platform-filter-btn.active {
-            border-color: var(--primary);
-            color: var(--primary);
-            background: rgba(var(--primary-rgb), 0.1);
-        }
-
-        .platform-icon {
-            width: 24px;
-            height: 24px;
-            flex-shrink: 0;
-        }
-
-        .app-card {
-            background: var(--bg-primary);
-            border-radius: var(--radius);
-            padding: 16px;
-            margin-bottom: 12px;
-            border: 2px solid var(--border-color);
-            transition: all 0.3s ease;
-        }
-
-        .app-card:hover {
-            transform: translateY(-2px);
-            box-shadow: var(--shadow-sm);
-        }
-
-        .app-card.featured {
-            border-color: var(--primary);
-            background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.05), rgba(var(--primary-rgb), 0.02));
-        }
-
-        .app-header {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            margin-bottom: 16px;
-        }
-
-        .app-icon {
-            width: 48px;
-            height: 48px;
-            border-radius: var(--radius);
-            background: linear-gradient(135deg, var(--primary), rgba(var(--primary-rgb), 0.7));
-            color: white;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 24px;
-            font-weight: 700;
-            box-shadow: var(--shadow-sm);
-        }
-
-        .app-info {
-            flex: 1;
-        }
-
-        .app-name {
-            font-size: 16px;
-            font-weight: 700;
-            color: var(--text-primary);
-            margin-bottom: 4px;
-        }
-
-        .app-meta {
-            display: flex;
-            flex-wrap: wrap;
-            align-items: center;
-            gap: 6px;
-        }
-
-        .featured-badge {
-            display: inline-block;
-            background: linear-gradient(135deg, var(--primary), rgba(var(--primary-rgb), 0.8));
-            color: white;
-            font-size: 11px;
-            font-weight: 700;
-            padding: 4px 10px;
-            border-radius: 20px;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-        }
-
-        .app-platform {
-            display: inline-flex;
-            align-items: center;
-            padding: 4px 10px;
-            border-radius: 20px;
-            background: var(--bg-secondary);
-            color: var(--text-secondary);
-            font-size: 12px;
-            font-weight: 600;
-            text-transform: none;
-            letter-spacing: 0;
-        }
-
-        .app-steps {
-            margin-top: 16px;
-        }
-
-        .step {
-            margin-bottom: 16px;
-            padding-left: 32px;
-            position: relative;
-        }
-
-        .step-number {
-            position: absolute;
-            left: 0;
-            top: 2px;
-            width: 24px;
-            height: 24px;
-            background: linear-gradient(135deg, var(--primary), rgba(var(--primary-rgb), 0.7));
-            color: white;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 12px;
-            font-weight: 700;
-        }
-
-        .step-title {
-            font-size: 14px;
-            font-weight: 600;
-            color: var(--text-primary);
-            margin-bottom: 6px;
-        }
-
-        .step-description {
-            font-size: 13px;
-            color: var(--text-secondary);
-            line-height: 1.6;
-            margin-bottom: 10px;
-        }
-
-        .step-buttons {
-            display: flex;
-            gap: 8px;
-            flex-wrap: wrap;
-        }
-
-        .step-btn {
-            padding: 8px 14px;
-            background: linear-gradient(135deg, var(--primary), rgba(var(--primary-rgb), 0.8));
-            color: white;
-            border: none;
-            border-radius: var(--radius-sm);
-            font-size: 12px;
-            font-weight: 600;
-            text-decoration: none;
-            display: inline-block;
-            transition: all 0.3s ease;
-        }
-
-        .step-btn:hover {
-            transform: translateY(-1px);
-            box-shadow: var(--shadow-sm);
-        }
-
-        /* FAQ Section */
-        .faq-list {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-        }
-
-        .faq-item {
-            background: var(--bg-primary);
-            border: 1px solid var(--border-color);
-            border-radius: var(--radius-lg);
-            padding: 0 16px;
-            transition: all 0.3s ease;
-        }
-
-        .faq-item[open] {
-            border-color: rgba(var(--primary-rgb), 0.35);
-            box-shadow: var(--shadow-sm);
-        }
-
-        .faq-question {
-            list-style: none;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            gap: 12px;
-            cursor: pointer;
-            font-weight: 700;
-            color: var(--text-primary);
-            padding: 16px 0;
-            font-size: 15px;
-            outline: none;
-        }
-
-        .faq-question::-webkit-details-marker {
-            display: none;
-        }
-
-        .faq-question-text {
-            flex: 1;
-        }
-
-        .faq-toggle-icon {
-            width: 20px;
-            height: 20px;
-            color: var(--text-secondary);
-            transition: transform 0.3s ease;
-            flex-shrink: 0;
-        }
-
-        .faq-item[open] .faq-toggle-icon {
-            transform: rotate(180deg);
-        }
-
-        .faq-answer {
-            color: var(--text-secondary);
-            font-size: 14px;
-            line-height: 1.6;
-            padding-bottom: 16px;
-            border-top: 1px solid var(--border-color);
-        }
-
-        .faq-answer > *:first-child {
-            margin-top: 16px;
-        }
-
-        .faq-answer p {
-            margin: 0 0 12px;
-        }
-
-        .faq-answer ul,
-        .faq-answer ol {
-            margin: 8px 0 16px 20px;
-        }
-
-        .faq-answer li + li {
-            margin-top: 6px;
-        }
-
-        /* Legal Documents */
-        .legal-doc-list {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-        }
-
-        #legalDocsCard {
-            margin-bottom: 32px;
-        }
-
-        .legal-doc-item {
-            background: var(--bg-primary);
-            border: 1px solid var(--border-color);
-            border-radius: var(--radius-lg);
-            padding: 0 16px;
-            transition: all 0.3s ease;
-            width: 100%;
-            max-width: 100%;
-            box-sizing: border-box;
-            overflow: hidden;
-        }
-
-        .legal-doc-item[open] {
-            border-color: rgba(var(--primary-rgb), 0.35);
-            box-shadow: var(--shadow-sm);
-        }
-
-        .legal-doc-summary {
-            list-style: none;
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            cursor: pointer;
-            font-weight: 700;
-            color: var(--text-primary);
-            padding: 16px 0;
-            font-size: 15px;
-            outline: none;
-        }
-
-        .legal-doc-summary::-webkit-details-marker {
-            display: none;
-        }
-
-        .legal-doc-icon {
-            font-size: 20px;
-            line-height: 1;
-        }
-
-        .legal-doc-title {
-            flex: 1;
-            min-width: 0;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-
-        .legal-doc-toggle {
-            width: 20px;
-            height: 20px;
-            color: var(--text-secondary);
-            transition: transform 0.3s ease;
-            flex-shrink: 0;
-        }
-
-        .legal-doc-item[open] .legal-doc-toggle {
-            transform: rotate(180deg);
-        }
-
-        .legal-doc-body {
-            color: var(--text-secondary);
-            font-size: 14px;
-            line-height: 1.6;
-            padding-bottom: 16px;
-            border-top: 1px solid var(--border-color);
-            width: 100%;
-            max-width: 100%;
-            box-sizing: border-box;
-            overflow-wrap: break-word;
-            word-wrap: break-word;
-        }
-
-        .legal-doc-body > *:first-child {
-            margin-top: 16px;
-        }
-
-        .legal-doc-updated {
-            font-size: 12px;
-            font-weight: 600;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 0.04em;
-            margin-bottom: 12px;
-        }
-
-        .legal-doc-content p {
-            margin: 0 0 12px;
-        }
-
-        .legal-doc-content ul,
-        .legal-doc-content ol {
-            margin: 8px 0 16px 20px;
-        }
-
-        .legal-doc-content li + li {
-            margin-top: 6px;
-        }
-
-        .legal-doc-content table {
-            width: 100%;
-            border-collapse: collapse;
-            margin: 12px 0;
-        }
-
-        .legal-doc-content th,
-        .legal-doc-content td {
-            border: 1px solid var(--border-color);
-            padding: 8px;
-            text-align: left;
-        }
-
-        .legal-doc-content a {
-            color: var(--primary);
-            text-decoration: none;
-        }
-
-        .legal-doc-content a:hover {
-            text-decoration: underline;
-        }
-
-        .faq-answer a {
-            color: var(--primary);
-            text-decoration: none;
-            font-weight: 600;
-        }
-
-        .faq-answer a:hover {
-            text-decoration: underline;
-        }
-
-        .faq-answer code {
-            background: rgba(var(--primary-rgb), 0.08);
-            padding: 2px 4px;
-            border-radius: 4px;
-            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-            font-size: 13px;
-        }
-
-        .faq-answer pre {
-            background: rgba(var(--primary-rgb), 0.08);
-            padding: 12px;
-            border-radius: var(--radius);
-            overflow-x: auto;
-            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-            font-size: 13px;
-            margin: 16px 0;
-        }
-
-        :root[data-theme="dark"] .faq-item {
-            border-color: rgba(148, 163, 184, 0.18);
-            background: rgba(15, 23, 42, 0.75);
-        }
-
-        :root[data-theme="dark"] .faq-item[open] {
-            border-color: rgba(var(--primary-rgb), 0.45);
-            box-shadow: var(--shadow-md);
-        }
-
-        :root[data-theme="dark"] .faq-answer pre {
-            background: rgba(148, 163, 184, 0.12);
-        }
-
-        :root[data-theme="dark"] .faq-answer code {
-            background: rgba(148, 163, 184, 0.12);
-        }
-
-        .faq-question:focus-visible {
-            outline: 2px solid rgba(var(--primary-rgb), 0.35);
-            border-radius: var(--radius);
-        }
-
-        /* Hidden */
-        .hidden {
-            display: none !important;
-        }
-
-        /* Snowflakes Animation */
-        .snowflakes-container {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            max-width: 100vw;
-            height: 100%;
-            max-height: 100vh;
-            pointer-events: none;
-            z-index: 100;
-            overflow: hidden;
-            box-sizing: border-box;
-        }
-
-        /* Hide snowflakes when modal is open */
-        body.modal-open .snowflakes-container {
-            display: none;
-        }
-
-        .snowflake {
-            position: absolute;
-            top: -10px;
-            color: rgba(255, 255, 255, 0.8);
-            font-size: 1em;
-            font-family: Arial, sans-serif;
-            text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
-            animation: snowfall linear infinite;
-            user-select: none;
-            will-change: transform;
-        }
-
-        @keyframes snowfall {
-            0% {
-                transform: translateY(0) translateX(0) rotate(0deg);
-                opacity: 1;
-            }
-            100% {
-                transform: translateY(100vh) translateX(var(--snowflake-x-offset, 0px)) rotate(360deg);
-                opacity: 0;
-            }
-        }
-
-        .snowflakes-container.hidden {
-            display: none;
-        }
-
-        /* Floating connect button */
-        .floating-connect-button {
-            position: fixed;
-            right: 16px;
-            bottom: 24px;
-            border: none;
-            border-radius: 999px;
-            background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.95), rgba(59, 130, 246, 0.95));
-            color: var(--tg-theme-button-text-color);
-            box-shadow: 0 12px 32px rgba(var(--primary-rgb), 0.35);
-            padding: 0;
-            cursor: pointer;
-            transition: transform 0.2s ease, box-shadow 0.3s ease, opacity 0.2s ease;
-            width: min(320px, 50vw);
-            min-width: 200px;
-            z-index: 950;
-        }
-
-        .floating-connect-button:disabled {
-            cursor: not-allowed;
-            opacity: 0.6;
-            box-shadow: none;
-        }
-
-        .floating-connect-button:not(:disabled):hover {
-            transform: translateY(-2px);
-            box-shadow: 0 16px 40px rgba(var(--primary-rgb), 0.45);
-        }
-
-        .floating-connect-button__content {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 10px;
-            padding: 16px 24px;
-            font-weight: 700;
-            font-size: 15px;
-        }
-
-        .floating-connect-button__icon {
-            width: 22px;
-            height: 22px;
-        }
-
-        .floating-connect-button__label {
-            white-space: nowrap;
-        }
-
-        @media (max-width: 480px) {
-            .floating-connect-button {
-                left: 16px;
-                width: calc(100vw - 32px);
-                min-width: 0;
-            }
-        }
-
-        /* Installation modal */
-        .guide-modal-backdrop {
-            position: fixed;
-            inset: 0;
-            background: rgba(15, 23, 42, 0.4);
-            display: flex;
-            align-items: flex-end;
-            justify-content: center;
-            padding: 24px 16px;
-            z-index: 2000;
-            backdrop-filter: blur(6px);
-        }
-
-        .guide-modal {
-            background: var(--bg-primary);
-            border-radius: 24px 24px 16px 16px;
-            width: min(480px, 100%);
-            max-height: min(95vh, 800px);
-            box-shadow: var(--shadow-lg);
-            display: flex;
-            flex-direction: column;
-            overflow: hidden;
-            min-height: 0;
-        }
-
-        .guide-modal-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 20px 24px 12px;
-        }
-
-        .guide-modal-title {
-            font-size: 18px;
-            font-weight: 700;
-        }
-
-        .guide-modal-close {
-            width: 40px;
-            height: 40px;
-            border-radius: 50%;
-            border: 2px solid var(--border-color);
-            background: var(--bg-secondary);
-            color: var(--text-secondary);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            transition: all 0.2s ease;
-        }
-
-        .guide-modal-close:hover {
-            border-color: var(--primary);
-            color: var(--primary);
-        }
-
-        .guide-modal-body {
-            padding: 0 24px 24px 24px;
-            padding-bottom: 40px;
-            overflow-y: auto;
-            flex: 1;
-            min-height: 0;
-            -webkit-overflow-scrolling: touch;
-            overscroll-behavior: contain;
-        }
-
-        .guide-modal-footer {
-            padding: 16px 24px 24px;
-            border-top: 1px solid var(--border-color);
-            background: linear-gradient(180deg, rgba(var(--primary-rgb), 0.05), rgba(var(--primary-rgb), 0));
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-            flex-shrink: 0;
-        }
-
-        .guide-modal-footer .btn {
-            width: 100%;
-        }
-
-        @media (min-width: 420px) {
-            .guide-modal-footer {
-                flex-direction: row;
-                justify-content: flex-end;
-            }
-
-            .guide-modal-footer .btn {
-                width: auto;
-            }
-        }
-
-        @media (max-width: 600px) {
-            .guide-modal-backdrop {
-                align-items: stretch;
-                padding: 0;
-            }
-
-            .guide-modal {
-                width: 100vw;
-                max-height: none;
-                height: 100vh;
-                border-radius: 0;
-                box-shadow: none;
-                min-height: 0;
-            }
-
-            .guide-modal-header {
-                padding: calc(16px + env(safe-area-inset-top)) 16px 12px;
-            }
-
-            .guide-modal-body {
-                padding: 0 16px 16px;
-            }
-
-            .guide-modal-footer {
-                padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
-            }
-        }
-
-        .installation-card {
-            background: transparent;
-            box-shadow: none;
-            margin-bottom: 0;
-        }
-
-        .installation-card-content {
-            padding: 0;
-        }
-
-        .step-final-action {
-            margin-top: 16px;
-        }
-
-        .step-final-button {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            gap: 6px;
-            padding: 10px 16px;
-            border-radius: 999px;
-            font-weight: 600;
-            font-size: 12px;
-            color: var(--tg-theme-button-text-color);
-            background: linear-gradient(135deg, rgba(var(--primary-rgb), 1), rgba(59, 130, 246, 0.9));
-            box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.3);
-            text-decoration: none;
-            border: none;
-            cursor: pointer;
-            transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
-        }
-
-        .step-final-button:disabled {
-            cursor: not-allowed;
-            opacity: 0.6;
-            box-shadow: none;
-        }
-
-        .step-final-button:not(:disabled):hover {
-            transform: translateY(-1px);
-            box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.4);
-        }
-
-        .step-final-button svg {
-            width: 18px;
-            height: 18px;
-        }
-
-        /* Mobile Optimizations */
-        @media (max-width: 480px) {
-            .container {
-                padding: 12px;
-            }
-
-            .promo-offer-card {
-                padding: 16px;
-            }
-
-            .promo-offer-title {
-                font-size: 16px;
-            }
-
-            .promo-offer-badge {
-                font-size: 14px;
-                padding: 5px 10px;
-            }
-
-            .stats-grid {
-                grid-template-columns: repeat(3, 1fr);
-                gap: 8px;
-            }
-
-            .stat-value {
-                font-size: 24px;
-            }
-
-            .promo-code-input-group {
-                flex-direction: column;
-                align-items: stretch;
-                padding: 16px;
-                gap: 10px;
-            }
-
-            .promo-code-button {
-                width: 100%;
-            }
-
-            .platform-selector {
-                grid-template-columns: repeat(2, 1fr);
-            }
-
-            .referral-card-summary {
-                margin-left: 0;
-                justify-content: space-between;
-            }
-
-            .user-header {
-                padding: 16px;
-            }
-
-            .user-avatar {
-                width: 56px;
-                height: 56px;
-                font-size: 24px;
-            }
-
-            .user-name {
-                font-size: 18px;
-            }
-
-            .balance-amount {
-                font-size: 32px;
-            }
-        }
-
-        /* Dark Mode Adjustments */
-        @media (prefers-color-scheme: dark) {
-            .stat-item {
-                background: var(--bg-secondary);
-            }
-
-            .history-type {
-                background: var(--bg-secondary);
-            }
-
-            .history-description {
-                background: var(--bg-secondary);
-            }
-
-            .server-item,
-            .device-item {
-                background: var(--bg-secondary);
-            }
-
-            .app-card {
-                background: var(--bg-secondary);
-            }
-
-            .platform-btn {
-                background: var(--bg-secondary);
-            }
-
-            .platform-filter-btn {
-                background: var(--bg-secondary);
-            }
-
-            .theme-toggle .icon-sun {
-                display: none;
-            }
-
-            .theme-toggle .icon-moon {
-                display: block;
-            }
-        }
-
-        :root[data-theme="dark"] .stat-item,
-        :root[data-theme="dark"] .history-type,
-        :root[data-theme="dark"] .history-description,
-        :root[data-theme="dark"] .server-item,
-        :root[data-theme="dark"] .device-item,
-        :root[data-theme="dark"] .app-card,
-        :root[data-theme="dark"] .platform-btn,
-        :root[data-theme="dark"] .platform-filter-btn {
-            background: var(--bg-secondary);
-        }
-
-        :root[data-theme="dark"] .theme-toggle .icon-sun {
-            display: none;
-        }
-
-        :root[data-theme="dark"] .theme-toggle .icon-moon {
-            display: block;
-        }
-
-        :root[data-theme="dark"] .device-remove-button {
-            background: rgba(var(--danger-rgb), 0.12);
-            border-color: rgba(var(--danger-rgb), 0.3);
-            color: #fca5a5;
-        }
-
-        :root[data-theme="dark"] .device-remove-button:hover {
-            background: rgba(var(--danger-rgb), 0.2);
-            border-color: rgba(var(--danger-rgb), 0.5);
-            color: #fecaca;
-        }
-
-        :root[data-theme="light"] .theme-toggle .icon-moon {
-            display: none;
-        }
-
-        :root[data-theme="light"] .theme-toggle .icon-sun {
-            display: block;
-        }
-
-        :root[data-theme="dark"] .history-meta,
-        :root[data-theme="dark"] .history-description,
-        :root[data-theme="dark"] .platform-btn,
-        :root[data-theme="dark"] .info-label,
-        :root[data-theme="dark"] .info-value,
-        :root[data-theme="dark"] .card-title,
-        :root[data-theme="dark"] .stat-label,
-        :root[data-theme="dark"] .subtitle,
-        :root[data-theme="dark"] .loading-text {
-            color: var(--text-secondary);
-        }
-
-        :root[data-theme="dark"] .promo-discount-badge {
-            background: rgba(var(--primary-rgb), 0.12);
-            border-color: rgba(var(--primary-rgb), 0.2);
-        }
-
-        :root[data-theme="dark"] .promo-discount-badge.muted {
-            background: rgba(148, 163, 184, 0.15);
-            border-color: rgba(148, 163, 184, 0.25);
-            color: rgba(226, 232, 240, 0.75);
-        }
-
-        :root[data-theme="dark"] .referral-card-summary-item {
-            background: rgba(var(--primary-rgb), 0.2);
-        }
-
-        :root[data-theme="dark"] .promo-discount-badge.muted .promo-discount-value {
-            color: rgba(226, 232, 240, 0.75);
-        }
-
-        :root[data-theme="dark"] .promo-period-badge {
-            background: rgba(var(--primary-rgb), 0.12);
-            border-color: rgba(var(--primary-rgb), 0.2);
-        }
-
-        :root[data-theme="dark"] .promo-period-badge .promo-period-value {
-            color: var(--primary);
-        }
-
-        :root[data-theme="dark"] body,
-        :root[data-theme="dark"] .card,
-        :root[data-theme="dark"] .user-card,
-        :root[data-theme="dark"] .balance-card,
-        :root[data-theme="dark"] .card.expandable,
-        :root[data-theme="dark"] .language-select,
-        :root[data-theme="dark"] .theme-toggle {
-            background: var(--bg-primary);
-        }
-
-        :root[data-theme="dark"] .language-select,
-        :root[data-theme="dark"] .theme-toggle,
-        :root[data-theme="dark"] .stat-item,
-        :root[data-theme="dark"] .server-item,
-        :root[data-theme="dark"] .device-item,
-        :root[data-theme="dark"] .app-card {
-            border-color: rgba(148, 163, 184, 0.25);
-        }
-
-        :root[data-theme="dark"] .modal {
-            background: rgba(15, 23, 42, 0.96);
-        }
-
-        :root[data-theme="dark"] .payment-method-card {
-            background: var(--bg-secondary);
-        }
-
-        :root[data-theme="dark"] .payment-option-button {
-            background: var(--bg-secondary);
-        }
-
-        :root[data-theme="dark"] .amount-input {
-            background: rgba(15, 23, 42, 0.85);
-            border-color: rgba(148, 163, 184, 0.28);
-        }
-
-        :root[data-theme="dark"] .modal-button.secondary {
-            border-color: rgba(148, 163, 184, 0.35);
-        }
-
-        :root[data-theme="dark"] .promo-code-input-group {
-            background: rgba(15, 23, 42, 0.85);
-            border-color: rgba(148, 163, 184, 0.35);
-            box-shadow: none;
-        }
-
-        :root[data-theme="dark"] .promo-code-feedback.error {
-            color: #fca5a5;
-            border-color: rgba(239, 68, 68, 0.4);
-            background: rgba(239, 68, 68, 0.18);
-        }
-
-        :root[data-theme="dark"] .promo-code-feedback.success {
-            color: #34d399;
-            border-color: rgba(16, 185, 129, 0.4);
-            background: rgba(16, 185, 129, 0.18);
-        }
-
-        :root[data-theme="dark"] .promo-code-result {
-            background: rgba(37, 99, 235, 0.12);
-            border-color: rgba(59, 130, 246, 0.25);
-        }
-
-        :root[data-theme="dark"] .btn-primary {
-            box-shadow: 0 10px 30px rgba(37, 99, 235, 0.45);
-        }
-
-        /* Light theme specific overrides */
-        :root[data-theme="light"] .modal {
-            background: rgba(255, 255, 255, 0.98);
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
-        }
-
-        :root[data-theme="light"] .payment-method-card {
-            background: var(--bg-secondary);
-            border-color: rgba(0, 0, 0, 0.08);
-        }
-
-        :root[data-theme="light"] .payment-option-button {
-            background: var(--bg-secondary);
-            border-color: rgba(0, 0, 0, 0.08);
-        }
-
-        :root[data-theme="light"] .amount-input {
-            background: rgba(248, 250, 252, 0.9);
-            border-color: rgba(0, 0, 0, 0.12);
-        }
-
-        :root[data-theme="light"] .modal-button.secondary {
-            border-color: rgba(0, 0, 0, 0.15);
-            color: var(--text-primary);
-        }
-
-        :root[data-theme="light"] .promo-code-input-group {
-            background: rgba(248, 250, 252, 0.9);
-            border-color: rgba(0, 0, 0, 0.12);
-        }
-
-        :root[data-theme="light"] .promo-code-feedback.error {
-            color: #dc2626;
-            border-color: rgba(220, 38, 38, 0.3);
-            background: rgba(220, 38, 38, 0.08);
-        }
-
-        :root[data-theme="light"] .promo-code-feedback.success {
-            color: #16a34a;
-            border-color: rgba(22, 163, 74, 0.3);
-            background: rgba(22, 163, 74, 0.08);
-        }
-
-        :root[data-theme="light"] .promo-code-result {
-            background: rgba(59, 130, 246, 0.08);
-            border-color: rgba(59, 130, 246, 0.2);
-        }
-
-        :root[data-theme="light"] .btn-primary {
-            box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
-        }
-
-        :root[data-theme="light"] .header-menu-dropdown {
-            background: rgba(255, 255, 255, 0.98);
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
-        }
-
-        :root[data-theme="light"] .header-menu-item:hover {
-            background: rgba(0, 0, 0, 0.04);
-        }
-
-        /* Light theme toast */
-        :root[data-theme="light"] .toast {
-            background: rgba(255, 255, 255, 0.98);
-            border: 1px solid rgba(0, 0, 0, 0.1);
-            box-shadow:
-                0 8px 32px rgba(0, 0, 0, 0.15),
-                0 2px 8px rgba(0, 0, 0, 0.08);
-            color: var(--text-primary);
-        }
-
-        :root[data-theme="light"] .toast-content {
-            color: var(--text-primary);
-        }
-
-        :root[data-theme="light"] .toast-close {
-            color: rgba(0, 0, 0, 0.5);
-        }
-
-        :root[data-theme="light"] .toast-close:hover {
-            background: rgba(0, 0, 0, 0.08);
-            color: rgba(0, 0, 0, 0.8);
-        }
-
-        /* Responsive Design */
-        @media (max-width: 360px) {
-            .logo {
-                font-size: 24px;
-            }
-
-            .balance-amount {
-                font-size: 28px;
-            }
-
-            .stats-grid {
-                grid-template-columns: 1fr;
-            }
-
-            .promo-code-input-group {
-                flex-direction: column;
-                align-items: stretch;
-            }
-
-            .promo-code-button {
-                width: 100%;
-            }
-        }
-    </style>
-</head>
-<body>
-    <!-- Snowflakes Container -->
-    <div class="snowflakes-container" id="snowflakesContainer"></div>
-    <!-- bedolaga VPN Header -->
-    <header class="asb-header">
-        <div class="asb-logo">
-            <svg class="asb-logo-icon" viewBox="0 0 32 32" fill="none">
-                <path d="M16 2L4 8v16l12 6 12-6V8L16 2z" stroke="currentColor" stroke-width="2" fill="none"/>
-                <path d="M16 8L8 12v8l8 4 8-4v-8l-8-4z" stroke="currentColor" stroke-width="1.5" fill="none"/>
-            </svg>
-            <div class="asb-logo-text" id="headerLogoText" style="opacity: 0; transition: opacity 0.3s ease;">
-                <span class="asb-logo-title" id="headerLogoTitle"></span>
-                <span class="asb-logo-subtitle" id="headerLogoSubtitle">VPN</span>
-            </div>
-        </div>
-        <div class="asb-header-actions">
-            <!-- Hidden original buttons for JavaScript compatibility -->
-            <div class="language-switcher" style="display: none;">
-                <select id="languageSelect" class="language-select">
-                    <option value="ru">🇷🇺 Русский</option>
-                    <option value="en">🇬🇧 English</option>
-                </select>
-            </div>
-            <button class="asb-header-btn" id="snowflakesToggle" aria-label="Toggle snowflakes" title="Снежинки" style="display: none;">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <path d="M12 2v20M12 2l-4 4M12 2l4 4M12 22l-4-4M12 22l4-4M2 12h20M2 12l4-4M2 12l4 4M22 12l-4-4M22 12l-4 4M6 6l12 12M6 18l12-12"/>
-                </svg>
-            </button>
-            <button class="asb-header-btn" id="supportBtn" aria-label="Support" style="display: none;">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
-                </svg>
-            </button>
-            <button class="asb-header-btn theme-toggle" id="themeToggle" aria-label="Toggle theme" title="Переключить тему" style="display: none;">
-                <svg id="themeIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <path id="moonIcon" d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
-                    <g id="sunIcon" style="display: none;">
-                        <circle cx="12" cy="12" r="5"/>
-                        <line x1="12" y1="1" x2="12" y2="3"/>
-                        <line x1="12" y1="21" x2="12" y2="23"/>
-                        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
-                        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
-                        <line x1="1" y1="12" x2="3" y2="12"/>
-                        <line x1="21" y1="12" x2="23" y2="12"/>
-                        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
-                        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
-                    </g>
-                </svg>
-            </button>
-
-            <!-- Menu Button -->
-            <div class="header-menu">
-                <button class="header-menu-btn" id="headerMenuBtn" aria-label="Menu">
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <line x1="3" y1="12" x2="21" y2="12"/>
-                        <line x1="3" y1="6" x2="21" y2="6"/>
-                        <line x1="3" y1="18" x2="21" y2="18"/>
-                    </svg>
-                </button>
-                <div class="header-menu-dropdown" id="headerMenuDropdown">
-                    <div class="header-menu-item" id="menuLanguageItem">
-                        <div class="header-menu-item-icon">
-                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                <circle cx="12" cy="12" r="10"/>
-                                <line x1="2" y1="12" x2="22" y2="12"/>
-                                <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
-                            </svg>
-                        </div>
-                        <div class="header-menu-item-content">
-                            <div class="header-menu-item-label" data-i18n="menu.language">Язык</div>
-                            <div class="header-menu-item-sublabel" id="menuLanguageValue">🇷🇺 Русский</div>
-                        </div>
-                        <div class="header-menu-item-action">
-                            <select id="menuLanguageSelect" class="header-menu-item-select">
-                                <option value="ru">🇷🇺 Русский</option>
-                                <option value="en">🇬🇧 English</option>
-                            </select>
-                        </div>
-                    </div>
-                    <div class="header-menu-item" id="menuSnowflakesItem">
-                        <div class="header-menu-item-icon">
-                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                <path d="M12 2v20M12 2l-4 4M12 2l4 4M12 22l-4-4M12 22l4-4M2 12h20M2 12l4-4M2 12l4 4M22 12l-4-4M22 12l-4 4M6 6l12 12M6 18l12-12"/>
-                            </svg>
-                        </div>
-                        <div class="header-menu-item-content">
-                            <div class="header-menu-item-label" data-i18n="menu.snowflakes">Снежинки</div>
-                            <div class="header-menu-item-sublabel" data-i18n="menu.snowflakes.desc">Декоративный эффект</div>
-                        </div>
-                        <div class="header-menu-item-action">
-                            <div class="header-menu-item-toggle" id="menuSnowflakesToggle"></div>
-                        </div>
-                    </div>
-                    <div class="header-menu-item" id="menuSupportItem">
-                        <div class="header-menu-item-icon">
-                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
-                            </svg>
-                        </div>
-                        <div class="header-menu-item-content">
-                            <div class="header-menu-item-label" data-i18n="menu.support">Поддержка</div>
-                            <div class="header-menu-item-sublabel" data-i18n="menu.support.desc">Связаться с нами</div>
-                        </div>
-                    </div>
-                    <div class="header-menu-item" id="menuThemeItem">
-                        <div class="header-menu-item-icon">
-                            <svg id="menuThemeIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                <path id="menuMoonIcon" d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
-                                <g id="menuSunIcon" style="display: none;">
-                                    <circle cx="12" cy="12" r="5"/>
-                                    <line x1="12" y1="1" x2="12" y2="3"/>
-                                    <line x1="12" y1="21" x2="12" y2="23"/>
-                                    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
-                                    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
-                                    <line x1="1" y1="12" x2="3" y2="12"/>
-                                    <line x1="21" y1="12" x2="23" y2="12"/>
-                                    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
-                                    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
-                                </g>
-                            </svg>
-                        </div>
-                        <div class="header-menu-item-content">
-                            <div class="header-menu-item-label" data-i18n="menu.theme">Тема</div>
-                            <div class="header-menu-item-sublabel" id="menuThemeValue" data-i18n="menu.theme.dark">Тёмная</div>
-                        </div>
-                        <div class="header-menu-item-action">
-                            <div class="header-menu-item-toggle" id="menuThemeToggle"></div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </header>
-
-    <!-- Hero Banner -->
-    <div style="width: 100%; max-width: 100vw; overflow-x: hidden; box-sizing: border-box;">
-    <div class="asb-hero">
-        <div class="asb-hero-content">
-            <div class="asb-hero-title" id="heroTitle"></div>
-            <div class="asb-hero-subtitle" id="heroSubtitle"></div>
-        </div>
-    </div>
-    </div>
-
-    <div class="container" style="width: 100%; max-width: 100vw; box-sizing: border-box; overflow-x: hidden;">
-        <!-- Old Header Hidden -->
-        <div class="header animate-in hidden">
-            <div class="logo-container">
-                <div class="logo-icon">⚡</div>
-            </div>
-            <div class="logo"></div>
-            <div class="subtitle"></div>
-        </div>
-
-        <div id="maintenanceBanner" class="maintenance-banner hidden" role="status" aria-live="polite">
-            <div class="maintenance-icon" aria-hidden="true">🔧</div>
-            <div class="maintenance-content">
-                <div class="maintenance-title" data-i18n="maintenance.title">Технические работы</div>
-                <div id="maintenanceMessage" class="maintenance-text" data-i18n="maintenance.message">
-                    Сервис временно недоступен из-за технических работ. Попробуйте позже.
-                </div>
-            </div>
-        </div>
-
-        <div id="maintenanceState" class="maintenance-state hidden" role="status" aria-live="polite">
-            <div class="maintenance-icon" aria-hidden="true">🔧</div>
-            <div class="maintenance-title" data-i18n="maintenance.title">Технические работы</div>
-            <div id="maintenanceStateMessage" class="maintenance-text" data-i18n="maintenance.message">
-                Сервис временно недоступен из-за технических работ. Попробуйте позже.
-            </div>
-        </div>
-
-        <!-- Loading State -->
-        <div id="loadingState" class="loading">
-            <div class="skeleton-card" style="margin-bottom: 16px;">
-                <div class="skeleton-line" style="width: 40%; height: 24px; margin-bottom: 16px;"></div>
-                <div class="skeleton-line" style="width: 100%; height: 16px; margin-bottom: 8px;"></div>
-                <div class="skeleton-line" style="width: 80%; height: 16px; margin-bottom: 16px;"></div>
-                <div class="skeleton-line" style="width: 60%; height: 40px; border-radius: 12px;"></div>
-            </div>
-            <div class="skeleton-card">
-                <div class="skeleton-line" style="width: 50%; height: 20px; margin-bottom: 12px;"></div>
-                <div class="skeleton-line" style="width: 100%; height: 16px; margin-bottom: 8px;"></div>
-                <div class="skeleton-line" style="width: 90%; height: 16px; margin-bottom: 8px;"></div>
-                <div class="skeleton-line" style="width: 70%; height: 16px;"></div>
-            </div>
-        </div>
-
-        <!-- Error State -->
-        <div id="errorState" class="error hidden">
-            <div class="error-icon" id="errorIcon">⚠️</div>
-            <div class="error-title" id="errorTitle" data-i18n="error.default.title">Subscription Not Found</div>
-            <div class="error-text" id="errorText" data-i18n="error.default.message">Please contact support to activate your subscription</div>
-            <div class="error-actions">
-                <button
-                    id="purchaseBtn"
-                    class="btn btn-primary hidden"
-                    type="button"
-                    data-i18n="button.buy_subscription"
-                >Buy subscription</button>
-            </div>
-        </div>
-
-        <!-- Main Content -->
-        <div id="mainContent" class="hidden">
-            <!-- ===== HOME SCREEN ===== -->
-            <div class="screen-container active" data-screen="home">
-            <!-- Promo Offers -->
-            <div id="promoOffersContainer" class="promo-offers hidden"></div>
-
-            <!-- Subscription Missing -->
-            <div class="card subscription-missing-card hidden animate-in" id="subscriptionMissingCard">
-                <div class="subscription-missing-icon" aria-hidden="true">🛡️</div>
-                <div class="subscription-missing-content">
-                    <div class="subscription-missing-title" id="subscriptionMissingTitle" data-i18n="subscription_missing.title">No active subscription</div>
-                    <div class="subscription-missing-description" id="subscriptionMissingDescription" data-i18n="subscription_missing.description.default">Purchase a plan or activate a trial to continue.</div>
-                    <div class="subscription-missing-hint" id="subscriptionMissingHint" data-i18n="subscription_missing.hint">Top up your balance after activation to stay connected.</div>
-                    <div class="subscription-missing-actions">
-                        <button class="btn btn-secondary hidden" type="button" id="subscriptionMissingTrialBtn" data-i18n="subscription_missing.action.trial">Activate trial</button>
-                    </div>
-                </div>
-            </div>
-
-            <!-- User Card (New Design) -->
-            <div class="card user-card-new animate-in" id="userCard">
-                <div class="subscription-header-new">
-                    <div class="subscription-type-section">
-                        <svg class="subscription-type-icon subscription-gift-icon-main" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <polyline points="20 12 20 22 4 22 4 12"></polyline>
-                            <rect x="2" y="7" width="20" height="5"></rect>
-                            <line x1="12" y1="22" x2="12" y2="7"></line>
-                            <path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"></path>
-                            <path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"></path>
-                        </svg>
-                        <svg class="subscription-type-icon subscription-card-icon-main" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect>
-                            <line x1="1" y1="10" x2="23" y2="10"></line>
-                        </svg>
-                        <div class="subscription-type-info">
-                            <div class="subscription-type-name" id="subscriptionTypeName">Пробная</div>
-                        </div>
-                    </div>
-                    <div class="subscription-expires-section">
-                        <div class="subscription-expires-label" id="subscriptionExpiresLabel" data-i18n="info.expires.active_until">активна до</div>
-                        <div class="subscription-expires-date" id="subscriptionExpiresDate">—</div>
-                    </div>
-                </div>
-
-                <div class="subscription-stats-new">
-                    <div class="subscription-stat-item-new">
-                        <div class="stat-icon-wrapper">
-                            <svg class="stat-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
-                                <polyline points="7 10 12 15 17 10"/>
-                                <line x1="12" y1="15" x2="12" y2="3"/>
-                            </svg>
-                        </div>
-                        <span class="stat-value-new" id="trafficDownloaded">0.00</span>
-                        <span class="stat-label-new" data-i18n="stats.traffic_short">МБ</span>
-                    </div>
-                    <div class="subscription-stat-item-new">
-                        <div class="stat-icon-wrapper">
-                            <svg class="stat-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
-                                <line x1="8" y1="21" x2="16" y2="21"/>
-                                <line x1="12" y1="17" x2="12" y2="21"/>
-                            </svg>
-                        </div>
-                        <span class="stat-value-new" id="devicesConnected">0/1</span>
-                        <span class="stat-label-new" data-i18n="stats.devices">Устройств</span>
-                    </div>
-                    <div class="subscription-stat-item-new">
-                        <div class="stat-icon-wrapper">
-                            <svg class="stat-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                <circle cx="12" cy="12" r="10"/>
-                                <line x1="2" y1="12" x2="22" y2="12"/>
-                                <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
-                            </svg>
-                        </div>
-                        <span class="stat-value-new" id="serversAvailable">—</span>
-                        <span class="stat-label-new" data-i18n="stats.servers">Серверы</span>
-                    </div>
-                </div>
-
-                <div class="subscription-progress-bar">
-                    <div class="progress-bar-content">
-                        <span class="progress-label-left" data-i18n="stats.remaining">Осталось</span>
-                        <span class="progress-label-right" id="daysRemainingProgress">—</span>
-                    </div>
-                </div>
-
-                <div class="quick-actions">
-                    <button class="quick-action" data-action="balance" id="quickActionBalance" type="button">
-                        <div class="quick-action-icon">
-                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                <rect x="2" y="4" width="20" height="16" rx="2"></rect>
-                                <circle cx="16" cy="12" r="2"></circle>
-                                <path d="M2 10h20"></path>
-                            </svg>
-                        </div>
-                        <span data-i18n="quick_action.balance">Баланс</span>
-                    </button>
-                    <button class="quick-action" data-action="subscription" id="quickActionSubscription" type="button">
-                        <div class="quick-action-icon">
-                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                <rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect>
-                                <line x1="1" y1="10" x2="23" y2="10"></line>
-                            </svg>
-                        </div>
-                        <span data-i18n="quick_action.subscription">Подписка</span>
-                    </button>
-                    <button class="quick-action" data-action="install" id="quickActionInstall" type="button">
-                        <div class="quick-action-icon">
-                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                <circle cx="12" cy="12" r="3"></circle>
-                                <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
-                            </svg>
-                        </div>
-                        <span data-i18n="quick_action.install">Установка</span>
-                    </button>
-                    <button class="quick-action" data-action="support" id="quickActionSupport" type="button">
-                        <div class="quick-action-icon">
-                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
-                            </svg>
-                        </div>
-                        <span data-i18n="quick_action.support">Поддержка</span>
-                    </button>
-                </div>
-                    </div>
-                    </div>
-
-
-            <!-- News Section -->
-            <div class="card news-card hidden" id="newsCard" data-news-limit="3" data-screen-only="home">
-                <div class="news-header">
-                    <div>
-                        <div class="news-title" data-i18n="news.section.title">Новости</div>
-                        <div class="news-subtitle" data-i18n="news.section.subtitle">Последние обновления сервиса</div>
-                    </div>
-                    <button class="news-link-btn" type="button" id="newsMoreBtn" data-i18n="news.section.button">Все новости</button>
-                </div>
-                <div class="news-list" id="newsList"></div>
-            </div>
-                
-                        <!-- End SUBSCRIPTIONS SCREEN -->
-
-
-<!-- End HOME SCREEN -->
-
-            <!-- ===== SUBSCRIPTIONS SCREEN ===== -->
-            <div class="screen-container" data-screen="subscriptions">
-                <!-- Subscription Missing (also shown here) -->
-                <div class="card subscription-missing-card hidden animate-in" id="subscriptionMissingCardSubscriptions">
-                    <div class="subscription-missing-icon" aria-hidden="true">🛡️</div>
-                    <div class="subscription-missing-content">
-                        <div class="subscription-missing-title" data-i18n="subscription_missing.title">No active subscription</div>
-                        <div class="subscription-missing-description" data-i18n="subscription_missing.description.default">Purchase a plan or activate a trial to continue.</div>
-                        <div class="subscription-missing-hint" data-i18n="subscription_missing.hint">Top up your balance after activation to stay connected.</div>
-                        <div class="subscription-missing-actions">
-                            <button class="btn btn-secondary hidden" type="button" id="subscriptionMissingTrialBtnSubscriptions" data-i18n="subscription_missing.action.trial">Activate trial</button>
-                    </div>
-                </div>
-            </div>
-
-                <!-- Active Subscription Card (New Design) -->
-                <div class="card subscription-details-card hidden" id="subscriptionDetailsCard">
-                    <div class="subscription-details-header">
-                        <div class="subscription-details-left">
-                            <div class="subscription-icon-wrapper">
-                                <svg class="subscription-gift-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                    <polyline points="20 12 20 22 4 22 4 12"></polyline>
-                                    <rect x="2" y="7" width="20" height="5"></rect>
-                                    <line x1="12" y1="22" x2="12" y2="7"></line>
-                                    <path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"></path>
-                                    <path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"></path>
-                                </svg>
-                                <svg class="subscription-card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                    <rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect>
-                                    <line x1="1" y1="10" x2="23" y2="10"></line>
-                                </svg>
-                            </div>
-                            <div class="subscription-details-info">
-                                <div class="subscription-type-name-large" id="subscriptionTypeNameLarge">Пробная</div>
-                            </div>
-                        </div>
-                        <div class="subscription-details-right">
-                            <span class="subscription-status-badge" id="subscriptionStatusBadge">Активна</span>
-                            <button class="subscription-menu-btn" id="subscriptionMenuBtn" type="button" aria-label="Menu">
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                    <circle cx="12" cy="12" r="1"></circle>
-                                    <circle cx="12" cy="5" r="1"></circle>
-                                    <circle cx="12" cy="19" r="1"></circle>
-                                </svg>
-                            </button>
-                        </div>
-                    </div>
-
-                    <div class="subscription-details-list">
-                        <div class="subscription-detail-item" id="subscriptionDetailExpires">
-                            <div class="detail-item-icon">
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                    <circle cx="12" cy="12" r="10"></circle>
-                                    <polyline points="12 6 12 12 16 14"></polyline>
-                                </svg>
-                            </div>
-                            <div class="detail-item-content">
-                                <div class="detail-item-label" id="subscriptionExpiresLabelDetail" data-i18n="info.expires.valid_until">Действует до</div>
-                                <div class="detail-item-value">
-                                    <div id="subscriptionExpiresDateDetail">—</div>
-                                    <div class="detail-item-hint" id="subscriptionDaysLeftHint">—</div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="subscription-detail-item" id="subscriptionDetailDevices">
-                            <div class="detail-item-icon">
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                    <rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect>
-                                    <line x1="12" y1="18" x2="12.01" y2="18"></line>
-                                </svg>
-                            </div>
-                            <div class="detail-item-content">
-                                <div class="detail-item-label" data-i18n="stats.devices">Устройства</div>
-                                <div class="detail-item-value" id="subscriptionDevicesDetail">0/1</div>
-                            </div>
-                        </div>
-
-                        <div class="subscription-detail-item" id="subscriptionDetailUsage">
-                            <div class="detail-item-icon">
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
-                                    <polyline points="7 10 12 15 17 10"></polyline>
-                                    <line x1="12" y1="15" x2="12" y2="3"></line>
-                                </svg>
-                            </div>
-                            <div class="detail-item-content">
-                                <div class="detail-item-label" data-i18n="info.traffic_used_short">Использовано</div>
-                                <div class="detail-item-value" id="subscriptionUsageDetail">0.00 мб</div>
-                            </div>
-                        </div>
-
-                        <div class="subscription-detail-item" id="subscriptionDetailLocations">
-                            <div class="detail-item-icon">
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                    <circle cx="12" cy="12" r="10"></circle>
-                                    <line x1="2" y1="12" x2="22" y2="12"></line>
-                                    <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
-                                </svg>
-                            </div>
-                            <div class="detail-item-content">
-                                <div class="detail-item-label" data-i18n="info.locations">Доступные локации</div>
-                                <div class="detail-item-value" id="subscriptionLocationsDetail">—</div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="subscription-details-actions">
-                        <button class="subscription-action-btn subscription-action-settings" id="subscriptionSettingsActionBtn" type="button">
-                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                <circle cx="12" cy="12" r="3"></circle>
-                                <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
-                            </svg>
-                            <span>Настройка</span>
-                        </button>
-                        <button class="subscription-action-btn subscription-action-renew" id="subscriptionRenewActionBtn" type="button">
-                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
-                                <line x1="16" y1="2" x2="16" y2="6"></line>
-                                <line x1="8" y1="2" x2="8" y2="6"></line>
-                                <line x1="3" y1="10" x2="21" y2="10"></line>
-                                <line x1="12" y1="14" x2="12" y2="18"></line>
-                                <line x1="10" y1="16" x2="14" y2="16"></line>
-                            </svg>
-                            <span>Продлить</span>
-                        </button>
-                    </div>
-                </div>
-
-<!-- Subscription Purchase Card -->
-                <div id="subscriptionPurchaseCardWrapper">
-                    <div class="card subscription-purchase-card hidden" id="subscriptionPurchaseCard">
-                    <div class="card-header">
-                        <div class="card-title">
-                            <svg class="card-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h11l2-7H5.4M7 13L5.4 5M7 13l-1.2 6M16 17a2 2 0 11-4 0m6 0a2 2 0 11-4 0"/>
-                            </svg>
-                            <span data-i18n="subscription_purchase.title">Оформление подписки</span>
-                        </div>
-                        <div class="subscription-purchase-status" id="subscriptionPurchaseStatus"></div>
-                    </div>
-                    <div class="card-content">
-                        <div class="subscription-purchase-loading hidden" id="subscriptionPurchaseLoading">
-                            <div class="subscription-settings-loading-line"></div>
-                            <div class="subscription-settings-loading-line" style="width: 70%;"></div>
-                            <div class="subscription-settings-loading-line" style="width: 55%;"></div>
-                        </div>
-                        <div class="subscription-purchase-error hidden" id="subscriptionPurchaseError">
-                            <div id="subscriptionPurchaseErrorText" data-i18n="subscription_purchase.error.default">Не удалось загрузить параметры подписки.</div>
-                            <button class="subscription-settings-retry" id="subscriptionPurchaseRetry" type="button" data-i18n="subscription_purchase.action.retry">Повторить</button>
-                        </div>
-                        <div class="subscription-purchase-content hidden" id="subscriptionPurchaseContent">
-                            <div class="subscription-purchase-section" id="subscriptionPurchasePeriodSection">
-                                <div class="subscription-purchase-section-header">
-                                    <div>
-                                        <div class="subscription-purchase-section-title" data-i18n="subscription_purchase.period.title">Период подписки</div>
-                                        <div class="subscription-purchase-section-description" data-i18n="subscription_purchase.period.subtitle">Выберите длительность доступа.</div>
-                                    </div>
-                                    <div class="subscription-purchase-section-meta" id="subscriptionPurchasePeriodMeta"></div>
-                                </div>
-                                <div class="subscription-purchase-options" id="subscriptionPurchasePeriodOptions"></div>
-                            </div>
-                            <div class="subscription-purchase-section" id="subscriptionPurchaseTrafficSection">
-                                <div class="subscription-purchase-section-header">
-                                    <div>
-                                        <div class="subscription-purchase-section-title" data-i18n="subscription_purchase.traffic.title">Трафик</div>
-                                        <div class="subscription-purchase-section-description" data-i18n="subscription_purchase.traffic.subtitle">Месячный лимит трафика.</div>
-                                    </div>
-                                    <div class="subscription-purchase-section-meta" id="subscriptionPurchaseTrafficMeta"></div>
-                                </div>
-                                <div class="subscription-purchase-options" id="subscriptionPurchaseTrafficOptions"></div>
-                            </div>
-                            <div class="subscription-purchase-section" id="subscriptionPurchaseServersSection">
-                                <div class="subscription-purchase-section-header">
-                                    <div>
-                                        <div class="subscription-purchase-section-title" data-i18n="subscription_purchase.servers.title">Серверы</div>
-                                        <div class="subscription-purchase-section-description" data-i18n="subscription_purchase.servers.subtitle">Выберите регионы подключения.</div>
-                                    </div>
-                                    <div class="subscription-purchase-section-meta" id="subscriptionPurchaseServersMeta"></div>
-                                </div>
-                                <div class="subscription-purchase-options" id="subscriptionPurchaseServersOptions"></div>
-                            </div>
-                            <div class="subscription-purchase-section" id="subscriptionPurchaseDevicesSection">
-                                <div class="subscription-purchase-section-header">
-                                    <div>
-                                        <div class="subscription-purchase-section-title" data-i18n="subscription_purchase.devices.title">Устройства</div>
-                                            <div class="subscription-purchase-section-description" data-i18n="subscription_purchase.devices.subtitle">Одновременные подключения.</div>
-                                    </div>
-                                    <div class="subscription-purchase-section-meta" id="subscriptionPurchaseDevicesMeta"></div>
-                                </div>
-                                    <div class="subscription-purchase-devices-control" id="subscriptionPurchaseDevicesControl">
-                                        <div class="subscription-purchase-devices-selector">
-                                            <button type="button" class="subscription-purchase-devices-btn" id="subscriptionPurchaseDevicesDecrease" aria-label="Decrease">
-                                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                                    <line x1="5" y1="12" x2="19" y2="12"></line>
-                                                </svg>
-                                            </button>
-                                            <div class="subscription-purchase-devices-value-wrapper">
-                                                <span class="subscription-purchase-devices-value" id="subscriptionPurchaseDevicesValue">1</span>
-                                                <span class="subscription-purchase-devices-price" id="subscriptionPurchaseDevicesPrice"></span>
-                                        </div>
-                                            <button type="button" class="subscription-purchase-devices-btn" id="subscriptionPurchaseDevicesIncrease" aria-label="Increase">
-                                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                                    <line x1="12" y1="5" x2="12" y2="19"></line>
-                                                    <line x1="5" y1="12" x2="19" y2="12"></line>
-                                                </svg>
-                                            </button>
-                                        </div>
-                                        <div class="subscription-purchase-devices-hint hidden" id="subscriptionPurchaseDevicesHint"></div>
-                                </div>
-                            </div>
-                            <div class="subscription-purchase-summary" id="subscriptionPurchaseSummary">
-                                    <div class="subscription-purchase-summary-row">
-                                        <span data-i18n="subscription_purchase.summary.total">Итого</span>
-                                        <div class="subscription-purchase-price">
-                                            <span class="subscription-purchase-price-current" id="subscriptionPurchasePriceCurrent">—</span>
-                                            <span class="subscription-purchase-price-original hidden" id="subscriptionPurchasePriceOriginal">—</span>
-                                    </div>
-                                </div>
-                                    <div class="subscription-purchase-summary-row hidden" id="subscriptionPurchaseDiscountRow">
-                                        <span data-i18n="subscription_purchase.summary.discount">Скидка</span>
-                                        <span class="subscription-purchase-discount" id="subscriptionPurchaseDiscount">—</span>
-                            </div>
-                                    <div class="subscription-purchase-summary-row hidden" id="subscriptionPurchasePricePerMonthRow">
-                                        <span class="subscription-purchase-price-per-month" id="subscriptionPurchasePricePerMonth">—</span>
-                                    </div>
-                                    <div class="subscription-purchase-breakdown hidden" id="subscriptionPurchaseBreakdown"></div>
-                                    <div class="subscription-purchase-balance-warning hidden" id="subscriptionPurchaseBalanceWarning"></div>
-                                    <button class="btn btn-primary" type="button" id="subscriptionPurchaseTopupBtn" data-i18n="subscription_purchase.action.topup">Пополнить баланс</button>
-                                    <button class="btn btn-primary" type="button" id="subscriptionPurchaseSubmit" data-i18n="subscription_purchase.action.submit">Купить подписку</button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                </div>
-
-                <!-- Subscription Renewal Card -->
-                <div id="subscriptionRenewalCardWrapper">
-                    <div class="card subscription-renewal-card hidden" id="subscriptionRenewalCard">
-                <div class="card-header hidden">
-                    <div class="card-title">
-                        <svg class="card-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
-                        </svg>
-                        <span data-i18n="subscription_renewal.title">Продление подписки</span>
-                    </div>
-                            <div class="subscription-renewal-status" id="subscriptionRenewalStatus"></div>
-                </div>
-                <div class="subscription-renewal-info-block">
-                    <div class="subscription-renewal-info-header">
-                        <svg class="subscription-renewal-info-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
-                        </svg>
-                        <div class="subscription-renewal-info-content">
-                            <div class="subscription-renewal-info-title">ПРОДЛЕНИЕ ПОДПИСКИ</div>
-                            <div class="subscription-renewal-info-description">Стоимость указана с учётом ваших текущих серверов, трафика и устройств.</div>
-                        </div>
-                    </div>
-                </div>
-                <div class="card-content">
-                            <div class="subscription-renewal-loading hidden" id="subscriptionRenewalLoading">
-                            <div class="subscription-settings-loading-line"></div>
-                            <div class="subscription-settings-loading-line" style="width: 70%;"></div>
-                        </div>
-                            <div class="subscription-renewal-error hidden" id="subscriptionRenewalError">
-                                <div id="subscriptionRenewalErrorText" data-i18n="subscription_renewal.error.generic">Не удалось загрузить параметры продления.</div>
-                            <button class="subscription-settings-retry" id="subscriptionRenewalRetry" type="button" data-i18n="subscription_renewal.action.retry">Повторить</button>
-                        </div>
-                            <div class="subscription-renewal-content hidden" id="subscriptionRenewalContent">
-                                <!-- Period Section -->
-                                <div class="subscription-purchase-section" id="subscriptionRenewalPeriodSection">
-                                    <div class="subscription-purchase-section-header">
-                                        <div>
-                                            <div class="subscription-purchase-section-title" data-i18n="subscription_purchase.period.title">Период подписки</div>
-                                            <div class="subscription-purchase-section-description" data-i18n="subscription_purchase.period.subtitle">Выберите длительность доступа.</div>
-                                </div>
-                                        <div class="subscription-purchase-section-meta" id="subscriptionRenewalPeriodMeta"></div>
-                                </div>
-                                    <div class="subscription-purchase-options" id="subscriptionRenewalPeriodOptions"></div>
-                            </div>
-
-                                <!-- Traffic Section -->
-                                <div class="subscription-purchase-section" id="subscriptionRenewalTrafficSection">
-                                    <div class="subscription-purchase-section-header">
-                                        <div>
-                                            <div class="subscription-purchase-section-title" data-i18n="subscription_purchase.traffic.title">Трафик</div>
-                                            <div class="subscription-purchase-section-description" data-i18n="subscription_purchase.traffic.subtitle">Месячный лимит трафика.</div>
-                            </div>
-                                        <div class="subscription-purchase-section-meta" id="subscriptionRenewalTrafficMeta"></div>
-                                    </div>
-                                    <div class="subscription-purchase-options" id="subscriptionRenewalTrafficOptions"></div>
-                                </div>
-
-                                <!-- Servers Section -->
-                                <div class="subscription-purchase-section" id="subscriptionRenewalServersSection">
-                                    <div class="subscription-purchase-section-header">
-                                        <div>
-                                            <div class="subscription-purchase-section-title" data-i18n="subscription_purchase.servers.title">Серверы</div>
-                                            <div class="subscription-purchase-section-description" data-i18n="subscription_purchase.servers.subtitle">Выберите регионы подключения.</div>
-                            </div>
-                                        <div class="subscription-purchase-section-meta" id="subscriptionRenewalServersMeta"></div>
-                                    </div>
-                                    <div class="subscription-purchase-options" id="subscriptionRenewalServersOptions"></div>
-                                </div>
-
-                                <!-- Devices Section -->
-                                <div class="subscription-purchase-section" id="subscriptionRenewalDevicesSection">
-                                    <div class="subscription-purchase-section-header">
-                                    <div>
-                                            <div class="subscription-purchase-section-title" data-i18n="subscription_purchase.devices.title">Устройства</div>
-                                            <div class="subscription-purchase-section-description" data-i18n="subscription_purchase.devices.subtitle">Одновременные подключения.</div>
-                                    </div>
-                                        <div class="subscription-purchase-section-meta" id="subscriptionRenewalDevicesMeta"></div>
-                                </div>
-                                    <div class="subscription-purchase-devices-control" id="subscriptionRenewalDevicesControl">
-                                        <div class="subscription-purchase-devices-selector">
-                                            <button type="button" class="subscription-purchase-devices-btn" id="subscriptionRenewalDevicesDecrease" aria-label="Decrease">
-                                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                                    <line x1="5" y1="12" x2="19" y2="12"></line>
-                                                </svg>
-                                            </button>
-                                            <div class="subscription-purchase-devices-value-wrapper">
-                                                <span class="subscription-purchase-devices-value" id="subscriptionRenewalDevicesValue">1</span>
-                                                <span class="subscription-purchase-devices-price" id="subscriptionRenewalDevicesPrice"></span>
-                                </div>
-                                            <button type="button" class="subscription-purchase-devices-btn" id="subscriptionRenewalDevicesIncrease" aria-label="Increase">
-                                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                                    <line x1="12" y1="5" x2="12" y2="19"></line>
-                                                    <line x1="5" y1="12" x2="19" y2="12"></line>
-                                                </svg>
-                                            </button>
-                                </div>
-                                        <div class="subscription-purchase-devices-hint hidden" id="subscriptionRenewalDevicesHint"></div>
-                            </div>
-                            </div>
-
-                                <div class="subscription-renewal-summary" id="subscriptionRenewalSummary">
-                                    <div class="subscription-renewal-summary-row">
-                                        <span data-i18n="subscription_renewal.summary.total">Итого</span>
-                                        <div class="subscription-renewal-price-wrapper">
-                                            <span class="subscription-renewal-price-original hidden" id="subscriptionRenewalPriceOriginal"></span>
-                                            <span class="subscription-renewal-price" id="subscriptionRenewalPriceCurrent">—</span>
-                        </div>
-                    </div>
-                                    <div class="subscription-renewal-summary-row hidden" id="subscriptionRenewalPriceDiscountRow">
-                                        <span class="subscription-renewal-discount" id="subscriptionRenewalPriceDiscount"></span>
-                                    </div>
-                                    <div class="subscription-renewal-summary-row hidden" id="subscriptionRenewalPriceNoteRow">
-                                        <span class="subscription-renewal-price-note" id="subscriptionRenewalPriceNote"></span>
-                                    </div>
-                                    <div class="subscription-renewal-balance-warning hidden" id="subscriptionRenewalBalanceWarning"></div>
-                                    <button class="btn btn-primary" type="button" id="subscriptionRenewalTopupBtn" data-i18n="subscription_renewal.action.topup">Пополнить баланс</button>
-                                    <button class="btn btn-primary" type="button" id="subscriptionRenewalSubmit" data-i18n="subscription_renewal.submit">Продлить подписку</button>
-                                </div>
-                        </div>
-                    </div>
-                </div>
-                </div>
-
-                <!-- Subscription Settings Card -->
-                <div id="subscriptionSettingsCardWrapper">
-                    <div class="card subscription-settings-card hidden" id="subscriptionSettingsCard">
-                <div class="card-header">
-                    <div class="card-title">
-                        <svg class="card-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
-                        </svg>
-                                <span data-i18n="subscription_settings.title">Настройки подписки</span>
-                    </div>
-                    <div class="subscription-settings-summary" id="subscriptionSettingsSummary"></div>
-                            <div class="subscription-settings-status" id="subscriptionSettingsStatus"></div>
-                </div>
-                <div class="card-content">
-                            <div class="subscription-settings-loading hidden" id="subscriptionSettingsLoading">
-                            <div class="subscription-settings-loading-line"></div>
-                            <div class="subscription-settings-loading-line" style="width: 70%;"></div>
-                            <div class="subscription-settings-loading-line" style="width: 55%;"></div>
-                        </div>
-                            <div class="subscription-settings-error hidden" id="subscriptionSettingsError">
-                                <div id="subscriptionSettingsErrorText" data-i18n="subscription_settings.status.error">Не удалось загрузить настройки подписки.</div>
-                                <button class="subscription-settings-retry" id="subscriptionSettingsRetry" type="button" data-i18n="subscription_settings.action.retry">Повторить</button>
-                            </div>
-                            <div class="subscription-settings-content hidden" id="subscriptionSettingsContent">
-                        <div class="subscription-settings-section" id="subscriptionSettingsServersSection">
-                            <div class="subscription-settings-section-header">
-                                <div>
-                                    <div class="subscription-settings-section-title" data-i18n="subscription_settings.servers.title">Серверы</div>
-                                            <div class="subscription-settings-section-description" data-i18n="subscription_settings.servers.subtitle">Выберите нужные регионы.</div>
-                                </div>
-                                <div class="subscription-settings-section-meta" id="subscriptionSettingsServersMeta"></div>
-                            </div>
-                                    <div class="subscription-settings-options" id="subscriptionSettingsServersOptions"></div>
-                                    <div style="display: flex; align-items: center; gap: 12px; margin-top: 12px;">
-                                        <button class="btn btn-secondary" type="button" id="subscriptionSettingsServersApply" data-i18n="subscription_settings.servers.manage">Обновить серверы</button>
-                                        <span style="font-size: 13px; color: var(--text-secondary);">Скидки применяются автоматически.</span>
-                                    </div>
-                        </div>
-                        <div class="subscription-settings-section" id="subscriptionSettingsTrafficSection">
-                            <div class="subscription-settings-section-header">
-                                <div>
-                                    <div class="subscription-settings-section-title" data-i18n="subscription_settings.traffic.title">Трафик</div>
-                                    <div class="subscription-settings-section-description" data-i18n="subscription_settings.traffic.subtitle">Выберите месячный лимит трафика.</div>
-                                </div>
-                                <div class="subscription-settings-section-meta" id="subscriptionSettingsTrafficMeta"></div>
-                            </div>
-                                    <div class="subscription-settings-options" id="subscriptionSettingsTrafficOptions"></div>
-                                    <button class="btn btn-secondary" type="button" id="subscriptionSettingsTrafficApply" data-i18n="subscription_settings.traffic.apply">Обновить трафик</button>
-                        </div>
-                        <div class="subscription-settings-section" id="subscriptionSettingsDevicesSection">
-                            <div class="subscription-settings-section-header">
-                                <div>
-                                    <div class="subscription-settings-section-title" data-i18n="subscription_settings.devices.title">Устройства</div>
-                                            <div class="subscription-settings-section-description" data-i18n="subscription_settings.devices.subtitle">Количество одновременных подключений.</div>
-                                </div>
-                                <div class="subscription-settings-section-meta" id="subscriptionSettingsDevicesMeta"></div>
-                            </div>
-                                    <div class="subscription-settings-devices-control" id="subscriptionSettingsDevicesControl">
-                                        <div class="subscription-purchase-devices-selector">
-                                            <button type="button" class="subscription-purchase-devices-btn" id="subscriptionSettingsDevicesDecrease" aria-label="Decrease">
-                                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                                    <line x1="5" y1="12" x2="19" y2="12"></line>
-                                                </svg>
-                                            </button>
-                                            <div class="subscription-purchase-devices-value-wrapper">
-                                                <span class="subscription-purchase-devices-value" id="subscriptionSettingsDevicesValue">1</span>
-                                                <span class="subscription-purchase-devices-price" id="subscriptionSettingsDevicesPrice"></span>
-                            </div>
-                                            <button type="button" class="subscription-purchase-devices-btn" id="subscriptionSettingsDevicesIncrease" aria-label="Increase">
-                                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                                    <line x1="12" y1="5" x2="12" y2="19"></line>
-                                                    <line x1="5" y1="12" x2="19" y2="12"></line>
-                                                </svg>
-                                            </button>
-                            </div>
-                                        <div class="subscription-purchase-devices-hint hidden" id="subscriptionSettingsDevicesHint"></div>
-                        </div>
-                                    <button class="btn btn-secondary" type="button" id="subscriptionSettingsDevicesApply" data-i18n="subscription_settings.devices.apply">Обновить устройства</button>
-                    </div>
-                                <div class="subscription-settings-section" id="subscriptionAutopaySection">
-                                    <div class="subscription-settings-section-header">
-                                        <div>
-                                            <div class="subscription-settings-section-title" data-i18n="subscription_autopay.title">Автоплатёж</div>
-                                            <div class="subscription-settings-section-description" data-i18n="subscription_autopay.subtitle">Автоматическое продление подписки.</div>
-                    </div>
-                </div>
-                                    <div class="subscription-autopay-control" id="subscriptionAutopayControl"></div>
-            </div>
-                    </div>
-                    </div>
-                </div>
-                </div>
-
-                <!-- Devices Modal -->
-                <div class="devices-modal-backdrop hidden" id="devicesModal">
-                    <div class="devices-modal">
-                        <div class="devices-modal-header">
-                            <div>
-                                <div class="devices-modal-title">Устройства</div>
-                                <div class="devices-modal-subtitle" id="devicesModalSubtitle">0 из 1 устройств</div>
-                        </div>
-                            <button class="devices-modal-close" id="devicesModalClose" type="button" aria-label="Close">
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                    <line x1="18" y1="6" x2="6" y2="18"></line>
-                                    <line x1="6" y1="6" x2="18" y2="18"></line>
-                                </svg>
-                            </button>
-                    </div>
-                        <div class="devices-modal-content" id="devicesModalContent">
-                            Нет подключенных устройств
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            <!-- ===== PAYMENTS SCREEN ===== -->
-            <div class="screen-container" data-screen="payments">
-            <!-- Balance Card -->
-                <div class="card balance-card" id="balanceCardPayments">
-                <div class="balance-content">
-                        <div class="balance-amount" id="balanceAmountPayments">—</div>
-                    <div class="balance-label" data-i18n="card.balance.title">Balance</div>
-                    <div class="balance-actions">
-                            <button class="topup-button" type="button" id="topupBalanceBtnPayments">
-                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" width="18" height="18">
-                                <line x1="12" y1="5" x2="12" y2="19"></line>
-                                <line x1="5" y1="12" x2="19" y2="12"></line>
-                            </svg>
-                            <span data-i18n="button.topup_balance">Top up balance</span>
-                        </button>
-                    </div>
-                </div>
-            </div>
-
-                <!-- Transaction History Card -->
-                <div class="card" id="transactionHistoryCardPayments">
-                    <div class="card-header">
-                        <div class="card-title" data-i18n="card.history.title">История операций</div>
-                    </div>
-                    <div class="card-content">
-                        <div class="transaction-history-list" id="transactionHistoryListPayments"></div>
-                        <div class="empty-state hidden" id="transactionHistoryEmptyPayments" data-i18n="history.empty">No transactions yet</div>
-                    </div>
-                </div>
-            </div>
-            <!-- End PAYMENTS SCREEN -->
-
-            <!-- ===== PROFILE SCREEN ===== -->
-            <div class="screen-container" data-screen="profile">
-                <!-- User Profile Card -->
-                <div class="card profile-user-card">
-                    <div class="profile-user-header">
-                        <div class="profile-avatar" id="profileAvatar">
-                            <span id="profileAvatarInitials">WN</span>
-                    </div>
-                        <div class="profile-user-info">
-                            <div class="profile-username" id="profileUsername">wsq22</div>
-                            <div class="profile-handle" id="profileHandle">@wsq22</div>
-                        </div>
-                    </div>
-                    <div class="profile-user-details">
-                        <div class="profile-detail-item">
-                            <svg class="profile-detail-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
-                            </svg>
-                            <div class="profile-detail-content">
-                                <span class="profile-detail-label">Telegram ID</span>
-                                <span class="profile-detail-value" id="profileTelegramId">655158045</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Balance and Status Card -->
-                <div class="card balance-status-card">
-                    <div class="balance-status-header">
-                        <div class="balance-status-title">Баланс и статус</div>
-                </div>
-                    <div class="balance-status-content">
-                        <div class="balance-status-message" id="balanceStatusMessage">
-                            <svg class="balance-status-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
-                                <polyline points="22 4 12 14.01 9 11.01"></polyline>
-                            </svg>
-                            <span id="balanceStatusText">Пробный период использован 06.12.2025</span>
-                        </div>
-                        <div class="balance-status-stats">
-                            <div class="balance-stat-card">
-                                <div class="balance-stat-label">Баланс:</div>
-                                <div class="balance-stat-value balance-stat-value-green" id="balanceStatAmount">0 ₽</div>
-                            </div>
-                            <div class="balance-stat-card">
-                                <div class="balance-stat-label">Скидка:</div>
-                                <div class="balance-stat-value" id="balanceStatDiscount">0%</div>
-                            </div>
-                        </div>
-                        <div class="balance-status-promo">
-                            <div class="promo-code-header-inline">
-                                <div class="promo-code-title-inline">Активировать промокод</div>
-                                <div class="promo-code-subtitle-inline">Введите промокод и сразу получите бонусы.</div>
-                            </div>
-                            <form class="promo-code-form-inline" id="promoCodeFormProfile">
-                                <div class="promo-code-input-group-inline">
-                        <input
-                            type="text"
-                                        id="promoCodeInputProfile"
-                                        class="promo-code-input-inline"
-                                        placeholder="ВВЕДИТЕ ПРОМОКОД"
-                            autocomplete="off"
-                            autocapitalize="characters"
-                            spellcheck="false"
-                            maxlength="32"
-                        >
-                                    <button type="submit" class="promo-code-button-inline" id="promoCodeSubmitProfile">Активировать</button>
-                    </div>
-                </form>
-                            <div class="promo-code-feedback hidden" id="promoCodeFeedbackProfile"></div>
-                            <div class="promo-code-result hidden" id="promoCodeResultProfile">
-                                <div class="promo-code-result-title" data-i18n="promo_code.result.title">Вы получили</div>
-                                <ul class="promo-code-result-list" id="promoCodeResultListProfile"></ul>
-                            </div>
-                        </div>
-                </div>
-            </div>
-
-                <!-- Profile Menu -->
-                <div class="card profile-menu-card">
-                    <div class="profile-menu-item" id="profileReferralMenuItem">
-                        <svg class="profile-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
-                            <circle cx="9" cy="7" r="4"></circle>
-                            <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
-                            <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
-                        </svg>
-                        <span class="profile-menu-text">Реферальная программа</span>
-                        <svg class="profile-menu-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <polyline points="9 18 15 12 9 6"></polyline>
-                        </svg>
-                    </div>
-                    <div class="profile-menu-item" id="profileNewsMenuItem">
-                        <svg class="profile-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
-                            <polyline points="14 2 14 8 20 8"></polyline>
-                            <line x1="16" y1="13" x2="8" y2="13"></line>
-                            <line x1="16" y1="17" x2="8" y2="17"></line>
-                            <polyline points="10 9 9 9 8 9"></polyline>
-                        </svg>
-                        <span class="profile-menu-text">Новости нашего сервиса</span>
-                        <svg class="profile-menu-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <polyline points="9 18 15 12 9 6"></polyline>
-                    </svg>
-                        </div>
-                    <div class="profile-menu-item" id="profileSupportMenuItem">
-                        <svg class="profile-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
-                            <line x1="9" y1="10" x2="15" y2="10"></line>
-                            <line x1="12" y1="7" x2="12" y2="13"></line>
-                        </svg>
-                        <span class="profile-menu-text">Техническая поддержка</span>
-                        <svg class="profile-menu-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <polyline points="9 18 15 12 9 6"></polyline>
-                        </svg>
-                        </div>
-                    <div class="profile-menu-item" id="profileLegalMenuItem">
-                        <svg class="profile-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
-                            <polyline points="14 2 14 8 20 8"></polyline>
-                            <line x1="16" y1="13" x2="8" y2="13"></line>
-                            <line x1="16" y1="17" x2="8" y2="17"></line>
-                            <polyline points="10 9 9 9 8 9"></polyline>
-                        </svg>
-                        <span class="profile-menu-text">Правила и условия сервиса</span>
-                        <svg class="profile-menu-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <polyline points="9 18 15 12 9 6"></polyline>
-                    </svg>
-                </div>
-                            </div>
-
-                <!-- Transaction History Card (Hidden - only in Payments tab) -->
-                <div class="card hidden" id="transactionHistoryCard">
-                    <div class="card-header">
-                        <div class="card-title" data-i18n="card.history.title">История операций</div>
-                        </div>
-                <div class="card-content">
-                        <div class="transaction-history-list" id="transactionHistoryList"></div>
-                        <div class="empty-state hidden" id="transactionHistoryEmpty" data-i18n="history.empty">No transactions yet</div>
-                </div>
-            </div>
-
-                <!-- Legal Documents Section -->
-                <div class="card hidden" id="legalDocsCard">
-                <div class="card-header">
-                        <div class="card-title" data-i18n="legal.title">Legal documents</div>
-                </div>
-                <div class="card-content">
-                        <div class="legal-doc-list" id="legalDocsList"></div>
-                </div>
-            </div>
-            </div>
-            <!-- End PROFILE SCREEN -->
-
-            <!-- Global Modals (available from all screens) -->
-            <div class="modal-backdrop hidden" id="topupModal">
-                <div class="modal" role="dialog" aria-modal="true" aria-labelledby="topupModalTitle">
-                    <div class="modal-header">
-                        <div class="modal-title" id="topupModalTitle" data-i18n="topup.title">Top up balance</div>
-                        <div class="modal-subtitle" id="topupModalSubtitle" data-i18n="topup.subtitle">Choose a payment method</div>
-                    </div>
-                    <div id="topupModalBody"></div>
-                    <div class="modal-error hidden" id="topupModalError"></div>
-                    <div class="modal-actions" id="topupModalFooter">
-                        <button class="modal-button secondary" type="button" id="topupModalCancelBtn" data-i18n="topup.cancel">Cancel</button>
-                </div>
-                </div>
-            </div>
-
-            <div class="modal-backdrop hidden" id="subscriptionPurchaseModal">
-                <div class="modal" role="dialog" aria-modal="true" aria-labelledby="subscriptionPurchaseModalTitle">
-                    <div class="modal-header">
-                        <div class="modal-title" id="subscriptionPurchaseModalTitle" data-i18n="subscription_purchase.title">Оформление подписки</div>
-                        <div class="modal-subtitle" id="subscriptionPurchaseModalSubtitle" data-i18n="subscription_purchase.subtitle">Настройте параметры и подтвердите покупку.</div>
-                    </div>
-                    <div id="subscriptionPurchaseModalBody"></div>
-                    <div class="modal-actions">
-                        <button class="modal-button secondary" type="button" id="subscriptionPurchaseModalCloseBtn" data-i18n="subscription_purchase.action.close">Закрыть</button>
-                </div>
-                </div>
-            </div>
-
-            <!-- Legal Documents Modal -->
-            <div class="guide-modal-backdrop hidden" id="legalDocsModal">
-                <div class="guide-modal" role="dialog" aria-modal="true" aria-labelledby="legalDocsModalTitle">
-                    <div class="guide-modal-header">
-                        <div class="guide-modal-title" id="legalDocsModalTitle" data-i18n="legal.title">Правовые документы</div>
-                        <button class="guide-modal-close" type="button" id="legalDocsModalClose" aria-label="Close">
-                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                            </svg>
-                        </button>
-                    </div>
-                    <div class="guide-modal-body">
-                        <div class="legal-doc-list" id="legalDocsListModal"></div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- App Installation Modal -->
-            <div class="guide-modal-backdrop hidden" id="installationModal">
-                <div class="guide-modal" role="dialog" aria-modal="true" aria-labelledby="installationModalTitle">
-                    <div class="guide-modal-header">
-                        <div class="guide-modal-title" id="installationModalTitle" data-i18n="apps.title">Installation Guide</div>
-                        <button class="guide-modal-close" type="button" id="installationModalClose" aria-label="Close">
-                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                            </svg>
-                        </button>
-                    </div>
-                    <div class="guide-modal-body">
-                        <div class="card installation-card">
-                            <div class="card-content installation-card-content">
-                                <div class="platform-selector">
-                                    <button class="platform-btn" data-platform="ios">
-                                        <svg class="platform-icon" viewBox="0 0 24 24" fill="currentColor">
-                                            <path d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.96-3.24-.96-1.24 0-1.81.46-2.82.96-1.18.55-2.15.5-3.05-.4C1.79 16.25 2.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.16c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/>
-                                        </svg>
-                                        <span data-i18n="platform.ios">iOS</span>
-                                    </button>
-                                    <button class="platform-btn active" data-platform="android">
-                                        <svg class="platform-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                            <rect x="6" y="2" width="12" height="20" rx="2" ry="2"/>
-                                            <line x1="6" y1="6" x2="18" y2="6"/>
-                                            <circle cx="12" cy="17" r="1"/>
-                                        </svg>
-                                        <span data-i18n="platform.android">Android</span>
-                                    </button>
-                                    <button class="platform-btn" data-platform="pc">
-                                        <svg class="platform-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                            <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
-                                            <line x1="8" y1="21" x2="16" y2="21"/>
-                                            <line x1="12" y1="17" x2="12" y2="21"/>
-                                        </svg>
-                                        <span data-i18n="platform.pc">PC</span>
-                                    </button>
-                                    <button class="platform-btn" data-platform="tv">
-                                        <svg class="platform-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                            <rect x="2" y="7" width="20" height="15" rx="2" ry="2"/>
-                                            <polyline points="17 2 12 7 7 2"/>
-                                        </svg>
-                                        <span data-i18n="platform.tv">TV</span>
-                                    </button>
-                                </div>
-
-                                <div class="platform-subselector hidden" id="platformFilterContainer"></div>
-
-                                <div id="appsContainer">
-                                    <!-- Apps will be rendered here -->
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="guide-modal-footer">
-                        <button class="btn btn-secondary" id="copyBtn">
-                            <svg class="btn-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
-                            </svg>
-                            <span data-i18n="button.copy">Copy Subscription Link</span>
-                        </button>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Referral Program Modal -->
-            <div class="modal-backdrop hidden" id="referralModal">
-                <div class="modal referral-modal" role="dialog" aria-modal="true" aria-labelledby="referralModalTitle">
-                    <div class="modal-header referral-modal-header">
-                        <div class="referral-modal-title-wrapper">
-                            <svg class="referral-modal-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
-                                <circle cx="9" cy="7" r="4"></circle>
-                                <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
-                                <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
-                            </svg>
-                            <div class="referral-modal-title" id="referralModalTitle" data-i18n="card.referral.title">РЕФЕРАЛЬНАЯ ПРОГРАММА</div>
-                        </div>
-                        <!-- Close button in header -->
-                        <button class="modal-close referral-modal-close referral-modal-close-header" type="button" id="referralModalCloseHeader" aria-label="Close">
-                            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-                            </svg>
-                        </button>
-                    </div>
-                    <div class="modal-body referral-modal-body">
-                        <!-- Referral Link Section -->
-                        <div class="referral-link-section-new">
-                            <div class="referral-link-label-new" data-i18n="referral.link.label">Ваша реферальная ссылка</div>
-                            <div class="referral-link-container-new">
-                                <div class="referral-link-value-new" id="referralLinkValueModal">—</div>
-                                <button class="referral-copy-btn-new" type="button" id="referralCopyBtnModal">
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                        <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
-                                        <rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
-                                    </svg>
-                                    Скопировать ссылку
-                                </button>
-                </div>
-            </div>
-
-                        <!-- Referral Stats Dashboard -->
-                        <div class="referral-stats-dashboard">
-                            <div class="referral-stat-box">
-                                <div class="referral-stat-label" data-i18n="referral.stats.invited">ПРИГЛАШЕНО</div>
-                                <div class="referral-stat-value" id="referralStatInvitedModal">0</div>
-                </div>
-                            <div class="referral-stat-box">
-                                <div class="referral-stat-label" data-i18n="referral.stats.active">АКТИВНЫХ</div>
-                                <div class="referral-stat-value" id="referralStatActiveModal">0</div>
-                </div>
-                            <div class="referral-stat-box">
-                                <div class="referral-stat-label" data-i18n="referral.stats.paid">ПЛАТЯЩИХ</div>
-                                <div class="referral-stat-value" id="referralStatPayingModal">0</div>
-            </div>
-                            <div class="referral-stat-box">
-                                <div class="referral-stat-label" data-i18n="referral.stats.month">ЗАРАБОТАНО ЗА МЕСЯЦ</div>
-                                <div class="referral-stat-value" id="referralStatMonthEarnedModal">0 ₽</div>
-                            </div>
-                            <div class="referral-stat-box referral-stat-box-row3">
-                                <div class="referral-stat-label" data-i18n="referral.stats.total">ВСЕГО ЗАРАБОТАНО</div>
-                                <div class="referral-stat-value" id="referralStatTotalEarnedModal">0 ₽</div>
-                            </div>
-                            <div class="referral-stat-box referral-stat-box-row3">
-                                <div class="referral-stat-label" data-i18n="referral.stats.conversion">КОНВЕРСИЯ</div>
-                                <div class="referral-stat-value" id="referralStatConversionModal">0.0%</div>
-                            </div>
-                        </div>
-
-                        <!-- Program Conditions Section -->
-                        <div class="referral-conditions-section">
-                            <div class="referral-conditions-title">УСЛОВИЯ ПРОГРАММЫ</div>
-                            <div class="referral-conditions-list" id="referralConditionsListModal">
-                                <!-- Conditions will be rendered here -->
-                            </div>
-                        </div>
-
-                        <!-- My Referrals Section -->
-                        <div class="referral-list-section-modal hidden" id="referralListSectionModal">
-                            <div class="referral-list-title-modal">МОИ РЕФЕРАЛЫ</div>
-                            <ul class="referral-list-modal" id="referralListModal">
-                                <!-- Referrals will be rendered here -->
-                            </ul>
-                            <div class="referral-list-empty-modal hidden" id="referralListEmptyModal">
-                                <span data-i18n="referral.list.empty">У вас пока нет рефералов</span>
-                            </div>
-                        </div>
-
-                        <!-- My Referrals Button -->
-                        <button class="btn btn-primary referral-my-referrals-btn" type="button" id="referralMyReferralsBtnModal">
-                            Мои рефералы
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <script>
-        // Copy all the original JavaScript code here
-        const tg = window.Telegram?.WebApp || {
-            initData: '',
-            initDataUnsafe: {},
-            expand: () => {},
-            ready: () => {},
-            themeParams: {},
-            showPopup: null,
-        };
-
-        let hasAnimatedCards = false;
-        let promoOfferTimers = [];
-        let promoOfferTimerHandle = null;
-        let referralListExpanded = false;
-        let referralCopyResetHandle = null;
-        let currentNavScreen = 'home'; // bedolaga VPN navigation state
-
-        if (typeof tg.expand === 'function') {
-            tg.expand();
-        }
-        if (typeof tg.ready === 'function') {
-            tg.ready();
-        }
-
-        if (tg.themeParams) {
-            Object.keys(tg.themeParams).forEach(key => {
-                document.documentElement.style.setProperty(`--tg-theme-${key.replace(/_/g, '-')}`, tg.themeParams[key]);
-            });
-        }
-
-        // Add expandable card functionality
-        document.querySelectorAll('.card.expandable .card-header').forEach(header => {
-            header.addEventListener('click', () => {
-                const card = header.parentElement;
-                card.classList.toggle('expanded');
-            });
-        });
-
-        setupSubscriptionSettingsEvents();
-        setupSubscriptionPurchaseEvents();
-        setupSubscriptionRenewalEvents();
-
-        // Profile menu event handlers
-        document.getElementById('profileReferralMenuItem')?.addEventListener('click', () => {
-            openReferralModal();
-        });
-
-        document.getElementById('profileNewsMenuItem')?.addEventListener('click', () => {
-            openNewsLink();
-        });
-
-        document.getElementById('profileSupportMenuItem')?.addEventListener('click', () => {
-            if (typeof tg.openTelegramLink === 'function') {
-                tg.openTelegramLink(supportUrl);
-            } else {
-                window.open(supportUrl, '_blank');
-            }
-        });
-
-        document.getElementById('newsMoreBtn')?.addEventListener('click', () => {
-            openNewsLink();
-        });
-
-        document.getElementById('newsList')?.addEventListener('click', event => {
-            const target = event.target.closest('.news-item');
-            if (!target) {
-                return;
-            }
-            const link = normalizeUrl(target.getAttribute('data-link'));
-            if (link) {
-                openNewsLink(link);
-            }
-        });
-
-        // Legal Documents Modal
-        function openLegalDocsModal() {
-            const modal = document.getElementById('legalDocsModal');
-            if (modal) {
-                modal.classList.remove('hidden');
-                document.body.classList.add('modal-open');
-                // Render documents in modal
-                renderLegalDocumentsModal();
-            }
-        }
-
-        function closeLegalDocsModal() {
-            const modal = document.getElementById('legalDocsModal');
-            if (modal) {
-                modal.classList.add('hidden');
-                document.body.classList.remove('modal-open');
-            }
-        }
-
-        document.getElementById('profileLegalMenuItem')?.addEventListener('click', () => {
-            openLegalDocsModal();
-        });
-
-        document.getElementById('legalDocsModalClose')?.addEventListener('click', () => {
-            closeLegalDocsModal();
-        });
-
-        document.getElementById('legalDocsModal')?.addEventListener('click', (e) => {
-            if (e.target === e.currentTarget) {
-                closeLegalDocsModal();
-            }
-        });
-
-        const themeToggle = document.getElementById('themeToggle');
-        const THEME_STORAGE_KEY = 'remnawave-miniapp-theme';
-        let currentTheme = 'light';
-        let themeLockedByUser = false;
-
-        function resolveTheme(theme) {
-            if (!theme) {
-                return null;
-            }
-            const normalized = String(theme).toLowerCase();
-            if (normalized === 'dark') {
-                return 'dark';
-            }
-            if (normalized === 'light') {
-                return 'light';
-            }
-            return null;
-        }
-
-        function safeGetStoredTheme() {
-            try {
-                return localStorage.getItem(THEME_STORAGE_KEY);
-            } catch (error) {
-                console.warn('Unable to access theme preference:', error);
-                return null;
-            }
-        }
-
-        function safeSetStoredTheme(theme) {
-            try {
-                localStorage.setItem(THEME_STORAGE_KEY, theme);
-            } catch (error) {
-                console.warn('Unable to persist theme preference:', error);
-            }
-        }
-
-        function updateThemeToggleState() {
-            if (!themeToggle) {
-                return;
-            }
-            themeToggle.setAttribute('aria-pressed', currentTheme === 'dark' ? 'true' : 'false');
-
-            // Update icon based on theme
-            const moonIcon = document.getElementById('moonIcon');
-            const sunIcon = document.getElementById('sunIcon');
-
-            if (currentTheme === 'dark') {
-                // Show moon icon for dark theme (click to switch to light)
-                if (moonIcon) moonIcon.style.display = 'block';
-                if (sunIcon) sunIcon.style.display = 'none';
-            } else {
-                // Show sun icon for light theme (click to switch to dark)
-                if (moonIcon) moonIcon.style.display = 'none';
-                if (sunIcon) sunIcon.style.display = 'block';
-            }
-        }
-
-        function applyTheme(theme, options = {}) {
-            const resolved = resolveTheme(theme) || 'dark';
-            currentTheme = resolved;
-            if (options.persist) {
-                themeLockedByUser = true;
-                safeSetStoredTheme(resolved);
-            }
-            document.documentElement.setAttribute('data-theme', resolved);
-            document.documentElement.style.setProperty('color-scheme', resolved);
-            // Update meta theme-color for mobile browsers
-            const metaThemeColor = document.querySelector('meta[name="theme-color"]');
-            if (metaThemeColor) {
-                metaThemeColor.setAttribute('content', resolved === 'dark' ? '#0f0f0f' : '#f5f5f7');
-            }
-            updateThemeToggleState();
-        }
-
-        function initializeTheme() {
-            const storedTheme = resolveTheme(safeGetStoredTheme());
-            if (storedTheme) {
-                themeLockedByUser = true;
-                applyTheme(storedTheme);
-                return;
-            }
-
-            // bedolaga VPN: Default to dark theme
-            const telegramTheme = resolveTheme(tg.colorScheme);
-            if (telegramTheme) {
-                applyTheme(telegramTheme);
-            } else {
-                // Default to dark theme for bedolaga VPN
-                applyTheme('dark');
-            }
-        }
-
-        initializeTheme();
-
-        if (typeof tg.onEvent === 'function') {
-            tg.onEvent('themeChanged', () => {
-                if (!themeLockedByUser) {
-                    applyTheme(tg.colorScheme);
-                }
-            });
-        }
-
-        if (window.matchMedia) {
-            const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-            const handleMediaChange = event => {
-                if (!themeLockedByUser) {
-                    applyTheme(event.matches ? 'dark' : 'light');
-                }
-            };
-            if (typeof mediaQuery.addEventListener === 'function') {
-                mediaQuery.addEventListener('change', handleMediaChange);
-            } else if (typeof mediaQuery.addListener === 'function') {
-                mediaQuery.addListener(handleMediaChange);
-            }
-        }
-
-        themeToggle?.addEventListener('click', () => {
-            const nextTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            applyTheme(nextTheme, { persist: true });
-        });
-
-        // All original constants and functions
-        const LANG_STORAGE_KEY = 'remnawave-miniapp-language';
-        const DEFAULT_SUPPORTED_LANGUAGES = ['en', 'ru'];
-        const BASE_LANGUAGE_ORDER = ['en', 'ru'];
-        const supportedLanguages = new Set(DEFAULT_SUPPORTED_LANGUAGES);
-        const LANGUAGE_LABELS = {
-            en: '🇬🇧 English',
-            ru: '🇷🇺 Русский',
-            zh: '🇨🇳 中文',
-            fa: '🇮🇷 فارسی',
-        };
-
-        const translations = {
-            en: {
-                'app.title': '',
-                'app.name': '',
-                'values.not_available': 'Not available',
-                'app.subtitle': '',
-                'app.loading': 'Loading your subscription...',
-                'maintenance.title': 'Technical maintenance',
-                'maintenance.message': 'The service is temporarily in maintenance mode. Some actions may be unavailable.',
-                'error.default.title': 'Subscription Not Found',
-                'error.default.message': 'Please contact support to activate your subscription.',
-                'error.user_not_found.title': 'Register in the bot',
-                'error.user_not_found.message': 'Open the Telegram bot to register before using the mini app.',
-                'stats.days_left': 'Days left',
-                'stats.servers': 'Servers',
-                'stats.devices': 'Devices',
-                'stats.traffic_short': 'Traffic',
-                'info.expires': 'Expires',
-                'info.expires.active_until': 'Active until',
-                'stats.remaining': 'Remaining',
-                'button.edit': 'Edit',
-                'button.install': 'Installation',
-                'button.setup': 'and setup',
-                'quick_action.balance': 'Balance',
-                'quick_action.subscription': 'Plan',
-                'quick_action.install': 'Setup',
-                'quick_action.support': 'Support',
-                'info.traffic_used': 'Traffic used',
-                'info.traffic_used_short': 'Used',
-                'info.locations': 'Available locations',
-                'info.traffic_limit': 'Traffic limit',
-                'info.subscription_type': 'Subscription type',
-                'info.promo_group': 'Promo group',
-                'info.device_limit': 'Device limit',
-                'info.autopay': 'Auto-pay',
-                'button.connect.default': 'Connect to VPN',
-                'button.connect.happ': 'Connect',
-                'button.copy': 'Copy subscription link',
-                'button.topup_balance': 'Top up balance',
-                'topup.title': 'Top up balance',
-                'topup.subtitle': 'Choose a payment method',
-                'topup.methods.subtitle': 'Select how you want to pay',
-                'topup.method.stars.title': 'Telegram Stars',
-                'topup.method.stars.description': 'Pay using Telegram Stars',
-                'topup.method.stars.invoice_hint': 'Telegram Stars payments use whole stars. Invoice: {stars} ⭐.',
-                'topup.method.stars.adjusted': 'Requested {requested}. Actual charge: {amount} ({stars} ⭐).',
-                'topup.method.yookassa.title': 'Bank card (YooKassa)',
-                'topup.method.yookassa.description': 'Pay securely with a bank card',
-                'topup.method.yookassa_sbp.title': 'SBP (YooKassa)',
-                'topup.method.yookassa_sbp.description': 'Pay via Faster Payments System',
-                'topup.method.mulenpay.title': 'Bank card (Mulen Pay)',
-                'topup.method.mulenpay.description': 'Fast payment with bank card',
-                'topup.method.platega.title': 'Platega.io',
-                'topup.method.platega.description': 'Bank cards and SBP via Platega',
-                'topup.method.platega.option.2.title': 'SBP (QR)',
-                'topup.method.platega.option.2.description': 'Pay with Faster Payments QR code.',
-                'topup.method.platega.option.10.title': 'Bank cards (RUB)',
-                'topup.method.platega.option.10.description': 'Russian bank cards through Platega.',
-                'topup.method.platega.option.11.title': 'Bank cards',
-                'topup.method.platega.option.11.description': 'Local bank cards via Platega.',
-                'topup.method.platega.option.12.title': 'International cards',
-                'topup.method.platega.option.12.description': 'International cards supported by Platega.',
-                'topup.method.platega.option.13.title': 'Cryptocurrency',
-                'topup.method.platega.option.13.description': 'Top up balance with crypto via Platega.',
-                'topup.method.wata.title': 'Bank card (Wata)',
-                'topup.method.wata.description': 'Pay with a bank card via Wata',
-                'topup.method.pal24.title': 'SBP (PayPalych)',
-                'topup.method.pal24.description': 'Pay via Faster Payments System',
-                'topup.method.pal24.option.sbp.title': 'Faster Payments (SBP)',
-                'topup.method.pal24.option.sbp.description': 'Instant transfer via SBP with no extra fees',
-                'topup.method.pal24.option.card.title': 'Bank card payment',
-                'topup.method.pal24.option.card.description': 'Pay with a bank card via PayPalych',
-                'topup.method.cryptobot.title': 'Cryptocurrency (CryptoBot)',
-                'topup.method.cryptobot.description': 'Pay with crypto assets',
-                'topup.method.tribute.title': 'Bank card (Tribute)',
-                'topup.method.tribute.description': 'Redirect to Tribute payment page',
-                'topup.amount.title': 'Enter amount',
-                'topup.amount.subtitle': 'Specify how much you want to top up',
-                'topup.amount.placeholder': 'Amount in {currency}',
-                'topup.amount.hint.range': 'Available range: {min} — {max}',
-                'topup.amount.hint.single_min': 'Minimum top-up: {min}',
-                'topup.amount.hint.single_max': 'Maximum top-up: {max}',
-                'topup.submit': 'Continue',
-                'topup.cancel': 'Close',
-                'topup.back': 'Back',
-                'topup.open_link': 'Open payment page',
-                'topup.loading': 'Preparing payment…',
-                'topup.error.generic': 'Unable to start the payment. Please try again later.',
-                'topup.error.amount': 'Enter a valid amount within the limits.',
-                'topup.error.unavailable': 'This payment method is temporarily unavailable.',
-                'topup.status.pending.title': 'Waiting for confirmation',
-                'topup.status.pending.description': 'Complete the payment in the selected provider. We will update this window automatically.',
-                'topup.status.refreshing.description': 'Updating payment status…',
-                'topup.status.success.title': 'Payment received',
-                'topup.status.success.description': 'Funds have been credited to your balance.',
-                'topup.status.failed.title': 'Payment not confirmed',
-                'topup.status.failed.description': 'We could not confirm the payment automatically. Please check later or contact support.',
-                'topup.status.retry': 'Try again',
-                'topup.done': 'Done',
-                'button.buy_subscription': 'Buy Subscription',
-                'button.open_bot': 'Open Telegram bot',
-                'subscription_purchase.title': 'Purchase subscription',
-                'subscription_purchase.subtitle': 'Configure the plan before completing the purchase.',
-                'subscription_purchase.status.loading': 'Loading subscription options…',
-                'subscription_purchase.error.default': 'Failed to load subscription options. Please try again later.',
-                'subscription_purchase.error.unavailable': 'Subscription configurator is temporarily unavailable.',
-                'subscription_purchase.action.retry': 'Try again',
-                'subscription_purchase.action.submit': 'Buy subscription',
-                'subscription_purchase.action.topup': 'Top up balance',
-                'subscription_purchase.action.close': 'Close',
-                'subscription_purchase.period.title': 'Subscription period',
-                'subscription_purchase.period.subtitle': 'Select how long you need access.',
-                'subscription_purchase.period.per_month': '{amount}/month',
-                'subscription_purchase.traffic.title': 'Traffic',
-                'subscription_purchase.traffic.subtitle': 'Monthly traffic limit.',
-                'subscription_purchase.traffic.fixed': 'Included traffic: {amount}',
-                'subscription_purchase.traffic.unlimited': 'Unlimited traffic included',
-                'subscription_purchase.traffic.empty': 'No traffic options available',
-                'subscription_purchase.servers.title': 'Servers',
-                'subscription_purchase.servers.subtitle': 'Choose connection regions.',
-                'subscription_purchase.servers.empty': 'No servers available',
-                'subscription_purchase.servers.single': 'Included server: {name}',
-                'subscription_purchase.servers.limit': 'Select up to {count}',
-                'subscription_purchase.servers.selected': 'Selected: {count}',
-                'subscription_purchase.devices.title': 'Devices',
-                'subscription_purchase.devices.subtitle': 'Simultaneous connections.',
-                'subscription_purchase.devices.price_label': 'Per device: {amount}',
-                'subscription_purchase.devices.price_original_label': 'Original price: {amount}',
-                'subscription_purchase.devices.unlimited': 'Unlimited devices',
-                'subscription_purchase.devices.limit': 'From {min} to {max} devices',
-                'subscription_purchase.summary.total': 'Total',
-                'subscription_purchase.summary.discount': 'Discount',
-                'subscription_purchase.summary.per_month': '{amount}/month',
-                'subscription_purchase.summary.note': 'The total already includes all discounts.',
-                'subscription_purchase.price.included': 'Included',
-                'subscription_purchase.balance.warning': 'Required: {required}. Balance: {balance}.',
-                'subscription_purchase.balance.hint': 'Top up your balance to continue.',
-                'subscription_purchase.balance.open_topup': 'Open top up methods',
-                'subscription_purchase.selection.invalid': 'Please select available options.',
-                'subscription_purchase.submit.success': 'Purchase request sent successfully.',
-                'subscription_purchase.submit.title': 'Subscription purchase',
-                'subscription_purchase.submit.insufficient': 'Not enough funds to complete the purchase.',
-                'subscription_purchase.breakdown.base': 'Base plan',
-                'subscription_purchase.breakdown.traffic': 'Traffic',
-                'subscription_purchase.breakdown.servers': 'Servers',
-                'subscription_purchase.breakdown.devices': 'Devices',
-                'subscription_purchase.breakdown.promo': 'Promo discount',
-                'subscription_purchase.breakdown.total': 'Total',
-                'card.balance.title': 'Balance',
-                'subscription_settings.title': 'Subscription settings',
-                'subscription_settings.summary.servers': 'Servers: {count}',
-                'subscription_settings.summary.servers_one': 'Server: {count}',
-                'subscription_settings.summary.traffic': 'Traffic: {amount}',
-                'subscription_settings.summary.devices': 'Devices: {count}',
-                'subscription_settings.summary.devices_one': 'Device: {count}',
-                'subscription_settings.summary.unlimited': 'Unlimited',
-                'subscription_settings.status.loading': 'Loading subscription settings…',
-                'subscription_settings.status.error': 'Unable to load subscription settings.',
-                'subscription_settings.action.retry': 'Try again',
-                'subscription_settings.section.disabled': 'This action is temporarily unavailable.',
-                'subscription_settings.servers.title': 'Servers',
-                'subscription_settings.servers.subtitle': 'Choose the regions you need.',
-                'subscription_settings.servers.manage': 'Update',
-                'subscription_settings.servers.empty': 'No servers available',
-                'subscription_settings.servers.limit': 'Selected: {count}',
-                'subscription_settings.servers.hint': 'Discounts are applied automatically.',
-                'subscription_settings.traffic.title': 'Traffic',
-                'subscription_settings.traffic.subtitle': 'Select your monthly traffic limit.',
-                'subscription_settings.traffic.apply': 'Update',
-                'subscription_settings.traffic.empty': 'No traffic options available',
-                'subscription_settings.traffic.current': 'Current: {limit}',
-                'subscription_settings.devices.title': 'Devices',
-                'subscription_settings.devices.subtitle': 'Number of simultaneous connections.',
-                'subscription_settings.devices.apply': 'Update',
-                'subscription_settings.devices.value': '{count} devices',
-                'subscription_settings.devices.value_one': '{count} device',
-                'subscription_settings.devices.unlimited': 'Unlimited',
-                'subscription_settings.price.included': 'Included',
-                'subscription_settings.success.servers': 'Servers updated successfully.',
-                'subscription_settings.success.traffic': 'Traffic limit updated successfully.',
-                'subscription_settings.success.devices': 'Device limit updated successfully.',
-                'subscription_settings.error.generic': 'Unable to update subscription settings. Please try again later.',
-                'subscription_settings.error.unauthorized': 'Authorization failed. Please reopen the mini app from Telegram.',
-                'subscription_settings.error.validation': 'Please review your selection and try again.',
-                'subscription_settings.pending_action': 'Saving…',
-                'subscription_settings.confirm.title.charge': 'Confirm payment',
-                'subscription_settings.confirm.title.free': 'Confirm changes',
-                'subscription_settings.confirm.action.pay': 'Pay',
-                'subscription_settings.confirm.action.apply': 'Apply',
-                'subscription_settings.confirm.action.cancel': 'Cancel',
-                'subscription_settings.confirm.total.charge': 'You will be charged {amount}.',
-                'subscription_settings.confirm.total.charge_period': 'You will be charged {amount} for {period}.',
-                'subscription_settings.confirm.total.free': 'No charges will be made.',
-                'subscription_settings.confirm.servers.add': 'The following servers will be connected:',
-                'subscription_settings.confirm.servers.remove': 'The following servers will be disconnected without refunds:',
-                'subscription_settings.confirm.servers.entry_paid': '{name} — {amount}',
-                'subscription_settings.confirm.servers.entry_free': '{name} — included',
-                'subscription_settings.confirm.traffic.increase': 'Traffic limit will change to {value}.',
-                'subscription_settings.confirm.traffic.decrease': 'Traffic limit will change to {value}. No charges apply.',
-                'subscription_settings.confirm.devices.increase': 'Device limit will change to {value}.',
-                'subscription_settings.confirm.devices.decrease': 'Device limit will change to {value}. No charges apply.',
-                'subscription_settings.confirm.months.one': '{count} month',
-                'subscription_settings.confirm.months.other': '{count} months',
-                'subscription_renewal.title': 'Renew subscription',
-                'subscription_renewal.subtitle': 'Choose how long you want to extend access.',
-                'subscription_renewal.status.loading': 'Loading renewal options…',
-                'subscription_renewal.status.empty': 'No renewal options are currently available.',
-                'subscription_renewal.error.generic': 'Unable to load renewal options. Please try again later.',
-                'subscription_renewal.error.unauthorized': 'Authorization required. Please reopen the mini app from Telegram.',
-                'subscription_renewal.error.validation': 'Please select a renewal period.',
-                'subscription_renewal.action.retry': 'Try again',
-                'subscription_renewal.summary.total': 'Total',
-                'subscription_renewal.summary.per_month': '{amount} per month',
-                'subscription_renewal.summary.discount': 'You save {percent}%',
-                'subscription_renewal.summary.insufficient': 'Not enough balance — missing {missing}.',
-                'subscription_renewal.submit': 'Renew subscription',
-                'subscription_renewal.action.topup': 'Top up balance',
-                'subscription_renewal.submit.loading': 'Processing…',
-                'subscription_renewal.confirm.title': 'Confirm renewal',
-                'subscription_renewal.confirm.message': 'Renew the subscription for {period} and pay {amount}?',
-                'subscription_renewal.confirm.balance': 'Current balance: {balance}',
-                'subscription_renewal.confirm.accept': 'Pay',
-                'subscription_renewal.confirm.cancel': 'Cancel',
-                'subscription_renewal.success': 'Subscription renewed successfully.',
-                'subscription_renewal.badge.recommended': 'Recommended',
-                'subscription_renewal.period.days': '{count} days',
-                'subscription_renewal.period.month_one': '{count} month',
-                'subscription_renewal.period.month_other': '{count} months',
-                'subscription_renewal.meta.promo_group.title': 'Promo group discounts',
-                'subscription_renewal.meta.promo_group.empty': 'No extra discounts',
-                'subscription_renewal.meta.promo_offer.title': 'Promo offer',
-                'subscription_renewal.meta.promo_offer.active': 'Extra discount {percent}%',
-                'subscription_renewal.meta.promo_offer.until': 'Valid until {date}',
-                'promo_code.title': 'Activate promo code',
-                'promo_code.subtitle': 'Enter a promo code to unlock rewards instantly.',
-                'promo_code.placeholder': 'Enter promo code',
-                'promo_code.button.default': 'Activate',
-                'promo_code.button.loading': 'Activating…',
-                'promo_code.success.title': 'Promo code activated',
-                'promo_code.success.default': 'Rewards credited to your account.',
-                'promo_code.result.title': 'You received',
-                'promo_code.result.balance': 'Balance bonus: {amount}',
-                'promo_code.result.subscription_days': 'Subscription extended by {days} days',
-                'promo_code.result.trial': 'Trial subscription for {days} days',
-                'promo_code.error.empty': 'Please enter a promo code.',
-                'promo_code.error.invalid': 'Enter a valid promo code.',
-                'promo_code.error.not_found': 'Promo code not found.',
-                'promo_code.error.expired': 'Promo code has expired.',
-                'promo_code.error.used': 'Promo code already used.',
-                'promo_code.error.already_used_by_user': 'You have already activated this promo code.',
-                'promo_code.error.user_not_found': 'User not found.',
-                'promo_code.error.server_error': 'Failed to activate the promo code. Please try again later.',
-                'promo_code.error.generic': 'Unable to activate the promo code.',
-                'promo_code.error.unauthorized': 'Authorization failed. Please reopen the mini app from Telegram.',
-                'promo_code.error.network': 'Network error. Please try again later.',
-                'card.referral.title': 'Referral Program',
-                'card.history.title': 'Transaction History',
-                'card.servers.title': 'Connected Servers',
-                'card.devices.title': 'Connected Devices',
-                'card.promo_levels.title': 'Promo Levels',
-                'card.promo.title': 'Promo benefits',
-                'promo.summary.current_group': 'Current group',
-                'promo.summary.no_group': 'No promo group',
-                'promo.summary.up_to': 'Up to {value}',
-                'news.section.title': 'Latest news',
-                'news.section.subtitle': 'Updates from the Pedzeo VPN team',
-                'news.section.button': 'All news',
-                'promo.current_group.title': 'Current promo group',
-                'promo.levels.title': 'Automatic promo levels',
-                'promo.periods.title': 'Subscription period discounts',
-                'promo.periods.title_short': 'Periods',
-                'promo.periods.label': '{months} mo',
-                'promo.periods.month_suffix': 'mo',
-                'apps.title': 'Installation guide',
-                'apps.no_data': 'No installation guide available for this platform yet.',
-                'apps.featured': 'Recommended',
-                'apps.step.download': 'Download & install',
-                'apps.step.before_add': 'Before adding subscription',
-                'apps.step.add': 'Add subscription',
-                'apps.step.after_add': 'If the subscription is not added',
-                'apps.step.connect': 'Connect & use',
-                'apps.button.open_link': 'Open link',
-                'faq.title': 'FAQ',
-                'faq.item_default_title': 'Question {index}',
-                'faq.item_empty': 'Answer will be added soon.',
-                'legal.title': 'Legal documents',
-                'legal.public_offer.title': 'Public offer',
-                'legal.service_rules.title': 'Service rules',
-                'legal.privacy_policy.title': 'Privacy policy',
-                'legal.updated_at': 'Updated {date}',
-                'history.empty': 'No transactions yet',
-                'history.status.completed': 'Completed',
-                'history.status.pending': 'Processing',
-                'history.type.deposit': 'Top-up',
-                'history.type.withdrawal': 'Withdrawal',
-                'history.type.subscription_payment': 'Subscription payment',
-                'history.type.refund': 'Refund',
-                'history.type.referral_reward': 'Referral reward',
-                'referral.link.label': 'Your referral link',
-                'referral.link.copy': 'Copy link',
-                'referral.link.copied': 'Link copied',
-                'referral.empty': 'Referral information is unavailable',
-                'referral.stats.invited': 'Invited',
-                'referral.stats.active': 'Active referrals',
-                'referral.stats.paid': 'Paying referrals',
-                'referral.stats.total': 'Total earned',
-                'referral.stats.month': 'Earned this month',
-                'referral.stats.conversion': 'Conversion',
-                'referral.terms.title': 'Program terms',
-                'referral.terms.minimum_topup': 'Invitee minimum top-up to earn bonus',
-                'referral.terms.first_topup': 'Invitee bonus for first top-up',
-                'referral.terms.inviter_bonus': 'Your bonus for their top-up',
-                'referral.terms.commission': 'Commission from each referral top-up',
-                'referral.toggle.open': 'My referrals',
-                'referral.toggle.close': 'Hide referrals',
-                'referral.list.empty': 'You have no referrals yet',
-                'referral.meta.earned': 'Earned',
-                'referral.meta.topups': 'Top-ups',
-                'referral.meta.joined': 'Joined',
-                'referral.meta.last_activity': 'Last activity',
-                'referral.copy.success': 'Referral link copied to clipboard.',
-                'referral.copy.failure': 'Unable to copy the referral link automatically. Please copy it manually: {value}',
-                'referral.copy.unavailable': 'Copying is unavailable. Please copy the link manually.',
-                'referral.status.active': 'Active',
-                'referral.status.inactive': 'Inactive',
-                'referral.status.paying': 'Paying',
-                'referral.referrals.unknown': 'Referral',
-                'servers.empty': 'No servers connected yet',
-                'devices.empty': 'No devices connected yet',
-                'devices.remove_button_label': 'Reset device',
-                'devices.remove_confirm.title': 'Reset device',
-                'devices.remove_confirm.message': 'Do you really want to reset the device “{device}”?',
-                'devices.remove_confirm.confirm': 'Reset',
-                'devices.remove_confirm.cancel': 'Cancel',
-                'devices.remove_success.title': 'Device reset',
-                'devices.remove_success': 'The device has been reset successfully.',
-                'devices.remove_error.title': 'Unable to reset device',
-                'devices.remove_error.generic': 'Failed to reset the device. Please try again later.',
-                'devices.remove_error.network': 'Network error. Please try again later.',
-                'devices.remove_error.unauthorized': 'Authorization failed. Please reopen the mini app from Telegram and try again.',
-                'promo_levels.total_spent': 'Total spent',
-                'promo_levels.threshold': 'from {amount}',
-                'promo_levels.badge.current': 'Current level',
-                'promo_levels.badge.unlocked': 'Unlocked',
-                'promo_levels.badge.locked': 'Locked',
-                'promo_levels.discounts.server': 'Servers',
-                'promo_levels.discounts.traffic': 'Traffic',
-                'promo_levels.discounts.devices': 'Devices',
-                'promo_levels.discounts.none': 'No discounts',
-                'promo_levels.empty': 'Automatic promo levels are not configured yet',
-                'language.ariaLabel': 'Select interface language',
-                'notifications.copy.success': 'Subscription link copied to clipboard.',
-                'notifications.copy.failure': 'Unable to copy the subscription link automatically. Please copy it manually.',
-                'notifications.copy.title.success': 'Copied',
-                'notifications.copy.title.failure': 'Copy failed',
-                'status.active': 'Active',
-                'status.trial': 'Trial',
-                'status.expired': 'Expired',
-                'status.disabled': 'Disabled',
-                'status.missing': 'Inactive',
-                'status.unknown': 'Unknown',
-                'subscription.type.trial': 'Trial',
-                'subscription.type.paid': 'Paid',
-                'info.expires.expired': 'Expired',
-                'info.expires.expired_lower': 'expired',
-                'subscription.status.active': 'Active',
-                'subscription.status.expired': 'Expired',
-                'subscription.expired': 'Subscription expired',
-                'info.expires.valid_until': 'Valid until',
-                'stats.days_remaining': 'remaining {days} days',
-                'promo_code.action.apply': 'Activate',
-                'referral.link.copied': 'Copied',
-                'referral.toggle.close': 'Hide list',
-                'referral.toggle.open': 'My referrals',
-                'subscription.trial_used': 'Trial period used',
-                'subscription.active_until': 'Subscription active until {date}',
-                'devices.empty': 'No connected devices',
-                'devices.detected_no_details': 'Detected {count} devices, but details are unavailable',
-                'devices.count_of_limit': '{current} of {limit} devices',
-                'subscription.type.none': 'No subscription',
-                'subscription_missing.title': 'No active subscription',
-                'subscription_missing.description.default': 'You do not have an active subscription yet. Purchase a plan to get access.',
-                'subscription_missing.description.trial': 'Activate your free {days}-day trial or choose a plan to continue.',
-                'subscription_missing.description.trial_short': 'Activate your free trial or choose a plan to continue.',
-                'subscription_missing.description.no_trial': 'Your trial is no longer available. Purchase a plan to continue.',
-                'subscription_missing.hint': 'After activation you can top up your balance here to stay connected.',
-                'subscription_missing.action.trial': 'Activate trial',
-                'subscription_missing.action.trial.loading': 'Activating…',
-                'trial.activation.title': 'Trial activation',
-                'trial.activation.success': 'Trial activated! Enjoy {days} days of access.',
-                'trial.activation.success.short': 'Trial activated successfully.',
-                'trial.activation.error.generic': 'Unable to activate the trial. Please try again later.',
-                'trial.activation.error.unavailable': 'Your trial is no longer available. Choose a plan to continue.',
-                'trial.activation.error.unauthorized': 'Authorization failed. Please reopen the mini app from Telegram.',
-                'trial.activation.error.already_active': 'You already have an active subscription.',
-                'autopay.enabled': 'Enabled',
-                'autopay.disabled': 'Disabled',
-                'subscription_autopay.title': 'Auto-pay',
-                'subscription_autopay.subtitle': 'Automatically renew your subscription before it expires.',
-                'subscription_autopay.status.enabled': 'Enabled',
-                'subscription_autopay.status.disabled': 'Disabled',
-                'subscription_autopay.status.loading': 'Loading…',
-                'subscription_autopay.action.enable': 'Enable',
-                'subscription_autopay.action.disable': 'Disable',
-                'subscription_autopay.days.title': 'Charge before expiry',
-                'subscription_autopay.day.same_day': 'On renewal day',
-                'subscription_autopay.day.before.one': '{count} day before',
-                'subscription_autopay.day.before.few': '{count} days before',
-                'subscription_autopay.day.before.many': '{count} days before',
-                'subscription_autopay.saving': 'Saving…',
-                'subscription_autopay.hint.disabled': 'Enable auto-pay to choose when to charge your balance.',
-                'subscription_autopay.hint.no_options': 'Auto-pay day selection is temporarily unavailable.',
-                'subscription_autopay.error.generic': 'Failed to update auto-pay settings. Please try again later.',
-                'subscription_autopay.error.unauthorized': 'Authorization failed. Please reopen the mini app from Telegram.',
-                'subscription_autopay.error.no_days': 'Select a charge day to enable auto-pay.',
-                'platform.ios': 'iOS',
-                'platform.android': 'Android',
-                'platform.pc': 'PC',
-                'platform.tv': 'TV',
-                'platform.all': 'All',
-                'platform.windows': 'Windows',
-                'platform.macos': 'macOS',
-                'platform.linux': 'Linux',
-                'platform.android_tv': 'Android TV',
-                'platform.apple_tv': 'Apple TV',
-                'units.gb': 'GB',
-                'units.mb': 'MB',
-                'values.unlimited': 'Unlimited',
-                'values.not_available': 'Not available',
-                'promo_offer.status.active': 'Active promo offer',
-                'promo_offer.status.pending': 'Special offer',
-                'promo_offer.accept': 'Activate',
-                'promo_offer.accepting': 'Activating…',
-                'promo_offer.accept.success': 'Offer activated successfully!',
-                'promo_offer.timer.active': 'Ends in {time}',
-                'promo_offer.timer.pending': 'Expires in {time}',
-                'promo_offer.timer.expired': 'Expired',
-                'promo_offer.error.offer_not_found': 'Offer not found',
-                'promo_offer.error.already_claimed': 'Offer already activated',
-                'promo_offer.error.offer_expired': 'Offer has expired',
-                'promo_offer.error.subscription_missing': 'An active subscription is required.',
-                'promo_offer.error.squads_missing': 'No servers available for this test access.',
-                'promo_offer.error.already_connected': 'Servers are already connected.',
-                'promo_offer.error.remnawave_sync_failed': 'Failed to activate servers. Try again later.',
-                'promo_offer.error.claim_failed': 'Unable to activate the offer right now.',
-                'promo_offer.error.invalid_discount': 'Offer does not contain a discount.',
-                'promo_offer.error.generic': 'Failed to activate the offer. Please try again.',
-                'promo_offer.type.extend_discount': 'Renewal discount',
-                'promo_offer.type.purchase_discount': 'Welcome back discount',
-                'promo_offer.type.test_access': 'Test access',
-                'promo_offer.type.percent_discount': 'Discount offer',
-                'time.days_short': '{value}d',
-                'time.hours_short': '{value}h',
-                'time.minutes_short': '{value}m',
-                'time.less_than_minute': '<1m',
-                'menu.language': 'Language',
-                'menu.snowflakes': 'Snowflakes',
-                'menu.snowflakes.desc': 'Decorative effect',
-                'menu.support': 'Support',
-                'menu.support.desc': 'Contact us',
-                'menu.theme': 'Theme',
-                'menu.theme.dark': 'Dark',
-                'menu.theme.light': 'Light'
-            },
-            ru: {
-                'app.title': '',
-                'app.name': '',
-                'values.not_available': 'Закрыто',
-                'app.subtitle': '',
-                'app.loading': 'Загружаем вашу подписку...',
-                'maintenance.title': 'Технические работы',
-                'maintenance.message': 'Сервис находится в режиме технических работ. Некоторые действия могут быть недоступны.',
-                'error.default.title': 'Подписка не найдена',
-                'error.default.message': 'Свяжитесь с поддержкой, чтобы активировать подписку.',
-                'error.user_not_found.title': 'Зарегистрируйтесь в боте',
-                'error.user_not_found.message': 'Откройте телеграм-бота, чтобы зарегистрироваться перед использованием мини-приложения.',
-                'stats.days_left': 'Осталось дней',
-                'stats.servers': 'Серверы',
-                'stats.devices': 'Устройства',
-                'stats.traffic_short': 'Трафик',
-                'info.expires': 'Действует до',
-                'info.expires.active_until': 'активна до',
-                'stats.remaining': 'Осталось',
-                'button.edit': 'Редактировать',
-                'button.install': 'Установка',
-                'button.setup': 'и настройка',
-                'quick_action.balance': 'Баланс',
-                'quick_action.subscription': 'Подписка',
-                'quick_action.install': 'Установка',
-                'quick_action.support': 'Поддержка',
-                'info.traffic_used': 'Использовано трафика',
-                'info.traffic_used_short': 'Использовано',
-                'info.locations': 'Доступные локации',
-                'info.traffic_limit': 'Лимит трафика',
-                'info.subscription_type': 'Тип подписки',
-                'info.promo_group': 'Уровень',
-                'info.device_limit': 'Лимит устройств',
-                'info.autopay': 'Автоплатеж',
-                'button.connect.default': 'Подключиться к VPN',
-                'button.connect.happ': 'Подключиться',
-                'button.copy': 'Скопировать ссылку подписки',
-                'button.topup_balance': 'Пополнить баланс',
-                'topup.title': 'Пополнение баланса',
-                'topup.subtitle': 'Выберите способ оплаты',
-                'topup.methods.subtitle': 'Выберите удобный способ оплаты',
-                'topup.method.stars.title': 'Telegram Stars',
-                'topup.method.stars.description': 'Оплата звёздами Telegram',
-                'topup.method.stars.invoice_hint': 'Оплата проходит целыми звёздами. Счёт: {stars} ⭐.',
-                'topup.method.stars.adjusted': 'Вы запросили {requested}. Итог к оплате: {amount} ({stars} ⭐).',
-                'topup.method.yookassa.title': 'Банковская карта (YooKassa)',
-                'topup.method.yookassa.description': 'Безопасная оплата банковской картой',
-                'topup.method.yookassa_sbp.title': 'СБП (YooKassa)',
-                'topup.method.yookassa_sbp.description': 'Оплата через Систему быстрых платежей',
-                'topup.method.mulenpay.title': 'Банковская карта (Mulen Pay)',
-                'topup.method.mulenpay.description': 'Мгновенное списание с карты',
-                'topup.method.platega.title': 'Platega.io',
-                'topup.method.platega.description': 'Карта или СБП через Platega',
-                'topup.method.platega.option.2.title': 'СБП (QR)',
-                'topup.method.platega.option.2.description': 'Оплата по QR-коду через СБП.',
-                'topup.method.platega.option.10.title': 'Банковские карты (RUB)',
-                'topup.method.platega.option.10.description': 'Российские карты через Platega.',
-                'topup.method.platega.option.11.title': 'Банковские карты',
-                'topup.method.platega.option.11.description': 'Оплата картами через Platega.',
-                'topup.method.platega.option.12.title': 'Международные карты',
-                'topup.method.platega.option.12.description': 'Оплата международными картами.',
-                'topup.method.platega.option.13.title': 'Криптовалюта',
-                'topup.method.platega.option.13.description': 'Пополнение через криптовалюту в Platega.',
-                'topup.method.wata.title': 'Банковская карта (Wata)',
-                'topup.method.wata.description': 'Оплата банковской картой через Wata',
-                'topup.method.pal24.title': 'СБП (PayPalych)',
-                'topup.method.pal24.description': 'Оплата через Систему быстрых платежей',
-                'topup.method.pal24.option.sbp.title': 'СБП (рекомендуется)',
-                'topup.method.pal24.option.sbp.description': 'Мгновенный перевод без комиссии через СБП',
-                'topup.method.pal24.option.card.title': 'Банковская карта',
-                'topup.method.pal24.option.card.description': 'Оплата картой через PayPalych',
-                'topup.method.cryptobot.title': 'Криптовалюта (CryptoBot)',
-                'topup.method.cryptobot.description': 'Оплата в USDT, TON и других активах',
-                'topup.method.tribute.title': 'Банковская карта (Tribute)',
-                'topup.method.tribute.description': 'Переход на страницу оплаты Tribute',
-                'topup.amount.title': 'Введите сумму',
-                'topup.amount.subtitle': 'Укажите сумму пополнения',
-                'topup.amount.placeholder': 'Сумма в {currency}',
-                'topup.amount.hint.range': 'Доступный диапазон: {min} — {max}',
-                'topup.amount.hint.single_min': 'Минимальная сумма: {min}',
-                'topup.amount.hint.single_max': 'Максимальная сумма: {max}',
-                'topup.submit': 'Продолжить',
-                'topup.cancel': 'Закрыть',
-                'topup.back': 'Назад',
-                'topup.open_link': 'Перейти к оплате',
-                'topup.loading': 'Готовим платеж…',
-                'topup.error.generic': 'Не удалось создать платеж. Попробуйте ещё раз позже.',
-                'topup.error.amount': 'Введите корректную сумму в пределах лимитов.',
-                'topup.error.unavailable': 'Способ оплаты временно недоступен.',
-                'topup.status.pending.title': 'Ожидаем подтверждение',
-                'topup.status.pending.description': 'Завершите оплату у выбранного провайдера. Это окно обновится автоматически.',
-                'topup.status.refreshing.description': 'Обновляем статус платежа…',
-                'topup.status.success.title': 'Платеж зачислен',
-                'topup.status.success.description': 'Средства успешно поступили на ваш баланс.',
-                'topup.status.failed.title': 'Платеж не подтверждён',
-                'topup.status.failed.description': 'Не удалось подтвердить платеж автоматически. Проверьте позже или обратитесь в поддержку.',
-                'topup.status.retry': 'Повторить попытку',
-                'topup.done': 'Готово',
-                'button.buy_subscription': 'Купить подписку',
-                'button.open_bot': 'Открыть бота',
-                'subscription_purchase.title': 'Оформление подписки',
-                'subscription_purchase.subtitle': 'Настройте параметры перед покупкой.',
-                'subscription_purchase.status.loading': 'Загружаем доступные варианты…',
-                'subscription_purchase.error.default': 'Не удалось загрузить параметры подписки. Попробуйте позже.',
-                'subscription_purchase.error.unavailable': 'Конфигуратор временно недоступен.',
-                'subscription_purchase.action.retry': 'Повторить',
-                'subscription_purchase.action.submit': 'Оформить подписку',
-                'subscription_purchase.action.topup': 'Пополнить баланс',
-                'subscription_purchase.action.close': 'Закрыть',
-                'subscription_purchase.period.title': 'Период подписки',
-                'subscription_purchase.period.subtitle': 'Выберите длительность доступа.',
-                'subscription_purchase.period.per_month': '{amount}/мес',
-                'subscription_purchase.traffic.title': 'Трафик',
-                'subscription_purchase.traffic.subtitle': 'Месячный лимит трафика.',
-                'subscription_purchase.traffic.fixed': 'Включено трафика: {amount}',
-                'subscription_purchase.traffic.unlimited': 'Безлимитный трафик включён',
-                'subscription_purchase.traffic.empty': 'Нет доступных вариантов',
-                'subscription_purchase.servers.title': 'Серверы',
-                'subscription_purchase.servers.subtitle': 'Выберите регионы подключения.',
-                'subscription_purchase.servers.empty': 'Нет доступных серверов',
-                'subscription_purchase.servers.single': 'Включён сервер: {name}',
-                'subscription_purchase.servers.limit': 'Можно выбрать до {count}',
-                'subscription_purchase.servers.selected': 'Выбрано: {count}',
-                'subscription_purchase.devices.title': 'Устройства',
-                'subscription_purchase.devices.subtitle': 'Одновременные подключения.',
-                'subscription_purchase.devices.price_label': 'Стоимость за устройство: {amount}',
-                'subscription_purchase.devices.price_original_label': 'Старая цена: {amount}',
-                'subscription_purchase.devices.unlimited': 'Безлимитное число устройств',
-                'subscription_purchase.devices.limit': 'От {min} до {max} устройств',
-                'subscription_purchase.summary.total': 'Итого',
-                'subscription_purchase.summary.discount': 'Скидка',
-                'subscription_purchase.summary.per_month': '{amount}/мес',
-                'subscription_purchase.summary.note': 'Все скидки уже учтены в итоговой стоимости.',
-                'subscription_purchase.price.included': 'Включено',
-                'subscription_purchase.balance.warning': 'Нужно: {required}. Баланс: {balance}.',
-                'subscription_purchase.balance.hint': 'Пополните баланс, чтобы продолжить.',
-                'subscription_purchase.balance.open_topup': 'Открыть способы пополнения',
-                'subscription_purchase.selection.invalid': 'Выберите доступные параметры.',
-                'subscription_purchase.submit.success': 'Заявка на покупку отправлена.',
-                'subscription_purchase.submit.title': 'Покупка подписки',
-                'subscription_purchase.submit.insufficient': 'Недостаточно средств для покупки.',
-                'subscription_purchase.breakdown.base': 'Базовый план',
-                'subscription_purchase.breakdown.traffic': 'Трафик',
-                'subscription_purchase.breakdown.servers': 'Серверы',
-                'subscription_purchase.breakdown.devices': 'Устройства',
-                'subscription_purchase.breakdown.promo': 'Промо скидка',
-                'subscription_purchase.breakdown.total': 'Итого',
-                'card.balance.title': 'Баланс',
-                'subscription_settings.title': 'Настройка подписки',
-                'subscription_settings.summary.servers': 'Серверов: {count}',
-                'subscription_settings.summary.servers_one': 'Сервер: {count}',
-                'subscription_settings.summary.traffic': 'Трафик: {amount}',
-                'subscription_settings.summary.devices': 'Устройств: {count}',
-                'subscription_settings.summary.devices_one': 'Устройство: {count}',
-                'subscription_settings.summary.unlimited': 'Безлимит',
-                'subscription_settings.status.loading': 'Загружаем настройки подписки…',
-                'subscription_settings.status.error': 'Не удалось загрузить настройки подписки.',
-                'subscription_settings.action.retry': 'Попробовать снова',
-                'subscription_settings.section.disabled': 'Действие временно недоступно.',
-                'subscription_settings.servers.title': 'Серверы',
-                'subscription_settings.servers.subtitle': 'Выберите нужные регионы подключения.',
-                'subscription_settings.servers.manage': 'Обновить',
-                'subscription_settings.servers.empty': 'Нет доступных серверов',
-                'subscription_settings.servers.limit': 'Выбрано: {count}',
-                'subscription_settings.servers.hint': 'Скидки применяются автоматически.',
-                'subscription_settings.traffic.title': 'Трафик',
-                'subscription_settings.traffic.subtitle': 'Выберите месячный лимит трафика.',
-                'subscription_settings.traffic.apply': 'Обновить',
-                'subscription_settings.traffic.empty': 'Нет доступных вариантов трафика',
-                'subscription_settings.traffic.current': 'Текущий: {limit}',
-                'subscription_settings.devices.title': 'Устройства',
-                'subscription_settings.devices.subtitle': 'Количество одновременных подключений.',
-                'subscription_settings.devices.apply': 'Обновить',
-                'subscription_settings.devices.value': '{count} устройств',
-                'subscription_settings.devices.value_one': '{count} устройство',
-                'subscription_settings.devices.unlimited': 'Безлимит',
-                'subscription_settings.price.included': 'Включено',
-                'subscription_settings.success.servers': 'Серверы успешно обновлены.',
-                'subscription_settings.success.traffic': 'Лимит трафика обновлён.',
-                'subscription_settings.success.devices': 'Лимит устройств обновлён.',
-                'subscription_settings.error.generic': 'Не удалось обновить настройки подписки. Попробуйте позже.',
-                'subscription_settings.error.unauthorized': 'Не удалось пройти авторизацию. Откройте мини-приложение заново из Telegram.',
-                'subscription_settings.error.validation': 'Проверьте выбранные параметры и попробуйте ещё раз.',
-                'subscription_settings.pending_action': 'Сохраняем…',
-                'subscription_settings.confirm.title.charge': 'Подтвердите оплату',
-                'subscription_settings.confirm.title.free': 'Подтвердите изменения',
-                'subscription_settings.confirm.action.pay': 'Оплатить',
-                'subscription_settings.confirm.action.apply': 'Применить',
-                'subscription_settings.confirm.action.cancel': 'Отменить',
-                'subscription_settings.confirm.total.charge': 'Будет списано {amount}.',
-                'subscription_settings.confirm.total.charge_period': 'Будет списано {amount} за {period}.',
-                'subscription_settings.confirm.total.free': 'Списаний не будет.',
-                'subscription_settings.confirm.servers.add': 'Будут подключены серверы:',
-                'subscription_settings.confirm.servers.remove': 'Будут отключены серверы без возврата средств:',
-                'subscription_settings.confirm.servers.entry_paid': '{name} — {amount}',
-                'subscription_settings.confirm.servers.entry_free': '{name} — включено',
-                'subscription_settings.confirm.traffic.increase': 'Лимит трафика изменится на {value}.',
-                'subscription_settings.confirm.traffic.decrease': 'Лимит трафика изменится на {value}. Дополнительная оплата не требуется.',
-                'subscription_settings.confirm.devices.increase': 'Лимит устройств изменится на {value}.',
-                'subscription_settings.confirm.devices.decrease': 'Лимит устройств изменится на {value}. Дополнительная оплата не требуется.',
-                'subscription_settings.confirm.months.one': '{count} месяц',
-                'subscription_settings.confirm.months.other': '{count} месяцев',
-                'subscription_renewal.title': 'Продление подписки',
-                'subscription_renewal.subtitle': 'Выберите период продления.',
-                'subscription_renewal.status.loading': 'Загружаем доступные периоды…',
-                'subscription_renewal.status.empty': 'Доступных периодов продления нет.',
-                'subscription_renewal.error.generic': 'Не удалось загрузить параметры продления. Попробуйте позже.',
-                'subscription_renewal.error.unauthorized': 'Требуется авторизация. Откройте мини-приложение из Telegram.',
-                'subscription_renewal.error.validation': 'Выберите период продления.',
-                'subscription_renewal.action.retry': 'Повторить',
-                'subscription_renewal.summary.total': 'Итого',
-                'subscription_renewal.summary.per_month': '{amount} в месяц',
-                'subscription_renewal.summary.discount': 'Выгода {percent}%',
-                'subscription_renewal.summary.insufficient': 'Недостаточно средств — не хватает {missing}.',
-                'subscription_renewal.submit': 'Продлить подписку',
-                'subscription_renewal.submit.loading': 'Продление…',
-                'subscription_renewal.action.topup': 'Пополнить баланс',
-                'subscription_renewal.confirm.title': 'Подтвердите продление',
-                'subscription_renewal.confirm.message': 'Продлить подписку на {period} и списать {amount}?',
-                'subscription_renewal.confirm.balance': 'Текущий баланс: {balance}',
-                'subscription_renewal.confirm.accept': 'Оплатить',
-                'subscription_renewal.confirm.cancel': 'Отмена',
-                'subscription_renewal.success': 'Подписка успешно продлена.',
-                'subscription_renewal.badge.recommended': 'Рекомендуем',
-                'subscription_renewal.period.days': '{count} дней',
-                'subscription_renewal.period.month_one': '{count} месяц',
-                'subscription_renewal.period.month_other': '{count} месяцев',
-                'subscription_renewal.meta.promo_group.title': 'Скидки промогруппы',
-                'subscription_renewal.meta.promo_group.empty': 'Дополнительных скидок нет',
-                'subscription_renewal.meta.promo_offer.title': 'Промопредложение',
-                'subscription_renewal.meta.promo_offer.active': 'Дополнительная скидка {percent}%',
-                'subscription_renewal.meta.promo_offer.until': 'Действует до {date}',
-                'promo_code.title': 'Активировать промокод',
-                'promo_code.subtitle': 'Введите промокод и сразу получите бонусы.',
-                'promo_code.placeholder': 'Введите промокод',
-                'promo_code.button.default': 'Активировать',
-                'promo_code.button.loading': 'Активация…',
-                'promo_code.success.title': 'Промокод активирован',
-                'promo_code.success.default': 'Бонусы зачислены на ваш аккаунт.',
-                'promo_code.result.title': 'Вы получили',
-                'promo_code.result.balance': 'Пополнение баланса: {amount}',
-                'promo_code.result.subscription_days': 'Подписка продлена на {days} дн.',
-                'promo_code.result.trial': 'Триал подписка на {days} дн.',
-                'promo_code.error.empty': 'Введите промокод.',
-                'promo_code.error.invalid': 'Введите корректный промокод.',
-                'promo_code.error.not_found': 'Промокод не найден.',
-                'promo_code.error.expired': 'Срок действия промокода истёк.',
-                'promo_code.error.used': 'Промокод уже использован.',
-                'promo_code.error.already_used_by_user': 'Вы уже активировали этот промокод.',
-                'promo_code.error.user_not_found': 'Пользователь не найден.',
-                'promo_code.error.server_error': 'Не удалось активировать промокод. Попробуйте позже.',
-                'promo_code.error.generic': 'Не удалось активировать промокод.',
-                'promo_code.error.unauthorized': 'Ошибка авторизации. Откройте мини-приложение из Telegram.',
-                'promo_code.error.network': 'Ошибка сети. Попробуйте ещё раз.',
-                'card.referral.title': 'Реферальная программа',
-                'card.history.title': 'История операций',
-                'card.servers.title': 'Подключённые серверы',
-                'card.devices.title': 'Подключенные устройства',
-                'card.promo_levels.title': 'Уровни скидок',
-                'card.promo.title': 'Скидки за траты',
-                'promo.summary.current_group': 'Текущий уровень',
-                'promo.summary.no_group': 'Нет скидок',
-                'promo.summary.up_to': 'До {value}',
-                'news.section.title': 'Новости',
-                'news.section.subtitle': 'Свежие обновления сервиса',
-                'news.section.button': 'Все новости',
-                'promo.current_group.title': 'Текущий уровень',
-                'promo.levels.title': 'Уровни скидок за траты',
-                'promo.periods.title': 'Скидки на периоды подписки',
-                'promo.periods.title_short': 'Периоды',
-                'promo.periods.label': '{months} мес.',
-                'promo.periods.month_suffix': 'мес.',
-                'apps.title': 'Инструкция по установке',
-                'apps.no_data': 'Для этой платформы инструкция пока недоступна.',
-                'apps.featured': 'Рекомендуем',
-                'apps.step.download': 'Скачать и установить',
-                'apps.step.before_add': 'Перед добавлением подписки',
-                'apps.step.add': 'Добавить подписку',
-                'apps.step.after_add': 'Если подписка не добавилась',
-                'apps.step.connect': 'Подключиться и пользоваться',
-                'apps.button.open_link': 'Открыть ссылку',
-                'faq.title': 'FAQ',
-                'faq.item_default_title': 'Вопрос {index}',
-                'faq.item_empty': 'Ответ будет добавлен позже.',
-                'legal.title': 'Правовые документы',
-                'legal.public_offer.title': 'Публичная оферта',
-                'legal.service_rules.title': 'Правила сервиса',
-                'legal.privacy_policy.title': 'Политика конфиденциальности',
-                'legal.updated_at': 'Обновлено {date}',
-                'history.empty': 'Операции ещё не проводились',
-                'history.status.completed': 'Выполнено',
-                'history.status.pending': 'Обрабатывается',
-                'history.type.deposit': 'Пополнение',
-                'history.type.withdrawal': 'Списание',
-                'history.type.subscription_payment': 'Оплата подписки',
-                'history.type.refund': 'Возврат',
-                'history.type.referral_reward': 'Реферальное вознаграждение',
-                'referral.link.label': 'Ваша реферальная ссылка',
-                'referral.link.copy': 'Скопировать ссылку',
-                'referral.link.copied': 'Ссылка скопирована',
-                'referral.empty': 'Данные по партнёрской программе недоступны',
-                'referral.stats.invited': 'Приглашено',
-                'referral.stats.active': 'Активных',
-                'referral.stats.paid': 'Платящих',
-                'referral.stats.total': 'Всего заработано',
-                'referral.stats.month': 'Заработано за месяц',
-                'referral.stats.conversion': 'Конверсия',
-                'referral.terms.title': 'Условия программы',
-                'referral.terms.minimum_topup': 'Пополнение реферала для активации бонуса',
-                'referral.terms.first_topup': 'Бонус приглашенному за первое пополнение',
-                'referral.terms.inviter_bonus': 'Ваш бонус за его пополнение',
-                'referral.terms.commission': 'Комиссия с каждого пополнения реферала',
-                'referral.toggle.open': 'Мои рефералы',
-                'referral.toggle.close': 'Скрыть список',
-                'referral.list.empty': 'У вас пока нет рефералов',
-                'referral.meta.earned': 'Заработано',
-                'referral.meta.topups': 'Пополнения',
-                'referral.meta.joined': 'Регистрация',
-                'referral.meta.last_activity': 'Последняя активность',
-                'referral.copy.success': 'Реферальная ссылка скопирована в буфер.',
-                'referral.copy.failure': 'Не удалось скопировать ссылку автоматически. Скопируйте вручную: {value}',
-                'referral.copy.unavailable': 'Копирование недоступно. Скопируйте ссылку вручную.',
-                'referral.status.active': 'Активен',
-                'referral.status.inactive': 'Неактивен',
-                'referral.status.paying': 'Оплачивает',
-                'referral.referrals.unknown': 'Реферал',
-                'servers.empty': 'Подключённых серверов пока нет',
-                'devices.empty': 'Подключённых устройств пока нет',
-                'devices.remove_button_label': 'Сбросить устройство',
-                'devices.remove_confirm.title': 'Сброс устройства',
-                'devices.remove_confirm.message': 'Сбросить устройство «{device}»?',
-                'devices.remove_confirm.confirm': 'Сбросить',
-                'devices.remove_confirm.cancel': 'Отмена',
-                'devices.remove_success.title': 'Устройство сброшено',
-                'devices.remove_success': 'Устройство успешно сброшено.',
-                'devices.remove_error.title': 'Не удалось сбросить устройство',
-                'devices.remove_error.generic': 'Не удалось сбросить устройство. Попробуйте позже.',
-                'devices.remove_error.network': 'Ошибка сети. Попробуйте позже.',
-                'devices.remove_error.unauthorized': 'Ошибка авторизации. Откройте мини-приложение из Telegram и повторите попытку.',
-                'promo_levels.total_spent': 'Всего потрачено',
-                'promo_levels.threshold': 'от {amount}',
-                'promo_levels.badge.current': 'Активно',
-                'promo_levels.badge.unlocked': 'Получен',
-                'promo_levels.badge.locked': 'Закрыто',
-                'promo_levels.discounts.server': 'Серверы',
-                'promo_levels.discounts.traffic': 'Трафик',
-                'promo_levels.discounts.devices': 'Устройства',
-                'promo_levels.discounts.none': 'Скидок нет',
-                'promo_levels.empty': 'Автовыдача промогрупп ещё не настроена',
-                'language.ariaLabel': 'Выберите язык интерфейса',
-                'notifications.copy.success': 'Ссылка подписки скопирована.',
-                'notifications.copy.failure': 'Не удалось автоматически скопировать ссылку. Пожалуйста, сделайте это вручную.',
-                'notifications.copy.title.success': 'Готово',
-                'notifications.copy.title.failure': 'Ошибка копирования',
-                'status.active': 'Активна',
-                'status.trial': 'Пробная',
-                'status.expired': 'Истекла',
-                'status.disabled': 'Отключена',
-                'status.missing': 'Неактивна',
-                'status.unknown': 'Неизвестно',
-                'subscription.type.trial': 'Пробная',
-                'subscription.type.paid': 'Платная',
-                'info.expires.expired': 'Истекла',
-                'info.expires.expired_lower': 'истекла',
-                'subscription.status.active': 'Активна',
-                'subscription.status.expired': 'Истекла',
-                'subscription.expired': 'подписка истекла',
-                'info.expires.valid_until': 'Действует до',
-                'stats.days_remaining': 'осталось {days} дн',
-                'promo_code.action.apply': 'Активировать',
-                'referral.link.copied': 'Скопировано',
-                'referral.toggle.close': 'Скрыть список',
-                'referral.toggle.open': 'Мои рефералы',
-                'subscription.trial_used': 'Пробный период использован',
-                'subscription.active_until': 'Подписка активна до {date}',
-                'devices.empty': 'Нет подключенных устройств',
-                'devices.detected_no_details': 'Обнаружено {count} устройств, но детали недоступны',
-                'devices.count_of_limit': '{current} из {limit} устройств',
-                'subscription.type.none': 'Нет подписки',
-                'subscription_missing.title': 'Нет активной подписки',
-                'subscription_missing.description.default': 'У вас ещё нет активной подписки. Оформите тариф, чтобы получить доступ.',
-                'subscription_missing.description.trial': 'Активируйте бесплатный триал на {days} дн. или выберите тариф, чтобы продолжить.',
-                'subscription_missing.description.trial_short': 'Активируйте бесплатный триал или выберите тариф, чтобы продолжить.',
-                'subscription_missing.description.no_trial': 'Пробный период недоступен. Оформите подписку, чтобы продолжить.',
-                'subscription_missing.hint': 'После активации вы сможете пополнить баланс здесь для бесперебойной работы.',
-                'subscription_missing.action.trial': 'Активировать триал',
-                'subscription_missing.action.trial.loading': 'Активация…',
-                'trial.activation.title': 'Активация триала',
-                'trial.activation.success': 'Триал активирован! Доступ открыт на {days} дн.',
-                'trial.activation.success.short': 'Триал успешно активирован.',
-                'trial.activation.error.generic': 'Не удалось активировать триал. Попробуйте позже.',
-                'trial.activation.error.unavailable': 'Пробный период недоступен. Оформите подписку, чтобы продолжить.',
-                'trial.activation.error.unauthorized': 'Ошибка авторизации. Откройте мини-приложение из Telegram и повторите попытку.',
-                'trial.activation.error.already_active': 'У вас уже есть активная подписка.',
-                'autopay.enabled': 'Включен',
-                'autopay.disabled': 'Выключен',
-                'subscription_autopay.title': 'Автоплатеж',
-                'subscription_autopay.subtitle': 'Автоматически продлеваем подписку перед окончанием срока.',
-                'subscription_autopay.status.enabled': 'Включен',
-                'subscription_autopay.status.disabled': 'Выключен',
-                'subscription_autopay.status.loading': 'Загружаем…',
-                'subscription_autopay.action.enable': 'Включить',
-                'subscription_autopay.action.disable': 'Отключить',
-                'subscription_autopay.days.title': 'За сколько списывать',
-                'subscription_autopay.day.same_day': 'В день окончания',
-                'subscription_autopay.day.before.one': '{count} день до списания',
-                'subscription_autopay.day.before.few': '{count} дня до списания',
-                'subscription_autopay.day.before.many': '{count} дней до списания',
-                'subscription_autopay.saving': 'Сохраняем…',
-                'subscription_autopay.hint.disabled': 'Включите автоплатеж, чтобы выбрать день списания.',
-                'subscription_autopay.hint.no_options': 'Выбор дня списания временно недоступен.',
-                'subscription_autopay.error.generic': 'Не удалось обновить настройки автоплатежа. Попробуйте позже.',
-                'subscription_autopay.error.unauthorized': 'Ошибка авторизации. Откройте мини-приложение из Telegram и повторите попытку.',
-                'subscription_autopay.error.no_days': 'Выберите день списания, чтобы включить автоплатеж.',
-                'platform.ios': 'iOS',
-                'platform.android': 'Android',
-                'platform.pc': 'ПК',
-                'platform.tv': 'ТВ',
-                'platform.all': 'Все',
-                'platform.windows': 'Windows',
-                'platform.macos': 'macOS',
-                'platform.linux': 'Linux',
-                'platform.android_tv': 'Android TV',
-                'platform.apple_tv': 'Apple TV',
-                'units.gb': 'ГБ',
-                'units.mb': 'МБ',
-                'values.unlimited': 'Безлимит',
-                'values.not_available': 'Недоступно',
-                'promo_offer.status.active': 'Активное предложение',
-                'promo_offer.status.pending': 'Специальное предложение',
-                'promo_offer.accept': 'Активировать',
-                'promo_offer.accepting': 'Активируем…',
-                'promo_offer.accept.success': 'Предложение успешно активировано!',
-                'promo_offer.timer.active': 'Действует ещё {time}',
-                'promo_offer.timer.pending': 'Истекает через {time}',
-                'promo_offer.timer.expired': 'Истекло',
-                'promo_offer.error.offer_not_found': 'Предложение не найдено',
-                'promo_offer.error.already_claimed': 'Предложение уже активировано',
-                'promo_offer.error.offer_expired': 'Срок действия предложения истёк',
-                'promo_offer.error.subscription_missing': 'Нужна активная подписка.',
-                'promo_offer.error.squads_missing': 'Для тестового доступа не настроены серверы.',
-                'promo_offer.error.already_connected': 'Серверы уже подключены.',
-                'promo_offer.error.remnawave_sync_failed': 'Не удалось подключить серверы. Попробуйте позже.',
-                'promo_offer.error.claim_failed': 'Не удалось активировать предложение.',
-                'promo_offer.error.invalid_discount': 'В предложении нет скидки.',
-                'promo_offer.error.generic': 'Не удалось активировать предложение. Попробуйте позже.',
-                'promo_offer.type.extend_discount': 'Скидка на продление',
-                'promo_offer.type.purchase_discount': 'Скидка на возвращение',
-                'promo_offer.type.test_access': 'Тестовый доступ',
-                'promo_offer.type.percent_discount': 'Скидка',
-                'time.days_short': '{value}д',
-                'time.hours_short': '{value}ч',
-                'time.minutes_short': '{value}м',
-                'time.less_than_minute': '<1м',
-                'menu.language': 'Язык',
-                'menu.snowflakes': 'Снежинки',
-                'menu.snowflakes.desc': 'Декоративный эффект',
-                'menu.support': 'Поддержка',
-                'menu.support.desc': 'Связаться с нами',
-                'menu.theme': 'Тема',
-                'menu.theme.dark': 'Тёмная',
-                'menu.theme.light': 'Светлая'
-            }
-        };
-
-        const pcTranslations = {
-            en: {
-                'pc.happ.title': 'Open Subscription',
-                'pc.happ.message': 'The Happ application doesn\'t appear to be installed on your PC. How would you like to proceed?',
-                'pc.happ.copy': 'Copy subscription link',
-                'pc.happ.redirect': 'Open in browser',
-            },
-            ru: {
-                'pc.happ.title': 'Открыть подписку',
-                'pc.happ.message': 'Приложение Happ не установлено на вашем ПК. Как вы хотите продолжить?',
-                'pc.happ.copy': 'Скопировать ссылку подписки',
-                'pc.happ.redirect': 'Открыть в браузере',
-            }
-        };
-
-        Object.keys(pcTranslations).forEach(lang => {
-            Object.assign(translations[lang], pcTranslations[lang]);
-        });
-
-        function getLanguageLabel(code) {
-            const normalized = String(code ?? '').toLowerCase();
-            if (!normalized) {
-                return '';
-            }
-            const base = normalized.split('-')[0];
-            return LANGUAGE_LABELS[normalized] || LANGUAGE_LABELS[base] || normalized.toUpperCase();
-        }
-
-        function getSupportedLanguages() {
-            return Array.from(supportedLanguages);
-        }
-
-        function addSupportedLanguages(locales = []) {
-            let updated = false;
-            locales.forEach(locale => {
-                if (!locale) {
-                    return;
-                }
-                const normalized = String(locale).toLowerCase();
-                if (!normalized) {
-                    return;
-                }
-                if (!supportedLanguages.has(normalized)) {
-                    supportedLanguages.add(normalized);
-                    updated = true;
-                }
-            });
-            return updated;
-        }
-
-        function renderLanguageSelectOptions() {
-            const select = document.getElementById('languageSelect');
-            if (!select) {
-                return;
-            }
-
-            const normalizedPreferred = resolveLanguage(preferredLanguage) || 'en';
-            if (!supportedLanguages.has(normalizedPreferred)) {
-                supportedLanguages.add(normalizedPreferred);
-            }
-
-            const baseOrder = BASE_LANGUAGE_ORDER.map(lang => lang.toLowerCase());
-            const extras = getSupportedLanguages()
-                .map(lang => lang.toLowerCase())
-                .filter(lang => !baseOrder.includes(lang));
-            extras.sort((a, b) => a.localeCompare(b));
-
-            const order = [...baseOrder];
-            extras.forEach(lang => {
-                if (!order.includes(lang)) {
-                    order.push(lang);
-                }
-            });
-            if (!order.includes(normalizedPreferred)) {
-                order.push(normalizedPreferred);
-            }
-
-            const seen = new Set();
-            const optionsHtml = order.map(lang => {
-                const normalized = String(lang).toLowerCase();
-                if (!normalized || seen.has(normalized)) {
-                    return '';
-                }
-                seen.add(normalized);
-                const value = escapeHtml(normalized);
-                const label = escapeHtml(getLanguageLabel(normalized));
-                return `<option value="${value}">${label}</option>`;
-            }).filter(Boolean).join('');
-
-            select.innerHTML = optionsHtml;
-            select.value = normalizedPreferred;
-
-            if (preferredLanguage !== normalizedPreferred) {
-                preferredLanguage = normalizedPreferred;
-            }
-        }
-
-        const PLATFORM_GROUPS = {
-            ios: ['ios'],
-            android: ['android'],
-            pc: ['windows', 'macos', 'linux'],
-            tv: ['androidTV', 'appleTV'],
-        };
-
-        const PLATFORM_FILTER_ALL = '__all__';
-
-        const HAPP_APP_IDS = new Set(['happ', 'happ-app']);
-
-        const PLATFORM_LABEL_KEYS = {
-            ios: 'platform.ios',
-            android: 'platform.android',
-            windows: 'platform.windows',
-            macos: 'platform.macos',
-            linux: 'platform.linux',
-            androidTV: 'platform.android_tv',
-            appleTV: 'platform.apple_tv',
-        };
-
-        const LEGAL_DOCUMENT_CONFIG = {
-            public_offer: {
-                icon: '📜',
-                titleKey: 'legal.public_offer.title',
-                fallback: 'Public offer',
-            },
-            service_rules: {
-                icon: '📘',
-                titleKey: 'legal.service_rules.title',
-                fallback: 'Service rules',
-            },
-            privacy_policy: {
-                icon: '🔐',
-                titleKey: 'legal.privacy_policy.title',
-                fallback: 'Privacy policy',
-            },
-        };
-
-        // Include all the original JavaScript functions
-        function applyBrandingOverrides(branding) {
-            if (!branding || typeof branding !== 'object') {
-                return;
-            }
-
-            function normalizeMap(map) {
-                const normalized = {};
-                if (!map) {
-                    return normalized;
-                }
-
-                if (typeof map === 'string') {
-                    const normalizedValue = normalizeLocalizedValue(map);
-                    if (normalizedValue) {
-                        normalized.default = normalizedValue;
-                    }
-                    return normalized;
-                }
-
-                Object.entries(map || {}).forEach(([lang, value]) => {
-                    const normalizedValue = normalizeLocalizedValue(value);
-                    if (!normalizedValue) {
-                        return;
-                    }
-                    normalized[lang.toLowerCase()] = normalizedValue;
-                });
-
-                return normalized;
-            }
-
-            function mergeLocaleMaps(...sources) {
-                const result = {};
-                sources.forEach(source => {
-                    const normalized = normalizeMap(source);
-                    Object.entries(normalized).forEach(([lang, value]) => {
-                        if (value) {
-                            result[lang] = value;
-                        }
-                    });
-                });
-                return result;
-            }
-
-            function applyKey(key, map) {
-                const normalized = normalizeMap(map);
-                if (!Object.keys(normalized).length) {
-                    return;
-                }
-
-                const defaultValue = normalized.default
-                    || normalized.en
-                    || normalized.ru
-                    || null;
-
-                const languages = new Set(
-                    Object.keys(translations).map(lang => lang.toLowerCase())
-                );
-
-                Object.keys(normalized).forEach(lang => {
-                    if (lang !== 'default') {
-                        languages.add(lang);
-                    }
-                });
-
-                languages.forEach(lang => {
-                    const value = Object.prototype.hasOwnProperty.call(normalized, lang)
-                        ? normalized[lang]
-                        : defaultValue;
-                    if (!value) {
-                        return;
-                    }
-                    const targetLang = lang.toLowerCase();
-                    if (!translations[targetLang]) {
-                        translations[targetLang] = {};
-                    }
-                    translations[targetLang][key] = value;
-                });
-            }
-
-            const serviceNameMap = mergeLocaleMaps(
-                branding.service_name,
-                branding.name,
-                branding.title
-            );
-            const serviceDescriptionMap = mergeLocaleMaps(
-                branding.service_description,
-                branding.description,
-                branding.subtitle
-            );
-
-            applyKey('app.name', serviceNameMap);
-            applyKey('app.title', serviceNameMap);
-            applyKey('app.subtitle', serviceDescriptionMap);
-
-            // Apply header logo title from branding
-            const headerTitleElement = document.getElementById('headerLogoTitle');
-            const headerLogoText = document.getElementById('headerLogoText');
-            if (headerTitleElement) {
-                const defaultTitle = serviceNameMap.default
-                    || serviceNameMap.en
-                    || serviceNameMap.ru
-                    || '';
-                // Remove "VPN" suffix if present
-                const titleWithoutVpn = defaultTitle.replace(/\s*VPN\s*$/i, '').trim();
-                headerTitleElement.textContent = titleWithoutVpn || '';
-                // Show header logo text after loading
-                if (headerLogoText && titleWithoutVpn) {
-                    headerLogoText.style.opacity = '1';
-                }
-            }
-
-            // Apply header logo subtitle from branding (optional)
-            const headerSubtitleElement = document.getElementById('headerLogoSubtitle');
-            if (headerSubtitleElement && branding.subtitle) {
-                const subtitleValue = typeof branding.subtitle === 'string'
-                    ? branding.subtitle
-                    : (branding.subtitle.en || branding.subtitle.ru || branding.subtitle.default);
-                if (subtitleValue) {
-                    headerSubtitleElement.textContent = subtitleValue;
-                }
-            }
-
-            // Update page title
-            const pageTitle = serviceNameMap.default
-                || serviceNameMap.en
-                || serviceNameMap.ru
-                || '';
-            if (pageTitle && document.title !== pageTitle) {
-                document.title = pageTitle;
-            }
-
-            const logoUrl = normalizeUrl(
-                branding.logoUrl
-                || branding.logo_url
-                || branding.logo
-                || null
-            );
-
-            if (logoUrl) {
-                const logoIcon = document.querySelector('.logo-icon');
-                if (logoIcon) {
-                    logoIcon.classList.add('has-image');
-                    logoIcon.innerHTML = '';
-                    const img = document.createElement('img');
-                    img.src = logoUrl;
-                    const altText = serviceNameMap.default
-                        || serviceNameMap.en
-                        || serviceNameMap.ru
-                        || 'Logo';
-                    img.alt = altText;
-                    logoIcon.appendChild(img);
-                }
-            }
-
-            // Apply support URL from branding
-            const brandingSupportUrl = normalizeUrl(
-                branding.supportUrl
-                || branding.support_url
-                || branding.support
-                || null
-            );
-            if (brandingSupportUrl) {
-                supportUrl = brandingSupportUrl;
-            }
-
-            // Apply news URL from branding
-            const brandingNewsUrl = normalizeUrl(
-                branding.newsUrl
-                || branding.news_url
-                || branding.news
-                || branding.channelUrl
-                || branding.channel_url
-                || branding.channel
-                || null
-            );
-            if (brandingNewsUrl) {
-                newsUrl = brandingNewsUrl;
-            }
-        }
-
-        let userData = null;
-        let appsConfig = {};
-        let supportUrl = 'https://t.me/bedolagavpn_sup'; // Default support URL
-        let newsUrl = 'https://t.me/bedolagavpn'; // Default news URL
-        let newsItems = [];
-        let newsEnabled = true; // Can be disabled via app-config.json
-        let currentPlatform = 'android';
-        let detectedDevicePlatform = 'android';
-        let currentPlatformFilter = PLATFORM_FILTER_ALL;
-        let detectedPlatformFilter = null;
-        let cachedHappCryptolinkRedirectTemplate;
-        let configPurchaseUrl = null;
-        let subscriptionPurchaseUrl = null;
-        let preferredLanguage = 'en';
-        let languageLockedByUser = false;
-        let currentErrorState = null;
-        let paymentMethodsCache = null;
-        let paymentMethodsPromise = null;
-        let activePaymentMethod = null;
-        let maintenanceState = { isActive: false, message: null };
-        const paymentMethodSelections = {};
-        const activePaymentMonitors = new Map();
-        let paymentStatusPollTimer = null;
-        let isPaymentStatusPolling = false;
-        let subscriptionSettingsData = null;
-        let subscriptionSettingsPromise = null;
-        let subscriptionSettingsError = null;
-        let subscriptionSettingsLoading = false;
-        let subscriptionSettingsAction = null;
-        const subscriptionSettingsSelections = {
-            servers: new Set(),
-            traffic: null,
-            devices: null,
-        };
-
-        let subscriptionPurchaseData = null;
-        let subscriptionPurchasePreview = null;
-        let subscriptionPurchasePromise = null;
-        let subscriptionPurchasePreviewPromise = null;
-        let subscriptionPurchaseError = null;
-        let subscriptionPurchasePreviewError = null;
-        let subscriptionPurchaseLoading = false;
-        let subscriptionPurchasePreviewLoading = false;
-        let subscriptionPurchaseSubmitting = false;
-        let subscriptionPurchaseFeatureEnabled = false;
-        let subscriptionPurchaseModalOpen = false;
-        let subscriptionPurchaseCardForceShow = false;
-        let subscriptionPurchasePreviewUpdateHandle = null;
-        const subscriptionPurchaseSelections = {
-            periodId: null,
-            trafficValue: null,
-            servers: new Set(),
-            devices: null,
-        };
-
-        let subscriptionRenewalData = null;
-        let subscriptionRenewalPromise = null;
-        let subscriptionRenewalError = null;
-        let subscriptionRenewalLoading = false;
-        let subscriptionRenewalSubmitting = false;
-        const subscriptionRenewalSelection = {
-            periodId: null,
-            trafficValue: null,
-            servers: new Set(),
-            devices: null,
-        };
-
-        let subscriptionAutopayState = {
-            enabled: false,
-            daysBefore: null,
-            defaultDaysBefore: null,
-            options: [],
-            loading: true,
-            saving: false,
-        };
-
-        let trialActivationInProgress = false;
-
-        const PAYMENT_STATUS_INITIAL_DELAY_MS = 2000;
-        const PAYMENT_STATUS_POLL_INTERVAL_MS = 5000;
-        const PAYMENT_STATUS_TIMEOUT_MS = 180000;
-
-        function cleanupPaymentPollersIfIdle() {
-            if (paymentStatusPollTimer) {
-                clearTimeout(paymentStatusPollTimer);
-                paymentStatusPollTimer = null;
-            }
-            isPaymentStatusPolling = false;
-        }
-
-        function stopAllPaymentMonitors() {
-            activePaymentMonitors.clear();
-            cleanupPaymentPollersIfIdle();
-        }
-
-        function createPaymentStatusView() {
-            const container = document.createElement('div');
-            container.className = 'payment-status';
-
-            const icon = document.createElement('div');
-            icon.className = 'payment-status-icon';
-
-            const content = document.createElement('div');
-            content.className = 'payment-status-content';
-
-            const title = document.createElement('div');
-            title.className = 'payment-status-title';
-
-            const description = document.createElement('div');
-            description.className = 'payment-status-description';
-
-            content.appendChild(title);
-            content.appendChild(description);
-            container.appendChild(icon);
-            container.appendChild(content);
-
-            return { element: container, icon, title, description };
-        }
-
-        function updatePaymentStatusView(view, options = {}) {
-            if (!view) {
-                return;
-            }
-
-            const { state = 'pending', message = null, extraLines = [] } = options;
-            const normalizedState = state === 'refreshing' ? 'pending' : state;
-
-            const fallbackTitles = {
-                pending: 'Waiting for confirmation',
-                success: 'Payment received',
-                failed: 'Payment not confirmed',
-            };
-
-            const fallbackDescriptions = {
-                pending: 'Complete the payment in the selected provider. We will update this window automatically.',
-                refreshing: 'Updating payment status…',
-                success: 'Funds have been credited to your balance.',
-                failed: 'We could not confirm the payment automatically. Please check later or contact support.',
-            };
-
-            view.element.classList.remove('success', 'error');
-            view.icon.innerHTML = '';
-
-            if (state === 'success') {
-                view.element.classList.add('success');
-                view.icon.textContent = '✅';
-            } else if (state === 'failed') {
-                view.element.classList.add('error');
-                view.icon.textContent = '⚠️';
-            } else {
-                const spinner = document.createElement('div');
-                spinner.className = 'payment-status-spinner';
-                view.icon.appendChild(spinner);
-            }
-
-            const titleKey = `topup.status.${normalizedState}.title`;
-            const translatedTitle = t(titleKey);
-            view.title.textContent = translatedTitle && translatedTitle !== titleKey
-                ? translatedTitle
-                : (fallbackTitles[normalizedState] || 'Payment status');
-
-            let descriptionKey = `topup.status.${state}.description`;
-            if (state === 'refreshing') {
-                descriptionKey = 'topup.status.refreshing.description';
-            }
-            const translatedDescription = t(descriptionKey);
-            const defaultDescription = translatedDescription && translatedDescription !== descriptionKey
-                ? translatedDescription
-                : (fallbackDescriptions[state] || fallbackDescriptions[normalizedState] || '');
-
-            const lines = [];
-            if (message) {
-                lines.push(message);
-            }
-            if (Array.isArray(extraLines)) {
-                extraLines.filter(Boolean).forEach(line => lines.push(line));
-            }
-            if (!message && defaultDescription) {
-                lines.push(defaultDescription);
-            } else if (message && defaultDescription && defaultDescription !== message) {
-                lines.push(defaultDescription);
-            }
-
-            view.description.textContent = lines.filter(Boolean).join(' ');
-        }
-
-        function applyPaymentSubtitle(monitor, state) {
-            if (!monitor || !monitor.method) {
-                return;
-            }
-
-            if (state === 'success') {
-                setTopupModalSubtitle('topup.status.success.title', 'Payment received');
-                return;
-            }
-
-            if (state === 'failed') {
-                setTopupModalSubtitle('topup.status.failed.title', 'Payment not confirmed');
-                return;
-            }
-
-            const optionsMap = (Array.isArray(monitor.method.options) ? monitor.method.options : []).reduce((map, item) => {
-                map[String(item.id)] = item;
-                return map;
-            }, {});
-
-            if (monitor.method.id === 'pal24' || monitor.method.id === 'platega') {
-                const option = (monitor.option || monitor.extra?.selected_option || 'sbp').toString();
-                const optionKey = ['card', 'sbp'].includes(option) ? option : option;
-                const optionConfig = optionsMap[optionKey];
-                const fallback = optionConfig?.title || (optionKey === 'card' ? 'Bank card payment' : 'Faster Payments (SBP)');
-                const titleKey = optionConfig?.titleKey || optionConfig?.title_key || `topup.method.${monitor.method.id}.option.${optionKey}.title`;
-                setTopupModalSubtitle(titleKey, fallback || monitor.method.id);
-                return;
-            }
-
-            setTopupModalSubtitle(`topup.method.${monitor.method.id}.title`, monitor.method.id);
-        }
-
-        function buildPaymentStatusQuery(methodId, amountKopeks, extra = {}) {
-            if (!methodId) {
-                return null;
-            }
-
-            const query = { method: methodId };
-            const identifiers = {};
-
-            if (extra.local_payment_id !== undefined && extra.local_payment_id !== null) {
-                query.localPaymentId = extra.local_payment_id;
-                identifiers.localPaymentId = extra.local_payment_id;
-            }
-
-            const invoiceIdentifier = extra.invoice_id || extra.bill_id || extra.order_id || extra.invoiceId;
-            if (invoiceIdentifier) {
-                query.invoiceId = invoiceIdentifier;
-                identifiers.invoiceId = invoiceIdentifier;
-            }
-
-            if (extra.payment_id) {
-                query.paymentId = extra.payment_id;
-                identifiers.paymentId = extra.payment_id;
-            }
-
-            if (extra.correlation_id && !query.payload) {
-                query.payload = extra.correlation_id;
-                identifiers.payload = extra.correlation_id;
-            }
-
-            const payloadValue = extra.payload || extra.invoice_payload;
-            if (payloadValue) {
-                query.payload = payloadValue;
-                identifiers.payload = payloadValue;
-            }
-
-            if (Number.isFinite(amountKopeks)) {
-                query.amountKopeks = amountKopeks;
-                identifiers.amountKopeks = amountKopeks;
-            }
-
-            const startedAtRaw = extra.started_at || extra.requested_at || extra.startedAt;
-            const startedAt = startedAtRaw ? String(startedAtRaw) : new Date().toISOString();
-            query.startedAt = startedAt;
-            identifiers.startedAt = startedAt;
-
-            if (extra.external_id) {
-                identifiers.externalId = extra.external_id;
-            }
-
-            return { query, identifiers, startedAt };
-        }
-
-        function applyPaymentFooterState(monitor, state) {
-            if (!monitor || !monitor.method) {
-                return;
-            }
-
-            const method = monitor.method;
-            const fallbackRawInput = monitor.rawInput ?? (
-                Number.isFinite(monitor.amountKopeks)
-                    ? (monitor.amountKopeks / 100).toString()
-                    : ''
-            );
-
-            const goBack = () => {
-                stopAllPaymentMonitors();
-                if (method.requires_amount) {
-                    renderTopupAmountForm(method, {
-                        rawInput: fallbackRawInput,
-                        selectedOption: monitor.option || paymentMethodSelections[method.id],
-                    });
-                } else {
-                    renderTopupMethodsView();
-                }
-            };
-
-            const buttons = [];
-            if (state === 'pending') {
-                buttons.push({
-                    id: 'topupBackButton',
-                    labelKey: 'topup.back',
-                    fallbackLabel: 'Back',
-                    variant: 'secondary',
-                    onClick: goBack,
-                });
-                buttons.push({
-                    id: 'topupOpenLinkButton',
-                    labelKey: 'topup.open_link',
-                    fallbackLabel: 'Open payment page',
-                    variant: 'primary',
-                    onClick: () => openExternalLink(monitor.paymentUrl || monitor.originalUrl),
-                });
-            } else if (state === 'success') {
-                buttons.push({
-                    id: 'topupBackButton',
-                    labelKey: 'topup.back',
-                    fallbackLabel: 'Back',
-                    variant: 'secondary',
-                    onClick: () => {
-                        stopAllPaymentMonitors();
-                        renderTopupMethodsView();
-                    },
-                });
-                buttons.push({
-                    id: 'topupCloseButton',
-                    labelKey: 'topup.cancel',
-                    fallbackLabel: 'Close',
-                    variant: 'primary',
-                    onClick: () => {
-                        stopAllPaymentMonitors();
-                        closeTopupModal();
-                    },
-                });
-            } else if (state === 'failed') {
-                buttons.push({
-                    id: 'topupBackButton',
-                    labelKey: 'topup.back',
-                    fallbackLabel: 'Back',
-                    variant: 'secondary',
-                    onClick: goBack,
-                });
-                buttons.push({
-                    id: 'topupRetryButton',
-                    labelKey: 'topup.status.retry',
-                    fallbackLabel: 'Try again',
-                    variant: 'primary',
-                    onClick: () => {
-                        stopAllPaymentMonitors();
-                        startPaymentForMethod(method, monitor.amountKopeks, {
-                            rawInput: monitor.rawInput ?? fallbackRawInput,
-                            providerOption: monitor.option || monitor.extra?.selected_option,
-                        });
-                    },
-                });
-            }
-
-            setTopupFooter(buttons);
-            monitor.backButton = document.getElementById('topupBackButton');
-            monitor.openButton = document.getElementById('topupOpenLinkButton');
-            monitor.retryButton = document.getElementById('topupRetryButton');
-            monitor.closeButton = document.getElementById('topupCloseButton');
-
-            if (state === 'success' && monitor.openButton) {
-                monitor.openButton.disabled = true;
-            }
-        }
-
-        function startPaymentStatusMonitor(context) {
-            if (!context || !context.method) {
-                return null;
-            }
-
-            const { query, identifiers } = buildPaymentStatusQuery(
-                context.method.id,
-                Number.isFinite(context.amountKopeks) ? context.amountKopeks : null,
-                context.extra || {},
-            ) || {};
-
-            const statusView = context.statusView || createPaymentStatusView();
-            updatePaymentStatusView(statusView, { state: 'pending' });
-
-            const monitorId = `monitor_${Date.now()}_${Math.random().toString(16).slice(2)}`;
-            const monitor = {
-                id: monitorId,
-                method: context.method,
-                methodId: context.method.id,
-                statusView,
-                amountKopeks: Number.isFinite(context.amountKopeks) ? context.amountKopeks : null,
-                option: (context.option || context.extra?.selected_option || null) || null,
-                paymentUrl: context.paymentUrl || context.originalUrl || null,
-                originalUrl: context.originalUrl || context.paymentUrl || null,
-                rawInput: context.rawInput || null,
-                extra: context.extra || {},
-                query: query || { method: context.method.id },
-                identifiers: identifiers || {},
-                state: 'pending',
-                createdAt: Date.now(),
-                timeoutMs: PAYMENT_STATUS_TIMEOUT_MS,
-                refreshed: false,
-                pollingDisabled: !(tg.initData || '').length,
-            };
-
-            activePaymentMonitors.set(monitorId, monitor);
-            applyPaymentSubtitle(monitor, 'pending');
-            applyPaymentFooterState(monitor, 'pending');
-
-            if (!monitor.pollingDisabled) {
-                schedulePaymentStatusPoll(true);
-            }
-
-            return monitor;
-        }
-
-        function schedulePaymentStatusPoll(immediate = false) {
-            const hasPollableMonitor = Array.from(activePaymentMonitors.values()).some(
-                monitor => monitor && !monitor.pollingDisabled && monitor.state !== 'success' && monitor.state !== 'failed'
-            );
-
-            if (!hasPollableMonitor) {
-                cleanupPaymentPollersIfIdle();
-                return;
-            }
-
-            if (paymentStatusPollTimer) {
-                return;
-            }
-
-            const delay = immediate ? PAYMENT_STATUS_INITIAL_DELAY_MS : PAYMENT_STATUS_POLL_INTERVAL_MS;
-            paymentStatusPollTimer = setTimeout(() => {
-                paymentStatusPollTimer = null;
-                pollPaymentStatuses();
-            }, Math.max(0, delay));
-        }
-
-        async function pollPaymentStatuses() {
-            if (isPaymentStatusPolling) {
-                return;
-            }
-
-            const initData = tg.initData || '';
-            if (!initData) {
-                cleanupPaymentPollersIfIdle();
-                return;
-            }
-
-            const now = Date.now();
-            const pendingMonitors = [];
-
-            activePaymentMonitors.forEach(monitor => {
-                if (!monitor || monitor.pollingDisabled || monitor.state === 'success' || monitor.state === 'failed') {
-                    return;
-                }
-
-                if (monitor.createdAt + monitor.timeoutMs < now) {
-                    finalizePaymentMonitor(monitor, { state: 'failed' });
-                    return;
-                }
-
-                pendingMonitors.push(monitor);
-            });
-
-            if (!pendingMonitors.length) {
-                cleanupPaymentPollersIfIdle();
-                return;
-            }
-
-            isPaymentStatusPolling = true;
-            pendingMonitors.forEach(monitor => {
-                monitor.state = 'refreshing';
-                updatePaymentStatusView(monitor.statusView, { state: 'refreshing' });
-            });
-
-            try {
-                const payload = {
-                    initData,
-                    payments: pendingMonitors.map(monitor => ({ ...monitor.query })),
-                };
-
-                const response = await fetch('/miniapp/payments/status', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify(payload),
-                });
-
-                const data = await response.json().catch(() => ({}));
-                if (!response.ok || !Array.isArray(data?.results)) {
-                    throw new Error('Failed to fetch payment statuses');
-                }
-
-                handlePaymentStatusResults(data.results);
-            } catch (error) {
-                console.warn('Payment status polling failed:', error);
-                pendingMonitors.forEach(monitor => {
-                    if (monitor.state === 'refreshing') {
-                        monitor.state = 'pending';
-                        updatePaymentStatusView(monitor.statusView, { state: 'pending' });
-                    }
-                });
-            } finally {
-                isPaymentStatusPolling = false;
-                schedulePaymentStatusPoll(false);
-            }
-        }
-
-        function normalizeIdentifier(value) {
-            if (value === undefined || value === null) {
-                return null;
-            }
-            return String(value);
-        }
-
-        function findMonitorForResult(result) {
-            if (!result || !result.method) {
-                return null;
-            }
-
-            const methodId = String(result.method).toLowerCase();
-            const monitors = Array.from(activePaymentMonitors.values()).filter(
-                monitor => monitor && monitor.methodId === methodId
-            );
-
-            if (!monitors.length) {
-                return null;
-            }
-
-            const extra = result.extra || {};
-            const localId = normalizeIdentifier(extra.local_payment_id);
-            const invoiceId = normalizeIdentifier(extra.invoice_id || extra.bill_id);
-            const paymentId = normalizeIdentifier(extra.payment_id);
-            const payload = normalizeIdentifier(extra.payload);
-            const externalId = normalizeIdentifier(result.external_id);
-            const amount = Number.isFinite(result.amount_kopeks) ? Number(result.amount_kopeks) : null;
-
-            let fallback = null;
-            for (const monitor of monitors) {
-                const ids = monitor.identifiers || {};
-
-                if (localId && normalizeIdentifier(ids.localPaymentId) === localId) {
-                    return monitor;
-                }
-                if (invoiceId && normalizeIdentifier(ids.invoiceId) === invoiceId) {
-                    return monitor;
-                }
-                if (paymentId && normalizeIdentifier(ids.paymentId) === paymentId) {
-                    return monitor;
-                }
-                if (payload && normalizeIdentifier(ids.payload) === payload) {
-                    return monitor;
-                }
-                if (externalId && normalizeIdentifier(ids.externalId) === externalId) {
-                    return monitor;
-                }
-                if (amount !== null && monitor.amountKopeks === amount) {
-                    fallback = monitor;
-                }
-            }
-
-            return fallback || monitors[0] || null;
-        }
-
-        function handlePaymentStatusResults(results) {
-            if (!Array.isArray(results)) {
-                return;
-            }
-
-            results.forEach(result => {
-                const monitor = findMonitorForResult(result);
-                if (!monitor) {
-                    return;
-                }
-
-                const extra = result.extra || {};
-                if (extra.local_payment_id && !monitor.query.localPaymentId) {
-                    monitor.query.localPaymentId = extra.local_payment_id;
-                    monitor.identifiers.localPaymentId = extra.local_payment_id;
-                }
-                if ((extra.invoice_id || extra.bill_id) && !monitor.query.invoiceId) {
-                    const invoiceId = extra.invoice_id || extra.bill_id;
-                    monitor.query.invoiceId = invoiceId;
-                    monitor.identifiers.invoiceId = invoiceId;
-                }
-                if (extra.payment_id && !monitor.query.paymentId) {
-                    monitor.query.paymentId = extra.payment_id;
-                    monitor.identifiers.paymentId = extra.payment_id;
-                }
-                if (extra.payload && !monitor.query.payload) {
-                    monitor.query.payload = extra.payload;
-                    monitor.identifiers.payload = extra.payload;
-                }
-                if (extra.external_id) {
-                    monitor.identifiers.externalId = extra.external_id;
-                }
-
-                const status = String(result.status || '').toLowerCase();
-                const message = typeof result.message === 'string' ? result.message : null;
-
-                if (status === 'paid' || result.is_paid) {
-                    finalizePaymentMonitor(monitor, { state: 'success', result, message });
-                    return;
-                }
-
-                if (status === 'failed') {
-                    const failureMessage = message || (extra.remote_status ? `Status: ${extra.remote_status}` : null);
-                    finalizePaymentMonitor(monitor, { state: 'failed', result, message: failureMessage });
-                    return;
-                }
-
-                monitor.state = 'pending';
-                updatePaymentStatusView(monitor.statusView, { state: 'pending', message });
-            });
-        }
-
-        function finalizePaymentMonitor(monitor, options = {}) {
-            if (!monitor) {
-                return;
-            }
-
-            const { state, message } = options;
-
-            if (state === 'success') {
-                monitor.state = 'success';
-                updatePaymentStatusView(monitor.statusView, { state: 'success', message });
-                applyPaymentSubtitle(monitor, 'success');
-                applyPaymentFooterState(monitor, 'success');
-
-                if (!monitor.refreshed) {
-                    monitor.refreshed = true;
-                    refreshSubscriptionData({ silent: true }).catch(error => {
-                        console.warn('Failed to refresh subscription data:', error);
-                    });
-                }
-            } else if (state === 'failed') {
-                monitor.state = 'failed';
-                updatePaymentStatusView(monitor.statusView, { state: 'failed', message });
-                applyPaymentSubtitle(monitor, 'failed');
-                applyPaymentFooterState(monitor, 'failed');
-            }
-
-            activePaymentMonitors.delete(monitor.id);
-
-            if (!activePaymentMonitors.size) {
-                cleanupPaymentPollersIfIdle();
-            }
-        }
-
-        function resolveLanguage(lang) {
-            if (!lang) {
-                return null;
-            }
-            const normalized = String(lang).toLowerCase();
-            if (supportedLanguages.has(normalized)) {
-                return normalized;
-            }
-            const short = normalized.split('-')[0];
-            if (supportedLanguages.has(short)) {
-                return short;
-            }
-            return null;
-        }
-
-        function safeGetStoredLanguage() {
-            try {
-                return localStorage.getItem(LANG_STORAGE_KEY);
-            } catch (error) {
-                console.warn('Unable to access localStorage:', error);
-                return null;
-            }
-        }
-
-        function safeSetStoredLanguage(lang) {
-            try {
-                localStorage.setItem(LANG_STORAGE_KEY, lang);
-            } catch (error) {
-                console.warn('Unable to persist language preference:', error);
-            }
-        }
-
-        function t(key) {
-            const language = preferredLanguage || 'en';
-            const chain = [];
-            if (translations[language]) {
-                chain.push(translations[language]);
-            }
-            const base = language.split('-')[0];
-            if (translations[base] && !chain.includes(translations[base])) {
-                chain.push(translations[base]);
-            }
-            if (translations.en && !chain.includes(translations.en)) {
-                chain.push(translations.en);
-            }
-            for (const dict of chain) {
-                if (dict && Object.prototype.hasOwnProperty.call(dict, key)) {
-                    return dict[key];
-                }
-            }
-            return key;
-        }
-
-        function escapeHtml(value) {
-            const div = document.createElement('div');
-            div.textContent = value ?? '';
-            return div.innerHTML;
-        }
-
-        function normalizeUrl(value) {
-            if (typeof value !== 'string') {
-                return null;
-            }
-            const trimmed = value.trim();
-            return trimmed.length ? trimmed : null;
-        }
-
-        function getEffectivePurchaseUrl() {
-            const candidates = [
-                currentErrorState?.purchaseUrl,
-                subscriptionPurchaseUrl,
-                configPurchaseUrl,
-            ];
-
-            for (const candidate of candidates) {
-                const normalized = normalizeUrl(candidate);
-                if (normalized) {
-                    return normalized;
-                }
-            }
-
-            return null;
-        }
-
-        function updateErrorTexts() {
-            const titleElement = document.getElementById('errorTitle');
-            const textElement = document.getElementById('errorText');
-            if (!titleElement || !textElement) {
-                return;
-            }
-            const code = typeof currentErrorState?.code === 'string'
-                ? currentErrorState.code.toLowerCase()
-                : null;
-
-            let title = currentErrorState?.title || null;
-            let message = currentErrorState?.message || null;
-
-            if (code) {
-                const titleKey = `error.${code}.title`;
-                const translatedTitle = t(titleKey);
-                if (translatedTitle && translatedTitle !== titleKey) {
-                    title = translatedTitle;
-                }
-
-                const messageKey = `error.${code}.message`;
-                const translatedMessage = t(messageKey);
-                if (translatedMessage && translatedMessage !== messageKey) {
-                    message = translatedMessage;
-                }
-            }
-
-            const defaultTitle = t('error.default.title');
-            if (!title) {
-                title = defaultTitle === 'error.default.title'
-                    ? (currentErrorState?.title || 'Subscription Not Found')
-                    : defaultTitle;
-            }
-
-            const defaultMessage = t('error.default.message');
-            if (!message) {
-                message = defaultMessage === 'error.default.message'
-                    ? (currentErrorState?.message || 'Please contact support to activate your subscription.')
-                    : defaultMessage;
-            }
-
-            titleElement.textContent = title;
-            textElement.textContent = message;
-
-            const errorStateElement = document.getElementById('errorState');
-            if (errorStateElement) {
-                errorStateElement.classList.toggle('error-user-missing', code === 'user_not_found');
-            }
-
-            const iconElement = document.getElementById('errorIcon');
-            if (iconElement) {
-                iconElement.textContent = code === 'user_not_found' ? '🤖' : '⚠️';
-            }
-
-            const purchaseButton = document.getElementById('purchaseBtn');
-            if (purchaseButton) {
-                const link = getEffectivePurchaseUrl();
-                purchaseButton.classList.toggle('hidden', !link);
-                purchaseButton.disabled = !link;
-
-                const buttonKey = code === 'user_not_found'
-                    ? 'button.open_bot'
-                    : 'button.buy_subscription';
-                const label = t(buttonKey);
-                const fallback = code === 'user_not_found' ? 'Open bot' : 'Buy subscription';
-                purchaseButton.textContent = label === buttonKey ? fallback : label;
-            }
-        }
-
-        function applyTranslations() {
-            document.title = t('app.title');
-            document.documentElement.setAttribute('lang', preferredLanguage);
-            document.querySelectorAll('[data-i18n]').forEach(element => {
-                const key = element.getAttribute('data-i18n');
-                if (!key) {
-                    return;
-                }
-                element.textContent = t(key);
-            });
-            document.querySelectorAll('[data-i18n-placeholder]').forEach(element => {
-                const key = element.getAttribute('data-i18n-placeholder');
-                if (!key) {
-                    return;
-                }
-                element.setAttribute('placeholder', t(key));
-            });
-            const languageSelect = document.getElementById('languageSelect');
-            if (languageSelect) {
-                languageSelect.value = preferredLanguage;
-                languageSelect.setAttribute('aria-label', t('language.ariaLabel'));
-            }
-            updateErrorTexts();
-        }
-
-        function updateConnectButtonLabel() {
-            const label = document.getElementById('connectBtnText');
-            if (!label) {
-                return;
-            }
-            const useHappLabel = Boolean(getHappCryptoLink() || userData?.happ_cryptolink_redirect_link);
-            const key = useHappLabel ? 'button.connect.happ' : 'button.connect.default';
-            label.textContent = t(key);
-        }
-
-        function resolveMaintenanceMessage() {
-            const resolvedMessage = (typeof maintenanceState.message === 'string'
-                ? maintenanceState.message.trim()
-                : '')
-                || t('maintenance.message');
-            const translatedFallback = t('maintenance.message');
-            const messageFallback = translatedFallback === 'maintenance.message'
-                ? 'The service is temporarily unavailable due to maintenance. Please try again later.'
-                : translatedFallback;
-
-            return resolvedMessage === 'maintenance.message'
-                ? messageFallback
-                : resolvedMessage;
-        }
-
-        function renderMaintenanceBanner() {
-            const banner = document.getElementById('maintenanceBanner');
-            const messageElement = document.getElementById('maintenanceMessage');
-
-            if (!banner || !messageElement) {
-                return;
-            }
-
-            if (!maintenanceState?.isActive) {
-                banner.classList.add('hidden');
-                return;
-            }
-
-            messageElement.textContent = resolveMaintenanceMessage();
-            banner.classList.remove('hidden');
-        }
-
-        function renderNewsSection() {
-            const card = document.getElementById('newsCard');
-            const list = document.getElementById('newsList');
-            const button = document.getElementById('newsMoreBtn');
-
-            if (!card || !list) {
-                return;
-            }
-
-            // Hide news section completely if disabled in config
-            if (!newsEnabled) {
-                card.classList.add('hidden');
-                list.innerHTML = '';
-                return;
-            }
-
-            const resolvedItems = Array.isArray(newsItems)
-                ? newsItems
-                    .map(item => {
-                        if (!item) {
-                            return null;
-                        }
-                        const title = getLocalizedText(item.titleSource) || item.fallbackTitle || '';
-                        const description = getLocalizedText(item.descriptionSource)
-                            || item.fallbackDescription
-                            || '';
-                        const dateLabel = getLocalizedText(item.dateLabelSource)
-                            || item.dateLabel
-                            || '';
-                        return {
-                            ...item,
-                            title,
-                            description,
-                            dateLabel,
-                        };
-                    })
-                    .filter(item => item && (item.title || item.description))
-                : [];
-
-            if (!resolvedItems.length) {
-                card.classList.add('hidden');
-                list.innerHTML = '';
-                return;
-            }
-
-            const limitAttr = Number(card.getAttribute('data-news-limit'));
-            const limit = Number.isFinite(limitAttr) && limitAttr > 0 ? limitAttr : null;
-            const sortedItems = [...resolvedItems].sort((a, b) => (b.timestamp ?? 0) - (a.timestamp ?? 0));
-            const itemsToRender = limit ? sortedItems.slice(0, limit) : sortedItems;
-
-            list.innerHTML = itemsToRender.map(item => {
-                const dateText = item.dateLabel || formatNewsDate(item.timestamp);
-                const dateHtml = dateText
-                    ? `<div class="news-item-date">${escapeHtml(dateText)}</div>`
-                    : '';
-                const descriptionHtml = item.description
-                    ? `<div class="news-item-description">${escapeHtml(item.description)}</div>`
-                    : '';
-                const clickableClass = item.link ? ' news-item--clickable' : '';
-                const linkAttr = item.link ? ` data-link="${escapeHtml(item.link)}"` : '';
-                return `
-                    <article class="news-item${clickableClass}" data-news-id="${escapeHtml(item.id)}"${linkAttr}>
-                        ${dateHtml}
-                        <div class="news-item-title">${escapeHtml(item.title)}</div>
-                        ${descriptionHtml}
-                    </article>
-                `;
-            }).join('');
-
-            card.classList.remove('hidden');
-
-            if (button) {
-                const hasNewsLink = Boolean(normalizeUrl(newsUrl));
-                button.classList.toggle('hidden', !hasNewsLink);
-                button.disabled = !hasNewsLink;
-            }
-
-            placeNewsSection();
-        }
-
-        function placeNewsSection() {
-            const home = document.querySelector('.screen-container[data-screen="home"]');
-            const news = document.getElementById('newsCard');
-            if (!home || !news) {
-                return;
-            }
-
-            const userCard = document.getElementById('userCard');
-            const missingCard = document.getElementById('subscriptionMissingCard');
-            const promo = document.getElementById('promoOffersContainer');
-
-            const isVisible = el => el && !el.classList.contains('hidden');
-
-            let anchor = null;
-            if (isVisible(userCard)) anchor = userCard;
-            else if (isVisible(missingCard)) anchor = missingCard;
-            else if (promo) anchor = promo; // fallback, if nothing else is visible
-
-            if (anchor && anchor.parentElement === home) {
-                const afterAnchor = anchor.nextSibling;
-                if (afterAnchor !== news) {
-                    home.insertBefore(news, afterAnchor);
-                }
-            }
-        }
-
-        function renderMaintenanceScreen() {
-            const screen = document.getElementById('maintenanceState');
-            const messageElement = document.getElementById('maintenanceStateMessage');
-            const banner = document.getElementById('maintenanceBanner');
-            const loadingState = document.getElementById('loadingState');
-            const errorState = document.getElementById('errorState');
-            const mainContent = document.getElementById('mainContent');
-
-            if (!screen || !messageElement) {
-                return;
-            }
-
-            if (!maintenanceState?.isActive) {
-                screen.classList.add('hidden');
-                return;
-            }
-
-            messageElement.textContent = resolveMaintenanceMessage();
-            screen.classList.remove('hidden');
-
-            if (banner) {
-                banner.classList.add('hidden');
-            }
-            if (loadingState) {
-                loadingState.classList.add('hidden');
-            }
-            if (errorState) {
-                errorState.classList.add('hidden');
-            }
-            if (mainContent) {
-                mainContent.classList.add('hidden');
-            }
-        }
-
-        function applyMaintenanceStatus(status) {
-            const isActive = Boolean(status?.isActive ?? status?.is_active);
-            const message = typeof status?.message === 'string' ? status.message : null;
-            maintenanceState = { isActive, message };
-            renderMaintenanceBanner();
-            renderMaintenanceScreen();
-        }
-
-        function refreshAfterLanguageChange() {
-            applyTranslations();
-            // Update hero banner from API after translations to ensure API data takes precedence
-            if (userData) {
-                updateHeroBannerText(userData);
-            }
-            if (userData) {
-                renderUserData();
-            } else {
-                updateConnectButtonLabel();
-            }
-            renderApps();
-            updateActionButtons();
-            renderMaintenanceBanner();
-            renderNewsSection();
-        }
-
-        function setLanguage(language, options = {}) {
-            const persist = Boolean(options.persist);
-            const resolved = resolveLanguage(language) || preferredLanguage;
-            if (!persist && languageLockedByUser && resolved !== preferredLanguage) {
-                return;
-            }
-            preferredLanguage = resolved;
-            if (persist) {
-                languageLockedByUser = true;
-                safeSetStoredLanguage(preferredLanguage);
-            }
-            refreshAfterLanguageChange();
-        }
-
-        const storedLanguage = resolveLanguage(safeGetStoredLanguage());
-        if (storedLanguage) {
-            preferredLanguage = storedLanguage;
-            languageLockedByUser = true;
-        } else {
-            const telegramLanguage = resolveLanguage(tg.initDataUnsafe?.user?.language_code);
-            if (telegramLanguage) {
-                preferredLanguage = telegramLanguage;
-            }
-        }
-
-        renderLanguageSelectOptions();
-        applyTranslations();
-        updateConnectButtonLabel();
-
-        document.getElementById('languageSelect')?.addEventListener('change', event => {
-            setLanguage(event.target.value, { persist: true });
-        });
-
-        function createError(title, message, status) {
-            const error = new Error(message || title);
-            if (title) {
-                error.title = title;
-            }
-            if (status) {
-                error.status = status;
-            }
-            return error;
-        }
-
-        function resolveTrialActivationTitle() {
-            const titleKey = 'trial.activation.title';
-            const title = t(titleKey);
-            return title && title !== titleKey ? title : 'Trial activation';
-        }
-
-        function resolveTrialActivationSuccessMessage(payload) {
-            const successKey = 'trial.activation.success';
-            const fallbackKey = 'trial.activation.success.short';
-            const duration = coercePositiveInt(
-                payload?.trial_duration_days
-                    ?? payload?.trialDurationDays
-                    ?? userData?.trial_duration_days
-                    ?? userData?.trialDurationDays
-                    ?? null,
-                null,
-            );
-
-            let message = t(successKey);
-            if (!message || message === successKey) {
-                const fallback = t(fallbackKey);
-                if (fallback && fallback !== fallbackKey) {
-                    message = fallback;
-                } else if (duration) {
-                    message = preferredLanguage === 'ru'
-                        ? `Триал активирован! Доступ открыт на ${duration} дн.`
-                        : `Trial activated! Enjoy ${duration} days of access.`;
-                } else {
-                    message = preferredLanguage === 'ru'
-                        ? 'Триал успешно активирован.'
-                        : 'Trial activated successfully.';
-                }
-            }
-
-            if (duration && message.includes('{days}')) {
-                message = message.replace('{days}', String(duration));
-            }
-
-            return message;
-        }
-
-        function extractTrialActivationError(payload, status) {
-            if (status === 401) {
-                const unauthorized = t('trial.activation.error.unauthorized');
-                return unauthorized === 'trial.activation.error.unauthorized'
-                    ? 'Authorization failed. Please reopen the mini app from Telegram.'
-                    : unauthorized;
-            }
-
-            let code = null;
-            let message = null;
-
-            if (payload && typeof payload === 'object') {
-                if (typeof payload.detail === 'string') {
-                    message = payload.detail;
-                } else if (payload.detail && typeof payload.detail === 'object') {
-                    if (typeof payload.detail.message === 'string') {
-                        message = payload.detail.message;
-                    }
-                    if (!message && typeof payload.detail.error === 'string') {
-                        message = payload.detail.error;
-                    }
-                    if (typeof payload.detail.code === 'string') {
-                        code = payload.detail.code;
-                    }
-                }
-
-                if (!code && typeof payload.code === 'string') {
-                    code = payload.code;
-                }
-                if (!message && typeof payload.message === 'string') {
-                    message = payload.message;
-                }
-            }
-
-            if (!message && code) {
-                if (['trial_unavailable', 'trial_disabled', 'trial_expired'].includes(code)) {
-                    const unavailable = t('trial.activation.error.unavailable');
-                    return unavailable === 'trial.activation.error.unavailable'
-                        ? 'Your trial is no longer available. Choose a plan to continue.'
-                        : unavailable;
-                }
-                if (code === 'subscription_exists') {
-                    const active = t('trial.activation.error.already_active');
-                    return active === 'trial.activation.error.already_active'
-                        ? 'You already have an active subscription.'
-                        : active;
-                }
-            }
-
-            if (message) {
-                return message;
-            }
-
-            const fallbackKey = 'trial.activation.error.generic';
-            const fallback = t(fallbackKey);
-            return fallback === fallbackKey
-                ? 'Unable to activate the trial. Please try again later.'
-                : fallback;
-        }
-
-        function resolveTrialActivationErrorMessage(error) {
-            const fallbackKey = 'trial.activation.error.generic';
-            const fallback = t(fallbackKey);
-            const fallbackMessage = fallback === fallbackKey
-                ? 'Unable to activate the trial. Please try again later.'
-                : fallback;
-
-            if (!error) {
-                return fallbackMessage;
-            }
-
-            if (error.status === 401) {
-                const unauthorized = t('trial.activation.error.unauthorized');
-                return unauthorized === 'trial.activation.error.unauthorized'
-                    ? 'Authorization failed. Please reopen the mini app from Telegram.'
-                    : unauthorized;
-            }
-
-            if (typeof error.message === 'string' && error.message.trim().length) {
-                const normalized = error.message.trim();
-                if (normalized.toLowerCase().includes('failed to fetch')) {
-                    return fallbackMessage;
-                }
-                return normalized;
-            }
-
-            return fallbackMessage;
-        }
-
-        function animateCardsOnce() {
-            if (hasAnimatedCards) {
-                return;
-            }
-
-            const cards = document.querySelectorAll('.card');
-            if (!cards.length) {
-                hasAnimatedCards = true;
-                return;
-            }
-
-            cards.forEach((card, index) => {
-                card.classList.remove('animate-in');
-                void card.offsetWidth;
-                setTimeout(() => {
-                    card.classList.add('animate-in');
-                }, index * 100);
-            });
-
-            hasAnimatedCards = true;
-        }
-
-        async function fetchMaintenanceStatus(initData) {
-            const response = await fetch('/miniapp/maintenance/status', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({ initData })
-            });
-
-            if (response.ok) {
-                return response.json();
-            }
-
-            throw new Error('Unable to fetch maintenance status');
-        }
-
-        async function fetchSubscriptionPayload(initData) {
-            const response = await fetch('/miniapp/subscription', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({ initData })
-            });
-
-            if (response.ok) {
-                return response.json();
-            }
-
-            let detail = response.status === 401
-                ? 'Authorization failed. Please open the mini app from Telegram.'
-                : 'Subscription not found';
-            let title = response.status === 401 ? 'Authorization Error' : 'Subscription Not Found';
-            let purchaseUrl = null;
-
-            let code = null;
-            try {
-                const errorPayload = await response.json();
-                if (errorPayload?.detail) {
-                    if (typeof errorPayload.detail === 'string') {
-                        detail = errorPayload.detail;
-                    } else if (typeof errorPayload.detail === 'object') {
-                        if (typeof errorPayload.detail.message === 'string') {
-                            detail = errorPayload.detail.message;
-                        }
-                        if (typeof errorPayload.detail.title === 'string') {
-                            title = errorPayload.detail.title;
-                        }
-                        if (typeof errorPayload.detail.code === 'string') {
-                            code = errorPayload.detail.code;
-                        }
-                        purchaseUrl = errorPayload.detail.purchase_url
-                            || errorPayload.detail.purchaseUrl
-                            || purchaseUrl;
-                    }
-                } else if (typeof errorPayload?.message === 'string') {
-                    detail = errorPayload.message;
-                }
-
-                if (typeof errorPayload?.title === 'string') {
-                    title = errorPayload.title;
-                }
-
-                if (!code && typeof errorPayload?.code === 'string') {
-                    code = errorPayload.code;
-                }
-
-                purchaseUrl = purchaseUrl
-                    || errorPayload?.purchase_url
-                    || errorPayload?.purchaseUrl
-                    || null;
-            } catch (parseError) {
-                // ignore JSON parsing errors
-            }
-
-            const errorObject = createError(title, detail, response.status);
-            if (code) {
-                errorObject.code = code;
-            }
-            const normalizedPurchaseUrl = normalizeUrl(purchaseUrl);
-            if (normalizedPurchaseUrl) {
-                errorObject.purchaseUrl = normalizedPurchaseUrl;
-            }
-            throw errorObject;
-        }
-
-        function applySubscriptionData(payload) {
-            if (!payload || typeof payload !== 'object') {
-                return null;
-            }
-
-            userData = payload;
-
-            // Update hero banner text from API
-            updateHeroBannerText(payload);
-            cachedHappCryptolinkRedirectTemplate = undefined;
-            userData.subscriptionUrl = userData.subscription_url || null;
-            userData.subscriptionCryptoLink = userData.subscription_crypto_link || null;
-            userData.referral = userData.referral || null;
-
-            const happData = payload?.happ;
-            if (happData && typeof happData === 'object') {
-                userData.happ = { ...happData };
-
-                const happCryptoLinkCandidate = happData.cryptoLink
-                    ?? happData.crypto_link
-                    ?? null;
-                if (happCryptoLinkCandidate) {
-                    if (!userData.happ_crypto_link) {
-                        userData.happ_crypto_link = happCryptoLinkCandidate;
-                    }
-                    if (!userData.happCryptoLink) {
-                        userData.happCryptoLink = happCryptoLinkCandidate;
-                    }
-                }
-
-                const happRedirectCandidate = happData.cryptolinkRedirectLink
-                    ?? happData.cryptolink_redirect_link
-                    ?? happData.redirectLink
-                    ?? happData.redirect_link
-                    ?? null;
-                if (happRedirectCandidate) {
-                    if (!userData.happ_cryptolink_redirect_link) {
-                        userData.happ_cryptolink_redirect_link = happRedirectCandidate;
-                    }
-                    if (!userData.happCryptolinkRedirectLink) {
-                        userData.happCryptolinkRedirectLink = happRedirectCandidate;
-                    }
-                }
-
-                const happLinkCandidate = happData.link
-                    ?? happData.appLink
-                    ?? happData.url
-                    ?? null;
-                if (happLinkCandidate) {
-                    if (!userData.happ_link) {
-                        userData.happ_link = happLinkCandidate;
-                    }
-                    if (!userData.happLink) {
-                        userData.happLink = happLinkCandidate;
-                    }
-                }
-            }
-
-            if (hasPaidSubscription()) {
-                subscriptionAutopayState.loading = true;
-                subscriptionAutopayState.saving = false;
-                subscriptionAutopayState.defaultDaysBefore = null;
-                subscriptionAutopayState.options = [];
-                ingestAutopayData(
-                    payload,
-                    payload?.autopay,
-                    payload?.autopay_settings,
-                    payload?.autopaySettings,
-                    payload?.subscription_renewal,
-                    payload?.subscriptionRenewal,
-                    payload?.subscription_renewal?.autopay,
-                    payload?.subscriptionRenewal?.autopay,
-                );
-            } else {
-                subscriptionAutopayState.enabled = false;
-                subscriptionAutopayState.daysBefore = null;
-                subscriptionAutopayState.defaultDaysBefore = null;
-                subscriptionAutopayState.options = [];
-                subscriptionAutopayState.loading = false;
-                subscriptionAutopayState.saving = false;
-                renderSubscriptionAutopay();
-            }
-
-            resetSubscriptionRenewalState(null);
-            prepareSubscriptionRenewalFromUserData();
-
-            const normalizedPurchaseUrl = normalizeUrl(
-                userData.subscription_purchase_url
-                || userData.subscriptionPurchaseUrl
-            );
-            subscriptionPurchaseUrl = normalizedPurchaseUrl;
-            userData.subscriptionPurchaseUrl = normalizedPurchaseUrl || null;
-
-            const subscriptionMissingValue = Boolean(
-                userData.subscription_missing ?? userData.subscriptionMissing
-            );
-            userData.subscription_missing = subscriptionMissingValue;
-            userData.subscriptionMissing = subscriptionMissingValue;
-
-            const trialAvailableValue = Boolean(
-                userData.trial_available ?? userData.trialAvailable
-            );
-            userData.trial_available = trialAvailableValue;
-            userData.trialAvailable = trialAvailableValue;
-
-            const trialDuration = coercePositiveInt(
-                userData.trial_duration_days ?? userData.trialDurationDays ?? null,
-                null,
-            );
-            userData.trial_duration_days = trialDuration;
-            userData.trialDurationDays = trialDuration;
-
-            const missingReason = (
-                userData.subscription_missing_reason
-                ?? userData.subscriptionMissingReason
-                ?? null
-            );
-            userData.subscription_missing_reason = missingReason;
-            userData.subscriptionMissingReason = missingReason;
-
-            if (userData.branding) {
-                applyBrandingOverrides(userData.branding);
-            }
-
-            const responseLanguage = resolveLanguage(userData?.user?.language);
-            if (responseLanguage && !languageLockedByUser) {
-                preferredLanguage = responseLanguage;
-            }
-
-            currentErrorState = null;
-            updateErrorTexts();
-
-            const errorState = document.getElementById('errorState');
-            if (errorState) {
-                errorState.classList.add('hidden');
-            }
-
-            const loadingState = document.getElementById('loadingState');
-            if (loadingState) {
-                loadingState.classList.add('hidden');
-            }
-
-            const mainContent = document.getElementById('mainContent');
-            if (mainContent) {
-                mainContent.classList.remove('hidden');
-            }
-
-            detectPlatform();
-            setActivePlatformButton();
-            refreshAfterLanguageChange();
-
-            animateCardsOnce();
-
-            return userData;
-        }
-
-        async function refreshSubscriptionData(options = {}) {
-            const { silent = false } = options;
-            const initData = tg.initData || '';
-
-            if (!initData) {
-                throw createError('Authorization Error', 'Missing Telegram ID');
-            }
-
-            if (!silent) {
-                document.getElementById('errorState')?.classList.add('hidden');
-                document.getElementById('mainContent')?.classList.add('hidden');
-                document.getElementById('loadingState')?.classList.remove('hidden');
-            }
-
-            const payload = await fetchSubscriptionPayload(initData);
-            return applySubscriptionData(payload);
-        }
-
-        async function checkMaintenance(initData) {
-            if (!initData) {
-                applyMaintenanceStatus({ isActive: false, message: null });
-                return false;
-            }
-
-            try {
-                const status = await fetchMaintenanceStatus(initData);
-                applyMaintenanceStatus(status);
-                return Boolean(status?.isActive ?? status?.is_active);
-            } catch (error) {
-                console.warn('Unable to load maintenance status:', error);
-                applyMaintenanceStatus({ isActive: false, message: null });
-                return false;
-            }
-        }
-
-        async function init() {
-            try {
-                const telegramUser = tg.initDataUnsafe?.user;
-                if (telegramUser?.language_code && !languageLockedByUser) {
-                    const resolved = resolveLanguage(telegramUser.language_code);
-                    if (resolved) {
-                        preferredLanguage = resolved;
-                        applyTranslations();
-                        updateConnectButtonLabel();
-                    }
-                }
-
-                await loadAppsConfig();
-                const initData = tg.initData || '';
-                const maintenanceActive = await checkMaintenance(initData);
-                if (maintenanceActive) {
-                    return;
-                }
-                await refreshSubscriptionData();
-
-                // Ensure screen-only items follow current screen on initial load
-                try {
-                    document.querySelectorAll('[data-screen-only]')
-                        .forEach(el => {
-                            const only = (el.getAttribute('data-screen-only') || '').trim();
-                            // Skip news card if news is disabled
-                            if (el.id === 'newsCard' && !newsEnabled) {
-                                el.classList.add('hidden');
-                                return;
-                            }
-                            el.classList.toggle('hidden', only && only !== currentNavScreen);
-                        });
-                } catch (e) {}
-
-                // Place news right after the primary info card
-                placeNewsSection();
-            } catch (error) {
-                console.error('Initialization error:', error);
-                showError(error);
-            }
-        }
-
-        async function loadAppsConfig() {
-            try {
-                const fallbackPaths = getAppConfigCandidatePaths();
-                const data = await fetchFirstAvailableAppConfig(fallbackPaths);
-
-                if (!data) {
-                    throw new Error('No available app config sources');
-                }
-
-                appsConfig = sanitizeAppsConfig(data?.platforms || {});
-                ensurePlatformFilter();
-
-                const configData = data?.config || {};
-                if (configData.branding || data?.branding) {
-                    applyBrandingOverrides(configData.branding || data.branding);
-                }
-
-                // Check if news section is enabled
-                const newsEnabledRaw = configData.newsEnabled
-                    ?? configData.news_enabled
-                    ?? data?.newsEnabled
-                    ?? data?.news_enabled;
-                newsEnabled = newsEnabledRaw !== false; // Default to true
-
-                if (newsEnabled) {
-                    newsItems = sanitizeNewsItems(
-                        configData.news
-                        || configData.newsItems
-                        || data?.news
-                        || []
-                    );
-                } else {
-                    newsItems = [];
-                }
-                renderNewsSection();
-
-                const configUrl = normalizeUrl(
-                    configData.subscriptionPurchaseUrl
-                    || configData.subscription_purchase_url
-                    || configData.purchaseUrl
-                    || configData.purchase_url
-                    || configData.miniappPurchaseUrl
-                    || configData.miniapp_purchase_url
-                    || data?.subscriptionPurchaseUrl
-                    || data?.subscription_purchase_url
-                );
-                if (configUrl) {
-                    configPurchaseUrl = configUrl;
-                }
-
-                const additionalLocalesRaw = configData.additionalLocales
-                    || configData.additional_locales
-                    || data?.additionalLocales
-                    || data?.additional_locales
-                    || [];
-                const additionalLocales = (Array.isArray(additionalLocalesRaw)
-                    ? additionalLocalesRaw
-                    : [additionalLocalesRaw])
-                    .map(locale => typeof locale === 'string' ? locale.trim() : '')
-                    .filter(Boolean);
-
-                const previousLanguage = preferredLanguage;
-                const languagesUpdated = addSupportedLanguages(additionalLocales);
-
-                if (languagesUpdated && !languageLockedByUser) {
-                    const storedLanguageRaw = safeGetStoredLanguage();
-                    const storedResolved = resolveLanguage(storedLanguageRaw);
-                    if (storedResolved) {
-                        preferredLanguage = storedResolved;
-                        languageLockedByUser = true;
-                    } else {
-                        const telegramResolved = resolveLanguage(tg.initDataUnsafe?.user?.language_code);
-                        if (telegramResolved) {
-                            preferredLanguage = telegramResolved;
-                        }
-                    }
-                }
-
-                const normalizedPreferred = resolveLanguage(preferredLanguage) || 'en';
-                if (preferredLanguage !== normalizedPreferred) {
-                    preferredLanguage = normalizedPreferred;
-                }
-
-                renderLanguageSelectOptions();
-
-                if (languagesUpdated || preferredLanguage !== previousLanguage) {
-                    refreshAfterLanguageChange();
-                }
-            } catch (error) {
-                console.warn('Unable to load apps configuration:', error);
-                appsConfig = {};
-                newsItems = [];
-                ensurePlatformFilter();
-                renderNewsSection();
-            }
-        }
-
-        function getAppConfigCandidatePaths() {
-            const paths = [];
-            const currentPath = window.location?.pathname || '/';
-            const basePath = currentPath.endsWith('/')
-                ? currentPath
-                : currentPath.replace(/[^/]*$/, '');
-
-            const normalizedBase = basePath || '/';
-            const relativePath = `${normalizedBase}app-config.json`;
-            paths.push(relativePath);
-
-            ['/miniapp/app-config.json', '/app-config.json'].forEach(path => {
-                if (!paths.includes(path)) {
-                    paths.push(path);
-                }
-            });
-
-            return paths;
-        }
-
-        async function fetchFirstAvailableAppConfig(paths) {
-            if (!Array.isArray(paths) || !paths.length) {
-                return null;
-            }
-
-            for (const path of paths) {
-                try {
-                    const response = await fetch(path, { cache: 'no-cache' });
-                    if (!response.ok) {
-                        continue;
-                    }
-                    const data = await response.json();
-                    if (data && typeof data === 'object') {
-                        return data;
-                    }
-                } catch (error) {
-                    console.warn('App config path failed:', path, error);
-                }
-            }
-
-            return null;
-        }
-
-        function updateHeroBannerText(data) {
-            if (!data || typeof data !== 'object') {
-                return;
-            }
-
-            const heroTitleEl = document.getElementById('heroTitle');
-            const heroSubtitleEl = document.getElementById('heroSubtitle');
-
-            // Try different field name variations from API - only use API data, not translations
-            // Handle both string values and localized objects
-            const appNameRaw = data.app_name
-                || data.appName
-                || data.name
-                || data.app_title
-                || data.appTitle
-                || data.branding?.service_name
-                || data.branding?.name
-                || data.branding?.title;
-
-            const appSubtitleRaw = data.app_subtitle
-                || data.appSubtitle
-                || data.subtitle
-                || data.description
-                || data.branding?.service_description
-                || data.branding?.description
-                || data.branding?.subtitle;
-
-            // Extract string from localized object if needed
-            const appName = typeof appNameRaw === 'string'
-                ? appNameRaw
-                : (appNameRaw && typeof appNameRaw === 'object' ? getLocalizedText(appNameRaw) : '');
-
-            const appSubtitle = typeof appSubtitleRaw === 'string'
-                ? appSubtitleRaw
-                : (appSubtitleRaw && typeof appSubtitleRaw === 'object' ? getLocalizedText(appSubtitleRaw) : '');
-
-            // Always update from API, even if empty (to clear any static/default values)
-            if (heroTitleEl) {
-                heroTitleEl.textContent = appName || '';
-            }
-
-            if (heroSubtitleEl) {
-                heroSubtitleEl.textContent = appSubtitle || '';
-            }
-        }
-
-        function renderUserData() {
-            // Update hero banner text from API
-            if (userData) {
-                updateHeroBannerText(userData);
-            }
-
-            if (!userData?.user) {
-                return;
-            }
-
-            const user = userData.user;
-            const rawName = user.display_name || user.username || '';
-            const fallbackName = rawName
-                || [user.first_name, user.last_name].filter(Boolean).join(' ')
-                || `User ${user.telegram_id || ''}`.trim();
-            const avatarChar = (fallbackName.replace(/^@/, '')[0] || 'U').toUpperCase();
-
-            const subscriptionMissing = Boolean(
-                userData?.subscription_missing ?? userData?.subscriptionMissing
-            );
-
-            // Update new subscription card design
-            const subscriptionTypeNameEl = document.getElementById('subscriptionTypeName');
-            if (subscriptionTypeNameEl) {
-                const subscriptionTypeRaw = String(
-                    userData?.subscription_type
-                    || ((user?.subscription_status || '').toLowerCase() === 'trial' ? 'trial' : 'paid')
-                ).toLowerCase();
-                const subscriptionTypeKey = `subscription.type.${subscriptionTypeRaw}`;
-                const subscriptionTypeLabel = t(subscriptionTypeKey);
-                subscriptionTypeNameEl.textContent = subscriptionTypeLabel === subscriptionTypeKey
-                    ? (subscriptionTypeRaw === 'trial' ? 'Пробная' : 'Платная')
-                    : subscriptionTypeLabel;
-
-                // Update icon based on subscription type
-                const subscriptionTypeSection = document.querySelector('#userCard .subscription-type-section');
-                if (subscriptionTypeSection) {
-                    subscriptionTypeSection.classList.remove('subscription-type-paid', 'subscription-type-trial');
-                    subscriptionTypeSection.classList.add(`subscription-type-${subscriptionTypeRaw}`);
-                }
-            }
-
-            const subscriptionExpiresDateEl = document.getElementById('subscriptionExpiresDate');
-            const subscriptionExpiresLabelEl = document.getElementById('subscriptionExpiresLabel');
-            if (subscriptionExpiresDateEl && user.expires_at) {
-                const expiresAt = new Date(user.expires_at);
-                if (!Number.isNaN(expiresAt.getTime())) {
-                    const diffDays = Math.ceil((expiresAt - new Date()) / (1000 * 60 * 60 * 24));
-                    if (diffDays <= 0) {
-                        subscriptionExpiresDateEl.textContent = t('info.expires.expired');
-                        subscriptionExpiresDateEl.style.color = 'var(--danger)';
-                        if (subscriptionExpiresLabelEl) {
-                            subscriptionExpiresLabelEl.textContent = t('info.expires.expired_lower');
-                        }
-                    } else {
-                        subscriptionExpiresDateEl.textContent = formatDate(user.expires_at);
-                        subscriptionExpiresDateEl.style.color = '';
-                        if (subscriptionExpiresLabelEl) {
-                            subscriptionExpiresLabelEl.textContent = t('info.expires.active_until');
-                        }
-                    }
-                } else {
-                    subscriptionExpiresDateEl.textContent = formatDate(user.expires_at);
-                    if (subscriptionExpiresLabelEl) {
-                        subscriptionExpiresLabelEl.textContent = t('info.expires.active_until');
-                    }
-                }
-            }
-
-            const userCard = document.getElementById('userCard');
-            if (userCard) {
-                userCard.classList.toggle('hidden', subscriptionMissing);
-            }
-
-            const serversCard = document.getElementById('serversCard');
-            if (serversCard) {
-                serversCard.classList.toggle('hidden', subscriptionMissing);
-            }
-
-            const devicesCard = document.getElementById('devicesCard');
-            if (devicesCard) {
-                devicesCard.classList.toggle('hidden', subscriptionMissing);
-            }
-
-            // Status badge removed in new design, but keep for backward compatibility if element exists
-            const statusBadge = document.getElementById('statusBadge');
-            if (statusBadge) {
-            const knownStatuses = ['active', 'trial', 'expired', 'disabled', 'missing'];
-            const statusValueRaw = (user.subscription_actual_status || user.subscription_status || 'active').toLowerCase();
-            let statusClass = knownStatuses.includes(statusValueRaw) ? statusValueRaw : 'unknown';
-            if (subscriptionMissing && statusClass !== 'missing') {
-                statusClass = 'missing';
-            }
-            const statusKey = `status.${statusClass}`;
-            const statusLabel = t(statusKey);
-            statusBadge.textContent = statusLabel === statusKey
-                ? (user.status_label || statusClass.charAt(0).toUpperCase() + statusClass.slice(1))
-                : statusLabel;
-            statusBadge.className = `status-badge status-${statusClass}`;
-            }
-
-            const expiresAt = user.expires_at ? new Date(user.expires_at) : null;
-            let daysLeft = '—';
-            if (expiresAt && !Number.isNaN(expiresAt.getTime())) {
-                const diffDays = Math.ceil((expiresAt - new Date()) / (1000 * 60 * 60 * 24));
-                daysLeft = diffDays > 0 ? diffDays : '0';
-            }
-            // Update new stats design
-            const trafficDownloadedEl = document.getElementById('trafficDownloaded');
-            if (trafficDownloadedEl) {
-                const trafficUsed = user.traffic_used_label || formatTraffic(user.traffic_used_gb);
-                // Always display in GB
-                if (trafficUsed.includes('GB')) {
-                    const gbUnit = t('units.gb');
-                    trafficDownloadedEl.textContent = trafficUsed.replace('GB', gbUnit);
-                } else if (trafficUsed.includes('MB')) {
-                    // Convert MB to GB
-                    const mb = parseFloat(trafficUsed) || 0;
-                    const gb = mb / 1024;
-                    const gbUnit = t('units.gb');
-                    trafficDownloadedEl.textContent = `${gb.toFixed(2)} ${gbUnit}`;
-                } else {
-                    // If no unit, assume it's already in GB or use formatTraffic result
-                    const gbUnit = t('units.gb');
-                    trafficDownloadedEl.textContent = trafficUsed.replace('MB', gbUnit).replace('GB', gbUnit);
-                }
-            }
-
-            const devicesConnectedEl = document.getElementById('devicesConnected');
-            if (devicesConnectedEl) {
-                const devicesCountRaw = Number(userData?.connected_devices_count);
-                const devicesCount = Number.isFinite(devicesCountRaw)
-                    ? devicesCountRaw
-                    : Array.isArray(userData?.connected_devices)
-                        ? userData.connected_devices.length
-                        : 0;
-                const deviceLimit = typeof user.device_limit === 'number'
-                    ? user.device_limit
-                    : Number.parseInt(user.device_limit ?? '', 10);
-                const deviceLimitValue = Number.isFinite(deviceLimit) ? deviceLimit : 1;
-                devicesConnectedEl.textContent = `${devicesCount}/${deviceLimitValue}`;
-            }
-
-            const serversAvailableEl = document.getElementById('serversAvailable');
-            if (serversAvailableEl) {
-                const serversCount = Array.isArray(userData.connected_squads)
-                    ? userData.connected_squads.length
-                    : Array.isArray(userData.connected_servers)
-                        ? userData.connected_servers.length
-                        : Array.isArray(userData.links)
-                            ? userData.links.length
-                            : (userData?.available_servers_count || 0);
-                serversAvailableEl.textContent = serversCount;
-            }
-
-            const daysRemainingProgressEl = document.getElementById('daysRemainingProgress');
-            if (daysRemainingProgressEl) {
-                const expiresAt = user.expires_at ? new Date(user.expires_at) : null;
-                let daysLeft = '—';
-                if (expiresAt && !Number.isNaN(expiresAt.getTime())) {
-                    const diffDays = Math.ceil((expiresAt - new Date()) / (1000 * 60 * 60 * 24));
-                    if (diffDays > 0) {
-                        daysLeft = `${diffDays} дней`;
-                    } else if (diffDays === 0) {
-                        daysLeft = 'Истекла сегодня';
-                    } else {
-                        daysLeft = 'Истекла';
-                    }
-                }
-                daysRemainingProgressEl.textContent = daysLeft;
-            }
-
-            // Keep old elements for backward compatibility
-            const daysLeftEl = document.getElementById('daysLeft');
-            if (daysLeftEl) {
-                const expiresAt = user.expires_at ? new Date(user.expires_at) : null;
-                let daysLeft = '—';
-                if (expiresAt && !Number.isNaN(expiresAt.getTime())) {
-                    const diffDays = Math.ceil((expiresAt - new Date()) / (1000 * 60 * 60 * 24));
-                    daysLeft = diffDays > 0 ? diffDays : '0';
-                }
-                daysLeftEl.textContent = daysLeft;
-            }
-
-            const expiresAtEl = document.getElementById('expiresAt');
-            if (expiresAtEl) {
-                expiresAtEl.textContent = formatDate(user.expires_at);
-            }
-
-            const serversCountEl = document.getElementById('serversCount');
-            if (serversCountEl) {
-            const serversCount = Array.isArray(userData.connected_squads)
-                ? userData.connected_squads.length
-                : Array.isArray(userData.connected_servers)
-                    ? userData.connected_servers.length
-                    : Array.isArray(userData.links)
-                        ? userData.links.length
-                        : 0;
-                serversCountEl.textContent = serversCount;
-            }
-
-            const devicesCountEl = document.getElementById('devicesCount');
-            if (devicesCountEl) {
-            const devicesCountRaw = Number(userData?.connected_devices_count);
-            const devicesCount = Number.isFinite(devicesCountRaw)
-                ? devicesCountRaw
-                : Array.isArray(userData?.connected_devices)
-                    ? userData.connected_devices.length
-                    : 0;
-                devicesCountEl.textContent = devicesCount;
-            }
-
-            const trafficUsedEl = document.getElementById('trafficUsed');
-            if (trafficUsedEl) {
-                trafficUsedEl.textContent = user.traffic_used_label || formatTraffic(user.traffic_used_gb);
-            }
-            const trafficLimitEl = document.getElementById('trafficLimit');
-            if (trafficLimitEl) {
-                trafficLimitEl.textContent = user.traffic_limit_label || formatTrafficLimit(user.traffic_limit_gb);
-            }
-
-            const deviceLimitElement = document.getElementById('deviceLimit');
-            if (deviceLimitElement) {
-                const limitValue = typeof user.device_limit === 'number'
-                    ? user.device_limit
-                    : Number.parseInt(user.device_limit ?? '', 10);
-                deviceLimitElement.textContent = Number.isFinite(limitValue)
-                    ? String(limitValue)
-                    : t('values.not_available');
-            }
-
-            const subscriptionTypeElement = document.getElementById('subscriptionType');
-            if (subscriptionTypeElement) {
-                const fallbackSubscriptionType = (user?.subscription_status || '').toLowerCase() === 'trial'
-                    ? 'trial'
-                    : 'paid';
-                const subscriptionTypeRaw = String(
-                    userData?.subscription_type
-                    || fallbackSubscriptionType
-                ).toLowerCase();
-                const subscriptionTypeKey = `subscription.type.${subscriptionTypeRaw}`;
-                const subscriptionTypeLabel = t(subscriptionTypeKey);
-                subscriptionTypeElement.textContent = subscriptionTypeLabel === subscriptionTypeKey
-                    ? subscriptionTypeRaw
-                    : subscriptionTypeLabel;
-            }
-
-            const autopayElement = document.getElementById('autopayStatus');
-            if (autopayElement) {
-                const autopayKey = userData?.autopay_enabled ? 'autopay.enabled' : 'autopay.disabled';
-                const autopayLabel = t(autopayKey);
-                autopayElement.textContent = autopayLabel === autopayKey
-                    ? (userData?.autopay_enabled ? 'On' : 'Off')
-                    : autopayLabel;
-            }
-
-            renderSubscriptionMissingCard();
-            renderSubscriptionPurchaseCard();
-            // Don't render renewal and settings cards automatically - they should be controlled by button clicks
-            // renderSubscriptionRenewalCard();
-            // renderSubscriptionSettingsCard();
-
-            // Скрываем карточку продления для триалов
-            const renewalCard = document.getElementById('subscriptionRenewalCard');
-            if (renewalCard && !hasPaidSubscription()) {
-                renewalCard.classList.add('hidden');
-            }
-            renderPromoOffers();
-            renderPromoSection();
-            renderBalanceSection();
-            renderProfileSection();
-            renderReferralSection();
-            // renderTransactionHistory(); // Removed - history only in Payments tab
-            renderServersList();
-            renderDevicesList();
-            renderFaqSection();
-            renderLegalDocuments();
-            updateConnectButtonLabel();
-            updateActionButtons();
-        }
-
-        function renderSubscriptionMissingCard() {
-            const cards = [
-                document.getElementById('subscriptionMissingCard'),
-                document.getElementById('subscriptionMissingCardSubscriptions')
-            ].filter(Boolean);
-
-            if (!cards.length) {
-                return;
-            }
-
-            const subscriptionMissing = Boolean(
-                userData?.subscription_missing ?? userData?.subscriptionMissing
-            );
-
-            cards.forEach(card => {
-            card.classList.toggle('hidden', !subscriptionMissing);
-            });
-
-            if (!subscriptionMissing) {
-                return;
-            }
-
-            const titleElements = [
-                document.getElementById('subscriptionMissingTitle'),
-                document.querySelector('#subscriptionMissingCardSubscriptions .subscription-missing-title')
-            ].filter(Boolean);
-
-            titleElements.forEach(titleElement => {
-            if (titleElement) {
-                const titleValue = t('subscription_missing.title');
-                titleElement.textContent = titleValue && titleValue !== 'subscription_missing.title'
-                    ? titleValue
-                    : 'No active subscription';
-            }
-            });
-
-            const trialAvailable = Boolean(
-                userData?.trial_available ?? userData?.trialAvailable
-            );
-            const trialDuration = coercePositiveInt(
-                userData?.trial_duration_days ?? userData?.trialDurationDays ?? null,
-                null,
-            );
-            const missingReason = String(
-                userData?.subscription_missing_reason ?? userData?.subscriptionMissingReason ?? ''
-            ).toLowerCase();
-
-            const descriptionElements = [
-                document.getElementById('subscriptionMissingDescription'),
-                document.querySelector('#subscriptionMissingCardSubscriptions .subscription-missing-description')
-            ].filter(Boolean);
-
-            descriptionElements.forEach(descriptionElement => {
-                if (!descriptionElement) return;
-
-                let descriptionKey = 'subscription_missing.description.default';
-                if (trialAvailable) {
-                    descriptionKey = trialDuration
-                        ? 'subscription_missing.description.trial'
-                        : 'subscription_missing.description.trial_short';
-                } else if (missingReason === 'trial_expired') {
-                    descriptionKey = 'subscription_missing.description.no_trial';
-                }
-
-                let descriptionValue = t(descriptionKey);
-                if (!descriptionValue || descriptionValue === descriptionKey) {
-                    if (trialAvailable) {
-                        descriptionValue = trialDuration
-                            ? `Activate your free ${trialDuration}-day trial or choose a plan to continue.`
-                            : 'Activate your free trial or choose a plan to continue.';
-                    } else if (missingReason === 'trial_expired') {
-                        descriptionValue = 'Your trial is no longer available. Purchase a plan to continue.';
-                    } else {
-                        descriptionValue = 'You do not have an active subscription yet. Purchase a plan to get access.';
-                    }
-                }
-
-                if (trialDuration && descriptionValue.includes('{days}')) {
-                    descriptionValue = descriptionValue.replace('{days}', String(trialDuration));
-                }
-
-                descriptionElement.textContent = descriptionValue;
-            });
-
-            const hintElements = [
-                document.getElementById('subscriptionMissingHint'),
-                document.querySelector('#subscriptionMissingCardSubscriptions .subscription-missing-hint')
-            ].filter(Boolean);
-
-            hintElements.forEach(hintElement => {
-            if (hintElement) {
-                const hintValue = t('subscription_missing.hint');
-                hintElement.textContent = hintValue && hintValue !== 'subscription_missing.hint'
-                    ? hintValue
-                    : 'After activation you can top up your balance here to stay connected.';
-            }
-            });
-
-            const trialButtons = [
-                document.getElementById('subscriptionMissingTrialBtn'),
-                document.getElementById('subscriptionMissingTrialBtnSubscriptions')
-            ].filter(Boolean);
-
-            trialButtons.forEach(trialButton => {
-                if (!trialButton) return;
-
-                const baseKey = 'subscription_missing.action.trial';
-                const loadingKey = 'subscription_missing.action.trial.loading';
-                const activeKey = trialActivationInProgress ? loadingKey : baseKey;
-                let label = t(activeKey);
-                if (!label || label === activeKey) {
-                    if (trialActivationInProgress) {
-                        label = preferredLanguage === 'ru' ? 'Активация…' : 'Activating…';
-                    } else {
-                        label = 'Activate trial';
-                    }
-                }
-
-                trialButton.textContent = label;
-                trialButton.classList.toggle('hidden', !trialAvailable && !trialActivationInProgress);
-                trialButton.disabled = !trialAvailable || trialActivationInProgress;
-            });
-        }
-
-        function resolvePromoOfferIcon(offer) {
-            if (offer?.icon && typeof offer.icon === 'string') {
-                return offer.icon;
-            }
-
-            const offerType = String(offer?.offer_type || '').toLowerCase();
-            const effectType = String(offer?.effect_type || '').toLowerCase();
-
-            if (offerType === 'extend_discount') {
-                return '💎';
-            }
-            if (offerType === 'purchase_discount') {
-                return '🎯';
-            }
-            if (offerType === 'test_access' || effectType === 'test_access') {
-                return '🧪';
-            }
-            if (effectType === 'percent_discount') {
-                return '🎁';
-            }
-            return '🎉';
-        }
-
-        function resolvePromoOfferTitle(offer) {
-            if (offer?.title) {
-                return offer.title;
-            }
-            if (offer?.template_name) {
-                return offer.template_name;
-            }
-
-            const offerType = String(offer?.offer_type || '').toLowerCase();
-            if (offerType) {
-                const key = `promo_offer.type.${offerType}`;
-                const value = t(key);
-                if (value !== key) {
-                    return value;
-                }
-            }
-
-            const effectType = String(offer?.effect_type || '').toLowerCase();
-            if (effectType) {
-                const key = `promo_offer.type.${effectType}`;
-                const value = t(key);
-                if (value !== key) {
-                    return value;
-                }
-            }
-
-            const fallbackKey = offer?.status === 'active'
-                ? 'promo_offer.status.active'
-                : 'promo_offer.status.pending';
-            const fallback = t(fallbackKey);
-            if (fallback !== fallbackKey) {
-                return fallback;
-            }
-
-            return offerType || effectType || (offer?.status === 'active' ? 'Active offer' : 'Offer');
-        }
-
-        function parseDate(value) {
-            if (!value) {
-                return null;
-            }
-
-            if (value instanceof Date) {
-                return Number.isNaN(value.getTime()) ? null : value;
-            }
-
-            let candidate = value;
-
-            if (typeof candidate === 'number') {
-                const direct = new Date(candidate);
-                if (!Number.isNaN(direct.getTime())) {
-                    return direct;
-                }
-
-                const fromSeconds = new Date(candidate * 1000);
-                return Number.isNaN(fromSeconds.getTime()) ? null : fromSeconds;
-            }
-
-            if (typeof candidate !== 'string') {
-                return null;
-            }
-
-            let normalized = candidate.trim();
-            if (!normalized) {
-                return null;
-            }
-
-            if (/^\d+$/.test(normalized)) {
-                const timestamp = Number(normalized);
-                if (Number.isFinite(timestamp)) {
-                    const millis = normalized.length === 10 ? timestamp * 1000 : timestamp;
-                    const asDate = new Date(millis);
-                    if (!Number.isNaN(asDate.getTime())) {
-                        return asDate;
-                    }
-                }
-            }
-
-            normalized = normalized.replace(' ', 'T');
-            normalized = normalized.replace('+00:00+00:00', '+00:00');
-
-            const hasTimezone = /([zZ]|[+-]\d{2}:?\d{2})$/.test(normalized);
-            if (!hasTimezone && /T\d{2}:\d{2}:\d{2}(\.\d+)?$/.test(normalized)) {
-                normalized = `${normalized}Z`;
-            }
-
-            const parsed = new Date(normalized);
-            if (!Number.isNaN(parsed.getTime())) {
-                return parsed;
-            }
-
-            return null;
-        }
-
-        function sanitizePromoOfferHtml(input) {
-            if (!input || typeof input !== 'string') {
-                return '';
-            }
-
-            const parser = new DOMParser();
-            const doc = parser.parseFromString(`<div>${input}</div>`, 'text/html');
-            const allowedTags = new Set(['B', 'STRONG', 'I', 'EM', 'U', 'BR', 'SPAN', 'CODE', 'A']);
-            const elements = [];
-            const walker = document.createTreeWalker(doc.body, NodeFilter.SHOW_ELEMENT, null);
-            while (walker.nextNode()) {
-                elements.push(walker.currentNode);
-            }
-
-            elements.forEach(node => {
-                const tagName = node.tagName;
-                if (!allowedTags.has(tagName)) {
-                    node.replaceWith(document.createTextNode(node.textContent || ''));
-                    return;
-                }
-
-                if (tagName === 'A') {
-                    const href = node.getAttribute('href') || '';
-                    if (!/^https?:\/\//i.test(href)) {
-                        node.replaceWith(document.createTextNode(node.textContent || ''));
-                        return;
-                    }
-                    node.setAttribute('target', '_blank');
-                    node.setAttribute('rel', 'noopener noreferrer');
-                } else {
-                    Array.from(node.attributes).forEach(attr => node.removeAttribute(attr.name));
-                }
-            });
-
-            return doc.body.innerHTML.replace(/\n/g, '<br>');
-        }
-
-        function sanitizeFaqHtml(input) {
-            if (!input || typeof input !== 'string') {
-                return '';
-            }
-
-            const parser = new DOMParser();
-            const doc = parser.parseFromString(`<div>${input}</div>`, 'text/html');
-            const allowedTags = new Set([
-                'P',
-                'BR',
-                'UL',
-                'OL',
-                'LI',
-                'STRONG',
-                'B',
-                'EM',
-                'I',
-                'U',
-                'A',
-                'CODE',
-                'PRE',
-                'SPAN',
-                'DIV',
-                'H1',
-                'H2',
-                'H3',
-                'H4',
-                'H5',
-                'H6',
-                'BLOCKQUOTE',
-            ]);
-
-            const elements = [];
-            const walker = document.createTreeWalker(doc.body, NodeFilter.SHOW_ELEMENT, null);
-            while (walker.nextNode()) {
-                elements.push(walker.currentNode);
-            }
-
-            elements.forEach(node => {
-                const tagName = node.tagName;
-                if (!allowedTags.has(tagName)) {
-                    const replacementText = node.textContent || '';
-                    node.replaceWith(doc.createTextNode(replacementText));
-                    return;
-                }
-
-                if (tagName === 'A') {
-                    const href = node.getAttribute('href') || '';
-                    if (!/^https?:\/\//i.test(href)) {
-                        node.replaceWith(doc.createTextNode(node.textContent || ''));
-                        return;
-                    }
-                    node.setAttribute('target', '_blank');
-                    node.setAttribute('rel', 'noopener noreferrer');
-                    Array.from(node.attributes).forEach(attr => {
-                        if (!['href', 'target', 'rel'].includes(attr.name)) {
-                            node.removeAttribute(attr.name);
-                        }
-                    });
-                    return;
-                }
-
-                Array.from(node.attributes).forEach(attr => node.removeAttribute(attr.name));
-
-                if (tagName === 'PRE') {
-                    const codeChild = node.querySelector('code');
-                    if (codeChild) {
-                        Array.from(codeChild.attributes).forEach(attr => codeChild.removeAttribute(attr.name));
-                    }
-                }
-            });
-
-            return doc.body.innerHTML.trim();
-        }
-
-        function sanitizeLegalDocumentHtml(input) {
-            if (!input || typeof input !== 'string') {
-                return '';
-            }
-
-            const parser = new DOMParser();
-            const doc = parser.parseFromString(`<div>${input}</div>`, 'text/html');
-            const allowedTags = new Set([
-                'P',
-                'BR',
-                'UL',
-                'OL',
-                'LI',
-                'STRONG',
-                'B',
-                'EM',
-                'I',
-                'U',
-                'A',
-                'CODE',
-                'PRE',
-                'SPAN',
-                'DIV',
-                'H1',
-                'H2',
-                'H3',
-                'H4',
-                'H5',
-                'H6',
-                'BLOCKQUOTE',
-                'TABLE',
-                'THEAD',
-                'TBODY',
-                'TFOOT',
-                'TR',
-                'TD',
-                'TH',
-                'COLGROUP',
-                'COL',
-                'HR',
-                'DL',
-                'DT',
-                'DD',
-                'SUP',
-                'SUB',
-            ]);
-
-            const elements = [];
-            const walker = document.createTreeWalker(doc.body, NodeFilter.SHOW_ELEMENT, null);
-            while (walker.nextNode()) {
-                elements.push(walker.currentNode);
-            }
-
-            elements.forEach(node => {
-                const tagName = node.tagName;
-                if (!allowedTags.has(tagName)) {
-                    const replacementText = node.textContent || '';
-                    node.replaceWith(doc.createTextNode(replacementText));
-                    return;
-                }
-
-                if (tagName === 'A') {
-                    const href = (node.getAttribute('href') || '').trim();
-                    const isHttpLink = /^https?:\/\//i.test(href);
-                    const isMailto = href.toLowerCase().startsWith('mailto:');
-                    if (!isHttpLink && !isMailto) {
-                        node.replaceWith(doc.createTextNode(node.textContent || ''));
-                        return;
-                    }
-                    node.setAttribute('target', '_blank');
-                    node.setAttribute('rel', 'noopener noreferrer');
-                    Array.from(node.attributes).forEach(attr => {
-                        const name = attr.name.toLowerCase();
-                        if (!['href', 'target', 'rel'].includes(name)) {
-                            node.removeAttribute(attr.name);
-                        }
-                    });
-                    return;
-                }
-
-                if (tagName === 'TD' || tagName === 'TH') {
-                    Array.from(node.attributes).forEach(attr => {
-                        const name = attr.name.toLowerCase();
-                        if (!['colspan', 'rowspan', 'scope'].includes(name)) {
-                            node.removeAttribute(attr.name);
-                        }
-                    });
-                    return;
-                }
-
-                Array.from(node.attributes).forEach(attr => node.removeAttribute(attr.name));
-            });
-
-            return doc.body.innerHTML.trim();
-        }
-
-        function formatShortDuration(seconds) {
-            if (!Number.isFinite(seconds) || seconds <= 0) {
-                return t('time.less_than_minute');
-            }
-
-            if (seconds < 60) {
-                return t('time.less_than_minute');
-            }
-
-            const totalMinutes = Math.round(seconds / 60);
-            const days = Math.floor(totalMinutes / (60 * 24));
-            const hours = Math.floor((totalMinutes % (60 * 24)) / 60);
-            const minutes = totalMinutes % 60;
-
-            const parts = [];
-            if (days) {
-                parts.push(t('time.days_short').replace('{value}', days));
-            }
-            if (hours) {
-                parts.push(t('time.hours_short').replace('{value}', hours));
-            }
-            if (minutes || !parts.length) {
-                parts.push(t('time.minutes_short').replace('{value}', minutes || 1));
-            }
-
-            return parts.join(' ');
-        }
-
-        function registerPromoOfferTimers(timers) {
-            promoOfferTimers = timers.filter(timer => timer && timer.expiresAt instanceof Date && !Number.isNaN(timer.expiresAt.getTime()));
-            if (promoOfferTimerHandle) {
-                clearInterval(promoOfferTimerHandle);
-                promoOfferTimerHandle = null;
-            }
-
-            if (!promoOfferTimers.length) {
-                return;
-            }
-
-            const tick = () => {
-                const now = new Date();
-                promoOfferTimers = promoOfferTimers.filter(timer => {
-                    const diffSeconds = Math.floor((timer.expiresAt.getTime() - now.getTime()) / 1000);
-                    if (!Number.isFinite(diffSeconds) || diffSeconds <= 0) {
-                        timer.element.textContent = t('promo_offer.timer.expired');
-                        if (timer.progressElement) {
-                            timer.progressElement.style.width = '0%';
-                        }
-                        if (typeof timer.onExpire === 'function') {
-                            try {
-                                timer.onExpire();
-                            } catch (error) {
-                                console.warn('Failed to handle promo offer timer expire:', error);
-                            }
-                        }
-                        return false;
-                    }
-
-                    const formatted = formatShortDuration(diffSeconds);
-                    const templateKey = timer.labelKey || 'promo_offer.timer.pending';
-                    const template = t(templateKey);
-                    timer.element.textContent = template.includes('{time}')
-                        ? template.replace('{time}', formatted)
-                        : `${template} ${formatted}`;
-
-                    if (timer.progressElement && Number.isFinite(timer.totalSeconds) && timer.totalSeconds > 0) {
-                        const ratio = Math.max(0, Math.min(1, diffSeconds / timer.totalSeconds));
-                        timer.progressElement.style.width = `${ratio * 100}%`;
-                    }
-
-                    return true;
-                });
-
-                if (!promoOfferTimers.length && promoOfferTimerHandle) {
-                    clearInterval(promoOfferTimerHandle);
-                    promoOfferTimerHandle = null;
-                }
-            };
-
-            tick();
-            promoOfferTimerHandle = window.setInterval(tick, 1000);
-        }
-
-        function buildPromoOfferCard(offer, options = {}) {
-            if (!offer) {
-                return null;
-            }
-
-            const isActive = Boolean(options.isActive || String(offer.status || '').toLowerCase() === 'active');
-            const timers = options.timers || [];
-
-            const card = document.createElement('div');
-            card.className = `promo-offer-card ${isActive ? 'active' : 'pending'}`;
-
-            const header = document.createElement('div');
-            header.className = 'promo-offer-header';
-
-            const icon = document.createElement('div');
-            icon.className = 'promo-offer-icon';
-            icon.textContent = resolvePromoOfferIcon(offer);
-            header.appendChild(icon);
-
-            const heading = document.createElement('div');
-            heading.className = 'promo-offer-heading';
-
-            const title = document.createElement('div');
-            title.className = 'promo-offer-title';
-            title.textContent = resolvePromoOfferTitle(offer);
-            heading.appendChild(title);
-
-            const subtitle = document.createElement('div');
-            subtitle.className = 'promo-offer-subtitle';
-            const statusKey = isActive ? 'promo_offer.status.active' : 'promo_offer.status.pending';
-            const statusLabel = t(statusKey);
-            subtitle.textContent = statusLabel === statusKey ? (isActive ? 'Active offer' : 'Special offer') : statusLabel;
-            heading.appendChild(subtitle);
-
-            header.appendChild(heading);
-
-            const badgeText = (() => {
-                const discountValue = Number(offer.discount_percent || 0);
-                if (Number.isFinite(discountValue) && discountValue > 0) {
-                    return `-${Math.round(discountValue)}%`;
-                }
-                if (offer.bonus_amount_label) {
-                    return offer.bonus_amount_label;
-                }
-                if (String(offer.effect_type || '').toLowerCase() === 'test_access') {
-                    const label = t('promo_offer.type.test_access');
-                    return label === 'promo_offer.type.test_access' ? 'Test access' : label;
-                }
-                return null;
-            })();
-
-            if (badgeText) {
-                const badge = document.createElement('div');
-                badge.className = 'promo-offer-badge';
-                badge.textContent = badgeText;
-                header.appendChild(badge);
-            }
-
-            card.appendChild(header);
-
-            if (offer.message_text) {
-                const message = document.createElement('div');
-                message.className = 'promo-offer-message';
-                message.innerHTML = sanitizePromoOfferHtml(offer.message_text);
-                card.appendChild(message);
-            }
-
-            const details = document.createElement('div');
-            details.className = 'promo-offer-details';
-
-            if (offer.bonus_amount_label && offer.bonus_amount_label !== badgeText) {
-                const chip = document.createElement('span');
-                chip.className = 'promo-offer-chip';
-                chip.textContent = offer.bonus_amount_label;
-                details.appendChild(chip);
-            }
-
-            if (Array.isArray(offer.test_squads)) {
-                offer.test_squads.slice(0, 3).forEach(server => {
-                    if (!server) {
-                        return;
-                    }
-                    const chip = document.createElement('span');
-                    chip.className = 'promo-offer-chip';
-                    chip.textContent = server.name || server.uuid || '';
-                    details.appendChild(chip);
-                });
-            }
-
-            if (details.children.length) {
-                card.appendChild(details);
-            }
-
-            const expiresAt = parseDate(isActive ? offer.active_discount_expires_at : offer.expires_at);
-            const startedAt = isActive ? parseDate(offer.active_discount_started_at) : null;
-            let totalSeconds = Number(offer.active_discount_duration_seconds);
-            if (!Number.isFinite(totalSeconds) || totalSeconds <= 0) {
-                totalSeconds = null;
-            }
-            if ((totalSeconds === null || totalSeconds <= 0) && expiresAt && startedAt) {
-                totalSeconds = Math.max(0, Math.floor((expiresAt.getTime() - startedAt.getTime()) / 1000));
-            }
-
-            let progressElement = null;
-            if (isActive && expiresAt) {
-                const progress = document.createElement('div');
-                progress.className = 'promo-offer-progress';
-                const bar = document.createElement('div');
-                bar.className = 'promo-offer-progress-bar';
-                progress.appendChild(bar);
-                progressElement = bar;
-                card.appendChild(progress);
-            }
-
-            const footer = document.createElement('div');
-            footer.className = 'promo-offer-footer';
-
-            const timerLabel = document.createElement('div');
-            timerLabel.className = 'promo-offer-timer';
-            footer.appendChild(timerLabel);
-
-            let button = null;
-            if (!isActive && offer.id) {
-                const action = document.createElement('div');
-                action.className = 'promo-offer-action';
-                button = document.createElement('button');
-                button.className = 'promo-offer-btn';
-                button.type = 'button';
-                button.textContent = t('promo_offer.accept');
-                button.addEventListener('click', () => handlePromoOfferAccept(offer.id, button));
-                action.appendChild(button);
-                footer.appendChild(action);
-            }
-
-            if (expiresAt) {
-                const diffSeconds = Math.floor((expiresAt.getTime() - Date.now()) / 1000);
-                if (diffSeconds > 0) {
-                    const templateKey = isActive ? 'promo_offer.timer.active' : 'promo_offer.timer.pending';
-                    const template = t(templateKey);
-                    const durationText = formatShortDuration(diffSeconds);
-                    timerLabel.textContent = template.includes('{time}')
-                        ? template.replace('{time}', durationText)
-                        : `${template} ${durationText}`;
-                } else {
-                    timerLabel.textContent = t('promo_offer.timer.expired');
-                }
-
-                timers.push({
-                    element: timerLabel,
-                    expiresAt,
-                    labelKey: isActive ? 'promo_offer.timer.active' : 'promo_offer.timer.pending',
-                    progressElement,
-                    totalSeconds,
-                    onExpire: () => {
-                        if (button) {
-                            button.disabled = true;
-                            button.textContent = t('promo_offer.timer.expired');
-                        }
-                        card.classList.add('expired');
-                    },
-                });
-            } else {
-                timerLabel.textContent = '';
-            }
-
-            if (footer.children.length) {
-                card.appendChild(footer);
-            }
-
-            return card;
-        }
-
-        function renderPromoOffers() {
-            const container = document.getElementById('promoOffersContainer');
-            if (!container) {
-                return;
-            }
-
-            const offers = Array.isArray(userData?.promo_offers) ? userData.promo_offers : [];
-
-            container.innerHTML = '';
-            const timers = [];
-            let hasContent = false;
-
-            offers.forEach(offer => {
-                const isActive = String(offer?.status || '').toLowerCase() === 'active';
-                const card = buildPromoOfferCard(offer, { isActive, timers });
-                if (card) {
-                    container.appendChild(card);
-                    hasContent = true;
-                }
-            });
-
-            container.classList.toggle('hidden', !hasContent);
-            registerPromoOfferTimers(hasContent ? timers : []);
-        }
-
-        async function handlePromoOfferAccept(offerId, button) {
-            if (!offerId) {
-                return;
-            }
-
-            const initData = tg.initData || '';
-            if (!initData) {
-                return;
-            }
-
-            const originalText = button?.textContent;
-            if (button) {
-                button.disabled = true;
-                button.textContent = t('promo_offer.accepting');
-            }
-
-            try {
-                const response = await fetch(`/miniapp/promo-offers/${offerId}/claim`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ initData }),
-                });
-
-                const payload = await response.json().catch(() => ({}));
-
-                if (!response.ok) {
-                    const code = payload?.detail?.code || payload?.code;
-                    const messageKey = code ? `promo_offer.error.${code}` : 'promo_offer.error.generic';
-                    const translated = t(messageKey);
-                    const message = translated === messageKey
-                        ? (payload?.detail?.message || t('promo_offer.error.generic'))
-                        : translated;
-                    showPopup(message);
-                    if (button) {
-                        button.disabled = false;
-                        button.textContent = originalText || t('promo_offer.accept');
-                    }
-                    return;
-                }
-
-                const successKey = payload?.code === 'test_access_claimed'
-                    ? 'promo_offer.accept.success'
-                    : 'promo_offer.accept.success';
-                const successMessage = t(successKey);
-                showPopup(successMessage === successKey ? 'Offer activated successfully!' : successMessage);
-
-                await refreshSubscriptionData({ silent: true });
-            } catch (error) {
-                console.error('Failed to activate promo offer:', error);
-                const message = t('promo_offer.error.generic');
-                showPopup(message === 'promo_offer.error.generic' ? 'Failed to activate the offer. Please try again.' : message);
-                if (button) {
-                    button.disabled = false;
-                    button.textContent = originalText || t('promo_offer.accept');
-                }
-                return;
-            }
-        }
-
-        function setPromoCodeFeedback(type, message) {
-            const feedback = document.getElementById('promoCodeFeedback');
-            if (!feedback) {
-                return;
-            }
-
-            feedback.classList.remove('error', 'success');
-
-            if (!message) {
-                feedback.textContent = '';
-                feedback.classList.add('hidden');
-                return;
-            }
-
-            if (type === 'error') {
-                feedback.classList.add('error');
-            } else if (type === 'success') {
-                feedback.classList.add('success');
-            }
-
-            feedback.textContent = message;
-            feedback.classList.remove('hidden');
-        }
-
-        function clearPromoCodeResult() {
-            const container = document.getElementById('promoCodeResult');
-            const list = document.getElementById('promoCodeResultList');
-            if (container) {
-                container.classList.add('hidden');
-            }
-            if (list) {
-                list.innerHTML = '';
-            }
-        }
-
-        function renderPromoCodeResult(rewards = [], fallbackEntries = []) {
-            const container = document.getElementById('promoCodeResult');
-            const list = document.getElementById('promoCodeResultList');
-            if (!container || !list) {
-                return;
-            }
-
-            list.innerHTML = '';
-
-            const entries = [];
-            if (Array.isArray(rewards)) {
-                rewards.filter(item => item && item.text).forEach(item => {
-                    entries.push({
-                        icon: item.icon || '🎉',
-                        text: item.text,
-                    });
-                });
-            }
-
-            if (Array.isArray(fallbackEntries)) {
-                fallbackEntries.filter(item => item && item.text).forEach(item => {
-                    if (!entries.some(entry => entry.text === item.text)) {
-                        entries.push({
-                            icon: item.icon || '🎉',
-                            text: item.text,
-                        });
-                    }
-                });
-            }
-
-            if (!entries.length) {
-                container.classList.add('hidden');
-                return;
-            }
-
-            entries.forEach(entry => {
-                const listItem = document.createElement('li');
-                listItem.className = 'promo-code-result-item';
-
-                const icon = document.createElement('span');
-                icon.className = 'promo-code-result-icon';
-                icon.textContent = entry.icon || '🎉';
-
-                const text = document.createElement('span');
-                text.textContent = entry.text;
-
-                listItem.appendChild(icon);
-                listItem.appendChild(text);
-                list.appendChild(listItem);
-            });
-
-            container.classList.remove('hidden');
-        }
-
-        async function handlePromoCodeSubmit(event) {
-            event.preventDefault();
-
-            const input = document.getElementById('promoCodeInput');
-            const button = document.getElementById('promoCodeSubmit');
-
-            clearPromoCodeResult();
-            setPromoCodeFeedback(null, null);
-
-            const rawCode = (input?.value || '').trim();
-            if (!rawCode) {
-                setPromoCodeFeedback('error', t('promo_code.error.empty'));
-                input?.focus();
-                return;
-            }
-
-            const normalizedCode = rawCode.toUpperCase();
-            if (input) {
-                input.value = normalizedCode;
-            }
-
-            const initData = tg.initData || '';
-            if (!initData) {
-                setPromoCodeFeedback('error', t('promo_code.error.unauthorized'));
-                return;
-            }
-
-            if (button) {
-                button.disabled = true;
-                button.textContent = t('promo_code.button.loading');
-            }
-
-            try {
-                const response = await fetch('/miniapp/promo-codes/activate', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ initData, code: normalizedCode }),
-                });
-
-                const payload = await response.json().catch(() => ({}));
-
-                if (!response.ok) {
-                    const code = payload?.detail?.code || payload?.code;
-                    const messageKey = code ? `promo_code.error.${code}` : 'promo_code.error.generic';
-                    const translated = t(messageKey);
-                    const message = translated === messageKey
-                        ? (payload?.detail?.message || t('promo_code.error.generic'))
-                        : translated;
-                    setPromoCodeFeedback('error', message);
-                    return;
-                }
-
-                const promocode = payload?.promocode || {};
-                const rewards = [];
-                const fallback = [];
-
-                const balanceKopeks = Number.parseInt(promocode?.balance_bonus_kopeks, 10);
-                if (!Number.isNaN(balanceKopeks) && balanceKopeks > 0) {
-                    const currency = (userData?.balance_currency || 'RUB').toUpperCase();
-                    const amount = formatCurrency(balanceKopeks / 100, currency);
-                    const template = t('promo_code.result.balance');
-                    rewards.push({
-                        icon: '💰',
-                        text: template.replace('{amount}', amount),
-                    });
-                }
-
-                const subscriptionDays = Number.parseInt(promocode?.subscription_days, 10);
-                if (!Number.isNaN(subscriptionDays) && subscriptionDays > 0) {
-                    const type = String(promocode?.type || '').toLowerCase();
-                    const key = type === 'trial_subscription'
-                        ? 'promo_code.result.trial'
-                        : 'promo_code.result.subscription_days';
-                    const template = t(key);
-                    rewards.push({
-                        icon: type === 'trial_subscription' ? '🎁' : '⏰',
-                        text: template.replace('{days}', subscriptionDays),
-                    });
-                }
-
-                if (typeof payload?.description === 'string' && payload.description.trim()) {
-                    const lines = payload.description.split(/\n+/).map(line => line.trim()).filter(Boolean);
-                    lines.forEach(line => {
-                        fallback.push({ icon: '🎉', text: line });
-                    });
-                }
-
-                renderPromoCodeResult(rewards, fallback);
-                setPromoCodeFeedback('success', t('promo_code.success.default'));
-
-                if (input) {
-                    input.value = '';
-                }
-
-                try {
-                    await refreshSubscriptionData({ silent: true });
-                } catch (refreshError) {
-                    console.warn('Failed to refresh subscription after promo code activation:', refreshError);
-                }
-            } catch (error) {
-                console.error('Failed to activate promo code:', error);
-                setPromoCodeFeedback('error', t('promo_code.error.network'));
-            } finally {
-                if (button) {
-                    button.disabled = false;
-                    button.textContent = t('promo_code.button.default');
-                }
-            }
-        }
-
-        function initializePromoCodeForm() {
-            const form = document.getElementById('promoCodeForm');
-            if (!form) {
-                return;
-            }
-
-            form.addEventListener('submit', handlePromoCodeSubmit);
-
-            const input = document.getElementById('promoCodeInput');
-            if (input) {
-                input.addEventListener('input', () => {
-                    setPromoCodeFeedback(null, null);
-                    clearPromoCodeResult();
-                });
-            }
-        }
-
-        // Promo code functions for profile tab
-        function setPromoCodeFeedbackProfile(type, message) {
-            const feedback = document.getElementById('promoCodeFeedbackProfile');
-            if (!feedback) {
-                return;
-            }
-
-            feedback.classList.remove('error', 'success');
-
-            if (!message) {
-                feedback.textContent = '';
-                feedback.classList.add('hidden');
-                return;
-            }
-
-            if (type === 'error') {
-                feedback.classList.add('error');
-            } else if (type === 'success') {
-                feedback.classList.add('success');
-            }
-
-            feedback.textContent = message;
-            feedback.classList.remove('hidden');
-        }
-
-        function clearPromoCodeResultProfile() {
-            const container = document.getElementById('promoCodeResultProfile');
-            const list = document.getElementById('promoCodeResultListProfile');
-            if (container) {
-                container.classList.add('hidden');
-            }
-            if (list) {
-                list.innerHTML = '';
-            }
-        }
-
-        function renderPromoCodeResultProfile(rewards = [], fallbackEntries = []) {
-            const container = document.getElementById('promoCodeResultProfile');
-            const list = document.getElementById('promoCodeResultListProfile');
-            if (!container || !list) {
-                return;
-            }
-
-            list.innerHTML = '';
-
-            const entries = [];
-            if (Array.isArray(rewards)) {
-                rewards.filter(item => item && item.text).forEach(item => {
-                    entries.push({
-                        icon: item.icon || '🎉',
-                        text: item.text,
-                    });
-                });
-            }
-
-            if (Array.isArray(fallbackEntries)) {
-                fallbackEntries.filter(item => item && item.text).forEach(item => {
-                    entries.push({
-                        icon: item.icon || '🎉',
-                        text: item.text,
-                    });
-                });
-            }
-
-            if (entries.length === 0) {
-                container.classList.add('hidden');
-                return;
-            }
-
-            entries.forEach(entry => {
-                const li = document.createElement('li');
-                li.className = 'promo-code-result-item';
-                li.innerHTML = `<span class="promo-code-result-icon">${entry.icon}</span><span class="promo-code-result-text">${entry.text}</span>`;
-                list.appendChild(li);
-            });
-
-            container.classList.remove('hidden');
-        }
-
-        async function handlePromoCodeSubmitProfile(event) {
-            event.preventDefault();
-
-            const input = document.getElementById('promoCodeInputProfile');
-            const button = document.getElementById('promoCodeSubmitProfile');
-
-            clearPromoCodeResultProfile();
-            setPromoCodeFeedbackProfile(null, null);
-
-            const rawCode = (input?.value || '').trim();
-            if (!rawCode) {
-                setPromoCodeFeedbackProfile('error', t('promo_code.error.empty'));
-                input?.focus();
-                return;
-            }
-
-            const normalizedCode = rawCode.toUpperCase();
-            if (input) {
-                input.value = normalizedCode;
-            }
-
-            const initData = tg.initData || '';
-            if (!initData) {
-                setPromoCodeFeedbackProfile('error', t('promo_code.error.unauthorized'));
-                return;
-            }
-
-            if (button) {
-                button.disabled = true;
-                button.textContent = t('promo_code.button.loading');
-            }
-
-            try {
-                const response = await fetch('/miniapp/promo-codes/activate', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ initData, code: normalizedCode }),
-                });
-
-                const payload = await response.json().catch(() => ({}));
-
-                if (!response.ok) {
-                    const code = payload?.detail?.code || payload?.code;
-                    const messageKey = code ? `promo_code.error.${code}` : 'promo_code.error.generic';
-                    const translated = t(messageKey);
-                    const message = translated === messageKey
-                        ? (payload?.detail?.message || t('promo_code.error.generic'))
-                        : translated;
-                    setPromoCodeFeedbackProfile('error', message);
-                    return;
-                }
-
-                const promocode = payload?.promocode || {};
-                const rewards = [];
-                const fallback = [];
-
-                const balanceKopeks = Number.parseInt(promocode?.balance_bonus_kopeks, 10);
-                if (!Number.isNaN(balanceKopeks) && balanceKopeks > 0) {
-                    const currency = (userData?.balance_currency || 'RUB').toUpperCase();
-                    const amount = formatCurrency(balanceKopeks / 100, currency);
-                    const template = t('promo_code.result.balance');
-                    rewards.push({
-                        icon: '💰',
-                        text: template.replace('{amount}', amount),
-                    });
-                }
-
-                const subscriptionDays = Number.parseInt(promocode?.subscription_days, 10);
-                if (!Number.isNaN(subscriptionDays) && subscriptionDays > 0) {
-                    const type = String(promocode?.subscription_type || '').toLowerCase();
-                    const key = type === 'trial_subscription'
-                        ? 'promo_code.result.trial'
-                        : 'promo_code.result.subscription_days';
-                    const template = t(key);
-                    rewards.push({
-                        icon: type === 'trial_subscription' ? '🎁' : '⏰',
-                        text: template.replace('{days}', subscriptionDays),
-                    });
-                }
-
-                if (typeof payload?.description === 'string' && payload.description.trim()) {
-                    const lines = payload.description.split(/\n+/).map(line => line.trim()).filter(Boolean);
-                    lines.forEach(line => {
-                        fallback.push({ icon: '🎉', text: line });
-                    });
-                }
-
-                renderPromoCodeResultProfile(rewards, fallback);
-                setPromoCodeFeedbackProfile('success', t('promo_code.success.default'));
-
-                if (input) {
-                    input.value = '';
-                }
-
-                try {
-                    await refreshSubscriptionData({ silent: true });
-                } catch (refreshError) {
-                    console.warn('Failed to refresh subscription after promo code activation:', refreshError);
-                }
-            } catch (error) {
-                console.error('Failed to activate promo code:', error);
-                setPromoCodeFeedbackProfile('error', t('promo_code.error.network'));
-            } finally {
-                if (button) {
-                    button.disabled = false;
-                    button.textContent = t('promo_code.action.apply');
-                }
-            }
-        }
-
-        function initializePromoCodeFormProfile() {
-            const form = document.getElementById('promoCodeFormProfile');
-            if (!form) {
-                return;
-            }
-
-            form.addEventListener('submit', handlePromoCodeSubmitProfile);
-
-            const input = document.getElementById('promoCodeInputProfile');
-            if (input) {
-                input.addEventListener('input', () => {
-                    setPromoCodeFeedbackProfile(null, null);
-                    clearPromoCodeResultProfile();
-                });
-            }
-        }
-
-        function detectPlatform() {
-            const userAgent = navigator.userAgent.toLowerCase();
-            const platformInfo = (navigator.platform || '').toLowerCase();
-            detectedPlatformFilter = null;
-
-            if (userAgent.includes('iphone') || userAgent.includes('ipad')) {
-                detectedDevicePlatform = 'ios';
-            } else if (userAgent.includes('android')) {
-                detectedDevicePlatform = 'android';
-            } else {
-                detectedDevicePlatform = 'pc';
-
-                if (platformInfo.includes('mac') || userAgent.includes('mac os x') || userAgent.includes('macintosh')) {
-                    detectedPlatformFilter = 'macos';
-                } else if (platformInfo.includes('win') || userAgent.includes('windows')) {
-                    detectedPlatformFilter = 'windows';
-                } else if (platformInfo.includes('linux') || userAgent.includes('linux') || userAgent.includes('x11')) {
-                    detectedPlatformFilter = 'linux';
-                }
-            }
-
-            currentPlatform = detectedDevicePlatform;
-            currentPlatformFilter = detectedDevicePlatform === 'pc'
-                ? (detectedPlatformFilter || PLATFORM_FILTER_ALL)
-                : PLATFORM_FILTER_ALL;
-        }
-
-        function setActivePlatformButton() {
-            document.querySelectorAll('.platform-btn').forEach(btn => {
-                btn.classList.toggle('active', btn.dataset.platform === currentPlatform);
-            });
-        }
-
-        function getPlatformLabel(platformKey) {
-            const labelKey = PLATFORM_LABEL_KEYS[platformKey];
-            if (!labelKey) {
-                return null;
-            }
-            const label = t(labelKey);
-            return label === labelKey ? platformKey : label;
-        }
-
-        function getAvailableGroupedPlatforms(platformKey) {
-            const group = PLATFORM_GROUPS[platformKey];
-            if (!Array.isArray(group) || !group.length) {
-                return [];
-            }
-
-            return group.filter(key => Array.isArray(appsConfig?.[key]) && appsConfig[key].length > 0);
-        }
-
-        function ensurePlatformFilter() {
-            const group = PLATFORM_GROUPS[currentPlatform];
-            if (!Array.isArray(group) || !group.length) {
-                currentPlatformFilter = PLATFORM_FILTER_ALL;
-                return;
-            }
-
-            const available = getAvailableGroupedPlatforms(currentPlatform);
-            if (!available.length) {
-                if (currentPlatformFilter !== PLATFORM_FILTER_ALL && !group.includes(currentPlatformFilter)) {
-                    currentPlatformFilter = PLATFORM_FILTER_ALL;
-                }
-                return;
-            }
-
-            if (currentPlatformFilter === PLATFORM_FILTER_ALL) {
-                return;
-            }
-
-            if (available.includes(currentPlatformFilter)) {
-                return;
-            }
-
-            if (
-                currentPlatform === detectedDevicePlatform
-                && detectedPlatformFilter
-                && available.includes(detectedPlatformFilter)
-            ) {
-                currentPlatformFilter = detectedPlatformFilter;
-                return;
-            }
-
-            currentPlatformFilter = PLATFORM_FILTER_ALL;
-        }
-
-        function renderPlatformFilters() {
-            const container = document.getElementById('platformFilterContainer');
-            if (!container) {
-                return;
-            }
-
-            const group = PLATFORM_GROUPS[currentPlatform];
-            if (!Array.isArray(group) || !group.length) {
-                container.innerHTML = '';
-                container.classList.add('hidden');
-                return;
-            }
-
-            ensurePlatformFilter();
-
-            const available = getAvailableGroupedPlatforms(currentPlatform);
-            if (!available.length) {
-                container.innerHTML = '';
-                container.classList.add('hidden');
-                return;
-            }
-
-            const options = available;
-
-            if (options.length <= 1) {
-                container.innerHTML = '';
-                container.classList.add('hidden');
-                return;
-            }
-
-            const showAllButton = options.length > 1;
-            const allLabelRaw = t('platform.all');
-            const allLabel = allLabelRaw === 'platform.all' ? 'All' : allLabelRaw;
-
-            const buttons = [];
-
-            if (showAllButton) {
-                const isActive = currentPlatformFilter === PLATFORM_FILTER_ALL;
-                buttons.push(`<button type="button" class="platform-filter-btn${isActive ? ' active' : ''}" data-filter="${escapeHtml(PLATFORM_FILTER_ALL)}">${escapeHtml(allLabel)}</button>`);
-            }
-
-            options.forEach(key => {
-                const label = getPlatformLabel(key) || key;
-                const isActive = currentPlatformFilter === key;
-                buttons.push(`<button type="button" class="platform-filter-btn${isActive ? ' active' : ''}" data-filter="${escapeHtml(key)}">${escapeHtml(label)}</button>`);
-            });
-
-            container.innerHTML = buttons.join('');
-            container.classList.remove('hidden');
-
-            container.querySelectorAll('.platform-filter-btn').forEach(button => {
-                button.addEventListener('click', () => {
-                    const filter = button.dataset.filter || PLATFORM_FILTER_ALL;
-                    if (filter === currentPlatformFilter) {
-                        return;
-                    }
-
-                    currentPlatformFilter = filter;
-                    ensurePlatformFilter();
-                    renderApps();
-                });
-            });
-        }
-
-        function getAppsForCurrentPlatform() {
-            ensurePlatformFilter();
-
-            const aggregated = [];
-            const group = PLATFORM_GROUPS[currentPlatform];
-
-            let keysToUse;
-            if (Array.isArray(group) && group.length) {
-                const available = getAvailableGroupedPlatforms(currentPlatform);
-                const fallback = available.length ? available : group;
-
-                if (
-                    currentPlatformFilter !== PLATFORM_FILTER_ALL
-                    && fallback.includes(currentPlatformFilter)
-                ) {
-                    keysToUse = [currentPlatformFilter];
-                } else {
-                    keysToUse = fallback;
-                }
-            } else {
-                keysToUse = [currentPlatform];
-            }
-
-            keysToUse.forEach(key => {
-                const apps = Array.isArray(appsConfig?.[key]) ? appsConfig[key] : [];
-                apps.forEach(app => {
-                    // Filter out Hiddify apps
-                    const appName = (app.name || '').toLowerCase();
-                    const appId = (app.id || '').toLowerCase();
-                    if (appName.includes('hiddify') || appId.includes('hiddify')) {
-                        return;
-                    }
-                    aggregated.push({ ...app, __platformKey: key });
-                });
-            });
-
-            return aggregated;
-        }
-
-        function resolveConnectButtonLabel() {
-            const connectLabelRaw = t('button.connect.default');
-            return connectLabelRaw === 'button.connect.default'
-                ? 'Connect to VPN'
-                : connectLabelRaw;
-        }
-
-        function renderConnectActionButton(appId = '') {
-            const label = escapeHtml(resolveConnectButtonLabel());
-            const normalizedId = typeof appId === 'string' ? appId.trim() : '';
-            const appAttribute = normalizedId
-                ? ` data-app-id="${escapeHtml(normalizedId)}"`
-                : '';
-
-            return `
-                <div class="step-final-action">
-                    <button class="step-final-button" type="button"${appAttribute}>
-                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
-                        </svg>
-                        <span>${label}</span>
-                    </button>
-                </div>
-            `;
-        }
-
-        function attachInstructionConnectHandlers(scope, apps = null) {
-            if (!scope || typeof scope.querySelectorAll !== 'function') {
-                return;
-            }
-
-            const appList = Array.isArray(apps) ? apps : getAppsForCurrentPlatform();
-            scope.querySelectorAll('.step-final-button').forEach(button => {
-                button.addEventListener('click', () => {
-                    const appId = button.getAttribute('data-app-id') || null;
-                    const link = getConnectLink(appId, { apps: appList });
-                    if (!link) {
-                        return;
-                    }
-                    closeInstallationModal();
-                    openExternalLink(link);
-                });
-            });
-        }
-
-        function renderApps() {
-            const container = document.getElementById('appsContainer');
-            if (!container) {
-                return;
-            }
-
-            renderPlatformFilters();
-
-            const apps = getAppsForCurrentPlatform();
-            const hasConnectLink = hasAnyConnectLink(apps);
-
-            if (!apps.length) {
-                const noDataMessage = `<div class="step-description">${escapeHtml(t('apps.no_data'))}</div>`;
-                const fallbackButton = hasConnectLink ? renderConnectActionButton() : '';
-                container.innerHTML = `${noDataMessage}${fallbackButton}`;
-                attachInstructionConnectHandlers(container, apps);
-                updateInstructionConnectButtons(hasConnectLink);
-                return;
-            }
-
-            container.innerHTML = apps.map(app => {
-                const iconChar = (app.name?.[0] || 'A').toUpperCase();
-                const appName = escapeHtml(app.name || 'App');
-                const featuredBadge = app.isFeatured
-                    ? `<span class="featured-badge">${escapeHtml(t('apps.featured'))}</span>`
-                    : '';
-                const platformLabel = app.__platformKey ? getPlatformLabel(app.__platformKey) : null;
-                const platformBadge = platformLabel
-                    ? `<span class="app-platform">${escapeHtml(platformLabel)}</span>`
-                    : '';
-                const badges = [featuredBadge, platformBadge].filter(Boolean).join('');
-                const metaSection = badges ? `<div class="app-meta">${badges}</div>` : '';
-                return `
-                    <div class="app-card ${app.isFeatured ? 'featured' : ''}">
-                        <div class="app-header">
-                            <div class="app-icon">${escapeHtml(iconChar)}</div>
-                            <div class="app-info">
-                                <div class="app-name">${appName}</div>
-                                ${metaSection}
-                            </div>
-                        </div>
-                        <div class="app-steps">
-                            ${renderAppSteps(app)}
-                        </div>
-                    </div>
-                `;
-            }).join('');
-
-            attachInstructionConnectHandlers(container, apps);
-
-            updateInstructionConnectButtons(hasConnectLink);
-        }
-
-        function renderInstructionStep(step, options = {}) {
-            const normalizedStep = step && typeof step === 'object' ? step : {};
-
-            const {
-                number = null,
-                defaultTitleKey = '',
-                defaultTitle = '',
-                extraContent = null,
-            } = options;
-
-            let title = '';
-            let explicitTitle = '';
-            if (Object.prototype.hasOwnProperty.call(normalizedStep, 'title')) {
-                title = getLocalizedText(normalizedStep.title);
-                explicitTitle = title;
-            }
-
-            if (!title) {
-                if (defaultTitleKey) {
-                    const translated = t(defaultTitleKey);
-                    title = translated && translated !== defaultTitleKey
-                        ? translated
-                        : (defaultTitle || '');
-                } else {
-                    title = defaultTitle || '';
-                }
-            }
-
-            const description = Object.prototype.hasOwnProperty.call(normalizedStep, 'description')
-                ? getLocalizedText(normalizedStep.description)
-                : '';
-
-            const buttons = Array.isArray(normalizedStep.buttons)
-                ? normalizedStep.buttons.filter(btn => btn && btn.buttonLink)
-                : [];
-
-            const buttonsHtml = buttons.length
-                ? `
-                        <div class="step-buttons">
-                            ${buttons.map(btn => {
-                                const buttonTextRaw = getLocalizedText(btn.buttonText);
-                                const fallbackButtonLabel = t('apps.button.open_link');
-                                const resolvedLabel = buttonTextRaw
-                                    || (fallbackButtonLabel && fallbackButtonLabel !== 'apps.button.open_link'
-                                        ? fallbackButtonLabel
-                                        : 'Open link');
-                                const buttonText = escapeHtml(resolvedLabel);
-                                const buttonHref = escapeHtml(btn.buttonLink);
-                                return `<a href="${buttonHref}" class="step-btn" target="_blank" rel="noopener">${buttonText}</a>`;
-                            }).join('')}
-                        </div>
-                    `
-                : '';
-
-            const extraContentHtmlRaw = typeof extraContent === 'function'
-                ? extraContent({
-                    step: normalizedStep,
-                    number,
-                    title,
-                    description,
-                    buttonsHtml,
-                })
-                : extraContent;
-            const extraContentHtml = extraContentHtmlRaw ? String(extraContentHtmlRaw) : '';
-
-            const hasExplicitTitle = Boolean(explicitTitle);
-            const hasContent = Boolean(
-                description
-                || buttonsHtml.trim().length
-                || hasExplicitTitle
-                || extraContentHtml.trim().length
-            );
-            if (!hasContent) {
-                return '';
-            }
-
-            const titleHtml = title ? `<div class="step-title">${escapeHtml(title)}</div>` : '';
-            const descriptionHtml = description
-                ? `<div class="step-description">${description}</div>`
-                : '';
-
-            const stepNumber = Number.isFinite(number) ? Number(number) : null;
-            const numberHtml = stepNumber !== null
-                ? `<span class="step-number">${stepNumber}</span>`
-                : '<span class="step-number"></span>';
-
-            return `
-                <div class="step">
-                    ${numberHtml}
-                    <div>
-                        ${titleHtml}
-                        ${descriptionHtml}
-                        ${buttonsHtml}
-                        ${extraContentHtml}
-                    </div>
-                </div>
-            `;
-        }
-
-        function renderAppSteps(app) {
-            const parts = [];
-            let stepNum = 1;
-
-            function appendStep(step, defaults) {
-                const stepHtml = renderInstructionStep(step, {
-                    number: stepNum,
-                    ...(defaults || {}),
-                });
-                if (stepHtml) {
-                    parts.push(stepHtml);
-                    stepNum += 1;
-                }
-            }
-
-            appendStep(app.installationStep, {
-                defaultTitleKey: 'apps.step.download',
-                defaultTitle: 'Download & install',
-            });
-
-            appendStep(app.additionalBeforeAddSubscriptionStep, {
-                defaultTitleKey: 'apps.step.before_add',
-                defaultTitle: 'Before adding subscription',
-            });
-
-            appendStep(app.addSubscriptionStep, {
-                defaultTitleKey: 'apps.step.add',
-                defaultTitle: 'Add subscription',
-                extraContent: () => renderConnectActionButton(app.id || ''),
-            });
-
-            appendStep(app.additionalAfterAddSubscriptionStep, {
-                defaultTitleKey: 'apps.step.after_add',
-                defaultTitle: 'If the subscription is not added',
-            });
-
-            appendStep(app.connectAndUseStep, {
-                defaultTitleKey: 'apps.step.connect',
-                defaultTitle: 'Connect & use',
-            });
-
-            return parts.join('');
-        }
-
-        function updateInstructionConnectButtons(isEnabled = true) {
-            const apps = getAppsForCurrentPlatform();
-
-            document.querySelectorAll('.step-final-button').forEach(button => {
-                if (!isEnabled) {
-                    button.disabled = true;
-                    return;
-                }
-
-                const appId = button.getAttribute('data-app-id') || null;
-                const hasLink = Boolean(getConnectLink(appId, { apps }));
-                button.disabled = !hasLink;
-            });
-        }
-
-        function openInstallationModal() {
-            const modal = document.getElementById('installationModal');
-            if (!modal) {
-                return;
-            }
-
-            renderApps();
-            setActivePlatformButton();
-            updateInstructionConnectButtons(hasAnyConnectLink());
-
-            modal.classList.remove('hidden');
-            document.body.classList.add('modal-open');
-
-            const focusTarget = modal.querySelector('.guide-modal-close');
-            if (focusTarget && typeof focusTarget.focus === 'function') {
-                try {
-                    focusTarget.focus({ preventScroll: true });
-                } catch (error) {
-                    focusTarget.focus();
-                }
-            }
-        }
-
-        function closeInstallationModal() {
-            const modal = document.getElementById('installationModal');
-            if (!modal) {
-                return;
-            }
-
-            modal.classList.add('hidden');
-            document.body.classList.remove('modal-open');
-        }
-
-        // Referral Modal Functions
-        function openReferralModal() {
-            const modal = document.getElementById('referralModal');
-            if (!modal) {
-                return;
-            }
-
-            // Hide bottom navigation
-            const bottomNav = document.querySelector('.bottom-nav');
-            if (bottomNav) {
-                bottomNav.style.display = 'none';
-            }
-
-            // Hide header
-            const header = document.querySelector('.asb-header');
-            if (header) {
-                header.style.display = 'none';
-            }
-
-            // Prevent body scroll
-            const scrollY = window.scrollY;
-            document.body.style.position = 'fixed';
-            document.body.style.top = `-${scrollY}px`;
-            document.body.style.width = '100%';
-            document.body.style.overflow = 'hidden';
-
-            renderReferralModalContent();
-            modal.classList.remove('hidden');
-            document.body.classList.add('modal-open');
-
-            const focusTarget = modal.querySelector('.referral-modal-close');
-            if (focusTarget && typeof focusTarget.focus === 'function') {
-                try {
-                    focusTarget.focus({ preventScroll: true });
-                } catch (error) {
-                    focusTarget.focus();
-                }
-            }
-        }
-
-        function closeReferralModal() {
-            const modal = document.getElementById('referralModal');
-            if (!modal) {
-                return;
-            }
-
-            modal.classList.add('hidden');
-            document.body.classList.remove('modal-open');
-
-            // Show header
-            const header = document.querySelector('.asb-header');
-            if (header) {
-                header.style.display = '';
-            }
-
-            // Restore body scroll
-            const scrollY = document.body.style.top;
-            document.body.style.position = '';
-            document.body.style.top = '';
-            document.body.style.width = '';
-            document.body.style.overflow = '';
-            if (scrollY) {
-                window.scrollTo(0, parseInt(scrollY || '0') * -1);
-            }
-
-            // Show bottom navigation
-            const bottomNav = document.querySelector('.bottom-nav');
-            if (bottomNav) {
-                bottomNav.style.display = '';
-            }
-        }
-
-        function renderReferralModalContent() {
-            const referral = userData?.referral || {};
-            const statsData = referral?.stats || {};
-
-            // Referral Link
-            const referralLinkValue = document.getElementById('referralLinkValueModal');
-            if (referralLinkValue) {
-                const referralCode = referral.referral_code || referral.code || referral.link || '—';
-                referralLinkValue.textContent = referralCode;
-            }
-
-            // Referral Stats - using the same structure as renderReferralSection
-            const invited = statsData.invited_count ?? 0;
-            const active = statsData.active_referrals_count ?? 0;
-            const paying = statsData.paid_referrals_count ?? 0;
-            const totalEarned = statsData.total_earned_label
-                || (statsData.total_earned_kopeks ? formatPriceFromKopeks(statsData.total_earned_kopeks) : '0 ₽');
-            const monthEarned = statsData.month_earned_label
-                || (statsData.month_earned_kopeks ? formatPriceFromKopeks(statsData.month_earned_kopeks) : '0 ₽');
-            const conversion = `${Number.parseFloat(statsData.conversion_rate ?? 0).toFixed(1)}%`;
-
-            const invitedEl = document.getElementById('referralStatInvitedModal');
-            if (invitedEl) invitedEl.textContent = String(invited);
-
-            const activeEl = document.getElementById('referralStatActiveModal');
-            if (activeEl) activeEl.textContent = String(active);
-
-            const payingEl = document.getElementById('referralStatPayingModal');
-            if (payingEl) payingEl.textContent = String(paying);
-
-            const totalEarnedEl = document.getElementById('referralStatTotalEarnedModal');
-            if (totalEarnedEl) totalEarnedEl.textContent = totalEarned;
-
-            const monthEarnedEl = document.getElementById('referralStatMonthEarnedModal');
-            if (monthEarnedEl) monthEarnedEl.textContent = monthEarned;
-
-            const conversionEl = document.getElementById('referralStatConversionModal');
-            if (conversionEl) conversionEl.textContent = conversion;
-
-            // Referral Conditions
-            const conditionsList = document.getElementById('referralConditionsListModal');
-            if (conditionsList) {
-                conditionsList.innerHTML = '';
-
-                const terms = referral?.terms || {};
-                const entries = [
-                    { label: 'referral.terms.minimum_topup', value: terms.minimum_topup_label },
-                    { label: 'referral.terms.first_topup', value: terms.first_topup_bonus_label },
-                    { label: 'referral.terms.inviter_bonus', value: terms.inviter_bonus_label },
-                    {
-                        label: 'referral.terms.commission',
-                        value: terms.commission_percent !== undefined && terms.commission_percent !== null
-                            ? `${Number.parseFloat(terms.commission_percent).toFixed(1).replace(/\.0$/, '')}%`
-                            : undefined,
-                    },
-                ];
-
-                entries
-                    .filter(entry => entry.value !== undefined && entry.value !== null)
-                    .forEach(entry => {
-                        const item = document.createElement('div');
-                        item.className = 'referral-condition-item';
-
-                        const label = document.createElement('div');
-                        label.className = 'referral-condition-text';
-                        const labelKey = t(entry.label);
-                        label.textContent = labelKey === entry.label ? entry.label : labelKey;
-
-                        const value = document.createElement('div');
-                        value.className = 'referral-condition-value';
-                        value.textContent = entry.value;
-
-                        item.appendChild(label);
-                        item.appendChild(value);
-                        conditionsList.appendChild(item);
-                    });
-            }
-
-            // Render Referral List
-            const referralListModal = document.getElementById('referralListModal');
-            const referralListEmptyModal = document.getElementById('referralListEmptyModal');
-            const referralListSectionModal = document.getElementById('referralListSectionModal');
-
-            if (referralListModal && referralListEmptyModal) {
-                referralListModal.innerHTML = '';
-                const referrals = Array.isArray(referral?.referrals?.items) ? referral.referrals.items : [];
-
-                if (referrals.length > 0) {
-                    referralListEmptyModal.classList.add('hidden');
-
-                    referrals.forEach(referralItem => {
-                        const item = document.createElement('li');
-                        item.className = 'referral-item-modal';
-
-                        const header = document.createElement('div');
-                        header.className = 'referral-item-header-modal';
-
-                        const displayName = referralItem.full_name
-                            || referralItem.username
-                            || (referralItem.telegram_id ? `ID ${referralItem.telegram_id}` : t('referral.referrals.unknown'));
-                        const titleWrapper = document.createElement('div');
-                        titleWrapper.className = 'referral-item-name-modal';
-                        titleWrapper.textContent = displayName;
-
-                        const statusBadge = document.createElement('span');
-                        const status = (referralItem.status || '').toLowerCase();
-                        let statusKey = `referral.status.${status}`;
-                        if (!status || !t(statusKey) || t(statusKey) === statusKey) {
-                            if (referralItem.has_made_first_topup) {
-                                statusKey = 'referral.status.paying';
-                            } else if (status === 'active') {
-                                statusKey = 'referral.status.active';
-                            } else {
-                                statusKey = 'referral.status.inactive';
-                            }
-                        }
-                        const resolved = t(statusKey);
-                        statusBadge.textContent = resolved === statusKey ? statusKey.split('.').pop() : resolved;
-                        statusBadge.className = 'referral-status-modal';
-                        const statusText = statusBadge.textContent?.toLowerCase() || '';
-                        if (statusText.includes('inactive') || statusText.includes('неактив')) {
-                            statusBadge.classList.remove('active');
-                            statusBadge.classList.add('inactive');
-                        } else if (statusText.includes('active') || statusText.includes('актив')) {
-                            statusBadge.classList.add('active');
-                        } else if (statusKey === 'referral.status.paying') {
-                            statusBadge.classList.add('new');
-                        }
-
-                        header.appendChild(titleWrapper);
-                        header.appendChild(statusBadge);
-                        item.appendChild(header);
-
-                        if (referralItem.username && referralItem.username !== displayName) {
-                            const username = document.createElement('div');
-                            username.className = 'referral-item-username-modal';
-                            username.textContent = `@${referralItem.username.replace(/^@/, '')}`;
-                            item.appendChild(username);
-                        }
-
-                        const metrics = document.createElement('div');
-                        metrics.className = 'referral-item-grid-modal';
-
-                        const earnedMetric = document.createElement('div');
-                        earnedMetric.className = 'referral-item-metric-modal';
-                        const earnedLabel = document.createElement('span');
-                        earnedLabel.className = 'referral-item-label-modal';
-                        earnedLabel.textContent = t('referral.meta.earned');
-                        const earnedValue = document.createElement('span');
-                        earnedValue.className = 'referral-item-value-modal';
-                        earnedValue.textContent = referralItem.total_earned_label
-                            || formatPriceFromKopeks(referralItem.total_earned_kopeks || 0);
-                        earnedMetric.appendChild(earnedLabel);
-                        earnedMetric.appendChild(earnedValue);
-
-                        const topupsMetric = document.createElement('div');
-                        topupsMetric.className = 'referral-item-metric-modal';
-                        const topupsLabel = document.createElement('span');
-                        topupsLabel.className = 'referral-item-label-modal';
-                        topupsLabel.textContent = t('referral.meta.topups');
-                        const topupsValue = document.createElement('span');
-                        topupsValue.className = 'referral-item-value-modal';
-                        topupsValue.textContent = String(referralItem.topups_count ?? 0);
-                        topupsMetric.appendChild(topupsLabel);
-                        topupsMetric.appendChild(topupsValue);
-
-                        metrics.appendChild(earnedMetric);
-                        metrics.appendChild(topupsMetric);
-
-                        const dates = document.createElement('div');
-                        dates.className = 'referral-item-dates-modal';
-                        const joined = document.createElement('span');
-                        joined.className = 'referral-item-date-modal';
-                        const joinedLabel = t('referral.meta.joined');
-                        joined.innerHTML = `<strong>${joinedLabel === 'referral.meta.joined' ? 'Joined' : joinedLabel}:</strong> ${escapeHtml(formatDate(referralItem.created_at))}`;
-
-                        const lastActivity = document.createElement('span');
-                        lastActivity.className = 'referral-item-date-modal';
-                        const lastActivityLabel = t('referral.meta.last_activity');
-                        const lastActivityValue = formatDate(referralItem.last_activity) || '—';
-                        lastActivity.innerHTML = `<strong>${lastActivityLabel === 'referral.meta.last_activity' ? 'Last activity' : lastActivityLabel}:</strong> ${escapeHtml(lastActivityValue)}`;
-
-                        dates.appendChild(joined);
-                        dates.appendChild(lastActivity);
-                        metrics.appendChild(dates);
-                        item.appendChild(metrics);
-
-                        referralListModal.appendChild(item);
-                    });
-                } else {
-                    referralListEmptyModal.classList.remove('hidden');
-                    referralListModal.classList.add('hidden');
-                }
-            }
-        }
-
-        function normalizeLocalizedValue(value) {
-            if (typeof value !== 'string') {
-                return '';
-            }
-
-            const trimmed = value.trim();
-            if (!trimmed || /^[-–—]+$/.test(trimmed)) {
-                return '';
-            }
-
-            return trimmed;
-        }
-
-        function getLocalizedText(textObj) {
-            if (!textObj) {
-                return '';
-            }
-            if (typeof textObj === 'string') {
-                return normalizeLocalizedValue(textObj);
-            }
-
-            const telegramLang = tg.initDataUnsafe?.user?.language_code;
-            const fallbackLanguages = getSupportedLanguages();
-            const preferenceOrder = [
-                preferredLanguage,
-                preferredLanguage?.split('-')[0],
-                userData?.user?.language,
-                telegramLang,
-                telegramLang?.split('-')[0],
-                ...fallbackLanguages,
-                'en',
-                'ru'
-            ].filter(Boolean).map(lang => lang.toLowerCase());
-
-            const seen = new Set();
-            for (const lang of preferenceOrder) {
-                const normalizedLang = lang.toLowerCase();
-                if (seen.has(normalizedLang)) {
-                    continue;
-                }
-                seen.add(normalizedLang);
-
-                const candidateKeys = [normalizedLang];
-                if (lang !== normalizedLang) {
-                    candidateKeys.push(lang);
-                }
-
-                for (const key of candidateKeys) {
-                    if (!Object.prototype.hasOwnProperty.call(textObj, key)) {
-                        continue;
-                    }
-                    const value = normalizeLocalizedValue(textObj[key]);
-                    if (value) {
-                        return value;
-                    }
-                }
-            }
-
-            const fallbackKeys = ['default', 'en', 'ru'];
-            for (const key of fallbackKeys) {
-                if (!Object.prototype.hasOwnProperty.call(textObj, key)) {
-                    continue;
-                }
-                const value = normalizeLocalizedValue(textObj[key]);
-                if (value) {
-                    return value;
-                }
-            }
-
-            for (const value of Object.values(textObj)) {
-                const normalizedValue = normalizeLocalizedValue(value);
-                if (normalizedValue) {
-                    return normalizedValue;
-                }
-            }
-
-            return '';
-        }
-
-        function ensureArray(value) {
-            return Array.isArray(value) ? value : [];
-        }
-
-        function coerceNumber(value, fallback = null) {
-            if (typeof value === 'number') {
-                return Number.isFinite(value) ? value : fallback;
-            }
-            if (typeof value === 'string') {
-                const normalized = value.trim();
-                if (!normalized) {
-                    return fallback;
-                }
-                const parsed = Number(normalized);
-                return Number.isFinite(parsed) ? parsed : fallback;
-            }
-            return fallback;
-        }
-
-        function coercePositiveInt(value, fallback = null) {
-            const numeric = coerceNumber(value, null);
-            if (numeric === null || Number.isNaN(numeric)) {
-                return fallback;
-            }
-            const intValue = Math.trunc(numeric);
-            return Number.isFinite(intValue) && intValue >= 0 ? intValue : fallback;
-        }
-
-        function coerceBoolean(value, fallback = false) {
-            if (typeof value === 'boolean') {
-                return value;
-            }
-            if (typeof value === 'number') {
-                return value !== 0;
-            }
-            if (typeof value === 'string') {
-                const normalized = value.trim().toLowerCase();
-                if (!normalized) {
-                    return fallback;
-                }
-                if (['true', '1', 'yes', 'on', 'enabled'].includes(normalized)) {
-                    return true;
-                }
-                if (['false', '0', 'no', 'off', 'disabled'].includes(normalized)) {
-                    return false;
-                }
-            }
-            return fallback;
-        }
-
-        function sanitizeNewsItems(rawNews) {
-            if (!rawNews) {
-                return [];
-            }
-
-            const items = Array.isArray(rawNews) ? rawNews : [rawNews];
-            const sanitized = [];
-
-            items.forEach((entry, index) => {
-                if (!entry || typeof entry !== 'object') {
-                    return;
-                }
-
-                const rawTitle = entry.title ?? entry.name ?? entry.heading ?? entry.text ?? null;
-                const resolvedTitle = getLocalizedText(rawTitle);
-                const rawDescription = entry.description ?? entry.body ?? entry.text ?? null;
-                const resolvedDescription = getLocalizedText(rawDescription);
-
-                if (!resolvedTitle && !resolvedDescription) {
-                    return;
-                }
-
-                const fallbackId = `news-${index + 1}`;
-                const sanitizedId = typeof entry.id === 'string' && entry.id.trim().length
-                    ? entry.id.trim()
-                    : fallbackId;
-
-                const rawDateLabel = entry.dateLabel ?? entry.date_label ?? entry.dateText ?? entry.date_text ?? null;
-                const resolvedDateLabel = getLocalizedText(rawDateLabel);
-                const timestamp = normalizeNewsTimestamp(
-                    entry.date
-                    ?? entry.published_at
-                    ?? entry.publishedAt
-                    ?? entry.createdAt
-                    ?? entry.created_at
-                    ?? entry.timestamp
-                );
-                const link = normalizeUrl(
-                    entry.link
-                    ?? entry.url
-                    ?? entry.actionUrl
-                    ?? entry.action_url
-                );
-
-                sanitized.push({
-                    id: sanitizedId,
-                    titleSource: rawTitle,
-                    descriptionSource: rawDescription,
-                    dateLabelSource: rawDateLabel,
-                    fallbackTitle: resolvedTitle || resolvedDescription || 'News',
-                    fallbackDescription: resolvedDescription || '',
-                    dateLabel: resolvedDateLabel || '',
-                    link,
-                    timestamp,
-                });
-            });
-
-            return sanitized;
-        }
-
-        function normalizeNewsTimestamp(value) {
-            if (value instanceof Date) {
-                const time = value.getTime();
-                return Number.isNaN(time) ? null : time;
-            }
-
-            if (typeof value === 'number' && Number.isFinite(value)) {
-                return value < 1e12 ? value * 1000 : value;
-            }
-
-            if (typeof value === 'string') {
-                const trimmed = value.trim();
-                if (!trimmed) {
-                    return null;
-                }
-                const parsed = Date.parse(trimmed);
-                if (!Number.isNaN(parsed)) {
-                    return parsed;
-                }
-            }
-
-            return null;
-        }
-
-        function formatNewsDate(timestamp) {
-            if (typeof timestamp !== 'number' || Number.isNaN(timestamp)) {
-                return '';
-            }
-
-            const date = new Date(timestamp);
-            if (Number.isNaN(date.getTime())) {
-                return '';
-            }
-
-            try {
-                return new Intl.DateTimeFormat(preferredLanguage || 'en', {
-                    year: 'numeric',
-                    month: 'short',
-                    day: 'numeric',
-                }).format(date);
-            } catch (error) {
-                return date.toLocaleDateString();
-            }
-        }
-
-        function sanitizeAppsConfig(rawPlatforms) {
-            const sanitized = {};
-            if (!rawPlatforms || typeof rawPlatforms !== 'object') {
-                return sanitized;
-            }
-
-            Object.entries(rawPlatforms).forEach(([platformKey, apps]) => {
-                if (!Array.isArray(apps)) {
-                    sanitized[platformKey] = [];
-                    return;
-                }
-
-                const normalizedApps = apps
-                    .map(app => sanitizeAppDefinition(app))
-                    .filter(Boolean);
-                sanitized[platformKey] = normalizedApps;
-            });
-
-            return sanitized;
-        }
-
-        function sanitizeAppDefinition(app) {
-            if (!app || typeof app !== 'object') {
-                return null;
-            }
-
-            const sanitized = {};
-
-            const rawId = app.id ?? app.appId ?? app.slug ?? null;
-            let normalizedId = typeof rawId === 'string' && rawId.trim().length
-                ? rawId.trim()
-                : null;
-
-            let resolvedName = '';
-            if (typeof app.name === 'string') {
-                resolvedName = normalizeLocalizedValue(app.name) || app.name;
-            } else if (app.name && typeof app.name === 'object') {
-                const nameCandidates = [
-                    app.name.en,
-                    app.name.default,
-                    app.name.ru,
-                    ...Object.values(app.name)
-                ];
-                for (const candidate of nameCandidates) {
-                    const normalizedCandidate = normalizeLocalizedValue(candidate);
-                    if (normalizedCandidate) {
-                        resolvedName = normalizedCandidate;
-                        break;
-                    }
-                }
-            }
-
-            if (!resolvedName && typeof rawId === 'string') {
-                resolvedName = rawId.trim();
-            }
-
-            if (!normalizedId && resolvedName) {
-                const slug = resolvedName
-                    .toLowerCase()
-                    .replace(/[^a-z0-9]+/g, '-')
-                    .replace(/^-+|-+$/g, '');
-                normalizedId = slug || null;
-            }
-
-            sanitized.id = normalizedId;
-            sanitized.name = resolvedName || 'App';
-
-            const rawScheme = app.urlScheme ?? app.url_scheme ?? '';
-            sanitized.urlScheme = typeof rawScheme === 'string' && rawScheme.trim().length
-                ? rawScheme.trim()
-                : null;
-
-            sanitized.isFeatured = coerceBoolean(app.isFeatured ?? app.is_featured, false);
-            sanitized.isNeedBase64Encoding = coerceBoolean(
-                app.isNeedBase64Encoding ?? app.is_need_base64_encoding,
-                false
-            );
-
-            const installationStep = sanitizeStep(app.installationStep ?? app.installation_step);
-            if (installationStep) {
-                sanitized.installationStep = installationStep;
-            }
-
-            const beforeAddStep = sanitizeStep(
-                app.additionalBeforeAddSubscriptionStep
-                ?? app.additional_before_add_subscription_step
-            );
-            if (beforeAddStep) {
-                sanitized.additionalBeforeAddSubscriptionStep = beforeAddStep;
-            }
-
-            const addStep = sanitizeStep(app.addSubscriptionStep ?? app.add_subscription_step);
-            if (addStep) {
-                sanitized.addSubscriptionStep = addStep;
-            }
-
-            const afterAddStep = sanitizeStep(
-                app.additionalAfterAddSubscriptionStep
-                ?? app.additional_after_add_subscription_step
-            );
-            if (afterAddStep) {
-                sanitized.additionalAfterAddSubscriptionStep = afterAddStep;
-            }
-
-            const connectStep = sanitizeStep(app.connectAndUseStep ?? app.connect_and_use_step);
-            if (connectStep) {
-                sanitized.connectAndUseStep = connectStep;
-            }
-
-            return sanitized;
-        }
-
-        function sanitizeStep(step) {
-            if (!step || typeof step !== 'object') {
-                return null;
-            }
-
-            const sanitized = {};
-
-            if (Object.prototype.hasOwnProperty.call(step, 'title')) {
-                sanitized.title = step.title;
-            }
-
-            if (Object.prototype.hasOwnProperty.call(step, 'description')) {
-                sanitized.description = step.description;
-            }
-
-            const rawButtons = ensureArray(step.buttons ?? step.buttonList ?? step.button_list);
-            const buttons = rawButtons.map(sanitizeButton).filter(Boolean);
-            if (buttons.length) {
-                sanitized.buttons = buttons;
-            }
-
-            if (
-                !Object.prototype.hasOwnProperty.call(sanitized, 'title')
-                && !Object.prototype.hasOwnProperty.call(sanitized, 'description')
-                && !sanitized.buttons
-            ) {
-                return null;
-            }
-
-            return sanitized;
-        }
-
-        function sanitizeButton(button) {
-            if (!button || typeof button !== 'object') {
-                return null;
-            }
-
-            const link = normalizeUrl(
-                button.buttonLink
-                ?? button.button_link
-                ?? button.link
-                ?? button.url
-                ?? button.href
-            );
-
-            if (!link) {
-                return null;
-            }
-
-            const rawText = button.buttonText
-                ?? button.button_text
-                ?? button.text
-                ?? button.label
-                ?? '';
-
-            if (typeof rawText === 'string') {
-                return {
-                    buttonLink: link,
-                    buttonText: normalizeLocalizedValue(rawText) || rawText,
-                };
-            }
-
-            return {
-                buttonLink: link,
-                buttonText: rawText,
-            };
-        }
-
-        async function parseJsonSafe(response) {
-            try {
-                return await response.json();
-            } catch (error) {
-                return null;
-            }
-        }
-
-        function resolvePluralForm(count, language = preferredLanguage) {
-            const normalizedLang = (language || preferredLanguage || 'en').split('-')[0].toLowerCase();
-            if (normalizedLang === 'ru') {
-                const mod10 = count % 10;
-                const mod100 = count % 100;
-                if (mod10 === 1 && mod100 !== 11) {
-                    return 'one';
-                }
-                if (mod10 >= 2 && mod10 <= 4 && (mod100 < 12 || mod100 > 14)) {
-                    return 'few';
-                }
-                return 'many';
-            }
-            return count === 1 ? 'one' : 'many';
-        }
-
-        function formatAutopayDayLabel(days) {
-            const value = coercePositiveInt(days, null);
-            if (value === null) {
-                return '';
-            }
-            if (value === 0) {
-                const sameDayKey = 'subscription_autopay.day.same_day';
-                const sameDay = t(sameDayKey);
-                if (sameDay && sameDay !== sameDayKey) {
-                    return sameDay;
-                }
-                return preferredLanguage === 'ru' ? 'В день окончания' : 'On renewal day';
-            }
-            const pluralKey = resolvePluralForm(value);
-            const key = `subscription_autopay.day.before.${pluralKey}`;
-            const template = t(key);
-            if (template && template !== key) {
-                return template.replace('{count}', String(value));
-            }
-            if (preferredLanguage === 'ru') {
-                if (pluralKey === 'one') {
-                    return `${value} день до списания`;
-                }
-                if (pluralKey === 'few') {
-                    return `${value} дня до списания`;
-                }
-                return `${value} дней до списания`;
-            }
-            return pluralKey === 'one'
-                ? `${value} day before`
-                : `${value} days before`;
-        }
-
-        function renderSubscriptionAutopay() {
-            const section = document.getElementById('subscriptionAutopaySection');
-            if (!section) {
-                return;
-            }
-
-            const shouldShow = hasPaidSubscription();
-            section.classList.toggle('hidden', !shouldShow);
-            if (!shouldShow) {
-                return;
-            }
-
-            const statusElement = document.getElementById('subscriptionAutopayStatus');
-            const enableButton = document.getElementById('subscriptionAutopayEnable');
-            const disableButton = document.getElementById('subscriptionAutopayDisable');
-            const daysContainer = document.getElementById('subscriptionAutopayDays');
-            const optionsContainer = document.getElementById('subscriptionAutopayDaysOptions');
-            const hintElement = document.getElementById('subscriptionAutopayHint');
-
-            const enabled = Boolean(subscriptionAutopayState.enabled);
-            const saving = Boolean(subscriptionAutopayState.saving);
-            const loading = Boolean(subscriptionAutopayState.loading);
-            const options = Array.isArray(subscriptionAutopayState.options)
-                ? subscriptionAutopayState.options.slice().sort((a, b) => a - b)
-                : [];
-            const hasOptions = options.length > 0;
-
-            if (statusElement) {
-                if (saving) {
-                    const savingKey = 'subscription_autopay.saving';
-                    const savingText = t(savingKey);
-                    statusElement.textContent = savingText && savingText !== savingKey ? savingText : 'Saving…';
-                    statusElement.className = 'subscription-autopay-status saving';
-                } else if (loading) {
-                    const loadingKey = 'subscription_autopay.status.loading';
-                    const loadingText = t(loadingKey);
-                    statusElement.textContent = loadingText && loadingText !== loadingKey ? loadingText : 'Loading…';
-                    statusElement.className = 'subscription-autopay-status loading';
-                } else {
-                    const key = enabled
-                        ? 'subscription_autopay.status.enabled'
-                        : 'subscription_autopay.status.disabled';
-                    const label = t(key);
-                    statusElement.textContent = label && label !== key
-                        ? label
-                        : (enabled ? 'Enabled' : 'Disabled');
-                    statusElement.className = `subscription-autopay-status ${enabled ? 'enabled' : 'disabled'}`;
-                }
-            }
-
-            if (enableButton) {
-                enableButton.disabled = saving || loading || enabled;
-                enableButton.classList.toggle('active', enabled && !loading);
-            }
-
-            if (disableButton) {
-                disableButton.disabled = saving || loading || !enabled;
-                disableButton.classList.toggle('active', !enabled && !loading);
-            }
-
-            if (daysContainer) {
-                daysContainer.classList.toggle('hidden', !enabled || !hasOptions);
-            }
-
-            if (hintElement) {
-                if (!enabled) {
-                    const hintKey = 'subscription_autopay.hint.disabled';
-                    const hint = t(hintKey);
-                    hintElement.textContent = hint && hint !== hintKey
-                        ? hint
-                        : (preferredLanguage === 'ru'
-                            ? 'Включите автоплатеж, чтобы выбрать день списания.'
-                            : 'Enable auto-pay to choose when to charge your balance.');
-                    hintElement.classList.remove('hidden');
-                } else if (enabled && !hasOptions && !loading) {
-                    const hintKey = 'subscription_autopay.hint.no_options';
-                    const hint = t(hintKey);
-                    hintElement.textContent = hint && hint !== hintKey
-                        ? hint
-                        : (preferredLanguage === 'ru'
-                            ? 'Выбор дня списания временно недоступен.'
-                            : 'Auto-pay day selection is temporarily unavailable.');
-                    hintElement.classList.remove('hidden');
-                } else {
-                    hintElement.classList.add('hidden');
-                    hintElement.textContent = '';
-                }
-            }
-
-            if (optionsContainer) {
-                optionsContainer.innerHTML = '';
-                if (enabled && hasOptions) {
-                    options.forEach(value => {
-                        const button = document.createElement('button');
-                        button.type = 'button';
-                        button.className = 'subscription-settings-toggle';
-                        button.dataset.autopayDays = String(value);
-                        button.disabled = saving;
-
-                        if (subscriptionAutopayState.daysBefore === value) {
-                            button.classList.add('active');
-                        }
-
-                        const label = document.createElement('div');
-                        label.className = 'subscription-settings-toggle-label';
-
-                        const title = document.createElement('div');
-                        title.className = 'subscription-settings-toggle-title';
-                        title.textContent = formatAutopayDayLabel(value);
-
-                        label.appendChild(title);
-                        button.appendChild(label);
-                        optionsContainer.appendChild(button);
-                    });
-                }
-            }
-        }
-
-        function normalizeAutopayPayload(raw) {
-            if (!raw || typeof raw !== 'object') {
-                return null;
-            }
-
-            const enabledCandidate = raw.autopay_enabled
-                ?? raw.enabled
-                ?? raw.is_enabled
-                ?? raw.active
-                ?? null;
-            let enabledValue;
-            if (typeof enabledCandidate === 'boolean') {
-                enabledValue = enabledCandidate;
-            } else if (enabledCandidate != null) {
-                enabledValue = coerceBoolean(enabledCandidate, undefined);
-            }
-
-            const daysCandidate = raw.autopay_days_before
-                ?? raw.days_before
-                ?? raw.daysBefore
-                ?? raw.days
-                ?? raw.value
-                ?? null;
-            const daysBefore = daysCandidate != null
-                ? coercePositiveInt(daysCandidate, null)
-                : null;
-
-            const defaultDaysCandidate = raw.default_autopay_days_before
-                ?? raw.default_autopay_days
-                ?? raw.default_days_before
-                ?? raw.default_days
-                ?? raw.defaultDaysBefore
-                ?? raw.defaultDays
-                ?? raw.default
-                ?? null;
-            const defaultDaysBefore = defaultDaysCandidate != null
-                ? coercePositiveInt(defaultDaysCandidate, null)
-                : null;
-
-            const optionSet = new Set();
-            const optionSources = [
-                raw.autopay_days_options,
-                raw.autopayDaysOptions,
-                raw.days_options,
-                raw.daysOptions,
-                raw.available_days,
-                raw.availableDays,
-            ];
-
-            optionSources.forEach(source => {
-                if (!source) {
-                    return;
-                }
-                const normalized = Array.isArray(source)
-                    ? source
-                    : (typeof source === 'object' ? Object.values(source) : [source]);
-                normalized.forEach(item => {
-                    if (item == null) {
-                        return;
-                    }
-                    if (typeof item === 'object') {
-                        const candidate = item.days_before
-                            ?? item.daysBefore
-                            ?? item.value
-                            ?? item.days
-                            ?? item.amount
-                            ?? null;
-                        const numeric = candidate != null ? coercePositiveInt(candidate, null) : null;
-                        if (numeric !== null) {
-                            optionSet.add(numeric);
-                        }
-                        return;
-                    }
-                    const numeric = coercePositiveInt(item, null);
-                    if (numeric !== null) {
-                        optionSet.add(numeric);
-                    }
-                });
-            });
-
-            const options = Array.from(optionSet).sort((a, b) => a - b);
-            if (daysBefore !== null && !optionSet.has(daysBefore)) {
-                options.push(daysBefore);
-                options.sort((a, b) => a - b);
-            }
-            if (defaultDaysBefore !== null && !optionSet.has(defaultDaysBefore)) {
-                options.push(defaultDaysBefore);
-                options.sort((a, b) => a - b);
-            }
-
-            return {
-                enabled: typeof enabledValue === 'boolean' ? enabledValue : undefined,
-                daysBefore: daysBefore !== null ? daysBefore : null,
-                defaultDaysBefore: defaultDaysBefore !== null ? defaultDaysBefore : null,
-                options,
-            };
-        }
-
-        const DEFAULT_AUTOPAY_DAY_OPTIONS = [1, 3, 7, 14];
-
-        function mergeAutopaySources(...sources) {
-            let hasData = false;
-            let enabledValue;
-            let daysValue = null;
-            let defaultDaysValue = null;
-            const optionSet = new Set();
-
-            DEFAULT_AUTOPAY_DAY_OPTIONS.forEach(value => {
-                const numeric = coercePositiveInt(value, null);
-                if (numeric !== null) {
-                    optionSet.add(numeric);
-                }
-            });
-
-            sources.forEach(source => {
-                const normalized = normalizeAutopayPayload(source);
-                if (!normalized) {
-                    return;
-                }
-                hasData = true;
-                if (typeof normalized.enabled === 'boolean') {
-                    enabledValue = normalized.enabled;
-                }
-                if (normalized.daysBefore !== null && normalized.daysBefore !== undefined) {
-                    daysValue = normalized.daysBefore;
-                }
-                if (normalized.defaultDaysBefore !== null && normalized.defaultDaysBefore !== undefined) {
-                    defaultDaysValue = normalized.defaultDaysBefore;
-                }
-                normalized.options.forEach(value => optionSet.add(value));
-            });
-
-            if (!hasData) {
-                return null;
-            }
-
-            if (daysValue !== null && daysValue !== undefined) {
-                optionSet.add(daysValue);
-            }
-            if (defaultDaysValue !== null && defaultDaysValue !== undefined) {
-                optionSet.add(defaultDaysValue);
-            }
-
-            const options = Array.from(optionSet).sort((a, b) => a - b);
-            let resolvedDays = daysValue;
-            if (resolvedDays === null || resolvedDays === undefined) {
-                if (defaultDaysValue !== null && defaultDaysValue !== undefined) {
-                    resolvedDays = defaultDaysValue;
-                } else if (options.length) {
-                    resolvedDays = options[0];
-                }
-            }
-
-            return {
-                enabled: enabledValue,
-                daysBefore: resolvedDays,
-                defaultDaysBefore: defaultDaysValue !== null && defaultDaysValue !== undefined
-                    ? defaultDaysValue
-                    : (daysValue !== null && daysValue !== undefined ? daysValue : null),
-                options,
-            };
-        }
-
-        function ingestAutopayData(...sources) {
-            const candidates = sources.filter(Boolean);
-            if (!candidates.length) {
-                subscriptionAutopayState.loading = false;
-                renderSubscriptionAutopay();
-                return;
-            }
-
-            const normalized = mergeAutopaySources(...candidates);
-            if (!normalized) {
-                subscriptionAutopayState.loading = false;
-                renderSubscriptionAutopay();
-                return;
-            }
-
-            if (typeof normalized.enabled === 'boolean') {
-                subscriptionAutopayState.enabled = normalized.enabled;
-            }
-
-            if (normalized.daysBefore !== null && normalized.daysBefore !== undefined) {
-                subscriptionAutopayState.daysBefore = normalized.daysBefore;
-            }
-
-            if (normalized.defaultDaysBefore !== undefined) {
-                if (normalized.defaultDaysBefore !== null) {
-                    subscriptionAutopayState.defaultDaysBefore = normalized.defaultDaysBefore;
-                } else if (subscriptionAutopayState.defaultDaysBefore === undefined) {
-                    subscriptionAutopayState.defaultDaysBefore = null;
-                }
-            } else if ((subscriptionAutopayState.defaultDaysBefore === null || subscriptionAutopayState.defaultDaysBefore === undefined)
-                && normalized.daysBefore !== null && normalized.daysBefore !== undefined) {
-                subscriptionAutopayState.defaultDaysBefore = normalized.daysBefore;
-            }
-
-            subscriptionAutopayState.options = Array.isArray(normalized.options)
-                ? normalized.options.slice().sort((a, b) => a - b)
-                : [];
-
-            if ((subscriptionAutopayState.daysBefore === null || subscriptionAutopayState.daysBefore === undefined)
-                && subscriptionAutopayState.options.length) {
-                subscriptionAutopayState.daysBefore = subscriptionAutopayState.options[0];
-            }
-
-            subscriptionAutopayState.loading = false;
-            renderSubscriptionAutopay();
-        }
-
-        function extractAutopayError(payload, status) {
-            if (status === 401) {
-                return t('subscription_autopay.error.unauthorized');
-            }
-            if (!payload || typeof payload !== 'object') {
-                return t('subscription_autopay.error.generic');
-            }
-            if (typeof payload.detail === 'string') {
-                return payload.detail;
-            }
-            if (payload.detail && typeof payload.detail === 'object') {
-                if (typeof payload.detail.message === 'string') {
-                    return payload.detail.message;
-                }
-                if (typeof payload.detail.error === 'string') {
-                    return payload.detail.error;
-                }
-            }
-            if (typeof payload.message === 'string') {
-                return payload.message;
-            }
-            if (typeof payload.error === 'string') {
-                return payload.error;
-            }
-            return t('subscription_autopay.error.generic');
-        }
-
-        function resolveAutopayErrorMessage(error, fallbackKey = 'subscription_autopay.error.generic') {
-            if (!error) {
-                return t(fallbackKey);
-            }
-            if (typeof error === 'string') {
-                return error;
-            }
-            if (typeof error.message === 'string' && error.message.trim()) {
-                return error.message;
-            }
-            if (error.detail) {
-                if (typeof error.detail === 'string' && error.detail.trim()) {
-                    return error.detail;
-                }
-                if (typeof error.detail.message === 'string' && error.detail.message.trim()) {
-                    return error.detail.message;
-                }
-            }
-            if (error.status === 401) {
-                return t('subscription_autopay.error.unauthorized');
-            }
-            return t(fallbackKey);
-        }
-
-        function handleAutopayError(error) {
-            const message = resolveAutopayErrorMessage(error);
-            const titleKey = 'subscription_autopay.title';
-            const title = t(titleKey);
-            showPopup(message, title && title !== titleKey ? title : 'Auto-pay');
-        }
-
-        async function submitAutopaySettingsChange(changes = {}) {
-            if (subscriptionAutopayState.saving || subscriptionAutopayState.loading) {
-                return;
-            }
-
-            if (!hasPaidSubscription()) {
-                handleAutopayError(createError('Auto-pay', t('subscription_autopay.error.generic')));
-                return;
-            }
-
-            const initData = tg.initData || '';
-            if (!initData) {
-                handleAutopayError(createError('Authorization Error', t('subscription_autopay.error.unauthorized')));
-                return;
-            }
-
-            const subscriptionId = userData?.subscription_id ?? userData?.subscriptionId ?? null;
-            if (!subscriptionId) {
-                handleAutopayError(createError('Auto-pay', t('subscription_autopay.error.generic')));
-                return;
-            }
-
-            const previousState = {
-                ...subscriptionAutopayState,
-                options: [...(subscriptionAutopayState.options || [])],
-            };
-
-            const targetEnabled = typeof changes.enabled === 'boolean'
-                ? changes.enabled
-                : subscriptionAutopayState.enabled;
-
-            let targetDays = changes.daysBefore;
-            if (targetDays === undefined || targetDays === null) {
-                targetDays = subscriptionAutopayState.daysBefore;
-            }
-            if (targetEnabled && (targetDays === undefined || targetDays === null)) {
-                if (subscriptionAutopayState.defaultDaysBefore !== null && subscriptionAutopayState.defaultDaysBefore !== undefined) {
-                    targetDays = subscriptionAutopayState.defaultDaysBefore;
-                } else if (subscriptionAutopayState.options.length) {
-                    targetDays = subscriptionAutopayState.options[0];
-                }
-            }
-            targetDays = targetDays !== undefined && targetDays !== null
-                ? coercePositiveInt(targetDays, null)
-                : null;
-
-            if (targetEnabled && (targetDays === null || targetDays === undefined)) {
-                handleAutopayError(createError('Auto-pay', t('subscription_autopay.error.no_days')));
-                renderSubscriptionAutopay();
-                return;
-            }
-
-            subscriptionAutopayState.enabled = targetEnabled;
-            if (targetEnabled) {
-                subscriptionAutopayState.daysBefore = targetDays;
-                if (subscriptionAutopayState.defaultDaysBefore === null || subscriptionAutopayState.defaultDaysBefore === undefined) {
-                    subscriptionAutopayState.defaultDaysBefore = targetDays;
-                }
-            }
-            subscriptionAutopayState.saving = true;
-            renderSubscriptionAutopay();
-
-            try {
-                const payload = {
-                    initData,
-                    subscription_id: subscriptionId,
-                    subscriptionId,
-                    enabled: targetEnabled,
-                    days_before: targetDays,
-                    daysBefore: targetDays,
-                };
-
-                const response = await fetch('/miniapp/subscription/autopay', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify(payload),
-                });
-
-                const body = await parseJsonSafe(response);
-                if (!response.ok || (body && body.success === false)) {
-                    const message = extractAutopayError(body, response.status);
-                    throw createError('Auto-pay', message, response.status);
-                }
-
-                subscriptionAutopayState.saving = false;
-
-                if (body && typeof body === 'object') {
-                    ingestAutopayData(
-                        body.autopay
-                            || body.data
-                            || body.subscription
-                            || body.settings
-                            || body,
-                    );
-                } else {
-                    renderSubscriptionAutopay();
-                }
-
-                await refreshSubscriptionData({ silent: true });
-                await ensureSubscriptionRenewalData({ force: true });
-            } catch (error) {
-                subscriptionAutopayState = {
-                    ...previousState,
-                    options: [...previousState.options],
-                    saving: false,
-                };
-                renderSubscriptionAutopay();
-                handleAutopayError(error);
-            }
-        }
-
-        function handleAutopayToggle(enabled) {
-            if (typeof enabled !== 'boolean') {
-                return;
-            }
-            if (subscriptionAutopayState.loading || subscriptionAutopayState.saving) {
-                return;
-            }
-            if (enabled === subscriptionAutopayState.enabled) {
-                return;
-            }
-            submitAutopaySettingsChange({ enabled });
-        }
-
-        function handleAutopayDaySelection(days) {
-            if (subscriptionAutopayState.loading || subscriptionAutopayState.saving) {
-                return;
-            }
-            if (!subscriptionAutopayState.enabled) {
-                return;
-            }
-            const value = coercePositiveInt(days, null);
-            if (value === null || value === undefined) {
-                return;
-            }
-            if (subscriptionAutopayState.daysBefore === value) {
-                return;
-            }
-            if (!subscriptionAutopayState.options.includes(value)) {
-                return;
-            }
-            submitAutopaySettingsChange({ daysBefore: value });
-        }
-
-        function setupSubscriptionAutopayEvents() {
-            document.getElementById('subscriptionAutopayEnable')?.addEventListener('click', () => {
-                handleAutopayToggle(true);
-            });
-            document.getElementById('subscriptionAutopayDisable')?.addEventListener('click', () => {
-                handleAutopayToggle(false);
-            });
-            document.getElementById('subscriptionAutopayDaysOptions')?.addEventListener('click', event => {
-                const target = event.target.closest('button[data-autopay-days]');
-                if (!target || target.disabled) {
-                    return;
-                }
-                const value = coercePositiveInt(target.dataset.autopayDays, null);
-                if (value === null || value === undefined) {
-                    return;
-                }
-                handleAutopayDaySelection(value);
-            });
-        }
-
-        function isSameSet(a, b) {
-            if (!(a instanceof Set) || !(b instanceof Set)) {
-                return false;
-            }
-            if (a.size !== b.size) {
-                return false;
-            }
-            for (const item of a) {
-                if (!b.has(item)) {
-                    return false;
-                }
-            }
-            return true;
-        }
-
-        function formatTraffic(value) {
-            const numeric = typeof value === 'number' ? value : Number.parseFloat(value ?? '0');
-            if (!Number.isFinite(numeric)) {
-                return `0 ${t('units.gb')}`;
-            }
-            if (numeric >= 100) {
-                return `${numeric.toFixed(0)} ${t('units.gb')}`;
-            }
-            if (numeric >= 10) {
-                return `${numeric.toFixed(1)} ${t('units.gb')}`;
-            }
-            return `${numeric.toFixed(2)} ${t('units.gb')}`;
-        }
-
-        function formatTrafficLimit(limit) {
-            const numeric = typeof limit === 'number' ? limit : Number.parseFloat(limit ?? '0');
-            if (!Number.isFinite(numeric) || numeric <= 0) {
-                return t('values.unlimited');
-            }
-            return `${numeric.toFixed(0)} ${t('units.gb')}`;
-        }
-
-        function formatCurrency(value, currency = 'RUB') {
-            const numeric = typeof value === 'number' ? value : Number.parseFloat(value ?? '0');
-            if (!Number.isFinite(numeric)) {
-                return `0 ${currency}`;
-            }
-            try {
-                return new Intl.NumberFormat(preferredLanguage, {
-                    style: 'currency',
-                    currency,
-                    maximumFractionDigits: 2,
-                }).format(numeric);
-            } catch (error) {
-                return `${numeric.toFixed(2)} ${currency}`;
-            }
-        }
-
-        function formatPriceFromKopeks(kopeks, currency) {
-            const normalized = typeof kopeks === 'number'
-                ? kopeks
-                : Number.parseInt(String(kopeks ?? '').trim() || '0', 10);
-            const currencyCode = currency
-                ? String(currency).toUpperCase()
-                : String(userData?.balance_currency || 'RUB').toUpperCase();
-
-            if (!Number.isFinite(normalized)) {
-                return formatCurrency(0, currencyCode);
-            }
-
-            return formatCurrency(normalized / 100, currencyCode);
-        }
-
-        function formatPercentValue(percent) {
-            if (percent === null || percent === undefined) {
-                return '';
-            }
-
-            if (typeof percent === 'number') {
-                if (!Number.isFinite(percent)) {
-                    return '';
-                }
-                return String(percent).replace(/\.0+$/, '').replace(/(\.\d*?[1-9])0+$/, '$1');
-            }
-
-            const raw = String(percent).trim();
-            if (!raw) {
-                return '';
-            }
-
-            const normalized = raw.replace(',', '.').replace(/%+$/, '');
-            const numeric = Number.parseFloat(normalized);
-            if (Number.isFinite(numeric)) {
-                return String(numeric).replace(/\.0+$/, '').replace(/(\.\d*?[1-9])0+$/, '$1');
-            }
-
-            return normalized;
-        }
-
-        function normalizePriceLabelForComparison(label) {
-            if (label === null || label === undefined) {
-                return '';
-            }
-
-            const raw = String(label).trim();
-            if (!raw) {
-                return '';
-            }
-
-            const compact = raw
-                .replace(/[\u00a0\u202f\u2007\u2060]/g, ' ')
-                .replace(/\s+/g, ' ')
-                .trim();
-
-            const numericPortion = compact.replace(/[^0-9.,-]/g, '');
-            if (!numericPortion) {
-                return compact.toLowerCase();
-            }
-
-            const decimalMatch = numericPortion.match(/[.,](\d{1,})$/);
-            let integerPart = numericPortion;
-            let fractionalPart = '';
-
-            if (decimalMatch) {
-                fractionalPart = decimalMatch[1];
-                integerPart = numericPortion.slice(0, decimalMatch.index);
-            }
-
-            integerPart = integerPart.replace(/[.,]/g, '');
-            if (!integerPart) {
-                integerPart = '0';
-            }
-
-            const normalizedInteger = integerPart.replace(/^0+/, '') || '0';
-
-            if (!fractionalPart) {
-                return normalizedInteger;
-            }
-
-            const trimmedFraction = fractionalPart.replace(/0+$/, '');
-            if (!trimmedFraction) {
-                return normalizedInteger;
-            }
-
-            return `${normalizedInteger}.${trimmedFraction}`;
-        }
-
-        function hasActivePriceDiscount(option) {
-            if (!option || typeof option !== 'object') {
-                return false;
-            }
-
-            const percent = coercePositiveInt(
-                option.discountPercent
-                    ?? option.discount_percent
-                    ?? option.discount
-                    ?? null,
-                null,
-            );
-            if (percent !== null && percent > 0) {
-                return true;
-            }
-
-            const priceKopeks = coercePositiveInt(
-                option.priceKopeks
-                    ?? option.price_kopeks
-                    ?? option.price
-                    ?? option.amount_kopeks
-                    ?? option.amountKopeks
-                    ?? null,
-                null,
-            );
-            const originalPriceKopeks = coercePositiveInt(
-                option.originalPriceKopeks
-                    ?? option.original_price_kopeks
-                    ?? option.original_price
-                    ?? option.base_price_kopeks
-                    ?? option.basePriceKopeks
-                    ?? null,
-                null,
-            );
-            if (originalPriceKopeks !== null && priceKopeks !== null) {
-                return originalPriceKopeks > priceKopeks;
-            }
-
-            if (originalPriceKopeks !== null || priceKopeks !== null) {
-                return false;
-            }
-
-            const priceLabel = option.priceLabel ?? option.price_label ?? null;
-            const originalLabel = option.originalPriceLabel
-                ?? option.original_price_label
-                ?? option.base_price_label
-                ?? option.basePriceLabel
-                ?? null;
-
-            if (!originalLabel || !priceLabel) {
-                return false;
-            }
-
-            const normalizedOriginal = normalizePriceLabelForComparison(originalLabel);
-            const normalizedPrice = normalizePriceLabelForComparison(priceLabel);
-
-            if (normalizedOriginal && normalizedPrice) {
-                return normalizedOriginal !== normalizedPrice;
-            }
-
-            return originalLabel.trim() !== priceLabel.trim();
-        }
-
-        function formatDeviceCountLabel(count) {
-            const normalized = coercePositiveInt(count, null);
-            if (normalized === null) {
-                return '';
-            }
-            if (normalized <= 0) {
-                return t('subscription_settings.devices.unlimited');
-            }
-            const key = normalized === 1
-                ? 'subscription_settings.devices.value_one'
-                : 'subscription_settings.devices.value';
-            const template = t(key);
-            if (!template || template === key) {
-                return String(normalized);
-            }
-            return template.replace('{count}', String(normalized));
-        }
-
-        function formatMonthsLabel(months) {
-            const normalized = coercePositiveInt(months, null);
-            if (!normalized) {
-                return '';
-            }
-
-            const language = (preferredLanguage || '').toLowerCase();
-            if (language.startsWith('ru')) {
-                const mod10 = normalized % 10;
-                const mod100 = normalized % 100;
-                let word = 'месяцев';
-                if (mod10 === 1 && mod100 !== 11) {
-                    word = 'месяц';
-                } else if (mod10 >= 2 && mod10 <= 4 && (mod100 < 12 || mod100 > 14)) {
-                    word = 'месяца';
-                }
-                return `${normalized} ${word}`;
-            }
-
-            const key = normalized === 1
-                ? 'subscription_settings.confirm.months.one'
-                : 'subscription_settings.confirm.months.other';
-            const template = t(key);
-            if (!template || template === key) {
-                return normalized === 1
-                    ? `${normalized} month`
-                    : `${normalized} months`;
-            }
-            return template.replace('{count}', String(normalized));
-        }
-
-        async function showConfirmationPopup({ title, message, confirmText, cancelText, destructive = false } = {}) {
-            const fallbackCancel = cancelText || (() => {
-                const cancelValue = t('subscription_settings.confirm.action.cancel');
-                return cancelValue && cancelValue !== 'subscription_settings.confirm.action.cancel'
-                    ? cancelValue
-                    : 'Cancel';
-            })();
-            const fallbackConfirm = confirmText || 'OK';
-            const popupMessage = message && message.trim().length ? message : '';
-
-            if (typeof tg.showPopup === 'function') {
-                const params = {
-                    title: title || undefined,
-                    message: popupMessage || ' ',
-                    buttons: [
-                        { id: 'cancel', type: 'cancel', text: fallbackCancel },
-                        { id: 'confirm', type: destructive ? 'destructive' : 'default', text: fallbackConfirm },
-                    ],
-                };
-
-                try {
-                    const buttonId = await new Promise(resolve => {
-                        let resolved = false;
-                        let timeoutId = null;
-
-                        const finalize = id => {
-                            if (resolved) {
-                                return;
-                            }
-                            resolved = true;
-                            if (timeoutId) {
-                                clearTimeout(timeoutId);
-                            }
-                            if (typeof tg.offEvent === 'function' && typeof popupClosedHandler === 'function') {
-                                tg.offEvent('popupClosed', popupClosedHandler);
-                            }
-                            resolve(id);
-                        };
-
-                        const popupClosedHandler = typeof tg.onEvent === 'function'
-                            ? event => {
-                                const id = event && (event.button_id || event.buttonId || event.id || event);
-                                finalize(id ?? null);
-                            }
-                            : null;
-
-                        if (popupClosedHandler) {
-                            tg.onEvent('popupClosed', popupClosedHandler);
-                        }
-
-                        const callback = id => finalize(id ?? null);
-
-                        try {
-                            if (tg.showPopup.length >= 2) {
-                                tg.showPopup(params, callback);
-                            } else {
-                                const result = tg.showPopup(params);
-                                if (result && typeof result.then === 'function') {
-                                    result
-                                        .then(data => {
-                                            const id = data && (data.button_id || data.buttonId || data.id || data);
-                                            finalize(id ?? null);
-                                        })
-                                        .catch(error => {
-                                            console.error('Popup promise rejected', error);
-                                            finalize(null);
-                                        });
-                                } else if (!popupClosedHandler) {
-                                    // No callback or events available – resolve on next tick to fall back.
-                                    setTimeout(() => finalize(null), 0);
-                                }
-                            }
-                        } catch (error) {
-                            console.error('Failed to show confirmation popup', error);
-                            finalize(null);
-                            return;
-                        }
-
-                        timeoutId = setTimeout(() => finalize(null), 15000);
-                    });
-
-                    if (buttonId === 'confirm') {
-                        return true;
-                    }
-                    if (buttonId) {
-                        return false;
-                    }
-                    // If buttonId is null/undefined fall through to native confirm.
-                } catch (error) {
-                    console.error('Failed to await confirmation popup result', error);
-                }
-            }
-
-            const titlePart = title ? `${title}\n\n` : '';
-            return window.confirm(`${titlePart}${popupMessage || ''}`);
-        }
-
-        async function confirmSubscriptionSettingsChange({
-            lines = [],
-            chargeAmount = 0,
-            currency = 'RUB',
-            months = 0,
-            addTotalLine = true,
-            destructive = false,
-        } = {}) {
-            const normalizedLines = Array.isArray(lines)
-                ? lines.filter(line => typeof line === 'string' && line.trim().length)
-                : [];
-            const hasCharge = typeof chargeAmount === 'number' && chargeAmount > 0;
-            const normalizedMonths = coercePositiveInt(months, null);
-            const effectiveMonths = hasCharge ? (normalizedMonths || 1) : (normalizedMonths || 0);
-
-            if (addTotalLine) {
-                if (hasCharge) {
-                    const amountLabel = formatPriceFromKopeks(chargeAmount, currency);
-                    const periodLabel = effectiveMonths ? formatMonthsLabel(effectiveMonths) : '';
-                    const templateKey = periodLabel
-                        ? 'subscription_settings.confirm.total.charge_period'
-                        : 'subscription_settings.confirm.total.charge';
-                    const template = t(templateKey);
-                    let line;
-                    if (template && template !== templateKey) {
-                        line = template
-                            .replace('{amount}', amountLabel)
-                            .replace('{period}', periodLabel || '');
-                    } else if (periodLabel) {
-                        line = `You will be charged ${amountLabel} for ${periodLabel}.`;
-                    } else {
-                        line = `You will be charged ${amountLabel}.`;
-                    }
-                    normalizedLines.push(line);
-                } else {
-                    const template = t('subscription_settings.confirm.total.free');
-                    normalizedLines.push(
-                        template && template !== 'subscription_settings.confirm.total.free'
-                            ? template
-                            : 'No charges will be made.'
-                    );
-                }
-            }
-
-            const titleKey = hasCharge
-                ? 'subscription_settings.confirm.title.charge'
-                : 'subscription_settings.confirm.title.free';
-            const titleValue = t(titleKey);
-            const title = titleValue && titleValue !== titleKey
-                ? titleValue
-                : (hasCharge ? 'Confirm payment' : 'Confirm changes');
-
-            const confirmKey = hasCharge
-                ? 'subscription_settings.confirm.action.pay'
-                : 'subscription_settings.confirm.action.apply';
-            const confirmValue = t(confirmKey);
-            const confirmText = confirmValue && confirmValue !== confirmKey
-                ? confirmValue
-                : (hasCharge ? 'Pay' : 'Apply');
-
-            const cancelValue = t('subscription_settings.confirm.action.cancel');
-            const cancelText = cancelValue && cancelValue !== 'subscription_settings.confirm.action.cancel'
-                ? cancelValue
-                : 'Cancel';
-
-            const message = normalizedLines.join('\n\n').trim();
-            const fallbackMessage = hasCharge
-                ? `You will be charged ${formatPriceFromKopeks(chargeAmount, currency)}.`
-                : 'No charges will be made.';
-
-            return showConfirmationPopup({
-                title,
-                message: message || fallbackMessage,
-                confirmText,
-                cancelText,
-                destructive,
-            });
-        }
-
-        async function confirmSubscriptionServersUpdate(data, { added = [], removed = [] } = {}) {
-            const currency = data?.currency || userData?.balance_currency || 'RUB';
-            const months = coercePositiveInt(
-                data?.billing?.monthsRemaining
-                ?? data?.billing?.months_remaining
-                ?? data?.billing?.months,
-                null,
-            ) || 1;
-
-            const available = ensureArray(data?.servers?.available);
-            const currentServers = ensureArray(data?.current?.servers);
-            const findOption = uuid => available.find(option => option?.uuid === uuid) || null;
-            const findName = uuid => {
-                const option = findOption(uuid);
-                if (option?.name) {
-                    return option.name;
-                }
-                const current = currentServers.find(server => server?.uuid === uuid);
-                if (current?.name) {
-                    return current.name;
-                }
-                return uuid;
-            };
-
-            let totalCharge = 0;
-            const lines = [];
-
-            if (added.length) {
-                const headerTemplate = t('subscription_settings.confirm.servers.add');
-                lines.push(
-                    headerTemplate && headerTemplate !== 'subscription_settings.confirm.servers.add'
-                        ? headerTemplate
-                        : 'The following servers will be connected:'
-                );
-
-                const details = [];
-                for (const uuid of added) {
-                    const option = findOption(uuid);
-                    const name = findName(uuid);
-                    const monthlyPrice = coercePositiveInt(option?.priceKopeks, 0) || 0;
-                    const charge = monthlyPrice * months;
-                    totalCharge += charge;
-                    if (monthlyPrice > 0) {
-                        const template = t('subscription_settings.confirm.servers.entry_paid');
-                        const formatted = formatPriceFromKopeks(charge, currency);
-                        details.push(
-                            template && template !== 'subscription_settings.confirm.servers.entry_paid'
-                                ? template.replace('{name}', name).replace('{amount}', formatted)
-                                : `• ${name} — ${formatted}`
-                        );
-                    } else {
-                        const template = t('subscription_settings.confirm.servers.entry_free');
-                        const includedLabel = t('subscription_settings.price.included');
-                        const label = includedLabel && includedLabel !== 'subscription_settings.price.included'
-                            ? includedLabel
-                            : 'Included';
-                        details.push(
-                            template && template !== 'subscription_settings.confirm.servers.entry_free'
-                                ? template.replace('{name}', name).replace('{amount}', label)
-                                : `• ${name} — ${label}`
-                        );
-                    }
-                }
-
-                if (details.length) {
-                    lines.push(details.join('\n'));
-                }
-            }
-
-            if (removed.length) {
-                const names = removed.map(findName).filter(Boolean);
-                if (names.length) {
-                    const template = t('subscription_settings.confirm.servers.remove');
-                    if (template && template !== 'subscription_settings.confirm.servers.remove' && template.includes('{list}')) {
-                        lines.push(template.replace('{list}', names.join(', ')));
-                    } else {
-                        const header = template && template !== 'subscription_settings.confirm.servers.remove'
-                            ? template.replace('{list}', '').trim()
-                            : 'The following servers will be disconnected without refunds:';
-                        if (header) {
-                            lines.push(header);
-                        }
-                        lines.push(names.map(name => `• ${name}`).join('\n'));
-                    }
-                }
-            }
-
-            return confirmSubscriptionSettingsChange({
-                lines,
-                chargeAmount: totalCharge,
-                currency,
-                months,
-                destructive: removed.length > 0 && totalCharge === 0,
-            });
-        }
-
-        async function confirmSubscriptionTrafficUpdate(data, currentValue, nextValue) {
-            const currency = data?.currency || userData?.balance_currency || 'RUB';
-            const months = coercePositiveInt(
-                data?.billing?.monthsRemaining
-                ?? data?.billing?.months_remaining
-                ?? data?.billing?.months,
-                null,
-            ) || 1;
-
-            const options = ensureArray(data?.traffic?.options);
-            const findOption = value => options.find(option => Number(option?.value) === Number(value)) || null;
-            const currentOption = findOption(currentValue);
-            const nextOption = findOption(nextValue);
-
-            const currentPrice = coercePositiveInt(currentOption?.priceKopeks, 0) || 0;
-            const nextPrice = coercePositiveInt(nextOption?.priceKopeks, 0) || 0;
-            const priceDiffPerMonth = nextPrice - currentPrice;
-            const chargeAmount = priceDiffPerMonth > 0 ? priceDiffPerMonth * months : 0;
-
-            const valueLabel = (nextOption?.label && nextOption.label.trim().length)
-                ? nextOption.label
-                : formatTrafficLimit(nextValue);
-
-            const lines = [];
-            if (priceDiffPerMonth > 0) {
-                const template = t('subscription_settings.confirm.traffic.increase');
-                lines.push(
-                    template && template !== 'subscription_settings.confirm.traffic.increase'
-                        ? template.replace('{value}', valueLabel)
-                        : `Traffic limit will change to ${valueLabel}.`
-                );
-                return confirmSubscriptionSettingsChange({
-                    lines,
-                    chargeAmount,
-                    currency,
-                    months,
-                });
-            }
-
-            const decreaseTemplate = t('subscription_settings.confirm.traffic.decrease');
-            lines.push(
-                decreaseTemplate && decreaseTemplate !== 'subscription_settings.confirm.traffic.decrease'
-                    ? decreaseTemplate.replace('{value}', valueLabel)
-                    : `Traffic limit will change to ${valueLabel}. No charges apply.`
-            );
-
-            return confirmSubscriptionSettingsChange({
-                lines,
-                chargeAmount: 0,
-                currency,
-                months,
-                addTotalLine: false,
-            });
-        }
-
-        async function confirmSubscriptionDevicesUpdate(data, currentValue, nextValue) {
-            const currency = data?.currency || userData?.balance_currency || 'RUB';
-            const months = coercePositiveInt(
-                data?.billing?.monthsRemaining
-                ?? data?.billing?.months_remaining
-                ?? data?.billing?.months,
-                null,
-            ) || 1;
-
-            const options = ensureArray(data?.devices?.options);
-            const findOption = value => options.find(option => coercePositiveInt(option?.value, null) === value) || null;
-            const currentOption = findOption(currentValue);
-            const nextOption = findOption(nextValue);
-
-            const currentPrice = coercePositiveInt(currentOption?.priceKopeks, 0) || 0;
-            const nextPrice = coercePositiveInt(nextOption?.priceKopeks, 0) || 0;
-            const priceDiffPerMonth = nextPrice - currentPrice;
-            const chargeAmount = priceDiffPerMonth > 0 ? priceDiffPerMonth * months : 0;
-
-            const valueLabel = formatDeviceCountLabel(nextValue);
-
-            const lines = [];
-            if (priceDiffPerMonth > 0) {
-                const template = t('subscription_settings.confirm.devices.increase');
-                lines.push(
-                    template && template !== 'subscription_settings.confirm.devices.increase'
-                        ? template.replace('{value}', valueLabel)
-                        : `Device limit will change to ${valueLabel}.`
-                );
-                return confirmSubscriptionSettingsChange({
-                    lines,
-                    chargeAmount,
-                    currency,
-                    months,
-                });
-            }
-
-            const decreaseTemplate = t('subscription_settings.confirm.devices.decrease');
-            lines.push(
-                decreaseTemplate && decreaseTemplate !== 'subscription_settings.confirm.devices.decrease'
-                    ? decreaseTemplate.replace('{value}', valueLabel)
-                    : `Device limit will change to ${valueLabel}. No charges apply.`
-            );
-
-            return confirmSubscriptionSettingsChange({
-                lines,
-                chargeAmount: 0,
-                currency,
-                months,
-                addTotalLine: false,
-            });
-        }
-
-        function formatDate(value) {
-            if (!value) {
-                return '—';
-            }
-            const date = new Date(value);
-            if (Number.isNaN(date.getTime())) {
-                return '—';
-            }
-            try {
-                return new Intl.DateTimeFormat(preferredLanguage, {
-                    year: 'numeric',
-                    month: 'short',
-                    day: 'numeric',
-                }).format(date);
-            } catch (error) {
-                return date.toLocaleDateString();
-            }
-        }
-
-        function formatDateTime(value) {
-            if (!value) {
-                return '';
-            }
-            const date = new Date(value);
-            if (Number.isNaN(date.getTime())) {
-                return '';
-            }
-            try {
-                return new Intl.DateTimeFormat(preferredLanguage, {
-                    year: 'numeric',
-                    month: 'short',
-                    day: 'numeric',
-                    hour: '2-digit',
-                    minute: '2-digit',
-                }).format(date);
-            } catch (error) {
-                return date.toLocaleString();
-            }
-        }
-
-        function formatLegalUpdatedLabel(value) {
-            const formatted = formatDateTime(value);
-            if (!formatted) {
-                return '';
-            }
-            const template = t('legal.updated_at');
-            if (!template || template === 'legal.updated_at') {
-                return formatted;
-            }
-            if (template.includes('{date}')) {
-                return template.replace('{date}', formatted);
-            }
-            return `${template} ${formatted}`;
-        }
-
-        function renderBalanceSection() {
-            const amountElement = document.getElementById('balanceAmount');
-            const amountElementPayments = document.getElementById('balanceAmountPayments');
-            const balanceRubles = typeof userData?.balance_rubles === 'number'
-                ? userData.balance_rubles
-                : Number.parseFloat(userData?.balance_rubles ?? '0');
-            const currency = (userData?.balance_currency || 'RUB').toUpperCase();
-            const formatted = formatCurrency(balanceRubles, currency);
-
-            if (amountElement) {
-                amountElement.textContent = formatted;
-            }
-            if (amountElementPayments) {
-                amountElementPayments.textContent = formatted;
-            }
-        }
-
-        function renderProfileSection() {
-            const user = userData?.user;
-            if (!user) return;
-
-            // Update profile avatar and username
-            const avatarElement = document.getElementById('profileAvatar');
-            const avatarInitials = document.getElementById('profileAvatarInitials');
-            const usernameElement = document.getElementById('profileUsername');
-            const handleElement = document.getElementById('profileHandle');
-            const telegramIdElement = document.getElementById('profileTelegramId');
-
-            if (avatarInitials && user.username) {
-                const initials = user.username.substring(0, 2).toUpperCase();
-                avatarInitials.textContent = initials;
-            }
-
-            if (usernameElement) {
-                usernameElement.textContent = user.username || user.first_name || 'User';
-            }
-
-            if (handleElement) {
-                const handle = user.username ? `@${user.username}` : '';
-                handleElement.textContent = handle;
-            }
-
-            if (telegramIdElement) {
-                const telegramId = user.telegram_id || user.id || user.user_id || '';
-                telegramIdElement.textContent = String(telegramId);
-            }
-
-            // Update balance and status
-            const balanceStatAmount = document.getElementById('balanceStatAmount');
-            const balanceStatDiscount = document.getElementById('balanceStatDiscount');
-            const balanceStatusText = document.getElementById('balanceStatusText');
-
-            if (balanceStatAmount) {
-            const balanceRubles = typeof userData?.balance_rubles === 'number'
-                ? userData.balance_rubles
-                : Number.parseFloat(userData?.balance_rubles ?? '0');
-            const currency = (userData?.balance_currency || 'RUB').toUpperCase();
-                const formatted = formatCurrency(balanceRubles, currency);
-                balanceStatAmount.textContent = formatted;
-            }
-
-            if (balanceStatDiscount) {
-                const discount = userData?.discount_percent || userData?.discount || 0;
-                balanceStatDiscount.textContent = `${discount}%`;
-            }
-
-            if (balanceStatusText && user.expires_at) {
-                const expiresAt = new Date(user.expires_at);
-                if (!Number.isNaN(expiresAt.getTime())) {
-                    const diffDays = Math.ceil((expiresAt - new Date()) / (1000 * 60 * 60 * 24));
-                    if (diffDays <= 0) {
-                        balanceStatusText.textContent = t('subscription.trial_used');
-                        if (user.trial_used_at) {
-                            const trialUsedAt = new Date(user.trial_used_at);
-                            if (!Number.isNaN(trialUsedAt.getTime())) {
-                                const dateStr = trialUsedAt.toLocaleDateString('ru-RU', { day: '2-digit', month: '2-digit', year: 'numeric' });
-                                balanceStatusText.textContent += ` ${dateStr}`;
-                            }
-                        }
-                    } else {
-                        const dateStr = expiresAt.toLocaleDateString('ru-RU', { day: '2-digit', month: '2-digit', year: 'numeric' });
-                        const template = t('subscription.active_until');
-                        balanceStatusText.textContent = template === 'subscription.active_until'
-                            ? `Подписка активна до ${dateStr}`
-                            : template.replace('{date}', dateStr);
-                    }
-                }
-            }
-        }
-
-        function getTopupElements() {
-            return {
-                backdrop: document.getElementById('topupModal'),
-                title: document.getElementById('topupModalTitle'),
-                subtitle: document.getElementById('topupModalSubtitle'),
-                body: document.getElementById('topupModalBody'),
-                error: document.getElementById('topupModalError'),
-                footer: document.getElementById('topupModalFooter'),
-            };
-        }
-
-        function setTopupModalTitle(key, fallback) {
-            const { title } = getTopupElements();
-            if (!title) {
-                return;
-            }
-            const value = t(key);
-            title.textContent = value === key ? (fallback || key) : value;
-        }
-
-        function setTopupModalSubtitle(key, fallback) {
-            const { subtitle } = getTopupElements();
-            if (!subtitle) {
-                return;
-            }
-            const value = t(key);
-            subtitle.textContent = value === key ? (fallback || key) : value;
-        }
-
-        function setTopupFooter(buttons = []) {
-            const { footer } = getTopupElements();
-            if (!footer) {
-                return;
-            }
-            footer.innerHTML = '';
-            buttons.forEach(config => {
-                const btn = document.createElement('button');
-                btn.type = 'button';
-                btn.className = `modal-button ${config.variant || 'primary'}`;
-                if (config.id) {
-                    btn.id = config.id;
-                }
-                const label = config.labelKey ? t(config.labelKey) : config.label;
-                btn.textContent = label && label !== config.labelKey
-                    ? label
-                    : (config.fallbackLabel || config.labelKey || config.label || '');
-                if (typeof config.onClick === 'function') {
-                    btn.addEventListener('click', config.onClick);
-                }
-                if (config.disabled) {
-                    btn.disabled = true;
-                }
-                footer.appendChild(btn);
-            });
-        }
-
-        function showTopupError(messageKey, fallback) {
-            const { error } = getTopupElements();
-            if (!error) {
-                return;
-            }
-            const message = t(messageKey);
-            error.textContent = message === messageKey ? (fallback || messageKey) : message;
-            error.classList.remove('hidden');
-        }
-
-        function clearTopupError() {
-            const { error } = getTopupElements();
-            if (error) {
-                error.classList.add('hidden');
-                error.textContent = '';
-            }
-        }
-
-        async function loadPaymentMethods(force = false) {
-            if (!force && paymentMethodsCache) {
-                return paymentMethodsCache;
-            }
-            if (!force && paymentMethodsPromise) {
-                return paymentMethodsPromise;
-            }
-
-            const initData = tg.initData || '';
-            if (!initData) {
-                throw new Error('Missing init data');
-            }
-
-            paymentMethodsPromise = fetch('/miniapp/payments/methods', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ initData }),
-            }).then(async response => {
-                if (!response.ok) {
-                    const payload = await response.json().catch(() => ({}));
-                    const detail = payload?.detail;
-                    throw new Error(typeof detail === 'string' ? detail : 'Failed to load payment methods');
-                }
-                const data = await response.json().catch(() => ({}));
-                return Array.isArray(data?.methods) ? data.methods : [];
-            }).finally(() => {
-                paymentMethodsPromise = null;
-            });
-
-            try {
-                paymentMethodsCache = await paymentMethodsPromise;
-            } catch (error) {
-                paymentMethodsCache = null;
-                throw error;
-            }
-
-            return paymentMethodsCache;
-        }
-
-        function openTopupModal() {
-            const { backdrop } = getTopupElements();
-            if (!backdrop) {
-                return;
-            }
-            backdrop.classList.remove('hidden');
-            document.body.classList.add('modal-open');
-            renderTopupMethodsView();
-        }
-
-        function closeTopupModal() {
-            const { backdrop } = getTopupElements();
-            if (backdrop) {
-                backdrop.classList.add('hidden');
-            }
-            document.body.classList.remove('modal-open');
-            activePaymentMethod = null;
-            stopAllPaymentMonitors();
-            clearTopupError();
-        }
-
-        function renderTopupLoading(messageKey = 'topup.loading') {
-            const { body } = getTopupElements();
-            if (!body) {
-                return;
-            }
-            body.innerHTML = '';
-            const loadingText = document.createElement('div');
-            loadingText.className = 'amount-hint';
-            const text = t(messageKey);
-            loadingText.textContent = text === messageKey ? 'Loading…' : text;
-            body.appendChild(loadingText);
-        }
-
-        async function renderTopupMethodsView() {
-            activePaymentMethod = null;
-            stopAllPaymentMonitors();
-            clearTopupError();
-            setTopupModalTitle('topup.title', 'Top up balance');
-            setTopupModalSubtitle('topup.subtitle', 'Choose a payment method');
-            setTopupFooter([
-                {
-                    labelKey: 'topup.cancel',
-                    fallbackLabel: 'Close',
-                    variant: 'secondary',
-                    onClick: closeTopupModal,
-                },
-            ]);
-
-            try {
-                renderTopupLoading('topup.loading');
-                const methods = await loadPaymentMethods();
-                const { body } = getTopupElements();
-                if (!body) {
-                    return;
-                }
-                body.innerHTML = '';
-
-                if (!methods.length) {
-                    const empty = document.createElement('div');
-                    empty.className = 'amount-hint';
-                    const message = t('topup.error.unavailable');
-                    empty.textContent = message === 'topup.error.unavailable'
-                        ? 'Payment methods are temporarily unavailable.'
-                        : message;
-                    body.appendChild(empty);
-                    return;
-                }
-
-                const list = document.createElement('div');
-                list.className = 'payment-methods-list';
-
-                methods.forEach(method => {
-                    const card = createPaymentMethodCard(method);
-                    if (card) {
-                        list.appendChild(card);
-                    }
-                });
-
-                body.appendChild(list);
-            } catch (error) {
-                console.error('Failed to load payment methods:', error);
-                const { body } = getTopupElements();
-                if (!body) {
-                    return;
-                }
-                body.innerHTML = '';
-                const errorMessage = document.createElement('div');
-                errorMessage.className = 'amount-hint';
-                const text = t('topup.error.unavailable');
-                errorMessage.textContent = text === 'topup.error.unavailable'
-                    ? 'Payment methods are temporarily unavailable.'
-                    : text;
-                body.appendChild(errorMessage);
-            }
-        }
-
-        function createPaymentMethodCard(method) {
-            if (!method || !method.id) {
-                return null;
-            }
-            const button = document.createElement('button');
-            button.type = 'button';
-            button.className = 'payment-method-card';
-            button.dataset.methodId = method.id;
-
-            const info = document.createElement('div');
-            info.className = 'payment-method-info';
-
-            const icon = document.createElement('div');
-            icon.className = 'payment-method-icon';
-
-            // Use logos for specific payment methods
-            if (method.id === 'yookassa' || method.id === 'yookassa_sbp') {
-                // YooKassa logo
-                const img = document.createElement('img');
-                img.src = 'https://logo-teka.com/wp-content/uploads/2025/07/yookassa-sign-logo.svg';
-                img.alt = 'YooKassa';
-                img.style.width = '40px';
-                img.style.height = '40px';
-                img.style.objectFit = 'contain';
-                icon.appendChild(img);
-            } else if (method.id === 'platega') {
-                // Platega.io logo - different for light and dark themes
-                const img = document.createElement('img');
-                const currentTheme = document.documentElement.getAttribute('data-theme') || 'dark';
-                img.src = currentTheme === 'light'
-                    ? 'https://my.platega.io/dark-logo.svg'
-                    : 'https://static.tildacdn.one/tild3832-6339-4966-b965-346339626465/fd.svg';
-                img.alt = 'Platega.io';
-                img.style.width = '40px';
-                img.style.height = '40px';
-                img.style.objectFit = 'contain';
-                icon.appendChild(img);
-            } else {
-                icon.textContent = method.icon || '💳';
-            }
-
-            const textContainer = document.createElement('div');
-            textContainer.className = 'payment-method-text';
-
-            const label = document.createElement('div');
-            label.className = 'payment-method-label';
-            // Используем name из API если есть, иначе локализацию
-            if (method.name) {
-                label.textContent = method.name;
-            } else {
-                const labelKey = `topup.method.${method.id}.title`;
-                const labelValue = t(labelKey);
-                label.textContent = labelValue === labelKey ? method.id : labelValue;
-            }
-
-            const description = document.createElement('div');
-            description.className = 'payment-method-description';
-            const descriptionKey = `topup.method.${method.id}.description`;
-            const descriptionValue = t(descriptionKey);
-            if (descriptionValue && descriptionValue !== descriptionKey) {
-                description.textContent = descriptionValue;
-                textContainer.appendChild(description);
-            }
-
-            textContainer.insertBefore(label, textContainer.firstChild);
-
-            info.appendChild(icon);
-            info.appendChild(textContainer);
-            button.appendChild(info);
-
-            button.addEventListener('click', () => handlePaymentMethodSelection(method));
-
-            return button;
-        }
-
-        function handlePaymentMethodSelection(method) {
-            if (!method) {
-                return;
-            }
-            if (method.requires_amount) {
-                renderTopupAmountForm(method, { selectedOption: paymentMethodSelections[method.id] });
-            } else {
-                startPaymentForMethod(method);
-            }
-        }
-
-        function renderTopupAmountForm(method, options = {}) {
-            activePaymentMethod = method;
-            stopAllPaymentMonitors();
-            clearTopupError();
-            setTopupModalTitle('topup.amount.title', 'Enter amount');
-            setTopupModalSubtitle('topup.amount.subtitle', 'Specify how much you want to top up');
-
-            const { body } = getTopupElements();
-            if (!body) {
-                return;
-            }
-
-            body.innerHTML = '';
-            const form = document.createElement('form');
-            form.className = 'amount-form';
-            form.id = 'topupAmountForm';
-
-            const currency = (method.currency || userData?.balance_currency || 'RUB').toUpperCase();
-
-            const input = document.createElement('input');
-            input.type = 'text';
-            input.id = 'topupAmountInput';
-            input.className = 'amount-input';
-            input.autocomplete = 'off';
-            input.inputMode = 'decimal';
-            input.placeholder = (t('topup.amount.placeholder') || 'Amount').replace('{currency}', currency);
-
-            form.appendChild(input);
-
-            const hint = document.createElement('div');
-            hint.className = 'amount-hint';
-            const limitsText = buildAmountHint(method, currency);
-            if (limitsText) {
-                hint.textContent = limitsText;
-                form.appendChild(hint);
-            }
-
-            const providedOptions = Array.isArray(method.options) ? method.options : [];
-            const fallbackOptions = method.id === 'pal24'
-                ? [
-                    {
-                        id: 'sbp',
-                        icon: '🏦',
-                        titleKey: 'topup.method.pal24.option.sbp.title',
-                        descriptionKey: 'topup.method.pal24.option.sbp.description',
-                        title: 'Faster Payments (SBP)',
-                        description: 'Instant SBP transfer with no fees.',
-                    },
-                    {
-                        id: 'card',
-                        icon: '💳',
-                        titleKey: 'topup.method.pal24.option.card.title',
-                        descriptionKey: 'topup.method.pal24.option.card.description',
-                        title: 'Bank card',
-                        description: 'Pay with a bank card via PayPalych.',
-                    },
-                ]
-                : [];
-
-            const optionsConfig = (providedOptions.length ? providedOptions : fallbackOptions).map(option => ({
-                id: String(option.id),
-                icon: option.icon || '💳',
-                titleKey: option.titleKey || option.title_key || option.titlekey,
-                descriptionKey: option.descriptionKey || option.description_key || option.descriptionkey,
-                fallbackTitle: option.title || option.name || String(option.id),
-                fallbackDescription: option.description || '',
-            }));
-
-            if (optionsConfig.length) {
-                const defaultSelection = options.selectedOption
-                    || paymentMethodSelections[method.id]
-                    || optionsConfig[0]?.id;
-                let currentOption = optionsConfig.some(option => option.id === defaultSelection)
-                    ? defaultSelection
-                    : optionsConfig[0]?.id;
-                paymentMethodSelections[method.id] = currentOption;
-                form.dataset.paymentOption = currentOption;
-
-                const optionGroup = document.createElement('div');
-                optionGroup.className = 'payment-option-group';
-
-                const optionTitle = document.createElement('div');
-                optionTitle.className = 'payment-option-title';
-                const titleKey = `topup.method.${method.id}.title`;
-                const titleValue = t(titleKey);
-                optionTitle.textContent = titleValue === titleKey ? 'Choose payment type' : titleValue;
-                optionGroup.appendChild(optionTitle);
-
-                const optionList = document.createElement('div');
-                optionList.className = 'payment-option-list';
-
-                optionsConfig.forEach(config => {
-                    const button = document.createElement('button');
-                    button.type = 'button';
-                    button.className = 'payment-option-button';
-                    button.dataset.optionId = config.id;
-                    if (config.id === currentOption) {
-                        button.classList.add('active');
-                    }
-
-                    const icon = document.createElement('div');
-                    icon.className = 'payment-option-icon';
-                    icon.textContent = config.icon;
-
-                    const text = document.createElement('div');
-                    text.className = 'payment-option-text';
-
-                    const label = document.createElement('div');
-                    label.className = 'payment-option-label';
-                    const labelValue = config.titleKey ? t(config.titleKey) : config.fallbackTitle;
-                    label.textContent = labelValue && labelValue !== config.titleKey
-                        ? labelValue
-                        : config.fallbackTitle;
-
-                    const description = document.createElement('div');
-                    description.className = 'payment-option-description';
-                    const descriptionValue = config.descriptionKey ? t(config.descriptionKey) : config.fallbackDescription;
-                    const finalDescription = descriptionValue && descriptionValue !== config.descriptionKey
-                        ? descriptionValue
-                        : config.fallbackDescription;
-                    if (finalDescription) {
-                        description.textContent = finalDescription;
-                        text.appendChild(description);
-                    }
-
-                    text.appendChild(label);
-                    button.appendChild(icon);
-                    button.appendChild(text);
-
-                    button.addEventListener('click', () => {
-                        currentOption = config.id;
-                        paymentMethodSelections[method.id] = currentOption;
-                        form.dataset.paymentOption = currentOption;
-                        optionList.querySelectorAll('.payment-option-button').forEach(btn => {
-                            btn.classList.toggle('active', btn.dataset.optionId === currentOption);
-                        });
-                    });
-
-                    optionList.appendChild(button);
-                });
-
-                optionGroup.appendChild(optionList);
-                form.appendChild(optionGroup);
-            } else {
-                delete form.dataset.paymentOption;
-            }
-
-            form.addEventListener('submit', event => {
-                event.preventDefault();
-                submitTopupAmount(method);
-            });
-
-            body.appendChild(form);
-
-            if (options.rawInput) {
-                input.value = options.rawInput;
-            }
-
-            setTopupFooter([
-                {
-                    labelKey: 'topup.back',
-                    fallbackLabel: 'Back',
-                    variant: 'secondary',
-                    onClick: renderTopupMethodsView,
-                },
-                {
-                    labelKey: 'topup.submit',
-                    fallbackLabel: 'Continue',
-                    variant: 'primary',
-                    id: 'topupSubmitButton',
-                    onClick: () => submitTopupAmount(method),
-                },
-            ]);
-
-            input.focus({ preventScroll: true });
-        }
-
-        function buildAmountHint(method, currency) {
-            const min = Number.isFinite(method?.min_amount_kopeks)
-                ? method.min_amount_kopeks
-                : null;
-            const max = Number.isFinite(method?.max_amount_kopeks)
-                ? method.max_amount_kopeks
-                : null;
-
-            if (min && max) {
-                const template = t('topup.amount.hint.range');
-                const minLabel = formatCurrency(min / 100, currency);
-                const maxLabel = formatCurrency(max / 100, currency);
-                if (template && template !== 'topup.amount.hint.range') {
-                    return template.replace('{min}', minLabel).replace('{max}', maxLabel);
-                }
-                return `Available range: ${minLabel} — ${maxLabel}`;
-            }
-            if (min) {
-                const template = t('topup.amount.hint.single_min');
-                const minLabel = formatCurrency(min / 100, currency);
-                if (template && template !== 'topup.amount.hint.single_min') {
-                    return template.replace('{min}', minLabel);
-                }
-                return `Minimum top-up: ${minLabel}`;
-            }
-            if (max) {
-                const template = t('topup.amount.hint.single_max');
-                const maxLabel = formatCurrency(max / 100, currency);
-                if (template && template !== 'topup.amount.hint.single_max') {
-                    return template.replace('{max}', maxLabel);
-                }
-                return `Maximum top-up: ${maxLabel}`;
-            }
-            return '';
-        }
-
-        function parseAmountInput(value) {
-            if (typeof value !== 'string') {
-                return NaN;
-            }
-            const normalized = value.replace(',', '.').replace(/[^0-9.]/g, '');
-            return Number.parseFloat(normalized);
-        }
-
-        async function submitTopupAmount(method) {
-            const input = document.getElementById('topupAmountInput');
-            if (!input) {
-                return;
-            }
-            const rawValue = input.value.trim();
-            const numeric = parseAmountInput(rawValue);
-            if (!Number.isFinite(numeric) || numeric <= 0) {
-                showTopupError('topup.error.amount', 'Enter a valid amount.');
-                input.focus({ preventScroll: true });
-                return;
-            }
-
-            const amountKopeks = Math.round(numeric * 100);
-            const min = Number.isFinite(method?.min_amount_kopeks) ? method.min_amount_kopeks : null;
-            const max = Number.isFinite(method?.max_amount_kopeks) ? method.max_amount_kopeks : null;
-
-            if ((min && amountKopeks < min) || (max && amountKopeks > max)) {
-                showTopupError('topup.error.amount', 'Enter a valid amount.');
-                input.focus({ preventScroll: true });
-                return;
-            }
-
-            clearTopupError();
-            const form = document.getElementById('topupAmountForm');
-            const providerOption = form?.dataset?.paymentOption || paymentMethodSelections[method.id] || null;
-            await startPaymentForMethod(method, amountKopeks, {
-                rawInput: rawValue,
-                providerOption,
-            });
-        }
-
-        async function startPaymentForMethod(method, amountKopeks = null, options = {}) {
-            clearTopupError();
-            renderTopupLoading();
-
-            const footerButtons = [];
-            if (method?.requires_amount) {
-                footerButtons.push({
-                    labelKey: 'topup.back',
-                    fallbackLabel: 'Back',
-                    variant: 'secondary',
-                    onClick: renderTopupMethodsView,
-                });
-            }
-            footerButtons.push({
-                labelKey: 'topup.cancel',
-                fallbackLabel: 'Close',
-                variant: 'secondary',
-                onClick: closeTopupModal,
-            });
-            setTopupFooter(footerButtons);
-
-            const initData = tg.initData || '';
-            if (!initData) {
-                showTopupError('topup.error.generic', 'Unable to start payment.');
-                if (method?.requires_amount) {
-                    renderTopupAmountForm(method, {
-                        rawInput: options.rawInput,
-                        selectedOption: options.providerOption || paymentMethodSelections[method?.id],
-                    });
-                    const input = document.getElementById('topupAmountInput');
-                    if (input && options.rawInput) {
-                        input.value = options.rawInput;
-                    }
-                }
-                return;
-            }
-
-            const payload = {
-                initData,
-                method: method.id,
-            };
-            if (Number.isFinite(amountKopeks) && amountKopeks > 0) {
-                payload.amountKopeks = amountKopeks;
-            }
-            if (options.providerOption) {
-                payload.option = options.providerOption;
-            }
-
-            try {
-                const response = await fetch('/miniapp/payments/create', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify(payload),
-                });
-
-                const data = await response.json().catch(() => ({}));
-
-                if (!response.ok) {
-                    const detail = data?.detail;
-                    const message = typeof detail === 'string' ? detail : null;
-                    throw new Error(message || 'Failed to create payment');
-                }
-
-                const paymentUrl = data?.payment_url;
-                if (!paymentUrl) {
-                    throw new Error('Payment link is missing');
-                }
-
-                renderTopupPaymentLink(
-                    method,
-                    paymentUrl,
-                    data?.amount_kopeks ?? amountKopeks,
-                    data?.extra || {},
-                    {
-                        rawInput: options.rawInput,
-                        providerOption: options.providerOption,
-                    },
-                );
-            } catch (error) {
-                console.error('Failed to create payment:', error);
-                if (method?.requires_amount) {
-                    renderTopupAmountForm(method, {
-                        rawInput: options.rawInput,
-                        selectedOption: options.providerOption || paymentMethodSelections[method?.id],
-                    });
-                    const input = document.getElementById('topupAmountInput');
-                    if (input && options.rawInput) {
-                        input.value = options.rawInput;
-                    }
-                    showTopupError('topup.error.generic', error?.message || 'Unable to start payment.');
-                } else {
-                    await renderTopupMethodsView();
-                    showTopupError('topup.error.generic', error?.message || 'Unable to start payment.');
-                }
-            }
-        }
-
-        function renderTopupPaymentLink(method, paymentUrl, amountKopeks, extra = {}, options = {}) {
-            stopAllPaymentMonitors();
-            clearTopupError();
-            setTopupModalTitle('topup.title', 'Top up balance');
-
-            const { body } = getTopupElements();
-            if (!body) {
-                return;
-            }
-
-            const normalizedAmount = Number.isFinite(amountKopeks) ? Number(amountKopeks) : null;
-            const monitorExtra = { ...extra };
-
-            const methodOptions = Array.isArray(method.options) ? method.options : [];
-            const optionsMap = methodOptions.reduce((map, item) => {
-                const key = String(item.id);
-                map[key] = item;
-                return map;
-            }, {});
-
-            let option = null;
-            if (methodOptions.length) {
-                option = (options.providerOption || monitorExtra.selected_option || paymentMethodSelections[method.id] || methodOptions[0]?.id || '').toString();
-                paymentMethodSelections[method.id] = option;
-                monitorExtra.selected_option = option;
-            } else if (method.id === 'pal24') {
-                option = (options.providerOption || monitorExtra.selected_option || paymentMethodSelections[method.id] || 'sbp').toLowerCase();
-                if (!['card', 'sbp'].includes(option)) {
-                    option = 'sbp';
-                }
-                paymentMethodSelections[method.id] = option;
-                monitorExtra.selected_option = option;
-            }
-
-            const selectedOption = option && (optionsMap[option] || optionsMap[String(option)]);
-            const optionTitleKey = selectedOption?.titleKey || selectedOption?.title_key;
-            const optionTitleFallback = selectedOption?.title || selectedOption?.name || option || method.id;
-            const titleKey = selectedOption && optionTitleKey
-                ? optionTitleKey
-                : option
-                    ? `topup.method.${method.id}.option.${option}.title`
-                    : `topup.method.${method.id}.title`;
-            const titleFallback = selectedOption
-                ? optionTitleFallback
-                : method.id === 'pal24'
-                    ? (option === 'card' ? 'Bank card payment' : 'Faster Payments (SBP)')
-                    : method.id;
-            setTopupModalSubtitle(titleKey, titleFallback);
-
-            body.innerHTML = '';
-            const summary = document.createElement('div');
-            summary.className = 'payment-summary';
-
-            const titleValue = t(titleKey);
-            const title = document.createElement('div');
-            title.className = 'payment-method-label';
-            title.textContent = titleValue && titleValue !== titleKey ? titleValue : titleFallback;
-            summary.appendChild(title);
-
-            if (normalizedAmount && normalizedAmount > 0) {
-                const amount = document.createElement('div');
-                amount.className = 'payment-summary-amount';
-                const currency = (method.currency || userData?.balance_currency || 'RUB').toUpperCase();
-                amount.textContent = formatCurrency(normalizedAmount / 100, currency);
-                summary.appendChild(amount);
-
-                if (method.id === 'stars') {
-                    const starsAmount = Number.isFinite(monitorExtra?.stars_amount)
-                        ? Number(monitorExtra.stars_amount)
-                        : null;
-                    const requestedAmount = Number.isFinite(monitorExtra?.requested_amount_kopeks)
-                        ? Number(monitorExtra.requested_amount_kopeks)
-                        : null;
-
-                    if (starsAmount && starsAmount > 0) {
-                        const template = t('topup.method.stars.invoice_hint');
-                        const replacement = template && template !== 'topup.method.stars.invoice_hint'
-                            ? template.replace('{stars}', String(starsAmount))
-                            : `${starsAmount} ⭐`;
-                        const hint = document.createElement('div');
-                        hint.className = 'amount-hint';
-                        hint.textContent = replacement;
-                        summary.appendChild(hint);
-                    }
-
-                    if (
-                        requestedAmount &&
-                        requestedAmount > 0 &&
-                        requestedAmount !== normalizedAmount
-                    ) {
-                        const template = t('topup.method.stars.adjusted');
-                        const requestedLabel = formatCurrency(requestedAmount / 100, currency);
-                        const normalizedLabel = formatCurrency(normalizedAmount / 100, currency);
-                        let replacement = template;
-                        if (replacement && replacement !== 'topup.method.stars.adjusted') {
-                            replacement = replacement
-                                .replace('{requested}', requestedLabel)
-                                .replace('{amount}', normalizedLabel)
-                                .replace('{stars}', String(starsAmount ?? ''));
-                        } else {
-                            replacement = `Requested ${requestedLabel}, invoice ${normalizedLabel}`;
-                        }
-                        const hint = document.createElement('div');
-                        hint.className = 'amount-hint warning';
-                        hint.textContent = replacement;
-                        summary.appendChild(hint);
-                    }
-                }
-            }
-
-            if (Number.isFinite(monitorExtra?.amount_usd) && monitorExtra.amount_usd > 0) {
-                const usdAmount = document.createElement('div');
-                usdAmount.className = 'amount-hint';
-                usdAmount.textContent = `≈ ${formatCurrency(monitorExtra.amount_usd, 'USD')}`;
-                summary.appendChild(usdAmount);
-            }
-
-            const descriptionKey = option
-                ? `topup.method.${method.id}.option.${option}.description`
-                : `topup.method.${method.id}.description`;
-            const descriptionValue = t(descriptionKey);
-            if (descriptionValue && descriptionValue !== descriptionKey) {
-                const description = document.createElement('div');
-                description.className = 'amount-hint';
-                description.textContent = descriptionValue;
-                summary.appendChild(description);
-            }
-
-            body.appendChild(summary);
-
-            let effectiveUrl = paymentUrl;
-            if (method.id === 'pal24') {
-                const urls = [];
-                if (option === 'sbp') {
-                    urls.push(monitorExtra.sbp_url, monitorExtra.transfer_url);
-                }
-                if (option === 'card') {
-                    urls.push(monitorExtra.card_url);
-                }
-                urls.push(
-                    monitorExtra.link_url,
-                    monitorExtra.link_page_url,
-                    monitorExtra.transfer_url,
-                    paymentUrl,
-                );
-                effectiveUrl = urls.find(url => typeof url === 'string' && url.length) || paymentUrl;
-            }
-
-            const statusView = createPaymentStatusView();
-            body.appendChild(statusView.element);
-            updatePaymentStatusView(statusView, { state: 'pending' });
-
-            startPaymentStatusMonitor({
-                method,
-                amountKopeks: normalizedAmount,
-                extra: monitorExtra,
-                statusView,
-                paymentUrl: effectiveUrl,
-                originalUrl: paymentUrl,
-                rawInput: options.rawInput || null,
-                option,
-            });
-        }
-
-        function updateReferralToggleState() {
-            const list = document.getElementById('referralList');
-            const empty = document.getElementById('referralListEmpty');
-            const toggle = document.getElementById('referralToggleBtn');
-            const hasItems = Boolean(list && list.childElementCount);
-            const shouldShowList = hasItems && referralListExpanded;
-            const shouldShowEmpty = !hasItems && referralListExpanded;
-
-            if (list) {
-                list.classList.toggle('hidden', !shouldShowList);
-            }
-            if (empty) {
-                empty.classList.toggle('hidden', !shouldShowEmpty);
-            }
-            if (toggle) {
-                const labelKey = referralListExpanded ? 'referral.toggle.close' : 'referral.toggle.open';
-                const label = t(labelKey);
-                toggle.textContent = label === labelKey ? (referralListExpanded ? 'Hide referrals' : 'My referrals') : label;
-                toggle.disabled = false;
-            }
-        }
-
-        function renderReferralSection() {
-            const card = document.getElementById('referralCard');
-            const content = document.getElementById('referralContent');
-            const emptyState = document.getElementById('referralEmpty');
-            const data = userData?.referral;
-            const summaryContainer = document.getElementById('referralCardSummary');
-            const summaryInvited = document.getElementById('referralSummaryInvited');
-            const summaryEarned = document.getElementById('referralSummaryEarned');
-
-            if (!card || !content || !emptyState) {
-                return;
-            }
-
-            referralListExpanded = false;
-            if (referralCopyResetHandle) {
-                clearTimeout(referralCopyResetHandle);
-                referralCopyResetHandle = null;
-            }
-
-            const copyBtn = document.getElementById('referralCopyBtn');
-            if (copyBtn) {
-                copyBtn.disabled = !navigator.clipboard;
-                copyBtn.dataset.copyValue = '';
-                copyBtn.textContent = t('referral.link.copy');
-            }
-
-            if (summaryContainer && summaryInvited && summaryEarned) {
-                summaryContainer.classList.add('hidden');
-                summaryInvited.textContent = '0';
-                summaryEarned.textContent = '—';
-            }
-
-            if (!data) {
-                content.classList.add('hidden');
-                emptyState.classList.remove('hidden');
-                emptyState.textContent = t('referral.empty');
-                updateReferralToggleState();
-                card.classList.remove('hidden');
-                return;
-            }
-
-            emptyState.classList.add('hidden');
-            content.classList.remove('hidden');
-            card.classList.remove('hidden');
-
-            const linkValue = document.getElementById('referralLinkValue');
-            const link = data.referral_link || '';
-            const code = data.referral_code || '';
-            let copyTarget = '';
-            if (link) {
-                copyTarget = link;
-            } else if (code) {
-                copyTarget = code;
-            }
-            if (linkValue) {
-                linkValue.textContent = copyTarget || '—';
-            }
-            if (copyBtn) {
-                copyBtn.disabled = !navigator.clipboard || !copyTarget;
-                copyBtn.dataset.copyValue = copyTarget;
-                copyBtn.textContent = t('referral.link.copy');
-            }
-
-            const statsData = data.stats || null;
-            const statsContainer = document.getElementById('referralStats');
-            if (statsContainer) {
-                statsContainer.innerHTML = '';
-                const stats = statsData || {};
-                const entries = [
-                    { key: 'invited_count', label: 'referral.stats.invited', formatter: value => String(value ?? 0) },
-                    { key: 'active_referrals_count', label: 'referral.stats.active', formatter: value => String(value ?? 0) },
-                    { key: 'paid_referrals_count', label: 'referral.stats.paid', formatter: value => String(value ?? 0) },
-                    {
-                        key: 'total_earned_label',
-                        label: 'referral.stats.total',
-                        formatter: (_, full) => full.total_earned_label
-                            || formatPriceFromKopeks(full.total_earned_kopeks || 0),
-                    },
-                    {
-                        key: 'month_earned_label',
-                        label: 'referral.stats.month',
-                        formatter: (_, full) => full.month_earned_label
-                            || formatPriceFromKopeks(full.month_earned_kopeks || 0),
-                    },
-                    {
-                        key: 'conversion_rate',
-                        label: 'referral.stats.conversion',
-                        formatter: value => `${Number.parseFloat(value ?? 0).toFixed(1)}%`,
-                    },
-                ];
-
-                entries.forEach(entry => {
-                    const { key, label, formatter } = entry;
-                    const rawValue = key === 'total_earned_label' || key === 'month_earned_label'
-                        ? stats
-                        : stats[key];
-                    const hasValue = key === 'total_earned_label' || key === 'month_earned_label'
-                        ? Boolean((stats[key] ?? stats[key.replace('_label', '_kopeks')]) !== undefined)
-                        : rawValue !== undefined && rawValue !== null;
-                    if (!hasValue) {
-                        if (key === 'conversion_rate') {
-                            // Show conversion even if zero
-                        } else if (key === 'total_earned_label' || key === 'month_earned_label') {
-                            // always display totals
-                        } else {
-                            return;
-                        }
-                    }
-                    const cardElement = document.createElement('div');
-                    cardElement.className = 'referral-stat-card';
-
-                    const labelElement = document.createElement('span');
-                    labelElement.className = 'referral-stat-label';
-                    labelElement.textContent = t(label);
-
-                    const valueElement = document.createElement('span');
-                    valueElement.className = 'referral-stat-value';
-                    const formatted = formatter(rawValue, stats);
-                    valueElement.textContent = formatted;
-
-                    cardElement.appendChild(labelElement);
-                    cardElement.appendChild(valueElement);
-                    statsContainer.appendChild(cardElement);
-                });
-            }
-
-            if (summaryContainer && summaryInvited && summaryEarned) {
-                if (statsData) {
-                    summaryInvited.textContent = String(statsData.invited_count ?? 0);
-                    const totalLabel = statsData.total_earned_label
-                        || formatPriceFromKopeks(statsData.total_earned_kopeks || 0);
-                    summaryEarned.textContent = totalLabel;
-                    summaryContainer.classList.remove('hidden');
-                } else {
-                    summaryContainer.classList.add('hidden');
-                }
-            }
-
-            const termsList = document.getElementById('referralTermsList');
-            if (termsList) {
-                termsList.innerHTML = '';
-                const terms = data.terms || {};
-                const entries = [
-                    { label: 'referral.terms.minimum_topup', value: terms.minimum_topup_label },
-                    { label: 'referral.terms.first_topup', value: terms.first_topup_bonus_label },
-                    { label: 'referral.terms.inviter_bonus', value: terms.inviter_bonus_label },
-                    {
-                        label: 'referral.terms.commission',
-                        value: `${Number.parseFloat(terms.commission_percent ?? 0).toFixed(1).replace(/\.0$/, '')}%`,
-                    },
-                ];
-
-                entries
-                    .filter(entry => entry.value !== undefined && entry.value !== null)
-                    .forEach(entry => {
-                        const item = document.createElement('li');
-                        item.className = 'referral-term-item';
-
-                        const label = document.createElement('span');
-                        label.className = 'referral-term-label';
-                        const labelKey = t(entry.label);
-                        label.textContent = labelKey === entry.label ? entry.label : labelKey;
-
-                        const value = document.createElement('span');
-                        value.className = 'referral-term-value';
-                        value.textContent = entry.value;
-
-                        item.appendChild(label);
-                        item.appendChild(value);
-                        termsList.appendChild(item);
-                    });
-            }
-
-            const list = document.getElementById('referralList');
-            const emptyListState = document.getElementById('referralListEmpty');
-            if (list && emptyListState) {
-                list.innerHTML = '';
-                const referrals = Array.isArray(data?.referrals?.items) ? data.referrals.items : [];
-                referrals.forEach(referral => {
-                    const item = document.createElement('li');
-                    item.className = 'referral-item';
-
-                    const header = document.createElement('div');
-                    header.className = 'referral-item-header';
-
-                    const displayName = referral.full_name
-                        || referral.username
-                        || (referral.telegram_id ? `ID ${referral.telegram_id}` : t('referral.referrals.unknown'));
-                    const titleWrapper = document.createElement('div');
-                    titleWrapper.className = 'referral-item-name';
-                    titleWrapper.textContent = displayName;
-
-                    const statusBadge = document.createElement('span');
-                    const status = (referral.status || '').toLowerCase();
-                    let statusKey = `referral.status.${status}`;
-                    if (!status || !t(statusKey) || t(statusKey) === statusKey) {
-                        if (referral.has_made_first_topup) {
-                            statusKey = 'referral.status.paying';
-                        } else if (status === 'active') {
-                            statusKey = 'referral.status.active';
-                        } else {
-                            statusKey = 'referral.status.inactive';
-                        }
-                    }
-                    const resolved = t(statusKey);
-                    statusBadge.textContent = resolved === statusKey ? statusKey.split('.').pop() : resolved;
-                    statusBadge.className = 'referral-status';
-                    const statusText = statusBadge.textContent?.toLowerCase() || '';
-                    if (statusText.includes('inactive') || statusText.includes('неактив')) {
-                        statusBadge.classList.remove('active');
-                        statusBadge.classList.add('inactive');
-                    } else if (statusText.includes('active') || statusText.includes('актив')) {
-                        statusBadge.classList.add('active');
-                    } else if (statusKey === 'referral.status.paying') {
-                        statusBadge.classList.add('new');
-                    }
-
-                    header.appendChild(titleWrapper);
-                    header.appendChild(statusBadge);
-                    item.appendChild(header);
-
-                    if (referral.username && referral.username !== displayName) {
-                        const username = document.createElement('div');
-                        username.className = 'referral-item-username';
-                        username.textContent = `@${referral.username.replace(/^@/, '')}`;
-                        item.appendChild(username);
-                    }
-
-                    const metrics = document.createElement('div');
-                    metrics.className = 'referral-item-grid';
-
-                    const earnedMetric = document.createElement('div');
-                    earnedMetric.className = 'referral-item-metric';
-                    const earnedLabel = document.createElement('span');
-                    earnedLabel.className = 'referral-item-label';
-                    earnedLabel.textContent = t('referral.meta.earned');
-                    const earnedValue = document.createElement('span');
-                    earnedValue.className = 'referral-item-value';
-                    earnedValue.textContent = referral.total_earned_label
-                        || formatPriceFromKopeks(referral.total_earned_kopeks || 0);
-                    earnedMetric.appendChild(earnedLabel);
-                    earnedMetric.appendChild(earnedValue);
-
-                    const topupsMetric = document.createElement('div');
-                    topupsMetric.className = 'referral-item-metric';
-                    const topupsLabel = document.createElement('span');
-                    topupsLabel.className = 'referral-item-label';
-                    topupsLabel.textContent = t('referral.meta.topups');
-                    const topupsValue = document.createElement('span');
-                    topupsValue.className = 'referral-item-value';
-                    topupsValue.textContent = String(referral.topups_count ?? 0);
-                    topupsMetric.appendChild(topupsLabel);
-                    topupsMetric.appendChild(topupsValue);
-
-                    metrics.appendChild(earnedMetric);
-                    metrics.appendChild(topupsMetric);
-
-                    const dates = document.createElement('div');
-                    dates.className = 'referral-item-dates';
-                    const joined = document.createElement('span');
-                    joined.className = 'referral-item-date';
-                    const joinedLabel = t('referral.meta.joined');
-                    joined.innerHTML = `<strong>${joinedLabel === 'referral.meta.joined' ? 'Joined' : joinedLabel}:</strong> ${escapeHtml(formatDate(referral.created_at))}`;
-
-                    const lastActivity = document.createElement('span');
-                    lastActivity.className = 'referral-item-date';
-                    const lastActivityLabel = t('referral.meta.last_activity');
-                    const lastActivityValue = formatDate(referral.last_activity) || '—';
-                    lastActivity.innerHTML = `<strong>${lastActivityLabel === 'referral.meta.last_activity' ? 'Last activity' : lastActivityLabel}:</strong> ${escapeHtml(lastActivityValue)}`;
-
-                    dates.appendChild(joined);
-                    dates.appendChild(lastActivity);
-
-                    item.appendChild(metrics);
-                    item.appendChild(dates);
-
-                    list.appendChild(item);
-                });
-
-                updateReferralToggleState();
-            }
-        }
-
-        function renderTransactionHistory() {
-            // Update profile list only
-            const listProfile = document.getElementById('transactionHistoryList');
-            const emptyStateProfile = document.getElementById('transactionHistoryEmpty');
-
-            if (!listProfile || !emptyStateProfile) {
-                return;
-            }
-
-            const transactions = Array.isArray(userData?.transactions) ? userData.transactions : [];
-            if (!transactions.length) {
-                listProfile.innerHTML = '';
-                emptyStateProfile.textContent = t('history.empty');
-                emptyStateProfile.classList.remove('hidden');
-                return;
-            }
-
-            emptyStateProfile.classList.add('hidden');
-            const currency = (userData?.balance_currency || 'RUB').toUpperCase();
-            const negativeTypes = new Set(['withdrawal', 'subscription_payment']);
-
-            const itemsHtml = transactions.map(tx => {
-                const type = (tx.type || '').toLowerCase();
-                const typeKey = `history.type.${type}`;
-                const typeLabelRaw = t(typeKey);
-                const typeLabel = typeLabelRaw === typeKey ? (tx.type || type || '').replace(/_/g, ' ') : typeLabelRaw;
-                const amountRaw = typeof tx.amount_kopeks === 'number'
-                    ? tx.amount_kopeks
-                    : Number.parseInt(tx.amount_kopeks ?? '0', 10);
-                const amountValue = Number.isFinite(amountRaw) ? amountRaw / 100 : 0;
-                const isNegative = amountValue < 0 || negativeTypes.has(type);
-                const amountFormatted = `${isNegative ? '−' : '+'}${formatCurrency(Math.abs(amountValue), currency)}`;
-                const statusKey = tx.is_completed ? 'history.status.completed' : 'history.status.pending';
-                const statusLabel = t(statusKey);
-                const metaParts = [];
-                const createdAt = formatDateTime(tx.created_at);
-                if (createdAt) {
-                    metaParts.push(escapeHtml(createdAt));
-                }
-                if (statusLabel) {
-                    metaParts.push(escapeHtml(statusLabel));
-                }
-                const metaHtml = metaParts.length ? `<div class="history-meta">${metaParts.map(part => `<span class="history-meta-item">${part}</span>`).join('')}</div>` : '';
-                const descriptionHtml = tx.description
-                    ? `<div class="history-description">${escapeHtml(tx.description)}</div>`
-                    : '';
-                const amountClass = isNegative ? 'history-amount negative' : 'history-amount positive';
-                const iconHtml = isNegative
-                    ? '<svg class="history-amount-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11l5-5m0 0l5 5m-5-5v12"/></svg>'
-                    : '<svg class="history-amount-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 13l5 5m0 0l5-5m-5 5V6"/></svg>';
-
-                return `
-                    <li class="history-item">
-                        <div class="history-item-header">
-                            <span class="${amountClass}">${iconHtml}${amountFormatted}</span>
-                            <span class="history-type">${escapeHtml(typeLabel)}</span>
-                        </div>
-                        ${metaHtml}
-                        ${descriptionHtml}
-                    </li>
-                `;
-            }).join('');
-
-            listProfile.innerHTML = itemsHtml;
-        }
-
-        function renderTransactionHistoryPayments() {
-            // Update payments list only
-            const listPayments = document.getElementById('transactionHistoryListPayments');
-            const emptyStatePayments = document.getElementById('transactionHistoryEmptyPayments');
-
-            if (!listPayments || !emptyStatePayments) {
-                return;
-            }
-
-            const transactions = Array.isArray(userData?.transactions) ? userData.transactions : [];
-            if (!transactions.length) {
-                listPayments.innerHTML = '';
-                emptyStatePayments.textContent = t('history.empty');
-                emptyStatePayments.classList.remove('hidden');
-                return;
-            }
-
-            emptyStatePayments.classList.add('hidden');
-            const currency = (userData?.balance_currency || 'RUB').toUpperCase();
-            const negativeTypes = new Set(['withdrawal', 'subscription_payment']);
-
-            const itemsHtml = transactions.map(tx => {
-                const type = (tx.type || '').toLowerCase();
-                const typeKey = `history.type.${type}`;
-                const typeLabelRaw = t(typeKey);
-                const typeLabel = typeLabelRaw === typeKey ? (tx.type || type || '').replace(/_/g, ' ') : typeLabelRaw;
-                const amountRaw = typeof tx.amount_kopeks === 'number'
-                    ? tx.amount_kopeks
-                    : Number.parseInt(tx.amount_kopeks ?? '0', 10);
-                const amountValue = Number.isFinite(amountRaw) ? amountRaw / 100 : 0;
-                const isNegative = amountValue < 0 || negativeTypes.has(type);
-                const amountFormatted = `${isNegative ? '−' : '+'}${formatCurrency(Math.abs(amountValue), currency)}`;
-                const statusKey = tx.is_completed ? 'history.status.completed' : 'history.status.pending';
-                const statusLabel = t(statusKey);
-                const metaParts = [];
-                const createdAt = formatDateTime(tx.created_at);
-                if (createdAt) {
-                    metaParts.push(escapeHtml(createdAt));
-                }
-                if (statusLabel) {
-                    metaParts.push(escapeHtml(statusLabel));
-                }
-                const metaHtml = metaParts.length ? `<div class="history-meta">${metaParts.map(part => `<span class="history-meta-item">${part}</span>`).join('')}</div>` : '';
-                const descriptionHtml = tx.description
-                    ? `<div class="history-description">${escapeHtml(tx.description)}</div>`
-                    : '';
-                const amountClass = isNegative ? 'history-amount negative' : 'history-amount positive';
-                const iconHtml = isNegative
-                    ? '<svg class="history-amount-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11l5-5m0 0l5 5m-5-5v12"/></svg>'
-                    : '<svg class="history-amount-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 13l5 5m0 0l5-5m-5 5V6"/></svg>';
-
-                return `
-                    <li class="history-item">
-                        <div class="history-item-header">
-                            <span class="${amountClass}">${iconHtml}${amountFormatted}</span>
-                            <span class="history-type">${escapeHtml(typeLabel)}</span>
-                        </div>
-                        ${metaHtml}
-                        ${descriptionHtml}
-                    </li>
-                `;
-            }).join('');
-
-            listPayments.innerHTML = itemsHtml;
-        }
-
-        function renderServersList() {
-            const list = document.getElementById('serversList');
-            const emptyState = document.getElementById('serversEmpty');
-            if (!list || !emptyState) {
-                return;
-            }
-
-            let servers = [];
-            if (Array.isArray(userData?.connected_servers) && userData.connected_servers.length) {
-                servers = userData.connected_servers.map(server => ({
-                    uuid: server?.uuid || '',
-                    name: server?.name || server?.uuid || '',
-                }));
-            } else if (Array.isArray(userData?.connected_squads)) {
-                servers = userData.connected_squads.map(uuid => ({ uuid, name: uuid }));
-            }
-
-            if (!servers.length) {
-                list.innerHTML = '';
-                emptyState.textContent = t('servers.empty');
-                emptyState.classList.remove('hidden');
-                return;
-            }
-
-            emptyState.classList.add('hidden');
-            list.innerHTML = servers
-                .map(server => `<li class="server-item">${escapeHtml(server.name || server.uuid || '')}</li>`)
-                .join('');
-        }
-
-        function renderDevicesList() {
-            // Try to find devices list in main interface (if exists)
-            const list = document.getElementById('devicesList');
-            const emptyState = document.getElementById('devicesEmpty');
-            if (!list || !emptyState) {
-                return;
-            }
-
-            const devices = Array.isArray(userData?.connected_devices)
-                ? userData.connected_devices
-                : [];
-
-            if (!devices.length) {
-                list.innerHTML = '';
-                emptyState.textContent = t('devices.empty');
-                emptyState.classList.remove('hidden');
-                return;
-            }
-
-            emptyState.classList.add('hidden');
-            const removeLabelRaw = t('devices.remove_button_label');
-            const removeLabel = (typeof removeLabelRaw === 'string' && removeLabelRaw !== 'devices.remove_button_label')
-                ? removeLabelRaw
-                : 'Reset device';
-            list.innerHTML = devices.map(device => {
-                const platform = device?.platform ? String(device.platform) : '';
-                const model = device?.device_model ? String(device.device_model) : '';
-                const titleParts = [platform, model].filter(Boolean);
-                const title = titleParts.length
-                    ? titleParts.join(' — ')
-                    : t('values.not_available');
-
-                const metaParts = [];
-                if (device?.app_version) {
-                    metaParts.push(String(device.app_version));
-                }
-                if (device?.last_seen) {
-                    const formatted = formatDateTime(device.last_seen);
-                    if (formatted) {
-                        metaParts.push(formatted);
-                    }
-                }
-                if (device?.last_ip) {
-                    metaParts.push(String(device.last_ip));
-                }
-
-                const metaHtml = metaParts.length
-                    ? `<div class="device-meta">${metaParts.map(part => `<span>${escapeHtml(part)}</span>`).join(' • ')}</div>`
-                    : '';
-
-                const deviceHwid = device?.hwid ? String(device.hwid) : '';
-                const safeTitle = escapeHtml(title);
-                const removeButtonHtml = deviceHwid
-                    ? `
-                        <div class="device-actions">
-                            <button
-                                class="device-remove-button"
-                                type="button"
-                                data-device-hwid="${escapeHtml(deviceHwid)}"
-                                data-device-label="${safeTitle}"
-                                aria-label="${escapeHtml(removeLabel)}"
-                            >
-                                <span aria-hidden="true">&times;</span>
-                            </button>
-                        </div>
-                    `
-                    : '';
-
-                return `
-                    <li class="device-item">
-                        <div class="device-header">
-                            <div class="device-title">${safeTitle}</div>
-                            ${removeButtonHtml}
-                        </div>
-                        ${metaHtml}
-                    </li>
-                `;
-            }).join('');
-
-            list.querySelectorAll('.device-remove-button').forEach(button => {
-                button.addEventListener('click', event => {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    const { deviceHwid = '', deviceLabel = '' } = button.dataset;
-                    handleDeviceRemoval(deviceHwid, deviceLabel, button);
-                });
-            });
-        }
-
-        function setDeviceRemovingState(button, isRemoving) {
-            if (!button) {
-                return;
-            }
-            if (isRemoving) {
-                button.disabled = true;
-                button.classList.add('is-removing');
-            } else {
-                button.disabled = false;
-                button.classList.remove('is-removing');
-            }
-        }
-
-        function resolveDeviceLabel(value) {
-            const raw = typeof value === 'string' ? value.trim() : '';
-            if (raw) {
-                return raw;
-            }
-            const fallback = t('values.not_available');
-            if (typeof fallback === 'string' && fallback !== 'values.not_available') {
-                return fallback;
-            }
-            return 'Device';
-        }
-
-        function confirmDeviceRemoval(deviceName) {
-            const label = resolveDeviceLabel(deviceName);
-            const template = t('devices.remove_confirm.message');
-            const message = typeof template === 'string' && template.includes('{device}')
-                ? template.replace('{device}', label)
-                : template;
-            const title = t('devices.remove_confirm.title');
-
-            return new Promise(resolve => {
-                if (typeof tg.showPopup === 'function') {
-                    tg.showPopup({
-                        title: typeof title === 'string' ? title : 'Confirm',
-                        message: typeof message === 'string' ? message : String(message),
-                        buttons: [
-                            {
-                                id: 'confirm',
-                                type: 'destructive',
-                                text: t('devices.remove_confirm.confirm') || 'Reset',
-                            },
-                            {
-                                id: 'cancel',
-                                type: 'cancel',
-                                text: t('devices.remove_confirm.cancel') || 'Cancel',
-                            },
-                        ],
-                    }, buttonId => {
-                        resolve(buttonId === 'confirm');
-                    });
-                } else {
-                    resolve(window.confirm(typeof message === 'string' ? message : label));
-                }
-            });
-        }
-
-        async function handleDeviceRemoval(hwid, deviceName, button) {
-            const normalizedHwid = typeof hwid === 'string' ? hwid.trim() : '';
-            if (!normalizedHwid) {
-                showPopup(
-                    t('devices.remove_error.generic') || 'Failed to reset the device. Please try again later.',
-                    t('devices.remove_error.title') || 'Unable to reset device',
-                );
-                return;
-            }
-
-            const confirmed = await confirmDeviceRemoval(deviceName);
-            if (!confirmed) {
-                return;
-            }
-
-            const initData = tg.initData || '';
-            if (!initData) {
-                showPopup(
-                    t('devices.remove_error.unauthorized')
-                        || 'Authorization failed. Please reopen the mini app from Telegram and try again.',
-                    t('devices.remove_error.title') || 'Unable to reset device',
-                );
-                return;
-            }
-
-            setDeviceRemovingState(button, true);
-
-            try {
-                const response = await fetch('/miniapp/devices/remove', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ initData, hwid: normalizedHwid }),
-                });
-
-                let payload = null;
-                try {
-                    payload = await response.json();
-                } catch (error) {
-                    payload = null;
-                }
-
-                if (!response.ok || (payload && payload.success === false)) {
-                    const message = payload?.message
-                        || payload?.detail?.message
-                        || t('devices.remove_error.generic')
-                        || 'Failed to reset the device. Please try again later.';
-                    showPopup(
-                        message,
-                        t('devices.remove_error.title') || 'Unable to reset device',
-                    );
-                    return;
-                }
-
-                applyDeviceRemovalUpdate(normalizedHwid);
-                showPopup(
-                    t('devices.remove_success') || 'The device has been reset successfully.',
-                    t('devices.remove_success.title') || 'Device reset',
-                );
-            } catch (error) {
-                console.warn('Failed to remove device:', error);
-                showPopup(
-                    t('devices.remove_error.network') || 'Network error. Please try again later.',
-                    t('devices.remove_error.title') || 'Unable to reset device',
-                );
-            } finally {
-                setDeviceRemovingState(button, false);
-            }
-        }
-
-        function applyDeviceRemovalUpdate(hwid) {
-            if (!userData) {
-                console.warn('applyDeviceRemovalUpdate: userData is not available');
-                return;
-            }
-
-            const normalizedHwid = typeof hwid === 'string' ? hwid.trim() : '';
-            if (!normalizedHwid) {
-                console.warn('applyDeviceRemovalUpdate: invalid hwid', hwid);
-                return;
-            }
-
-            const devices = Array.isArray(userData.connected_devices)
-                ? userData.connected_devices
-                : [];
-
-            console.log('applyDeviceRemovalUpdate: before', {
-                totalDevices: devices.length,
-                hwidToRemove: normalizedHwid,
-                hwidToRemoveLength: normalizedHwid.length,
-                devices: devices.map(d => {
-                    const hw = d?.hwid;
-                    const hwStr = typeof hw === 'string' ? hw.trim() : String(hw || '');
-                    return {
-                        hwid: hwStr,
-                        hwidLength: hwStr.length,
-                        hwidType: typeof d?.hwid,
-                        platform: d?.platform,
-                        matches: hwStr === normalizedHwid
-                    };
-                })
-            });
-
-            const filtered = devices.filter(device => {
-                if (!device) {
-                    return false;
-                }
-                const deviceHwid = typeof device.hwid === 'string'
-                    ? device.hwid.trim()
-                    : (device.hwid ? String(device.hwid).trim() : '');
-                if (!deviceHwid) {
-                    return true;
-                }
-                const matches = deviceHwid === normalizedHwid;
-                if (matches) {
-                    console.log('applyDeviceRemovalUpdate: FOUND MATCH - removing device', {
-                        deviceHwid,
-                        normalizedHwid,
-                        deviceHwidLength: deviceHwid.length,
-                        normalizedHwidLength: normalizedHwid.length,
-                        deviceHwidCharCodes: Array.from(deviceHwid).map(c => c.charCodeAt(0)),
-                        normalizedHwidCharCodes: Array.from(normalizedHwid).map(c => c.charCodeAt(0))
-                    });
-                }
-                return !matches;
-            });
-
-            console.log('applyDeviceRemovalUpdate: after', {
-                totalDevices: filtered.length,
-                removed: devices.length - filtered.length,
-                userDataDevicesLength: userData.connected_devices?.length
-            });
-
-            // Update userData synchronously
-            userData.connected_devices = filtered;
-            const newCount = filtered.length;
-            userData.connected_devices_count = newCount;
-
-            console.log('applyDeviceRemovalUpdate: userData updated', {
-                newCount: newCount,
-                userDataDevicesLength: userData.connected_devices?.length,
-                userDataDevicesCount: userData.connected_devices_count
-            });
-
-            const devicesCountElement = document.getElementById('devicesCount');
-            if (devicesCountElement) {
-                devicesCountElement.textContent = newCount;
-            }
-
-            // Update devicesConnected counter in main interface
-            const devicesConnectedEl = document.getElementById('devicesConnected');
-            if (devicesConnectedEl && userData?.user) {
-                const deviceLimit = typeof userData.user.device_limit === 'number'
-                    ? userData.user.device_limit
-                    : Number.parseInt(userData.user.device_limit ?? '', 10);
-                const deviceLimitValue = Number.isFinite(deviceLimit) ? deviceLimit : 1;
-                devicesConnectedEl.textContent = `${newCount}/${deviceLimitValue}`;
-            }
-
-            // Update modal content directly if it's open
-            const devicesModal = document.getElementById('devicesModal');
-            const isModalOpen = devicesModal && !devicesModal.classList.contains('hidden');
-            console.log('applyDeviceRemovalUpdate: modal state', {
-                modalExists: !!devicesModal,
-                isModalOpen: isModalOpen,
-                modalClasses: devicesModal?.className
-            });
-
-            if (isModalOpen) {
-                // Modal is open, update its content directly
-                console.log('applyDeviceRemovalUpdate: calling updateDevicesModalContent');
-                try {
-                    updateDevicesModalContent();
-                    console.log('applyDeviceRemovalUpdate: updateDevicesModalContent completed');
-                } catch (error) {
-                    console.error('applyDeviceRemovalUpdate: error updating modal', error);
-                }
-            }
-
-            renderDevicesList();
-        }
-
-        function renderFaqSection() {
-            const faqCard = document.getElementById('faqCard');
-            const faqList = document.getElementById('faqList');
-
-            if (!faqCard || !faqList) {
-                return;
-            }
-
-            const faq = userData?.faq;
-            const isEnabled = faq && faq.is_enabled !== false;
-
-            if (!isEnabled) {
-                faqCard.classList.add('hidden');
-                faqList.innerHTML = '';
-                return;
-            }
-
-            const items = Array.isArray(faq?.items) ? faq.items : [];
-            const processedItems = [];
-
-            items.forEach(item => {
-                if (!item) {
-                    return;
-                }
-                const sanitized = sanitizeFaqHtml(item.content);
-                if (!sanitized) {
-                    return;
-                }
-                const probe = document.createElement('div');
-                probe.innerHTML = sanitized;
-                if (!probe.textContent.trim()) {
-                    return;
-                }
-                processedItems.push({ item, sanitized });
-            });
-
-            if (!processedItems.length) {
-                faqCard.classList.add('hidden');
-                faqList.innerHTML = '';
-                return;
-            }
-
-            processedItems.sort((a, b) => {
-                const parseOrder = value => {
-                    if (value === null || value === undefined) {
-                        return null;
-                    }
-                    const parsed = Number(value);
-                    return Number.isFinite(parsed) ? parsed : null;
-                };
-
-                const orderA = parseOrder(a.item?.display_order);
-                const orderB = parseOrder(b.item?.display_order);
-
-                if (orderA !== null && orderB !== null && orderA !== orderB) {
-                    return orderA - orderB;
-                }
-                if (orderA !== null) {
-                    return -1;
-                }
-                if (orderB !== null) {
-                    return 1;
-                }
-
-                const idA = Number(a.item?.id) || 0;
-                const idB = Number(b.item?.id) || 0;
-                return idA - idB;
-            });
-
-            const fallbackTitleTemplate = t('faq.item_default_title');
-            const fallbackAnswer = t('faq.item_empty');
-
-            const html = processedItems.map(({ item, sanitized }, index) => {
-                const hasTitle = typeof item.title === 'string' && item.title.trim().length > 0;
-                const fallbackTitle = fallbackTitleTemplate.includes('{index}')
-                    ? fallbackTitleTemplate.replace('{index}', String(index + 1))
-                    : `${fallbackTitleTemplate} ${index + 1}`;
-                const question = escapeHtml(hasTitle ? item.title : fallbackTitle);
-                const answer = sanitized || `<p>${escapeHtml(fallbackAnswer)}</p>`;
-
-                return `
-                    <details class="faq-item">
-                        <summary class="faq-question">
-                            <span class="faq-question-text">${question}</span>
-                            <svg class="faq-toggle-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
-                            </svg>
-                        </summary>
-                        <div class="faq-answer">${answer}</div>
-                    </details>
-                `;
-            }).join('');
-
-            faqList.innerHTML = html;
-            faqCard.classList.remove('hidden');
-        }
-
-        function renderLegalDocuments() {
-            const card = document.getElementById('legalDocsCard');
-            const list = document.getElementById('legalDocsList');
-
-            if (list) {
-                list.innerHTML = '';
-            }
-
-            if (card) {
-                card.classList.add('hidden');
-            }
-        }
-
-        function renderLegalDocumentsModal() {
-            const list = document.getElementById('legalDocsListModal');
-            if (!list) {
-                return;
-            }
-
-            const documents = userData?.legal_documents;
-            if (!documents || typeof documents !== 'object') {
-                list.innerHTML = '<div class="empty-state" style="text-align: center; padding: 40px 20px; color: var(--text-secondary);">Нет доступных документов</div>';
-                return;
-            }
-
-            const entries = [];
-            Object.keys(LEGAL_DOCUMENT_CONFIG).forEach(key => {
-                const doc = documents?.[key];
-                if (!doc || doc.is_enabled === false) {
-                    return;
-                }
-
-                const rawContent = typeof doc.content === 'string' ? doc.content : '';
-                const sanitized = sanitizeLegalDocumentHtml(rawContent);
-                if (!sanitized) {
-                    return;
-                }
-
-                const probe = document.createElement('div');
-                probe.innerHTML = sanitized;
-                if (!probe.textContent.trim()) {
-                    return;
-                }
-
-                entries.push({ key, doc, sanitized });
-            });
-
-            if (!entries.length) {
-                list.innerHTML = '<div class="empty-state" style="text-align: center; padding: 40px 20px; color: var(--text-secondary);">Нет доступных документов</div>';
-                return;
-            }
-
-            const html = entries.map(({ key, doc, sanitized }) => {
-                const config = LEGAL_DOCUMENT_CONFIG[key] || {};
-                const translationKey = config.titleKey || '';
-                const translatedTitle = translationKey ? t(translationKey) : translationKey;
-                const fallbackTitle = config.fallback || translationKey || key;
-                const rawTitle = typeof doc.title === 'string' ? doc.title.trim() : '';
-                const resolvedTitle = rawTitle
-                    || (translatedTitle && translatedTitle !== translationKey ? translatedTitle : fallbackTitle);
-
-                const updatedSource = doc.updated_at ?? doc.updatedAt ?? null;
-                const updatedLabel = updatedSource ? formatLegalUpdatedLabel(updatedSource) : '';
-                const updatedHtml = updatedLabel
-                    ? `<div class="legal-doc-updated">${escapeHtml(updatedLabel)}</div>`
-                    : '';
-
-                const icon = escapeHtml(config.icon || '📄');
-
-                return `
-                    <details class="legal-doc-item">
-                        <summary class="legal-doc-summary">
-                            <span class="legal-doc-icon">${icon}</span>
-                            <span class="legal-doc-title">${escapeHtml(resolvedTitle)}</span>
-                            <svg class="legal-doc-toggle" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
-                            </svg>
-                        </summary>
-                        <div class="legal-doc-body">
-                            ${updatedHtml}
-                            <div class="legal-doc-content">${sanitized}</div>
-                        </div>
-                    </details>
-                `;
-            }).join('');
-
-            list.innerHTML = html;
-        }
-
-        const PROMO_DISCOUNT_FIELDS = [
-            { field: 'server_discount_percent', labelKey: 'promo_levels.discounts.server' },
-            { field: 'traffic_discount_percent', labelKey: 'promo_levels.discounts.traffic' },
-            { field: 'device_discount_percent', labelKey: 'promo_levels.discounts.devices' },
-        ];
-
-        function normalizePromoPercent(value) {
-            if (typeof value === 'number' && Number.isFinite(value)) {
-                return value;
-            }
-
-            if (typeof value === 'string' && value.trim() !== '') {
-                const parsed = Number.parseInt(value, 10);
-                if (Number.isFinite(parsed)) {
-                    return parsed;
-                }
-            }
-
-            return null;
-        }
-
-        function populatePromoDiscounts(container, source, options = {}) {
-            const { showEmptyMessage = false } = options;
-
-            if (!container) {
-                return false;
-            }
-
-            container.innerHTML = '';
-
-            if (!source) {
-                if (showEmptyMessage) {
-                    const badge = document.createElement('span');
-                    badge.className = 'promo-discount-badge muted';
-                    badge.textContent = t('promo_levels.discounts.none');
-                    container.appendChild(badge);
-                    container.classList.remove('hidden');
-                } else {
-                    container.classList.add('hidden');
-                }
-                return false;
-            }
-
-            let hasDiscounts = false;
-
-            PROMO_DISCOUNT_FIELDS.forEach(({ field, labelKey }) => {
-                const percentValue = normalizePromoPercent(source?.[field]);
-                if (percentValue === null) {
-                    return;
-                }
-
-                const normalized = Math.max(0, Math.round(percentValue));
-                if (normalized <= 0) {
-                    return;
-                }
-
-                hasDiscounts = true;
-
-                const badge = document.createElement('span');
-                badge.className = 'promo-discount-badge';
-
-                const label = document.createElement('span');
-                label.className = 'promo-discount-label';
-                label.textContent = t(labelKey);
-
-                const valueElement = document.createElement('span');
-                valueElement.className = 'promo-discount-value';
-                valueElement.textContent = `${normalized}%`;
-
-                badge.appendChild(label);
-                badge.appendChild(valueElement);
-                container.appendChild(badge);
-            });
-
-            if (!hasDiscounts) {
-                if (showEmptyMessage) {
-                    const badge = document.createElement('span');
-                    badge.className = 'promo-discount-badge muted';
-                    badge.textContent = t('promo_levels.discounts.none');
-                    container.appendChild(badge);
-                    container.classList.remove('hidden');
-                } else {
-                    container.classList.add('hidden');
-                }
-                return false;
-            }
-
-            container.classList.remove('hidden');
-            return true;
-        }
-
-        function collectPromoDiscountValues(source) {
-            const values = [];
-            PROMO_DISCOUNT_FIELDS.forEach(({ field }) => {
-                const percentValue = normalizePromoPercent(source?.[field]);
-                if (percentValue === null) {
-                    return;
-                }
-
-                const normalized = Math.max(0, Math.round(percentValue));
-                if (normalized > 0) {
-                    values.push(normalized);
-                }
-            });
-            return values;
-        }
-
-        function normalizePeriodDiscountsMap(periodDiscounts) {
-            if (!periodDiscounts || typeof periodDiscounts !== 'object') {
-                return [];
-            }
-
-            const entries = [];
-
-            Object.entries(periodDiscounts).forEach(([key, value]) => {
-                const period = Number.parseInt(key, 10);
-                const percent = normalizePromoPercent(value);
-                if (!Number.isFinite(period) || period <= 0 || percent === null) {
-                    return;
-                }
-
-                const normalized = Math.max(0, Math.round(percent));
-                if (normalized <= 0) {
-                    return;
-                }
-
-                entries.push({ period, percent: normalized });
-            });
-
-            return entries.sort((a, b) => a.period - b.period);
-        }
-
-        function formatPeriodLabel(period) {
-            const template = t('promo.periods.label');
-            if (template && template !== 'promo.periods.label' && template.includes('{months}')) {
-                return template.replace('{months}', period);
-            }
-
-            const suffix = t('promo.periods.month_suffix');
-            if (suffix && suffix !== 'promo.periods.month_suffix') {
-                if (suffix.includes('{months}')) {
-                    return suffix.replace('{months}', period);
-                }
-                return `${period} ${suffix}`;
-            }
-
-            return `${period} mo`;
-        }
-
-        function populatePromoPeriods(container, periodDiscounts) {
-            if (!container) {
-                return false;
-            }
-
-            container.innerHTML = '';
-
-            const entries = normalizePeriodDiscountsMap(periodDiscounts);
-            if (!entries.length) {
-                container.classList.add('hidden');
-                return false;
-            }
-
-            entries.forEach(({ period, percent }) => {
-                const badge = document.createElement('span');
-                badge.className = 'promo-period-badge';
-
-                const label = document.createElement('span');
-                label.className = 'promo-period-label';
-                label.textContent = formatPeriodLabel(period);
-
-                const value = document.createElement('span');
-                value.className = 'promo-period-value';
-                value.textContent = `${percent}%`;
-
-                badge.appendChild(label);
-                badge.appendChild(value);
-                container.appendChild(badge);
-            });
-
-            container.classList.remove('hidden');
-            return true;
-        }
-
-        function computeTopPromoDiscount(source) {
-            if (!source) {
-                return 0;
-            }
-
-            const values = collectPromoDiscountValues(source);
-            normalizePeriodDiscountsMap(source.period_discounts).forEach(entry => {
-                values.push(entry.percent);
-            });
-
-            return values.length ? Math.max(...values) : 0;
-        }
-
-        function renderPromoGroupInfo() {
-            const section = document.getElementById('promoCurrentGroupSection');
-            const valueElement = document.getElementById('promoGroupValue');
-            const discountsContainer = document.getElementById('promoGroupDiscounts');
-            const periodWrapper = document.getElementById('promoGroupPeriods');
-            const periodList = document.getElementById('promoGroupPeriodList');
-            const summaryName = document.getElementById('promoCardGroupName');
-            const summaryDiscount = document.getElementById('promoCardTopDiscount');
-
-            if (!section || !valueElement || !summaryName) {
-                return { hasGroup: false, hasDiscounts: false, topDiscount: 0 };
-            }
-
-            const promoGroup = userData?.promo_group || null;
-            const hasGroup = Boolean(promoGroup);
-
-            const groupLabel = promoGroup?.name || t('promo.summary.no_group');
-            summaryName.textContent = groupLabel;
-            valueElement.textContent = promoGroup?.name || t('values.not_available');
-
-            let hasBaseDiscounts = false;
-            let hasPeriodDiscounts = false;
-
-            if (discountsContainer) {
-                hasBaseDiscounts = populatePromoDiscounts(discountsContainer, promoGroup, {
-                    showEmptyMessage: hasGroup,
-                });
-            }
-
-            if (periodList && periodWrapper) {
-                hasPeriodDiscounts = populatePromoPeriods(periodList, promoGroup?.period_discounts);
-                periodWrapper.classList.toggle('hidden', !hasPeriodDiscounts);
-            }
-
-            section.classList.toggle('hidden', !hasGroup);
-
-            const topDiscount = hasGroup ? computeTopPromoDiscount(promoGroup) : 0;
-            if (summaryDiscount) {
-                if (topDiscount > 0) {
-                    const template = t('promo.summary.up_to');
-                    const valueLabel = `${topDiscount}%`;
-                    summaryDiscount.textContent = template.includes('{value}')
-                        ? template.replace('{value}', valueLabel)
-                        : `${template} ${valueLabel}`;
-                    summaryDiscount.classList.remove('hidden');
-                } else {
-                    summaryDiscount.classList.add('hidden');
-                }
-            }
-
-            return {
-                hasGroup,
-                hasDiscounts: hasBaseDiscounts || hasPeriodDiscounts,
-                topDiscount,
-            };
-        }
-
-        function renderPromoLevels() {
-            const list = document.getElementById('promoLevelsList');
-            const section = document.getElementById('promoLevelsSection');
-            const totalSpentElement = document.getElementById('promoLevelsSpent');
-
-            if (!list || !section || !totalSpentElement) {
-                return false;
-            }
-
-            const levels = Array.isArray(userData?.auto_assign_promo_groups)
-                ? userData.auto_assign_promo_groups
-                : [];
-
-            const totalSpentKopeksRaw = typeof userData?.total_spent_kopeks === 'number'
-                ? userData.total_spent_kopeks
-                : Number.parseInt(userData?.total_spent_kopeks ?? '0', 10);
-            const totalSpentKopeks = Number.isFinite(totalSpentKopeksRaw) ? totalSpentKopeksRaw : 0;
-            totalSpentElement.textContent = userData?.total_spent_label
-                || formatPriceFromKopeks(totalSpentKopeks);
-
-            list.innerHTML = '';
-
-            if (!levels.length) {
-                section.classList.add('hidden');
-                return false;
-            }
-
-            section.classList.remove('hidden');
-
-            const currencyCode = (userData?.balance_currency || 'RUB').toUpperCase();
-            const thresholdTemplate = t('promo_levels.threshold');
-
-            levels.forEach(level => {
-                const classes = ['promo-level-item'];
-                if (level?.is_current) {
-                    classes.push('current', 'reached');
-                } else if (level?.is_reached) {
-                    classes.push('reached');
-                } else {
-                    classes.push('locked');
-                }
-
-                const item = document.createElement('li');
-                item.className = classes.join(' ');
-
-                const info = document.createElement('div');
-                info.className = 'promo-level-info';
-
-                const name = document.createElement('div');
-                name.className = 'promo-level-name';
-                name.textContent = level?.name || t('values.not_available');
-                info.appendChild(name);
-
-                const threshold = document.createElement('div');
-                threshold.className = 'promo-level-threshold';
-                const thresholdLabel = level?.threshold_label
-                    || formatPriceFromKopeks(level?.threshold_kopeks, currencyCode);
-                threshold.textContent = thresholdTemplate.includes('{amount}')
-                    ? thresholdTemplate.replace('{amount}', thresholdLabel)
-                    : `${thresholdTemplate} ${thresholdLabel}`;
-                info.appendChild(threshold);
-
-                const benefits = document.createElement('div');
-                benefits.className = 'promo-level-benefits';
-
-                const discountBadges = document.createElement('div');
-                discountBadges.className = 'promo-discount-list';
-                const hasDiscounts = populatePromoDiscounts(discountBadges, level);
-                if (hasDiscounts) {
-                    benefits.appendChild(discountBadges);
-                }
-
-                const periodWrapper = document.createElement('div');
-                periodWrapper.className = 'promo-periods';
-                const periodLabel = document.createElement('span');
-                periodLabel.className = 'promo-periods-label';
-                periodLabel.textContent = t('promo.periods.title_short');
-                const levelPeriodList = document.createElement('div');
-                levelPeriodList.className = 'promo-period-list';
-                const hasPeriods = populatePromoPeriods(levelPeriodList, level?.period_discounts);
-                if (hasPeriods) {
-                    periodWrapper.appendChild(periodLabel);
-                    periodWrapper.appendChild(levelPeriodList);
-                    benefits.appendChild(periodWrapper);
-                }
-
-                if (benefits.childElementCount > 0) {
-                    info.appendChild(benefits);
-                }
-
-                const badge = document.createElement('div');
-                badge.className = 'promo-level-badge';
-                let badgeKey = 'promo_levels.badge.locked';
-                if (level?.is_current) {
-                    badgeKey = 'promo_levels.badge.current';
-                } else if (level?.is_reached) {
-                    badgeKey = 'promo_levels.badge.unlocked';
-                }
-                badge.textContent = t(badgeKey);
-
-                item.appendChild(info);
-                item.appendChild(badge);
-                list.appendChild(item);
-            });
-
-            return true;
-        }
-
-        function renderPromoSection() {
-            const card = document.getElementById('promoCard');
-            const divider = document.getElementById('promoDivider');
-            if (!card) {
-                return;
-            }
-
-            const groupResult = renderPromoGroupInfo();
-            const hasLevels = renderPromoLevels();
-            const hasGroupSection = Boolean(groupResult?.hasGroup);
-
-            if (divider) {
-                divider.classList.toggle('hidden', !(hasGroupSection && hasLevels));
-            }
-
-            const shouldShow = hasGroupSection || hasLevels;
-            card.classList.toggle('hidden', !shouldShow);
-
-            if (!shouldShow) {
-                card.classList.remove('expanded');
-            }
-        }
-
-        function hasActiveSubscription() {
-            if (!userData?.user) {
-                return false;
-            }
-
-            if (userData.subscription_missing === true || userData.subscriptionMissing === true) {
-                return false;
-            }
-
-            const hasActiveFlag = userData.user.has_active_subscription;
-            if (hasActiveFlag === true) {
-                return true;
-            }
-            if (hasActiveFlag === false) {
-                return false;
-            }
-
-            const statusRaw = String(
-                userData.user.subscription_actual_status
-                || userData.user.subscription_status
-                || ''
-            ).toLowerCase();
-
-            if (statusRaw) {
-                const activeStatuses = ['active', 'trial', 'trialing'];
-                const inactiveStatuses = ['expired', 'disabled', 'missing', 'inactive', 'cancelled', 'canceled', 'ended', 'paused', 'stopped'];
-
-                if (activeStatuses.includes(statusRaw)) {
-                    return true;
-                }
-
-                if (inactiveStatuses.includes(statusRaw)) {
-                    return false;
-                }
-            }
-
-            const typeRaw = String(
-                userData.subscription_type
-                || userData.user.subscription_type
-                || ''
-            ).toLowerCase();
-
-            if (['paid', 'trial'].includes(typeRaw)) {
-                return true;
-            }
-
-            if (['expired', 'inactive', 'disabled', 'none', 'missing', 'ended'].includes(typeRaw)) {
-                return false;
-            }
-
-            return false;
-        }
-
-        function hasPaidSubscription() {
-            if (!userData?.user) {
-                return false;
-            }
-
-            const missing = coerceBoolean(
-                userData.subscription_missing
-                ?? userData.subscriptionMissing
-                ?? userData.user.subscription_missing
-                ?? userData.user.subscriptionMissing,
-                false,
-            );
-            if (missing) {
-                return false;
-            }
-
-            const expiredFlag = coerceBoolean(
-                userData.subscription_expired
-                ?? userData.subscriptionExpired
-                ?? userData.user.subscription_expired
-                ?? userData.user.subscriptionExpired,
-                false,
-            );
-            if (expiredFlag) {
-                return false;
-            }
-
-            const expirationCandidates = [
-                userData.subscription_expires_at,
-                userData.subscriptionExpiresAt,
-                userData.user.subscription_expires_at,
-                userData.user.subscriptionExpiresAt,
-                userData.user.expires_at,
-                userData.user.expiresAt,
-                userData.expires_at,
-                userData.expiresAt,
-            ];
-            const isExpiredByDate = expirationCandidates.some(candidate => {
-                const expiresAt = parseDate(candidate);
-                return expiresAt instanceof Date
-                    && !Number.isNaN(expiresAt.getTime())
-                    && expiresAt.getTime() <= Date.now();
-            });
-            if (isExpiredByDate) {
-                return false;
-            }
-
-            const statusRaw = String(
-                userData.user.subscription_actual_status
-                || userData.user.subscription_status
-                || ''
-            ).toLowerCase();
-
-            if (statusRaw) {
-                const inactiveStatuses = [
-                    'expired',
-                    'disabled',
-                    'missing',
-                    'inactive',
-                    'cancelled',
-                    'canceled',
-                    'ended',
-                    'paused',
-                    'stopped',
-                ];
-                if (inactiveStatuses.includes(statusRaw)) {
-                    return false;
-                }
-
-                if (['trial', 'trialing'].includes(statusRaw)) {
-                    return false;
-                }
-
-                if (['active', 'paid'].includes(statusRaw)) {
-                    return true;
-                }
-            }
-
-            const hasActiveFlag = userData.user.has_active_subscription;
-            if (hasActiveFlag === false) {
-                return false;
-            }
-
-            const typeRaw = String(
-                userData.subscription_type
-                ?? userData.user.subscription_type
-                ?? ''
-            ).toLowerCase();
-
-            if (['trial', 'expired', 'inactive', 'disabled', 'none', 'missing', 'ended'].includes(typeRaw)) {
-                return false;
-            }
-
-            if (hasActiveFlag === true && typeRaw !== 'trial') {
-                return true;
-            }
-
-            return typeRaw === 'paid';
-        }
-
-        function normalizeServerEntry(entry) {
-            if (!entry) {
-                return null;
-            }
-            if (typeof entry === 'string') {
-                const normalized = entry.trim();
-                if (!normalized) {
-                    return null;
-                }
-                return { uuid: normalized, name: normalized };
-            }
-            if (typeof entry !== 'object') {
-                return null;
-            }
-            const uuid = entry.uuid
-                || entry.id
-                || entry.squad_uuid
-                || entry.short_uuid
-                || entry.shortUuid
-                || entry.value
-                || null;
-            const name = entry.name
-                || entry.title
-                || entry.display_name
-                || entry.displayName
-                || entry.label
-                || uuid
-                || '';
-            if (!uuid && !name) {
-                return null;
-            }
-            return {
-                uuid: uuid || name,
-                name: name || uuid || '',
-            };
-        }
-
-        function resetSubscriptionSettingsSelections(data) {
-            if (!data) {
-                subscriptionSettingsSelections.servers = new Set();
-                subscriptionSettingsSelections.traffic = null;
-                subscriptionSettingsSelections.devices = null;
-                return;
-            }
-
-            const serverSet = data.current?.serverSet instanceof Set
-                ? data.current.serverSet
-                : new Set();
-            subscriptionSettingsSelections.servers = new Set(Array.from(serverSet));
-            subscriptionSettingsSelections.traffic = data.traffic?.currentValue ?? null;
-            subscriptionSettingsSelections.devices = data.devices?.current ?? null;
-        }
-
-        function normalizeSubscriptionSettings(payload) {
-            if (!payload || typeof payload !== 'object') {
-                return null;
-            }
-
-            const root = payload.settings || payload.data || payload;
-            if (!root || typeof root !== 'object') {
-                return null;
-            }
-
-            const currentInfo = root.current || root.subscription || {};
-            const serversInfo = root.servers || root.countries || {};
-            const trafficInfo = root.traffic || root.traffic_options || root.trafficOptions || {};
-            const devicesInfo = root.devices || root.device_options || root.deviceOptions || {};
-
-            const currentServersRaw = ensureArray(
-                currentInfo.servers
-                || currentInfo.connected_servers
-                || root.current_servers
-                || root.connected_servers
-                || userData?.connected_servers
-            );
-            const normalizedCurrentServers = currentServersRaw
-                .map(normalizeServerEntry)
-                .filter(Boolean);
-            const serverSet = new Set(
-                normalizedCurrentServers
-                    .map(server => server.uuid)
-                    .filter(Boolean)
-            );
-
-            const availableServersRaw = ensureArray(
-                serversInfo.available
-                || serversInfo.options
-                || root.available_servers
-                || root.available_squads
-                || []
-            );
-            const normalizedAvailableServers = availableServersRaw
-                .map(entry => {
-                    const base = normalizeServerEntry(entry);
-                    if (!base) {
-                        return null;
-                    }
-                    return {
-                        uuid: base.uuid,
-                        name: base.name,
-                        priceKopeks: coercePositiveInt(
-                            entry.price_kopeks ?? entry.priceKopeks ?? entry.price ?? entry.cost,
-                            null
-                        ),
-                        priceLabel: entry.price_label || entry.priceLabel || null,
-                        discountPercent: coercePositiveInt(
-                            entry.discount_percent ?? entry.discountPercent ?? entry.discount,
-                            null
-                        ),
-                        isConnected: coerceBoolean(
-                            entry.is_connected ?? entry.connected ?? entry.isSelected ?? entry.selected ?? serverSet.has(base.uuid),
-                            false
-                        ),
-                        isAvailable: coerceBoolean(
-                            entry.is_available ?? entry.available ?? entry.enabled ?? entry.selectable ?? true,
-                            true
-                        ),
-                        disabledReason: entry.disabled_reason || entry.reason || null,
-                    };
-                })
-                .filter(Boolean);
-
-            const trafficOptionsRaw = ensureArray(
-                trafficInfo.options
-                || root.available_traffic
-                || root.traffic_options
-                || []
-            );
-            const normalizedTrafficOptions = trafficOptionsRaw
-                .map(option => {
-                    const value = coerceNumber(
-                        option.value ?? option.gb ?? option.limit ?? option.traffic_gb ?? option.trafficGb,
-                        null
-                    );
-                    return {
-                        value,
-                        label: option.label || option.title || (value !== null ? formatTrafficLimit(value) : ''),
-                        priceKopeks: coercePositiveInt(option.price_kopeks ?? option.priceKopeks ?? option.price ?? null, null),
-                        priceLabel: option.price_label || option.priceLabel || null,
-                        isCurrent: coerceBoolean(option.is_current ?? option.current, false),
-                        isAvailable: coerceBoolean(option.is_available ?? option.available ?? option.enabled ?? true, true),
-                        description: option.description || null,
-                    };
-                })
-                .filter(option => option.value !== null || option.label)
-                .filter(option => option.isAvailable !== false || option.isCurrent);
-
-            const currentTrafficLimit = coerceNumber(
-                currentInfo.traffic_limit_gb
-                ?? currentInfo.traffic
-                ?? root.current_traffic_gb
-                ?? userData?.user?.traffic_limit_gb,
-                null
-            );
-            const currentTrafficLabel = currentInfo.traffic_limit_label
-                || trafficInfo.current_label
-                || trafficInfo.currentLabel
-                || userData?.user?.traffic_limit_label
-                || (currentTrafficLimit !== null ? formatTrafficLimit(currentTrafficLimit) : '');
-
-            let currentTrafficValue = normalizedTrafficOptions.find(option => option.isCurrent) || null;
-            if (!currentTrafficValue && currentTrafficLimit !== null) {
-                currentTrafficValue = normalizedTrafficOptions.find(
-                    option => Number(option.value) === Number(currentTrafficLimit)
-                ) || null;
-            }
-
-            const devicesOptionsRaw = ensureArray(
-                devicesInfo.options
-                || root.available_devices
-                || root.device_options
-                || []
-            );
-            const normalizedDeviceOptions = devicesOptionsRaw
-                .map(option => {
-                    const value = coercePositiveInt(option.value ?? option.devices ?? option.count ?? option.limit, null);
-                    return {
-                        value,
-                        label: option.label || option.title || (value !== null ? String(value) : ''),
-                        priceKopeks: coercePositiveInt(option.price_kopeks ?? option.priceKopeks ?? option.price ?? null, null),
-                        priceLabel: option.price_label || option.priceLabel || null,
-                    };
-                })
-                .filter(option => option.value !== null);
-
-            const currentDeviceLimit = coercePositiveInt(
-                devicesInfo.current
-                ?? currentInfo.device_limit
-                ?? root.current_device_limit
-                ?? userData?.user?.device_limit,
-                0
-            );
-
-            return {
-                raw: payload,
-                subscriptionId: root.subscription_id
-                    ?? payload.subscription_id
-                    ?? payload.subscriptionId
-                    ?? userData?.subscription_id
-                    ?? userData?.subscriptionId
-                    ?? null,
-                currency: (root.currency || payload.currency || userData?.balance_currency || 'RUB').toString().toUpperCase(),
-                billing: {
-                    monthsRemaining: coercePositiveInt(
-                        root.billing?.months_remaining
-                        ?? root.billing?.monthsRemaining
-                        ?? root.billing?.months,
-                        null
-                    ),
-                    periodDays: coercePositiveInt(
-                        root.billing?.period_hint_days
-                        ?? root.billing?.periodHintDays
-                        ?? null,
-                        null
-                    ),
-                    renewsAt: root.billing?.renews_at
-                        ?? root.billing?.renewsAt
-                        ?? root.billing?.renewal
-                        ?? null,
-                },
-                current: {
-                    servers: normalizedCurrentServers,
-                    serverSet,
-                    trafficLimitGb: currentTrafficLimit,
-                    trafficLabel: currentTrafficLabel,
-                    deviceLimit: currentDeviceLimit,
-                },
-                servers: {
-                    available: normalizedAvailableServers,
-                    min: coercePositiveInt(
-                        serversInfo.min ?? serversInfo.min_selectable ?? serversInfo.minRequired ?? root.min_servers,
-                        0
-                    ) || 0,
-                    max: coercePositiveInt(
-                        serversInfo.max ?? serversInfo.max_selectable ?? serversInfo.maxAllowed ?? root.max_servers,
-                        0
-                    ) || 0,
-                    canUpdate: coerceBoolean(
-                        serversInfo.can_update ?? serversInfo.enabled ?? serversInfo.allow_update ?? true,
-                        true
-                    ),
-                    hint: serversInfo.hint || null,
-                },
-                traffic: {
-                    options: normalizedTrafficOptions,
-                    canUpdate: coerceBoolean(
-                        trafficInfo.can_update ?? trafficInfo.enabled ?? trafficInfo.allow_update ?? true,
-                        true
-                    ),
-                    currentValue: currentTrafficValue
-                        ? currentTrafficValue.value
-                        : (currentTrafficLimit !== null ? currentTrafficLimit : null),
-                },
-                devices: {
-                    options: normalizedDeviceOptions,
-                    canUpdate: coerceBoolean(
-                        devicesInfo.can_update ?? devicesInfo.enabled ?? devicesInfo.allow_update ?? true,
-                        true
-                    ),
-                    min: coercePositiveInt(devicesInfo.min ?? devicesInfo.min_devices ?? devicesInfo.min_limit, 0) || 0,
-                    max: coercePositiveInt(devicesInfo.max ?? devicesInfo.max_devices ?? devicesInfo.max_limit, 0) || 0,
-                    step: coercePositiveInt(devicesInfo.step ?? devicesInfo.increment ?? 1, 1) || 1,
-                    current: currentDeviceLimit,
-                },
-            };
-        }
-
-        function resetSubscriptionRenewalSelection(data) {
-            if (!data || !Array.isArray(data.periods)) {
-                subscriptionRenewalSelection.periodId = null;
-                return;
-            }
-
-            const defaultId = data.defaultPeriodId ? String(data.defaultPeriodId) : null;
-            if (defaultId) {
-                const defaultPeriod = data.periods.find(option => {
-                    if (!option) return false;
-                    const periodId = resolvePurchasePeriodId(option);
-                    return periodId !== null && periodId !== undefined && String(periodId) === String(defaultId);
-                });
-                if (defaultPeriod) {
-                    const periodId = resolvePurchasePeriodId(defaultPeriod);
-                    subscriptionRenewalSelection.periodId = periodId !== null && periodId !== undefined ? String(periodId) : null;
-                return;
-                }
-            }
-
-            const first = data.periods.find(option => option && resolvePurchasePeriodId(option) !== null);
-            if (first) {
-                const periodId = resolvePurchasePeriodId(first);
-                subscriptionRenewalSelection.periodId = periodId !== null && periodId !== undefined ? String(periodId) : null;
-            } else {
-                subscriptionRenewalSelection.periodId = null;
-            }
-        }
-
-        function resetSubscriptionRenewalState(data = null) {
-            subscriptionRenewalData = data;
-            subscriptionRenewalPromise = null;
-            subscriptionRenewalError = null;
-            subscriptionRenewalLoading = false;
-            subscriptionRenewalSubmitting = false;
-            if (data) {
-                resetSubscriptionRenewalSelection(data);
-            } else {
-                subscriptionRenewalSelection.periodId = null;
-            }
-        }
-
-        function normalizeRenewalPromoOffer(source) {
-            if (source && typeof source === 'object') {
-                const percent = coercePositiveInt(
-                    source.percent
-                        ?? source.discount_percent
-                        ?? source.discountPercent
-                        ?? source.value,
-                    null,
-                );
-                if (percent !== null) {
-                    const rawExpires = source.expires_at
-                        ?? source.expiresAt
-                        ?? source.valid_until
-                        ?? source.validUntil
-                        ?? null;
-                    const expiresAt = parseDate(rawExpires);
-                    return {
-                        percent,
-                        expiresAt,
-                        title: source.title || null,
-                        message: source.message || source.subtitle || null,
-                    };
-                }
-            }
-
-            const percent = coercePositiveInt(
-                userData?.user?.promo_offer_discount_percent
-                    ?? userData?.promo_offer_discount_percent,
-                null,
-            );
-            if (percent === null) {
-                return null;
-            }
-
-            const expiresAt = parseDate(
-                userData?.user?.promo_offer_discount_expires_at
-                    ?? userData?.promo_offer_discount_expires_at
-                    ?? null,
-            );
-
-            return {
-                percent,
-                expiresAt,
-            };
-        }
-
-        function normalizeRenewalOption(option, context = {}) {
-            if (!option || typeof option !== 'object') {
-                return null;
-            }
-
-            const currency = (context.currency || userData?.balance_currency || 'RUB').toString().toUpperCase();
-            const idCandidate = option.id
-                ?? option.period_id
-                ?? option.periodId
-                ?? option.key
-                ?? option.code
-                ?? null;
-            const days = coercePositiveInt(
-                option.days
-                    ?? option.period_days
-                    ?? option.periodDays
-                    ?? option.duration_days
-                    ?? option.durationDays,
-                null,
-            );
-            const months = coercePositiveInt(
-                option.months
-                    ?? option.period_months
-                    ?? option.periodMonths,
-                null,
-            );
-            const priceKopeks = coercePositiveInt(
-                option.price_kopeks
-                    ?? option.priceKopeks
-                    ?? option.price
-                    ?? option.amount_kopeks
-                    ?? option.amountKopeks,
-                null,
-            );
-            const originalPriceKopeks = coercePositiveInt(
-                option.original_price_kopeks
-                    ?? option.originalPriceKopeks
-                    ?? option.original_price
-                    ?? option.base_price_kopeks
-                    ?? option.basePriceKopeks,
-                null,
-            );
-            const priceLabel = option.price_label ?? option.priceLabel ?? null;
-            const originalPriceLabel = option.original_price_label
-                ?? option.originalPriceLabel
-                ?? option.base_price_label
-                ?? option.basePriceLabel
-                ?? null;
-            const discountPercent = coercePositiveInt(
-                option.discount_percent ?? option.discountPercent ?? option.discount ?? null,
-                null,
-            );
-            const perMonthKopeks = coercePositiveInt(
-                option.per_month_kopeks
-                    ?? option.perMonthKopeks
-                    ?? option.price_per_month_kopeks
-                    ?? null,
-                null,
-            );
-            const perMonthLabel = option.per_month_label
-                ?? option.perMonthLabel
-                ?? option.price_per_month_label
-                ?? null;
-            const isRecommended = coerceBoolean(
-                option.is_recommended ?? option.isRecommended ?? option.recommended,
-                false,
-            );
-            const description = option.description ?? option.subtitle ?? null;
-            const badge = option.badge || null;
-            const title = option.title ?? option.label ?? null;
-
-            const id = idCandidate != null
-                ? String(idCandidate)
-                : (days !== null ? `days:${days}` : null);
-            if (!id) {
-                return null;
-            }
-
-            let resolvedPriceLabel = priceLabel;
-            if (!resolvedPriceLabel && priceKopeks !== null) {
-                resolvedPriceLabel = formatPriceFromKopeks(priceKopeks, currency);
-            }
-
-            let resolvedOriginalLabel = originalPriceLabel;
-            if (!resolvedOriginalLabel && originalPriceKopeks !== null) {
-                resolvedOriginalLabel = formatPriceFromKopeks(originalPriceKopeks, currency);
-            }
-
-            let resolvedPerMonthLabel = perMonthLabel;
-            if (!resolvedPerMonthLabel && perMonthKopeks !== null) {
-                resolvedPerMonthLabel = formatPriceFromKopeks(perMonthKopeks, currency);
-            }
-
-            return {
-                id,
-                days,
-                months: months ?? (days ? Math.round(days / 30) : null),
-                priceKopeks,
-                priceLabel: resolvedPriceLabel,
-                originalPriceKopeks,
-                originalPriceLabel: resolvedOriginalLabel,
-                discountPercent,
-                pricePerMonthKopeks: perMonthKopeks,
-                pricePerMonthLabel: resolvedPerMonthLabel,
-                isRecommended,
-                description,
-                badge,
-                title,
-            };
-        }
-
-        function normalizeSubscriptionRenewal(payload) {
-            if (!payload || typeof payload !== 'object') {
-                return null;
-            }
-
-            const root = payload.renewal
-                || payload.data
-                || payload.options
-                || payload;
-            if (!root || typeof root !== 'object') {
-                return null;
-            }
-
-            const currency = (root.currency
-                ?? payload.currency
-                ?? userData?.balance_currency
-                ?? 'RUB').toString().toUpperCase();
-
-            const subscriptionId = coercePositiveInt(
-                root.subscription_id
-                    ?? root.subscriptionId
-                    ?? payload.subscription_id
-                    ?? payload.subscriptionId
-                    ?? userData?.subscription_id
-                    ?? userData?.subscriptionId,
-                null,
-            );
-
-            const balanceKopeks = coercePositiveInt(
-                root.balance_kopeks
-                    ?? root.balanceKopeks
-                    ?? payload.balance_kopeks
-                    ?? payload.balanceKopeks
-                    ?? userData?.balance_kopeks,
-                null,
-            );
-            const balanceLabel = root.balance_label
-                ?? root.balanceLabel
-                ?? payload.balance_label
-                ?? payload.balanceLabel
-                ?? (balanceKopeks !== null ? formatPriceFromKopeks(balanceKopeks, currency) : '');
-
-            const periodsRaw = ensureArray(
-                root.periods
-                    ?? root.options
-                    ?? root.available
-                    ?? root.renewal_options
-                    ?? root.renewalOptions
-                    ?? [],
-            );
-            const periods = periodsRaw
-                .map(option => normalizeRenewalOption(option, { currency }))
-                .filter(Boolean);
-
-            const defaultPeriodIdRaw = root.default_period_id
-                ?? root.defaultPeriodId
-                ?? root.default_option_id
-                ?? root.defaultOptionId
-                ?? null;
-            const defaultPeriodId = defaultPeriodIdRaw != null ? String(defaultPeriodIdRaw) : null;
-
-            const missingAmountKopeks = coercePositiveInt(
-                root.missing_amount_kopeks
-                    ?? root.missingAmountKopeks
-                    ?? null,
-                null,
-            );
-
-            const statusMessage = root.status_message
-                ?? root.statusMessage
-                ?? root.message
-                ?? null;
-
-            const promoGroup = root.promo_group
-                ?? root.promoGroup
-                ?? userData?.promo_group
-                ?? null;
-
-            const promoOffer = normalizeRenewalPromoOffer(root.promo_offer ?? root.promoOffer);
-
-            const autopayData = mergeAutopaySources(
-                root.autopay,
-                root.autopay_settings,
-                root.autopaySettings,
-                root,
-                payload.autopay,
-                payload.autopay_settings,
-                payload.autopaySettings,
-            );
-
-            return {
-                subscriptionId,
-                currency,
-                balanceKopeks,
-                balanceLabel,
-                periods,
-                defaultPeriodId: defaultPeriodId || (periods.length ? periods[0].id : null),
-                promoGroup,
-                promoOffer,
-                missingAmountKopeks,
-                statusMessage,
-                autopay: autopayData,
-            };
-        }
-
-        function prepareSubscriptionRenewalFromUserData() {
-            const candidates = [
-                userData?.subscription_renewal,
-                userData?.subscriptionRenewal,
-                userData?.renewal,
-                userData?.renewal_options,
-                userData?.renewalOptions,
-            ];
-
-            for (const candidate of candidates) {
-                const normalized = normalizeSubscriptionRenewal(candidate);
-                if (normalized && Array.isArray(normalized.periods) && normalized.periods.length) {
-                    subscriptionRenewalData = normalized;
-                    resetSubscriptionRenewalSelection(normalized);
-                    if (normalized.autopay) {
-                        ingestAutopayData(normalized.autopay);
-                    }
-                    return;
-                }
-            }
-
-            resetSubscriptionRenewalSelection(null);
-        }
-
-        function extractRenewalError(payload, status) {
-            if (status === 401) {
-                return t('subscription_renewal.error.unauthorized');
-            }
-            if (!payload || typeof payload !== 'object') {
-                return t('subscription_renewal.error.generic');
-            }
-            if (typeof payload.detail === 'string') {
-                return payload.detail;
-            }
-            if (payload.detail && typeof payload.detail === 'object') {
-                if (typeof payload.detail.message === 'string') {
-                    return payload.detail.message;
-                }
-                if (typeof payload.detail.error === 'string') {
-                    return payload.detail.error;
-                }
-            }
-            if (typeof payload.message === 'string') {
-                return payload.message;
-            }
-            if (typeof payload.error === 'string') {
-                return payload.error;
-            }
-            return t('subscription_renewal.error.generic');
-        }
-
-        function resolveRenewalErrorMessage(error, fallbackKey = 'subscription_renewal.error.generic') {
-            if (!error) {
-                return t(fallbackKey);
-            }
-            if (typeof error === 'string') {
-                return error;
-            }
-            if (typeof error.message === 'string' && error.message.trim()) {
-                return error.message;
-            }
-            if (error.detail) {
-                if (typeof error.detail === 'string' && error.detail.trim()) {
-                    return error.detail;
-                }
-                if (typeof error.detail.message === 'string' && error.detail.message.trim()) {
-                    return error.detail.message;
-                }
-            }
-            if (error.status === 401) {
-                return t('subscription_renewal.error.unauthorized');
-            }
-            return t(fallbackKey);
-        }
-
-        function ensureSubscriptionRenewalData(options = {}) {
-            const { force = false } = options;
-
-            if (!hasActiveSubscription()) {
-                resetSubscriptionRenewalState(null);
-                renderSubscriptionRenewalCard();
-                return Promise.resolve(null);
-            }
-
-            if (!force) {
-                if (subscriptionRenewalPromise) {
-                    return subscriptionRenewalPromise;
-                }
-                if (subscriptionRenewalData && !subscriptionRenewalError) {
-                    return Promise.resolve(subscriptionRenewalData);
-                }
-            }
-
-            const inlineNormalized = options.inline ? normalizeSubscriptionRenewal(options.inline) : null;
-            if (!force && inlineNormalized && inlineNormalized.periods.length) {
-                subscriptionRenewalData = inlineNormalized;
-                subscriptionRenewalError = null;
-                subscriptionRenewalLoading = false;
-                resetSubscriptionRenewalSelection(inlineNormalized);
-                if (inlineNormalized.autopay) {
-                    ingestAutopayData(inlineNormalized.autopay);
-                }
-                renderSubscriptionRenewalCard();
-                return Promise.resolve(inlineNormalized);
-            }
-
-            const initData = tg.initData || '';
-            if (!initData) {
-                const error = createError('Authorization Error', t('subscription_renewal.error.unauthorized'));
-                subscriptionRenewalError = error;
-                subscriptionRenewalLoading = false;
-                renderSubscriptionRenewalCard();
-                return Promise.reject(error);
-            }
-
-            subscriptionRenewalLoading = true;
-            subscriptionRenewalError = null;
-            renderSubscriptionRenewalCard();
-
-            const payload = {
-                initData,
-                subscription_id: userData?.subscription_id ?? userData?.subscriptionId ?? null,
-                subscriptionId: userData?.subscription_id ?? userData?.subscriptionId ?? null,
-            };
-
-            const request = fetch('/miniapp/subscription/renewal/options', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(payload),
-            }).then(async response => {
-                const body = await parseJsonSafe(response);
-                if (!response.ok || (body && body.success === false)) {
-                    const message = extractRenewalError(body, response.status);
-                    throw createError('Subscription renewal error', message, response.status);
-                }
-                const normalized = normalizeSubscriptionRenewal(body);
-                subscriptionRenewalData = normalized;
-                subscriptionRenewalError = null;
-                subscriptionRenewalLoading = false;
-                subscriptionRenewalPromise = null;
-                resetSubscriptionRenewalSelection(normalized);
-                if (normalized.autopay) {
-                    ingestAutopayData(normalized.autopay);
-                }
-                renderSubscriptionRenewalCard();
-                return normalized;
-            }).catch(error => {
-                subscriptionRenewalError = error;
-                subscriptionRenewalLoading = false;
-                subscriptionRenewalPromise = null;
-                renderSubscriptionRenewalCard();
-                throw error;
-            });
-
-            subscriptionRenewalPromise = request;
-            return request;
-        }
-
-        function buildRenewalPeriodLabel(option) {
-            if (!option) {
-                return '';
-            }
-            if (option.title) {
-                return option.title;
-            }
-
-            const months = coercePositiveInt(option.months, null);
-            if (months && months > 0) {
-                const key = months === 1
-                    ? 'subscription_renewal.period.month_one'
-                    : 'subscription_renewal.period.month_other';
-                const template = t(key);
-                if (template && template !== key && template.includes('{count}')) {
-                    return template.replace('{count}', String(months));
-                }
-                return `${months} mo`;
-            }
-
-            const days = coercePositiveInt(option.days, null);
-            if (days && days > 0) {
-                const template = t('subscription_renewal.period.days');
-                if (template && template !== 'subscription_renewal.period.days' && template.includes('{count}')) {
-                    return template.replace('{count}', String(days));
-                }
-                return `${days} days`;
-            }
-
-            return option.id || '';
-        }
-
-        function renderSubscriptionRenewalSummaryChip(data) {
-            const container = document.getElementById('subscriptionRenewalSummaryChip');
-            if (!container) {
-                return;
-            }
-            container.innerHTML = '';
-
-            if (!data) {
-                container.classList.add('hidden');
-                return;
-            }
-
-            const selectedPeriodId = subscriptionRenewalSelection.periodId;
-            const option = data.periods?.find(entry => {
-                if (!entry) return false;
-                const periodId = resolvePurchasePeriodId(entry);
-                return periodId !== null && periodId !== undefined && String(periodId) === String(selectedPeriodId);
-            }) || null;
-            if (!option) {
-                container.classList.add('hidden');
-                return;
-            }
-
-            const periodLabel = buildRenewalPeriodLabel(option);
-            const amountLabel = option.priceLabel
-                || (option.priceKopeks !== null ? formatPriceFromKopeks(option.priceKopeks, data.currency) : null);
-
-            if (periodLabel) {
-                const chip = document.createElement('div');
-                chip.className = 'subscription-renewal-chip';
-                chip.textContent = periodLabel;
-                container.appendChild(chip);
-            }
-
-            if (amountLabel) {
-                const chip = document.createElement('div');
-                chip.className = 'subscription-renewal-chip';
-                chip.textContent = amountLabel;
-                container.appendChild(chip);
-            }
-
-            container.classList.toggle('hidden', container.children.length === 0);
-        }
-
-        function renderSubscriptionRenewalMeta(data) {
-            const promoBlock = document.getElementById('subscriptionRenewalPromoGroupBlock');
-            const promoContainer = document.getElementById('subscriptionRenewalPromoGroup');
-            if (promoBlock && promoContainer) {
-                promoContainer.innerHTML = '';
-                const hasDiscounts = populatePromoDiscounts(promoContainer, data?.promoGroup, { showEmptyMessage: false });
-                if (!hasDiscounts) {
-                    const template = t('subscription_renewal.meta.promo_group.empty');
-                    if (template && template !== 'subscription_renewal.meta.promo_group.empty') {
-                        const empty = document.createElement('span');
-                        empty.className = 'subscription-renewal-meta-empty';
-                        empty.textContent = template;
-                        promoContainer.appendChild(empty);
-                        promoBlock.classList.remove('hidden');
-                    } else {
-                        promoBlock.classList.add('hidden');
-                    }
-                } else {
-                    promoBlock.classList.remove('hidden');
-                }
-            }
-
-            const offerBlock = document.getElementById('subscriptionRenewalOfferBlock');
-            const offerContainer = document.getElementById('subscriptionRenewalOffer');
-            if (offerBlock && offerContainer) {
-                offerContainer.innerHTML = '';
-                const offer = data?.promoOffer || null;
-                const offerPercent = offer
-                    ? coercePositiveInt(offer.percent ?? offer.discount_percent ?? offer.discount, null)
-                    : null;
-                if (offer && offerPercent !== null && offerPercent > 0) {
-                    const badge = document.createElement('div');
-                    badge.className = 'subscription-renewal-offer-badge';
-                    const template = t('subscription_renewal.meta.promo_offer.active');
-                    const percentLabel = formatPercentValue(offerPercent);
-                    badge.textContent = template && template !== 'subscription_renewal.meta.promo_offer.active'
-                        ? template.replace('{percent}', percentLabel)
-                        : `Extra discount ${percentLabel}%`;
-                    offerContainer.appendChild(badge);
-
-                    if (offer.message) {
-                        const message = document.createElement('div');
-                        message.className = 'subscription-renewal-offer-note';
-                        message.textContent = offer.message;
-                        offerContainer.appendChild(message);
-                    }
-
-                    if (offer.expiresAt) {
-                        const formatted = formatDateTime(offer.expiresAt) || formatDate(offer.expiresAt);
-                        if (formatted) {
-                            const expiresTemplate = t('subscription_renewal.meta.promo_offer.until');
-                            const expiresText = expiresTemplate && expiresTemplate !== 'subscription_renewal.meta.promo_offer.until'
-                                ? expiresTemplate.replace('{date}', formatted)
-                                : `Valid until ${formatted}`;
-                            const note = document.createElement('div');
-                            note.className = 'subscription-renewal-offer-note';
-                            note.textContent = expiresText;
-                            offerContainer.appendChild(note);
-                        }
-                    }
-
-                    offerBlock.classList.remove('hidden');
-                } else {
-                    offerBlock.classList.add('hidden');
-                }
-            }
-        }
-
-        function renderSubscriptionRenewalOptions(data) {
-            const container = document.getElementById('subscriptionRenewalOptions');
-            if (!container) {
-                return;
-            }
-            container.innerHTML = '';
-
-            const options = ensureArray(data?.periods);
-            if (!options.length) {
-                const statusText = document.getElementById('subscriptionRenewalStatus');
-                if (statusText) {
-                    const template = t('subscription_renewal.status.empty');
-                    statusText.textContent = template && template !== 'subscription_renewal.status.empty'
-                        ? template
-                        : 'No renewal options are currently available.';
-                    statusText.classList.remove('hidden');
-                }
-                renderSubscriptionRenewalSummary(data);
-                renderSubscriptionRenewalSummaryChip(data);
-                return;
-            }
-
-            const statusText = document.getElementById('subscriptionRenewalStatus');
-            statusText?.classList.add('hidden');
-
-            const selectedId = subscriptionRenewalSelection.periodId;
-
-            options.forEach(option => {
-                if (!option) {
-                    return;
-                }
-
-                const button = document.createElement('button');
-                button.type = 'button';
-                button.className = 'subscription-settings-toggle subscription-renewal-option';
-                if (option.id === selectedId) {
-                    button.classList.add('active');
-                }
-                if (subscriptionRenewalSubmitting) {
-                    button.disabled = true;
-                }
-
-                const label = document.createElement('div');
-                label.className = 'subscription-settings-toggle-label';
-
-                if (option.isRecommended || option.badge) {
-                    const badge = document.createElement('div');
-                    badge.className = 'subscription-renewal-option-badge';
-                    if (option.badge && typeof option.badge === 'string') {
-                        badge.textContent = option.badge;
-                    } else {
-                        const template = t('subscription_renewal.badge.recommended');
-                        badge.textContent = template && template !== 'subscription_renewal.badge.recommended'
-                            ? template
-                            : 'Recommended';
-                    }
-                    label.appendChild(badge);
-                }
-
-                const title = document.createElement('div');
-                title.className = 'subscription-settings-toggle-title';
-                title.textContent = buildRenewalPeriodLabel(option);
-                label.appendChild(title);
-
-                if (option.description) {
-                    const description = document.createElement('div');
-                    description.className = 'subscription-renewal-option-description';
-                    description.textContent = option.description;
-                    label.appendChild(description);
-                }
-
-                const meta = document.createElement('div');
-                meta.className = 'subscription-settings-toggle-meta';
-
-                const priceRow = document.createElement('div');
-                priceRow.className = 'subscription-renewal-option-price';
-
-                if (option.priceLabel) {
-                    const current = document.createElement('span');
-                    current.className = 'subscription-renewal-option-price-current';
-                    current.textContent = option.priceLabel;
-                    priceRow.appendChild(current);
-                } else if (option.priceKopeks !== null) {
-                    const current = document.createElement('span');
-                    current.className = 'subscription-renewal-option-price-current';
-                    current.textContent = formatPriceFromKopeks(option.priceKopeks, data.currency);
-                    priceRow.appendChild(current);
-                }
-
-                const showOriginal = hasActivePriceDiscount(option)
-                    && (
-                        Boolean(option.originalPriceLabel)
-                        || (
-                            option.originalPriceKopeks !== null
-                            && option.priceKopeks !== null
-                        )
-                    );
-                if (showOriginal) {
-                    const original = document.createElement('span');
-                    original.className = 'subscription-renewal-option-price-original';
-                    original.textContent = option.originalPriceLabel
-                        || formatPriceFromKopeks(option.originalPriceKopeks, data.currency);
-                    priceRow.appendChild(original);
-                }
-
-                const optionDiscountPercent = coercePositiveInt(option.discountPercent, null);
-                if (optionDiscountPercent !== null && optionDiscountPercent > 0) {
-                    const discount = document.createElement('span');
-                    discount.className = 'subscription-renewal-option-discount';
-                    const discountLabel = formatPercentValue(optionDiscountPercent);
-                    discount.textContent = `-${discountLabel}%`;
-                    priceRow.appendChild(discount);
-                }
-
-                meta.appendChild(priceRow);
-
-                if (option.pricePerMonthLabel) {
-                    const note = document.createElement('div');
-                    note.className = 'subscription-renewal-option-note';
-                    const template = t('subscription_renewal.summary.per_month');
-                    note.textContent = template && template !== 'subscription_renewal.summary.per_month'
-                        ? template.replace('{amount}', option.pricePerMonthLabel)
-                        : `${option.pricePerMonthLabel} per month`;
-                    meta.appendChild(note);
-                } else if (option.pricePerMonthKopeks !== null) {
-                    const perMonthLabel = formatPriceFromKopeks(option.pricePerMonthKopeks, data.currency);
-                    const template = t('subscription_renewal.summary.per_month');
-                    const text = template && template !== 'subscription_renewal.summary.per_month'
-                        ? template.replace('{amount}', perMonthLabel)
-                        : `${perMonthLabel} per month`;
-                    const note = document.createElement('div');
-                    note.className = 'subscription-renewal-option-note';
-                    note.textContent = text;
-                    meta.appendChild(note);
-                }
-
-                label.appendChild(meta);
-                button.appendChild(label);
-
-                button.addEventListener('click', () => {
-                    if (subscriptionRenewalSubmitting) {
-                        return;
-                    }
-                    subscriptionRenewalSelection.periodId = option.id;
-                    renderSubscriptionRenewalCard();
-                });
-
-                container.appendChild(button);
-            });
-
-            if (!subscriptionRenewalSelection.periodId && options.length) {
-                subscriptionRenewalSelection.periodId = options[0].id;
-            }
-
-            renderSubscriptionRenewalSummary(data);
-        }
-
-        function renderSubscriptionRenewalTraffic(data, period) {
-            const optionsContainer = document.getElementById('subscriptionRenewalTrafficOptions');
-            const metaElement = document.getElementById('subscriptionRenewalTrafficMeta');
-            const section = document.getElementById('subscriptionRenewalTrafficSection');
-
-            if (!optionsContainer || !section) {
-                return;
-            }
-
-            // Get traffic config from period or data
-            const config = period?.traffic || data?.traffic || {};
-            const selectable = config && config.selectable !== false && String(config.mode || '').toLowerCase() !== 'fixed';
-            const options = ensureArray(config?.options || config?.available || []);
-
-            optionsContainer.innerHTML = '';
-
-            if (!selectable || !options.length) {
-                section.classList.add('hidden');
-                return;
-            }
-
-            section.classList.remove('hidden');
-
-            const selectedValue = subscriptionRenewalSelection.trafficValue;
-            const currency = data?.currency || 'RUB';
-
-            options.forEach(option => {
-                if (!option) return;
-                const value = option.value ?? option.traffic ?? option.limit ?? option.amount;
-                const isSelected = value !== undefined && String(value) === String(selectedValue);
-                const isAvailable = coerceBoolean(option.is_available ?? option.available ?? option.enabled ?? true, true);
-
-                const button = document.createElement('button');
-                button.type = 'button';
-                button.className = 'subscription-settings-toggle subscription-purchase-option-card subscription-purchase-option-card--traffic';
-                if (isSelected) button.classList.add('active');
-                if (!isAvailable) button.classList.add('disabled');
-
-                const content = document.createElement('div');
-                content.className = 'subscription-purchase-option-content';
-
-                const labelContainer = document.createElement('div');
-                labelContainer.className = 'subscription-settings-toggle-label subscription-purchase-option-info';
-
-                const title = document.createElement('div');
-                title.className = 'subscription-settings-toggle-title';
-                title.textContent = formatPurchaseTrafficLabel(option);
-                labelContainer.appendChild(title);
-
-                content.appendChild(labelContainer);
-
-                const priceInfo = resolvePurchasePrice(
-                    [option.final_price_kopeks, option.price_kopeks, option.priceKopeks],
-                    [option.final_price_label, option.price_label, option.priceLabel],
-                    currency,
-                );
-
-                if (priceInfo) {
-                    const priceContainer = document.createElement('div');
-                    priceContainer.className = 'subscription-purchase-option-meta';
-                    const priceEl = document.createElement('div');
-                    priceEl.className = 'subscription-purchase-option-price';
-                    priceEl.textContent = priceInfo.label;
-                    priceContainer.appendChild(priceEl);
-                    content.appendChild(priceContainer);
-                }
-
-                button.appendChild(content);
-
-                if (isAvailable) {
-                    button.addEventListener('click', () => {
-                        subscriptionRenewalSelection.trafficValue = value;
-                        renderSubscriptionRenewalCard();
-                    });
-                }
-
-                optionsContainer.appendChild(button);
-            });
-
-            if (metaElement && selectedValue) {
-                const selectedOption = options.find(opt => String(opt.value ?? opt.traffic ?? opt.limit ?? opt.amount) === String(selectedValue));
-                if (selectedOption) {
-                    metaElement.textContent = formatPurchaseTrafficLabel(selectedOption);
-                }
-            }
-        }
-
-        function renderSubscriptionRenewalServers(data, period) {
-            const optionsContainer = document.getElementById('subscriptionRenewalServersOptions');
-            const metaElement = document.getElementById('subscriptionRenewalServersMeta');
-            const section = document.getElementById('subscriptionRenewalServersSection');
-
-            if (!optionsContainer || !section) {
-                return;
-            }
-
-            const config = period?.servers || data?.servers || {};
-            const options = ensureArray(config?.options || config?.available || []);
-            const selection = subscriptionRenewalSelection.servers instanceof Set
-                ? new Set(subscriptionRenewalSelection.servers)
-                : new Set();
-
-            optionsContainer.innerHTML = '';
-
-            if (!options.length) {
-                section.classList.add('hidden');
-                return;
-            }
-
-            section.classList.remove('hidden');
-
-            const currency = data?.currency || 'RUB';
-            const normalizedOptions = options
-                .map(option => normalizePurchaseServerOption(option, currency))
-                .filter(Boolean);
-            const visibleOptions = filterActivePurchaseServerOptions(normalizedOptions);
-
-            if (!visibleOptions.length) {
-                subscriptionRenewalSelection.servers = new Set();
-                section.classList.add('hidden');
-                return;
-            }
-
-            visibleOptions.forEach(option => {
-                const isSelected = selection.has(option.uuid);
-                const button = document.createElement('button');
-                button.type = 'button';
-                button.className = 'subscription-settings-toggle subscription-purchase-option-card subscription-purchase-option-card--servers';
-                if (isSelected) button.classList.add('active');
-
-                const content = document.createElement('div');
-                content.className = 'subscription-purchase-option-content';
-
-                const labelContainer = document.createElement('div');
-                labelContainer.className = 'subscription-settings-toggle-label subscription-purchase-option-info';
-
-                const title = document.createElement('div');
-                title.className = 'subscription-settings-toggle-title';
-                title.textContent = option.label || option.name || option.title || '';
-                labelContainer.appendChild(title);
-
-                content.appendChild(labelContainer);
-
-                button.appendChild(content);
-
-                button.addEventListener('click', () => {
-                    handleSubscriptionRenewalServerToggle(option.uuid);
-                });
-
-                optionsContainer.appendChild(button);
-            });
-
-            if (metaElement && selection.size > 0) {
-                const selectedLabels = Array.from(selection)
-                    .map(uuid => visibleOptions.find(opt => opt.uuid === uuid)?.label)
-                    .filter(Boolean);
-                metaElement.textContent = selectedLabels.length > 0 ? selectedLabels.join(', ') : '';
-            }
-        }
-
-        function renderSubscriptionRenewalDevices(data, period) {
-            const valueElement = document.getElementById('subscriptionRenewalDevicesValue');
-            const priceElement = document.getElementById('subscriptionRenewalDevicesPrice');
-            const metaElement = document.getElementById('subscriptionRenewalDevicesMeta');
-            const hintElement = document.getElementById('subscriptionRenewalDevicesHint');
-            const decreaseButton = document.getElementById('subscriptionRenewalDevicesDecrease');
-            const increaseButton = document.getElementById('subscriptionRenewalDevicesIncrease');
-            const section = document.getElementById('subscriptionRenewalDevicesSection');
-            const control = document.getElementById('subscriptionRenewalDevicesControl');
-
-            if (!section) {
-                return;
-            }
-
-            const config = period?.devices || data?.devices || {};
-            const min = coercePositiveInt(config?.min ?? config?.minimum ?? 0, 0) || 0;
-            const max = coercePositiveInt(config?.max ?? config?.maximum ?? 0, 0) || 0;
-
-            if (min === 0 && max === 0) {
-                section.classList.add('hidden');
-                return;
-            }
-
-            section.classList.remove('hidden');
-
-            let value = coercePositiveInt(subscriptionRenewalSelection.devices, null);
-            if (value === null) {
-                value = min > 0 ? min : 1;
-            }
-            if (min && value < min) {
-                value = min;
-            }
-            if (max && value > max) {
-                value = max;
-            }
-            subscriptionRenewalSelection.devices = value;
-
-            if (valueElement) {
-                valueElement.textContent = String(value);
-            }
-
-            if (decreaseButton) {
-                decreaseButton.disabled = (min ? value <= min : value <= 1);
-                decreaseButton.onclick = () => {
-                    handleSubscriptionRenewalDevicesChange(-1);
-                };
-            }
-            if (increaseButton) {
-                increaseButton.disabled = (max ? value >= max : false);
-                increaseButton.onclick = () => {
-                    handleSubscriptionRenewalDevicesChange(1);
-                };
-            }
-
-            if (metaElement) {
-                let metaText = '';
-                if (min && max) {
-                    metaText = t('subscription_purchase.devices.limit')
-                        .replace('{min}', String(min))
-                        .replace('{max}', String(max));
-                } else if (max) {
-                    metaText = t('subscription_purchase.devices.limit')
-                        .replace('{min}', String(min || 1))
-                        .replace('{max}', String(max));
-                } else {
-                    metaText = t('subscription_purchase.devices.unlimited');
-                }
-                metaElement.textContent = metaText;
-            }
-
-            if (priceElement) {
-                const currency = data?.currency || 'RUB';
-                const priceInfo = resolvePurchasePrice(
-                    [
-                        config.price_per_device_kopeks,
-                        config.pricePerDeviceKopeks,
-                        config.extra_device_price_kopeks,
-                        config.extraDevicePriceKopeks,
-                    ],
-                    [
-                        config.price_per_device_label,
-                        config.pricePerDeviceLabel,
-                        config.extra_device_price_label,
-                        config.extraDevicePriceLabel,
-                    ],
-                    currency,
-                );
-                if (priceInfo && priceInfo.label) {
-                    priceElement.textContent = priceInfo.label;
-                } else {
-                    priceElement.textContent = '';
-                }
-            }
-        }
-
-        function handleSubscriptionRenewalServerToggle(uuid) {
-            if (!uuid) return;
-            if (subscriptionRenewalSelection.servers.has(uuid)) {
-                subscriptionRenewalSelection.servers.delete(uuid);
-            } else {
-                subscriptionRenewalSelection.servers.add(uuid);
-            }
-            renderSubscriptionRenewalCard();
-        }
-
-        function handleSubscriptionRenewalDevicesChange(delta) {
-            if (!Number.isFinite(delta)) return;
-            const selectedPeriod = subscriptionRenewalData?.periods?.find(p => p?.id === subscriptionRenewalSelection.periodId);
-            const config = selectedPeriod?.devices || subscriptionRenewalData?.devices || {};
-            const min = coercePositiveInt(config?.min ?? config?.minimum ?? 0, 0) || 0;
-            const max = coercePositiveInt(config?.max ?? config?.maximum ?? 0, 0) || 0;
-            let value = coercePositiveInt(subscriptionRenewalSelection.devices, null);
-            if (value === null) {
-                value = min > 0 ? min : 1;
-            }
-            value += delta;
-            if (min && value < min) {
-                value = min;
-            }
-            if (max && value > max) {
-                value = max;
-            }
-            if (value === subscriptionRenewalSelection.devices) {
-                return;
-            }
-            subscriptionRenewalSelection.devices = value;
-            renderSubscriptionRenewalCard();
-        }
-
-        function renderSubscriptionRenewalSummary(data) {
-            const summary = document.getElementById('subscriptionRenewalSummary');
-            const priceCurrent = document.getElementById('subscriptionRenewalPriceCurrent');
-            const priceOriginal = document.getElementById('subscriptionRenewalPriceOriginal');
-            const priceDiscount = document.getElementById('subscriptionRenewalPriceDiscount');
-            const priceNote = document.getElementById('subscriptionRenewalPriceNote');
-            const balanceWarning = document.getElementById('subscriptionRenewalBalanceWarning');
-            const submitButton = document.getElementById('subscriptionRenewalSubmit');
-
-            if (!summary || !priceCurrent || !submitButton) {
-                return;
-            }
-
-            const selectedPeriodId = subscriptionRenewalSelection.periodId;
-            const option = data?.periods?.find(entry => {
-                if (!entry) return false;
-                const periodId = resolvePurchasePeriodId(entry);
-                return periodId !== null && periodId !== undefined && String(periodId) === String(selectedPeriodId);
-            }) || null;
-
-            if (!option) {
-                priceCurrent.textContent = '—';
-                if (priceOriginal) {
-                    priceOriginal.textContent = '';
-                    priceOriginal.classList.add('hidden');
-                }
-                const discountRow = document.getElementById('subscriptionRenewalPriceDiscountRow');
-                if (priceDiscount && discountRow) {
-                    priceDiscount.textContent = '';
-                    discountRow.classList.add('hidden');
-                }
-                const noteRow = document.getElementById('subscriptionRenewalPriceNoteRow');
-                if (priceNote && noteRow) {
-                    priceNote.textContent = '';
-                    noteRow.classList.add('hidden');
-                }
-                if (balanceWarning) {
-                    balanceWarning.textContent = '';
-                    balanceWarning.classList.add('hidden');
-                }
-                submitButton.disabled = true;
-                const submitLabel = t('subscription_renewal.submit');
-                submitButton.textContent = submitLabel === 'subscription_renewal.submit' ? t('subscription_renewal.submit') : submitLabel;
-                const topupButton = document.getElementById('subscriptionRenewalTopupBtn');
-                if (topupButton) {
-                    topupButton.classList.add('hidden');
-                }
-                renderSubscriptionRenewalSummaryChip(data);
-                return;
-            }
-
-            const amountLabel = option.priceLabel
-                || (option.priceKopeks !== null ? formatPriceFromKopeks(option.priceKopeks, data.currency) : null);
-            priceCurrent.textContent = amountLabel || '—';
-
-            const discountPercentValue = coercePositiveInt(option.discountPercent, null);
-            const showOriginal = hasActivePriceDiscount(option)
-                && (
-                    Boolean(option.originalPriceLabel)
-                    || (
-                        option.originalPriceKopeks !== null
-                        && option.priceKopeks !== null
-                    )
-                );
-            if (priceOriginal) {
-                if (showOriginal) {
-                    const label = option.originalPriceLabel
-                        || formatPriceFromKopeks(option.originalPriceKopeks, data.currency);
-                    priceOriginal.textContent = label;
-                    priceOriginal.classList.remove('hidden');
-                } else {
-                    priceOriginal.textContent = '';
-                    priceOriginal.classList.add('hidden');
-                }
-            }
-
-            const discountRow = document.getElementById('subscriptionRenewalPriceDiscountRow');
-            if (priceDiscount && discountRow) {
-                if (discountPercentValue !== null && discountPercentValue > 0) {
-                    const template = t('subscription_renewal.summary.discount');
-                    const discountLabel = formatPercentValue(discountPercentValue);
-                    priceDiscount.textContent = template && template !== 'subscription_renewal.summary.discount'
-                        ? template.replace('{percent}', discountLabel)
-                        : t('subscription_renewal.summary.discount').replace('{percent}', discountLabel);
-                    discountRow.classList.remove('hidden');
-                } else {
-                    priceDiscount.textContent = '';
-                    discountRow.classList.add('hidden');
-                }
-            }
-
-            const noteRow = document.getElementById('subscriptionRenewalPriceNoteRow');
-            if (priceNote && noteRow) {
-                if (option.pricePerMonthLabel) {
-                    const template = t('subscription_renewal.summary.per_month');
-                    priceNote.textContent = template && template !== 'subscription_renewal.summary.per_month'
-                        ? template.replace('{amount}', option.pricePerMonthLabel)
-                        : `${option.pricePerMonthLabel} per month`;
-                    noteRow.classList.remove('hidden');
-                } else if (option.pricePerMonthKopeks !== null) {
-                    const perMonthLabel = formatPriceFromKopeks(option.pricePerMonthKopeks, data.currency);
-                    const template = t('subscription_renewal.summary.per_month');
-                    priceNote.textContent = template && template !== 'subscription_renewal.summary.per_month'
-                        ? template.replace('{amount}', perMonthLabel)
-                        : `${perMonthLabel} per month`;
-                    noteRow.classList.remove('hidden');
-                } else {
-                    priceNote.textContent = '';
-                    noteRow.classList.add('hidden');
-                }
-            }
-
-            const balanceKopeks = data?.balanceKopeks ?? coercePositiveInt(userData?.balance_kopeks, null);
-            const priceKopeks = option.priceKopeks;
-            let missing = null;
-
-            const optionMissing = coercePositiveInt(option?.missingAmountKopeks ?? option?.missing_amount_kopeks, null);
-            if (optionMissing !== null) {
-                missing = optionMissing;
-            } else if (balanceKopeks !== null && priceKopeks !== null && balanceKopeks < priceKopeks) {
-                missing = priceKopeks - balanceKopeks;
-            } else if (
-                data?.missingAmountKopeks != null
-                && data?.defaultPeriodId
-                && normalizeIdentifier(String(data.defaultPeriodId)) === normalizeIdentifier(String(option.id))
-            ) {
-                missing = coercePositiveInt(data.missingAmountKopeks, null);
-            }
-
-            if (missing !== null && missing <= 0) {
-                missing = null;
-            }
-            if (balanceWarning) {
-                if (missing !== null && missing > 0) {
-                    const missingLabel = formatPriceFromKopeks(missing, data.currency);
-                    const insufficientTemplate = t('subscription_renewal.summary.insufficient');
-                    balanceWarning.textContent = insufficientTemplate && insufficientTemplate !== 'subscription_renewal.summary.insufficient'
-                        ? insufficientTemplate.replace('{missing}', missingLabel)
-                        : t('subscription_renewal.summary.insufficient').replace('{missing}', missingLabel);
-                    balanceWarning.classList.remove('hidden');
-                } else {
-                    balanceWarning.textContent = '';
-                    balanceWarning.classList.add('hidden');
-                }
-            }
-
-            submitButton.disabled = subscriptionRenewalSubmitting || option.priceKopeks === null;
-            const submitKey = subscriptionRenewalSubmitting
-                ? 'subscription_renewal.submit.loading'
-                : 'subscription_renewal.submit';
-            const submitLabel = t(submitKey);
-            submitButton.textContent = submitLabel === submitKey
-                ? (subscriptionRenewalSubmitting ? t('subscription_renewal.submit.loading') : t('subscription_renewal.submit'))
-                : submitLabel;
-
-            const topupButton = document.getElementById('subscriptionRenewalTopupBtn');
-            if (topupButton) {
-                const topupLabel = t('subscription_renewal.action.topup');
-                topupButton.textContent = topupLabel === 'subscription_renewal.action.topup'
-                    ? t('subscription_renewal.action.topup')
-                    : topupLabel;
-                topupButton.classList.toggle('hidden', missing === null || missing <= 0);
-            }
-
-            renderSubscriptionRenewalSummaryChip(data);
-        }
-
-        function renderSubscriptionRenewalCard() {
-            const card = document.getElementById('subscriptionRenewalCard');
-            if (!card) {
-                return;
-            }
-
-            // Показываем карточку продления только для платных подписок (не для триалов)
-            const shouldShow = hasPaidSubscription();
-            if (!shouldShow) {
-                // Если это не платная подписка, скрываем карточку
-                card.classList.add('hidden');
-                return;
-            }
-
-            // Don't show card automatically - it should be controlled by button clicks
-            // Only render content if card is not hidden (unless explicitly opened)
-            if (card.classList.contains('hidden')) {
-                return;
-            }
-
-            const loadingBlock = document.getElementById('subscriptionRenewalLoading');
-            const errorBlock = document.getElementById('subscriptionRenewalError');
-            const body = document.getElementById('subscriptionRenewalContent');
-            const statusText = document.getElementById('subscriptionRenewalStatus');
-
-            if (subscriptionRenewalLoading) {
-                loadingBlock?.classList.remove('hidden');
-                errorBlock?.classList.add('hidden');
-                body?.classList.add('hidden');
-                if (statusText) {
-                    const template = t('subscription_renewal.status.loading');
-                    statusText.textContent = template && template !== 'subscription_renewal.status.loading'
-                        ? template
-                        : 'Loading renewal options…';
-                    statusText.classList.remove('hidden');
-                }
-                return;
-            }
-
-            loadingBlock?.classList.add('hidden');
-
-            if (subscriptionRenewalError) {
-                body?.classList.add('hidden');
-                if (errorBlock) {
-                    const errorText = document.getElementById('subscriptionRenewalErrorText');
-                    if (errorText) {
-                        errorText.textContent = resolveRenewalErrorMessage(subscriptionRenewalError);
-                    }
-                    errorBlock.classList.remove('hidden');
-                }
-                statusText?.classList.add('hidden');
-                return;
-            }
-
-            errorBlock?.classList.add('hidden');
-
-            if (!subscriptionRenewalData) {
-                body?.classList.add('hidden');
-                statusText?.classList.add('hidden');
-                ensureSubscriptionRenewalData().catch(error => {
-                    console.warn('Failed to load subscription renewal options:', error);
-                });
-                return;
-            }
-
-            body?.classList.remove('hidden');
-
-            if (subscriptionRenewalData.statusMessage && statusText) {
-                statusText.textContent = subscriptionRenewalData.statusMessage;
-                statusText.classList.remove('hidden');
-            } else if (statusText) {
-                statusText.classList.add('hidden');
-            }
-
-            renderSubscriptionRenewalMeta(subscriptionRenewalData);
-
-            // Render period selection first
-            renderSubscriptionRenewalPeriods(subscriptionRenewalData);
-
-            // Ensure period section is visible
-            const periodSection = document.getElementById('subscriptionRenewalPeriodSection');
-            if (periodSection) {
-                periodSection.classList.remove('hidden');
-            }
-
-            // Render traffic, servers, and devices sections
-            const selectedPeriod = subscriptionRenewalData?.periods?.find(p => {
-                const periodId = resolvePurchasePeriodId(p);
-                return periodId !== null && periodId !== undefined && String(periodId) === String(subscriptionRenewalSelection.periodId);
-            });
-            renderSubscriptionRenewalTraffic(subscriptionRenewalData, selectedPeriod);
-            renderSubscriptionRenewalServers(subscriptionRenewalData, selectedPeriod);
-            renderSubscriptionRenewalDevices(subscriptionRenewalData, selectedPeriod);
-
-            renderSubscriptionRenewalSummary(subscriptionRenewalData);
-            renderSubscriptionAutopay();
-        }
-
-        async function confirmSubscriptionRenewal(option, data) {
-            const amountLabel = option.priceLabel
-                || (option.priceKopeks !== null ? formatPriceFromKopeks(option.priceKopeks, data.currency) : '');
-            const periodLabel = buildRenewalPeriodLabel(option);
-
-            const messageTemplate = t('subscription_renewal.confirm.message');
-            const message = messageTemplate && messageTemplate !== 'subscription_renewal.confirm.message'
-                ? messageTemplate.replace('{period}', periodLabel).replace('{amount}', amountLabel)
-                : `Renew the subscription for ${periodLabel} and pay ${amountLabel}?`;
-
-            const balanceLabel = data?.balanceLabel
-                || (data.balanceKopeks !== null ? formatPriceFromKopeks(data.balanceKopeks, data.currency) : null);
-
-            let finalMessage = message;
-            if (balanceLabel) {
-                const balanceTemplate = t('subscription_renewal.confirm.balance');
-                const balanceText = balanceTemplate && balanceTemplate !== 'subscription_renewal.confirm.balance'
-                    ? balanceTemplate.replace('{balance}', balanceLabel)
-                    : `Current balance: ${balanceLabel}`;
-                finalMessage = `${message}\n${balanceText}`;
-            }
-
-            const titleKey = 'subscription_renewal.confirm.title';
-            const confirmKey = 'subscription_renewal.confirm.accept';
-            const cancelKey = 'subscription_renewal.confirm.cancel';
-
-            const title = t(titleKey);
-            const confirmText = t(confirmKey);
-            const cancelText = t(cancelKey);
-
-            return showConfirmationPopup({
-                title: title === titleKey ? 'Confirm renewal' : title,
-                message: finalMessage,
-                confirmText: confirmText === confirmKey ? 'Pay' : confirmText,
-                cancelText: cancelText === cancelKey ? 'Cancel' : cancelText,
-                destructive: true,
-            });
-        }
-
-        function handleSubscriptionRenewalError(error) {
-            const message = resolveRenewalErrorMessage(error);
-            const titleKey = 'subscription_renewal.title';
-            const title = t(titleKey);
-            showPopup(message, title === titleKey ? 'Subscription renewal' : title);
-        }
-
-        async function submitSubscriptionRenewal() {
-            if (subscriptionRenewalSubmitting || subscriptionRenewalLoading) {
-                return;
-            }
-
-            if (!hasActiveSubscription()) {
-                handleSubscriptionRenewalError(createError('Subscription renewal', t('subscription_renewal.error.validation')));
-                return;
-            }
-
-            const data = subscriptionRenewalData;
-            const selectedPeriodId = subscriptionRenewalSelection.periodId;
-            const option = data?.periods?.find(entry => {
-                if (!entry) return false;
-                const periodId = resolvePurchasePeriodId(entry);
-                return periodId !== null && periodId !== undefined && String(periodId) === String(selectedPeriodId);
-            }) || null;
-            if (!option) {
-                handleSubscriptionRenewalError(createError('Validation', t('subscription_renewal.error.validation')));
-                return;
-            }
-
-            const initData = tg.initData || '';
-            if (!initData) {
-                handleSubscriptionRenewalError(createError('Authorization Error', t('subscription_renewal.error.unauthorized')));
-                return;
-            }
-
-            const confirmed = await confirmSubscriptionRenewal(option, data);
-            if (!confirmed) {
-                return;
-            }
-
-            const submitButton = document.getElementById('subscriptionRenewalSubmit');
-            subscriptionRenewalSubmitting = true;
-            if (submitButton) {
-                submitButton.disabled = true;
-                const label = t('subscription_renewal.submit.loading');
-                submitButton.textContent = label === 'subscription_renewal.submit.loading'
-                    ? 'Processing…'
-                    : label;
-            }
-
-            renderSubscriptionRenewalCard();
-
-            try {
-                // Проверяем, является ли текущая подписка триалом
-                const statusRaw = String(
-                    userData?.user?.subscription_actual_status
-                    || userData?.user?.subscription_status
-                    || ''
-                ).toLowerCase();
-                const typeRaw = String(
-                    userData?.subscription_type
-                    ?? userData?.user?.subscription_type
-                    ?? ''
-                ).toLowerCase();
-                const isTrial = ['trial', 'trialing'].includes(statusRaw) || typeRaw === 'trial';
-
-                const payload = {
-                    initData,
-                    subscription_id: data?.subscriptionId ?? userData?.subscription_id ?? userData?.subscriptionId ?? null,
-                    subscriptionId: data?.subscriptionId ?? userData?.subscription_id ?? userData?.subscriptionId ?? null,
-                    period_id: option.id,
-                    periodId: option.id,
-                    period_days: option.days ?? null,
-                    periodDays: option.days ?? null,
-                };
-
-                // Если это триал, добавляем параметры для перехода на платную подписку
-                if (isTrial) {
-                    payload.subscription_type = 'paid';
-                    payload.subscriptionType = 'paid';
-
-                    // Добавляем параметры трафика, если они выбраны
-                    if (subscriptionRenewalSelection.trafficValue !== null && subscriptionRenewalSelection.trafficValue !== undefined) {
-                        payload.traffic_gb = subscriptionRenewalSelection.trafficValue;
-                        payload.trafficGb = subscriptionRenewalSelection.trafficValue;
-                    }
-
-                    // Добавляем параметры устройств, если они выбраны
-                    if (subscriptionRenewalSelection.devices !== null && subscriptionRenewalSelection.devices !== undefined) {
-                        payload.devices = subscriptionRenewalSelection.devices;
-                        payload.devices_count = subscriptionRenewalSelection.devices;
-                        payload.devicesCount = subscriptionRenewalSelection.devices;
-                    }
-
-                    // Добавляем параметры серверов, если они выбраны
-                    if (subscriptionRenewalSelection.servers instanceof Set && subscriptionRenewalSelection.servers.size > 0) {
-                        payload.servers = Array.from(subscriptionRenewalSelection.servers);
-                        payload.server_ids = Array.from(subscriptionRenewalSelection.servers);
-                        payload.serverIds = Array.from(subscriptionRenewalSelection.servers);
-                    }
-                }
-
-                const response = await fetch('/miniapp/subscription/renewal', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify(payload),
-                });
-                const body = await parseJsonSafe(response);
-                if (!response.ok || (body && body.success === false)) {
-                    const message = extractRenewalError(body, response.status);
-                    throw createError('Subscription renewal error', message, response.status);
-                }
-
-                const successKey = 'subscription_renewal.success';
-                const successMessage = t(successKey);
-                const titleKey = 'subscription_renewal.title';
-                const title = t(titleKey);
-                showPopup(
-                    successMessage === successKey ? 'Subscription renewed successfully.' : successMessage,
-                    title === titleKey ? 'Subscription renewal' : title,
-                );
-
-                await refreshSubscriptionData({ silent: true });
-                await ensureSubscriptionRenewalData({ force: true });
-            } catch (error) {
-                console.error('Failed to renew subscription:', error);
-                handleSubscriptionRenewalError(error);
-            } finally {
-                subscriptionRenewalSubmitting = false;
-                renderSubscriptionRenewalCard();
-            }
-        }
-
-        function setupSubscriptionRenewalEvents() {
-            setupSubscriptionAutopayEvents();
-            document.getElementById('subscriptionRenewalRetry')?.addEventListener('click', () => {
-                ensureSubscriptionRenewalData({ force: true }).catch(error => {
-                    console.warn('Failed to reload renewal options:', error);
-                });
-            });
-            document.getElementById('subscriptionRenewalSubmit')?.addEventListener('click', submitSubscriptionRenewal);
-            document.getElementById('subscriptionRenewalTopupBtn')?.addEventListener('click', () => {
-                openTopupModal();
-            });
-
-            // Device count change handlers
-            document.getElementById('subscriptionRenewalDevicesIncrease')?.addEventListener('click', () => {
-                handleSubscriptionRenewalDevicesChange(1);
-            });
-            document.getElementById('subscriptionRenewalDevicesDecrease')?.addEventListener('click', () => {
-                handleSubscriptionRenewalDevicesChange(-1);
-            });
-        }
-
-        function extractSettingsError(payload, status) {
-            if (status === 401) {
-                return t('subscription_settings.error.unauthorized');
-            }
-            if (!payload || typeof payload !== 'object') {
-                return t('subscription_settings.error.generic');
-            }
-            if (typeof payload.detail === 'string') {
-                return payload.detail;
-            }
-            if (payload.detail && typeof payload.detail === 'object') {
-                if (typeof payload.detail.message === 'string') {
-                    return payload.detail.message;
-                }
-                if (typeof payload.detail.error === 'string') {
-                    return payload.detail.error;
-                }
-            }
-            if (typeof payload.message === 'string') {
-                return payload.message;
-            }
-            if (typeof payload.error === 'string') {
-                return payload.error;
-            }
-            return t('subscription_settings.error.generic');
-        }
-
-        function resolveSettingsErrorMessage(error, fallbackKey = 'subscription_settings.error.generic') {
-            if (!error) {
-                return t(fallbackKey);
-            }
-            if (typeof error === 'string') {
-                return error;
-            }
-            if (typeof error.message === 'string' && error.message.trim()) {
-                return error.message;
-            }
-            if (error.detail) {
-                if (typeof error.detail === 'string' && error.detail.trim()) {
-                    return error.detail;
-                }
-                if (typeof error.detail.message === 'string' && error.detail.message.trim()) {
-                    return error.detail.message;
-                }
-            }
-            if (error.status === 401) {
-                return t('subscription_settings.error.unauthorized');
-            }
-            return t(fallbackKey);
-        }
-
-        function setSubscriptionSettingsActionLoading(section, isLoading) {
-            const ids = {
-                servers: 'subscriptionSettingsServersApply',
-                traffic: 'subscriptionSettingsTrafficApply',
-                devices: 'subscriptionSettingsDevicesApply',
-            };
-            const buttonId = ids[section];
-            if (!buttonId) {
-                return;
-            }
-            const button = document.getElementById(buttonId);
-            if (!button) {
-                return;
-            }
-            if (isLoading) {
-                if (!button.dataset.originalLabel) {
-                    button.dataset.originalLabel = button.textContent;
-                }
-                button.textContent = t('subscription_settings.pending_action');
-                button.disabled = true;
-                return;
-            }
-            const original = button.dataset.originalLabel;
-            const key = button.getAttribute('data-i18n');
-            if (key) {
-                const translated = t(key);
-                if (translated && translated !== key) {
-                    button.textContent = translated;
-                } else if (original) {
-                    button.textContent = original;
-                }
-            } else if (original) {
-                button.textContent = original;
-            }
-            delete button.dataset.originalLabel;
-            button.disabled = false;
-        }
-
-        function handleSubscriptionSettingsError(error) {
-            const message = resolveSettingsErrorMessage(error);
-            showPopup(message, t('subscription_settings.title') || 'Subscription settings');
-        }
-
-        function ensureSubscriptionSettingsLoaded(options = {}) {
-            const { force = false } = options;
-            if (!hasActiveSubscription()) {
-                subscriptionSettingsData = null;
-                subscriptionSettingsPromise = null;
-                subscriptionSettingsError = null;
-                subscriptionSettingsLoading = false;
-                resetSubscriptionSettingsSelections(null);
-                return Promise.resolve(null);
-            }
-
-            if (!force) {
-                if (subscriptionSettingsPromise) {
-                    return subscriptionSettingsPromise;
-                }
-                if (subscriptionSettingsData && !subscriptionSettingsError) {
-                    return Promise.resolve(subscriptionSettingsData);
-                }
-            }
-
-            const initData = tg.initData || '';
-            if (!initData) {
-                const error = createError('Authorization Error', t('subscription_settings.error.unauthorized'));
-                subscriptionSettingsError = error;
-                subscriptionSettingsLoading = false;
-                renderSubscriptionSettingsCard();
-                return Promise.reject(error);
-            }
-
-            subscriptionSettingsLoading = true;
-            subscriptionSettingsError = null;
-            renderSubscriptionSettingsCard();
-
-            const payload = {
-                initData,
-                subscription_id: userData?.subscription_id ?? userData?.subscriptionId ?? null,
-            };
-
-            const request = fetch('/miniapp/subscription/settings', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(payload),
-            }).then(async response => {
-                const body = await parseJsonSafe(response);
-                if (!response.ok || (body && body.success === false)) {
-                    const message = extractSettingsError(body, response.status);
-                    throw createError('Subscription settings error', message, response.status);
-                }
-                const normalized = normalizeSubscriptionSettings(body);
-                subscriptionSettingsData = normalized;
-                subscriptionSettingsError = null;
-                subscriptionSettingsLoading = false;
-                subscriptionSettingsPromise = null;
-                resetSubscriptionSettingsSelections(normalized);
-                renderSubscriptionSettingsCard();
-                return normalized;
-            }).catch(error => {
-                subscriptionSettingsError = error;
-                subscriptionSettingsLoading = false;
-                subscriptionSettingsPromise = null;
-                renderSubscriptionSettingsCard();
-                throw error;
-            });
-
-            subscriptionSettingsPromise = request;
-            return request;
-        }
-
-        function renderSubscriptionSettingsSummary(data) {
-            const summary = document.getElementById('subscriptionSettingsSummary');
-            if (!summary) {
-                return;
-            }
-
-            summary.innerHTML = '';
-
-            if (!data) {
-                return;
-            }
-
-            const fragments = [];
-
-            const serversCount = data.current?.servers?.length
-                ?? ensureArray(userData?.connected_servers).length
-                ?? 0;
-            if (serversCount) {
-                const key = serversCount === 1
-                    ? 'subscription_settings.summary.servers_one'
-                    : 'subscription_settings.summary.servers';
-                const chip = document.createElement('div');
-                chip.className = 'subscription-settings-chip';
-                chip.textContent = t(key).replace('{count}', String(serversCount));
-                fragments.push(chip);
-            }
-
-            const trafficLabel = data.current?.trafficLabel || userData?.user?.traffic_limit_label || '';
-            if (trafficLabel) {
-                const chip = document.createElement('div');
-                chip.className = 'subscription-settings-chip';
-                chip.textContent = t('subscription_settings.summary.traffic').replace('{amount}', trafficLabel);
-                fragments.push(chip);
-            }
-
-            const deviceLimit = data.current?.deviceLimit ?? coercePositiveInt(userData?.user?.device_limit, null);
-            if (deviceLimit !== null && deviceLimit !== undefined) {
-                const chip = document.createElement('div');
-                chip.className = 'subscription-settings-chip';
-                if (deviceLimit > 0) {
-                    const key = deviceLimit === 1
-                        ? 'subscription_settings.summary.devices_one'
-                        : 'subscription_settings.summary.devices';
-                    chip.textContent = t(key).replace('{count}', String(deviceLimit));
-                } else {
-                    chip.textContent = t('subscription_settings.summary.devices').replace(
-                        '{count}',
-                        t('subscription_settings.summary.unlimited')
-                    );
-                }
-                fragments.push(chip);
-            }
-
-            fragments.forEach(fragment => summary.appendChild(fragment));
-        }
-
-        function renderSubscriptionSettingsCard() {
-            const card = document.getElementById('subscriptionSettingsCard');
-            if (!card) {
-                return;
-            }
-
-            // Don't show card automatically - it should be controlled by button clicks
-            // Only render content if card is not hidden
-            if (card.classList.contains('hidden')) {
-                return;
-            }
-
-            const shouldShow = hasActiveSubscription();
-            if (!shouldShow) {
-                return;
-            }
-
-            const loadingBlock = document.getElementById('subscriptionSettingsLoading');
-            const errorBlock = document.getElementById('subscriptionSettingsError');
-            const contentBlock = document.getElementById('subscriptionSettingsContent');
-            const statusText = document.getElementById('subscriptionSettingsStatus');
-
-            if (subscriptionSettingsLoading) {
-                loadingBlock?.classList.remove('hidden');
-                errorBlock?.classList.add('hidden');
-                contentBlock?.classList.remove('hidden');
-                if (statusText) {
-                    statusText.textContent = t('subscription_settings.status.loading');
-                    statusText.classList.remove('hidden');
-                }
-                renderSubscriptionSettingsSummary(subscriptionSettingsData);
-                return;
-            }
-
-            loadingBlock?.classList.add('hidden');
-            statusText?.classList.add('hidden');
-
-            if (subscriptionSettingsError) {
-                contentBlock?.classList.add('hidden');
-                if (errorBlock) {
-                    const errorText = document.getElementById('subscriptionSettingsErrorText');
-                    if (errorText) {
-                        errorText.textContent = resolveSettingsErrorMessage(subscriptionSettingsError);
-                    }
-                    errorBlock.classList.remove('hidden');
-                }
-                return;
-            }
-
-            errorBlock?.classList.add('hidden');
-            contentBlock?.classList.remove('hidden');
-
-            if (!subscriptionSettingsData) {
-                ensureSubscriptionSettingsLoaded().catch(error => {
-                    console.warn('Failed to load subscription settings:', error);
-                });
-                renderSubscriptionSettingsSummary(null);
-                return;
-            }
-
-            renderSubscriptionSettingsSummary(subscriptionSettingsData);
-            renderSubscriptionSettingsServers(subscriptionSettingsData);
-            renderSubscriptionSettingsTraffic(subscriptionSettingsData);
-            renderSubscriptionSettingsDevices(subscriptionSettingsData);
-
-            // Ensure all sections and options are visible
-            const serversOptions = document.getElementById('subscriptionSettingsServersOptions');
-            const trafficOptions = document.getElementById('subscriptionSettingsTrafficOptions');
-            const devicesControl = document.getElementById('subscriptionSettingsDevicesControl');
-            const serversSection = document.getElementById('subscriptionSettingsServersSection');
-            const trafficSection = document.getElementById('subscriptionSettingsTrafficSection');
-            const devicesSection = document.getElementById('subscriptionSettingsDevicesSection');
-
-            if (serversOptions) {
-                serversOptions.classList.remove('hidden');
-                serversOptions.style.display = '';
-            }
-            if (trafficOptions) {
-                trafficOptions.classList.remove('hidden');
-                trafficOptions.style.display = '';
-            }
-            if (devicesControl) {
-                devicesControl.classList.remove('hidden');
-                devicesControl.style.display = '';
-            }
-            if (serversSection) {
-                serversSection.classList.remove('hidden');
-            }
-            if (trafficSection) {
-                trafficSection.classList.remove('hidden');
-            }
-            if (devicesSection) {
-                devicesSection.classList.remove('hidden');
-            }
-        }
-
-        function setupSubscriptionSettingsEvents() {
-            document.getElementById('subscriptionSettingsRetry')?.addEventListener('click', () => {
-                ensureSubscriptionSettingsLoaded({ force: true }).catch(error => {
-                    handleSubscriptionSettingsError(error);
-                });
-            });
-            document.getElementById('subscriptionSettingsServersApply')?.addEventListener('click', () => {
-                // Ensure options are visible and rendered
-                const optionsContainer = document.getElementById('subscriptionSettingsServersOptions');
-                const section = document.getElementById('subscriptionSettingsServersSection');
-                if (optionsContainer && section) {
-                    optionsContainer.classList.remove('hidden');
-                    optionsContainer.style.display = '';
-                    section.classList.remove('hidden');
-                    // Re-render if needed
-                    if (subscriptionSettingsData && (!optionsContainer.children.length || optionsContainer.children.length === 0)) {
-                        renderSubscriptionSettingsServers(subscriptionSettingsData);
-                    }
-                }
-                // Submit changes
-                submitSubscriptionServersChange();
-            });
-
-            document.getElementById('subscriptionSettingsTrafficApply')?.addEventListener('click', () => {
-                // Ensure options are visible and rendered
-                const optionsContainer = document.getElementById('subscriptionSettingsTrafficOptions');
-                const section = document.getElementById('subscriptionSettingsTrafficSection');
-                if (optionsContainer && section) {
-                    optionsContainer.classList.remove('hidden');
-                    optionsContainer.style.display = '';
-                    section.classList.remove('hidden');
-                    // Re-render if needed
-                    if (subscriptionSettingsData && (!optionsContainer.children.length || optionsContainer.children.length === 0)) {
-                        renderSubscriptionSettingsTraffic(subscriptionSettingsData);
-                    }
-                }
-                // Submit changes
-                submitSubscriptionTrafficChange();
-            });
-
-            document.getElementById('subscriptionSettingsDevicesApply')?.addEventListener('click', () => {
-                // Ensure devices control is visible and rendered
-                const devicesControl = document.getElementById('subscriptionSettingsDevicesControl');
-                const section = document.getElementById('subscriptionSettingsDevicesSection');
-                if (devicesControl && section) {
-                    devicesControl.classList.remove('hidden');
-                    devicesControl.style.display = '';
-                    section.classList.remove('hidden');
-                    // Re-render if needed
-                    if (subscriptionSettingsData && (!devicesControl.children.length || devicesControl.children.length === 0)) {
-                        renderSubscriptionSettingsDevices(subscriptionSettingsData);
-                    }
-                }
-                // Submit changes
-                submitSubscriptionDevicesChange();
-            });
-        }
-
-        function setupSubscriptionPurchaseEvents() {
-            document.getElementById('subscriptionPurchaseRetry')?.addEventListener('click', () => {
-                ensureSubscriptionPurchaseData({ force: true }).catch(error => {
-                    console.warn('Failed to reload purchase options:', error);
-                });
-            });
-
-            document.getElementById('subscriptionPurchaseSubmit')?.addEventListener('click', submitSubscriptionPurchase);
-            document.getElementById('subscriptionPurchaseTopupBtn')?.addEventListener('click', () => {
-                closeSubscriptionPurchaseModal();
-                openTopupModal();
-            });
-
-            document.getElementById('subscriptionPurchaseDevicesDecrease')?.addEventListener('click', () => {
-                handleSubscriptionPurchaseDevicesChange(-1);
-            });
-
-            document.getElementById('subscriptionPurchaseDevicesIncrease')?.addEventListener('click', () => {
-                handleSubscriptionPurchaseDevicesChange(1);
-            });
-
-            const modalBackdrop = document.getElementById('subscriptionPurchaseModal');
-            if (modalBackdrop) {
-                modalBackdrop.addEventListener('click', event => {
-                    if (event.target === modalBackdrop) {
-                        closeSubscriptionPurchaseModal();
-                    }
-                });
-            }
-
-            document.getElementById('subscriptionPurchaseModalCloseBtn')?.addEventListener('click', closeSubscriptionPurchaseModal);
-        }
-
-        function resolveServerPriceLabel(option, currency) {
-            if (!option) {
-                return '';
-            }
-            if (option.priceLabel) {
-                return option.priceLabel;
-            }
-            if (option.priceKopeks === null || option.priceKopeks === undefined) {
-                return '';
-            }
-            const price = coercePositiveInt(option.priceKopeks, null);
-            if (price === null) {
-                return '';
-            }
-            if (price === 0) {
-                return t('subscription_settings.price.included');
-            }
-            return formatPriceFromKopeks(price, currency);
-        }
-
-        function renderSubscriptionSettingsServers(data) {
-            const list = document.getElementById('subscriptionSettingsServersOptions') || document.getElementById('subscriptionSettingsServersList');
-            const emptyState = document.getElementById('subscriptionSettingsServersEmpty');
-            const disabledNote = document.getElementById('subscriptionSettingsServersDisabled');
-            const applyButton = document.getElementById('subscriptionSettingsServersApply');
-            const hintElement = document.getElementById('subscriptionSettingsServersHint');
-            const metaElement = document.getElementById('subscriptionSettingsServersMeta');
-
-            if (!list || !applyButton) {
-                return;
-            }
-
-            const available = ensureArray(data?.servers?.available);
-            const minSelectable = coercePositiveInt(data?.servers?.min, 0) || 0;
-            const maxSelectable = coercePositiveInt(data?.servers?.max, 0) || 0;
-            const canUpdate = data?.servers?.canUpdate !== false;
-            const hint = data?.servers?.hint || t('subscription_settings.servers.hint');
-
-            const selectionSet = subscriptionSettingsSelections.servers instanceof Set
-                ? new Set(subscriptionSettingsSelections.servers)
-                : new Set();
-            const currentSet = data.current?.serverSet instanceof Set
-                ? data.current.serverSet
-                : new Set();
-
-            list.innerHTML = '';
-
-            if (metaElement) {
-                const selectedCount = selectionSet.size || currentSet.size;
-                const limitTemplate = t('subscription_settings.servers.limit');
-                metaElement.textContent = limitTemplate === 'subscription_settings.servers.limit'
-                    ? `ВЫБРАНО: ${selectedCount}`
-                    : limitTemplate.replace('{count}', String(selectedCount)).toUpperCase();
-            }
-
-            if (hintElement) {
-                hintElement.textContent = hint || '';
-            }
-
-            if (!available.length) {
-                emptyState?.classList.remove('hidden');
-                disabledNote?.classList.toggle('hidden', canUpdate);
-                applyButton.disabled = true;
-                return;
-            }
-
-            emptyState?.classList.add('hidden');
-            disabledNote?.classList.toggle('hidden', canUpdate);
-
-            available.forEach(option => {
-                if (!option) {
-                    return;
-                }
-                const isSelected = selectionSet.has(option.uuid) || (!selectionSet.size && option.isConnected);
-                if (isSelected && option.uuid && !selectionSet.has(option.uuid)) {
-                    selectionSet.add(option.uuid);
-                }
-
-                const button = document.createElement('button');
-                button.type = 'button';
-                button.className = 'subscription-settings-toggle';
-                if (isSelected) {
-                    button.classList.add('active');
-                }
-                const isOptionEnabled = canUpdate && coerceBoolean(option.isAvailable, true);
-                if (!isOptionEnabled) {
-                    button.classList.add('disabled');
-                }
-
-                const label = document.createElement('div');
-                label.className = 'subscription-settings-toggle-label';
-
-                const title = document.createElement('div');
-                title.className = 'subscription-settings-toggle-title';
-                title.textContent = option.name || option.uuid || t('values.not_available');
-                label.appendChild(title);
-
-                const meta = resolveServerPriceLabel(option, data.currency);
-
-                // Add "Включено" status for selected servers (instead of price if it's "Включено")
-                if (isSelected) {
-                    const statusSpan = document.createElement('div');
-                    statusSpan.className = 'subscription-settings-toggle-status';
-                    statusSpan.textContent = t('subscription_settings.price.included');
-                    statusSpan.style.fontSize = '12px';
-                    statusSpan.style.color = 'var(--primary)';
-                    statusSpan.style.marginTop = '4px';
-                    label.appendChild(statusSpan);
-                } else if (meta && meta !== t('subscription_settings.price.included')) {
-                    // Only show price if it's not "Включено" and server is not selected
-                    const metaSpan = document.createElement('div');
-                    metaSpan.className = 'subscription-settings-toggle-meta';
-                    metaSpan.textContent = meta;
-                    label.appendChild(metaSpan);
-                }
-
-                button.appendChild(label);
-
-                if (isOptionEnabled && option.uuid) {
-                    button.addEventListener('click', () => {
-                        if (subscriptionSettingsAction === 'servers') {
-                            return;
-                        }
-                        if (selectionSet.has(option.uuid)) {
-                            selectionSet.delete(option.uuid);
-                        } else {
-                            selectionSet.add(option.uuid);
-                        }
-                        subscriptionSettingsSelections.servers = new Set(selectionSet);
-                        renderSubscriptionSettingsServers(data);
-                    });
-                }
-
-                list.appendChild(button);
-            });
-
-            subscriptionSettingsSelections.servers = new Set(selectionSet);
-
-            const selectedCount = selectionSet.size;
-            const belowMin = selectedCount < (minSelectable || 1);
-            const aboveMax = maxSelectable && selectedCount > maxSelectable;
-            const hasChanges = !isSameSet(selectionSet, currentSet);
-            const isLoading = subscriptionSettingsAction === 'servers';
-
-            if (hintElement && (belowMin || aboveMax)) {
-                hintElement.textContent = t('subscription_settings.error.validation');
-            }
-
-            applyButton.disabled = isLoading
-                || !canUpdate
-                || !hasChanges
-                || selectedCount === 0
-                || belowMin
-                || aboveMax;
-        }
-
-        function renderSubscriptionSettingsTraffic(data) {
-            const list = document.getElementById('subscriptionSettingsTrafficList');
-            const emptyState = document.getElementById('subscriptionSettingsTrafficEmpty');
-            const disabledNote = document.getElementById('subscriptionSettingsTrafficDisabled');
-            const applyButton = document.getElementById('subscriptionSettingsTrafficApply');
-            const hintElement = document.getElementById('subscriptionSettingsTrafficHint');
-            const metaElement = document.getElementById('subscriptionSettingsTrafficMeta');
-
-            if (!list || !applyButton) {
-                return;
-            }
-
-            const options = ensureArray(data?.traffic?.options);
-            const canUpdate = data?.traffic?.canUpdate !== false;
-            const currentValue = data?.traffic?.currentValue;
-            const selectedValue = subscriptionSettingsSelections.traffic !== null
-                ? subscriptionSettingsSelections.traffic
-                : currentValue;
-
-            list.innerHTML = '';
-
-            if (metaElement) {
-                const currentLabel = data.current?.trafficLabel || '';
-                metaElement.textContent = currentLabel
-                    ? t('subscription_settings.traffic.current').replace('{limit}', currentLabel)
-                    : '';
-            }
-
-            if (!options.length) {
-                emptyState?.classList.remove('hidden');
-                disabledNote?.classList.toggle('hidden', canUpdate);
-                applyButton.disabled = true;
-                if (hintElement) {
-                    hintElement.textContent = '';
-                }
-                return;
-            }
-
-            emptyState?.classList.add('hidden');
-            disabledNote?.classList.toggle('hidden', canUpdate);
-
-            options.forEach(option => {
-                if (!option) {
-                    return;
-                }
-                const value = option.value;
-                const label = option.label || (value !== null ? formatTrafficLimit(value) : t('values.not_available'));
-
-                const button = document.createElement('button');
-                button.type = 'button';
-                button.className = 'subscription-settings-toggle';
-                if (value === selectedValue) {
-                    button.classList.add('active');
-                }
-                const isOptionEnabled = canUpdate && coerceBoolean(option.isAvailable, true);
-                if (!isOptionEnabled) {
-                    button.classList.add('disabled');
-                }
-
-                const labelContainer = document.createElement('div');
-                labelContainer.className = 'subscription-settings-toggle-label';
-
-                const title = document.createElement('div');
-                title.className = 'subscription-settings-toggle-title';
-                title.textContent = label;
-                labelContainer.appendChild(title);
-
-                const meta = option.priceLabel
-                    || (option.priceKopeks !== null && option.priceKopeks !== undefined
-                        ? resolveServerPriceLabel(option, data.currency)
-                        : '');
-                if (meta) {
-                    const metaSpan = document.createElement('div');
-                    metaSpan.className = 'subscription-settings-toggle-meta';
-                    metaSpan.textContent = meta;
-                    labelContainer.appendChild(metaSpan);
-                }
-
-                button.appendChild(labelContainer);
-
-                if (isOptionEnabled && value !== null) {
-                    button.addEventListener('click', () => {
-                        if (subscriptionSettingsAction === 'traffic') {
-                            return;
-                        }
-                        subscriptionSettingsSelections.traffic = value;
-                        renderSubscriptionSettingsTraffic(data);
-                    });
-                }
-
-                list.appendChild(button);
-            });
-
-            if (hintElement) {
-                hintElement.textContent = '';
-            }
-
-            const isLoading = subscriptionSettingsAction === 'traffic';
-            const changed = selectedValue !== null && selectedValue !== currentValue;
-            applyButton.disabled = isLoading || !canUpdate || !changed;
-        }
-
-        function resolveDevicePriceLabel(value, devicesInfo, currency) {
-            const options = ensureArray(devicesInfo?.options);
-            const matched = options.find(option => coercePositiveInt(option.value, null) === value);
-            if (matched) {
-                if (matched.priceLabel) {
-                    return matched.priceLabel;
-                }
-                if (matched.priceKopeks !== null && matched.priceKopeks !== undefined) {
-                    const normalized = coercePositiveInt(matched.priceKopeks, null);
-                    if (normalized !== null) {
-                        if (normalized === 0) {
-                            return t('subscription_settings.price.included');
-                        }
-                        return formatPriceFromKopeks(normalized, currency);
-                    }
-                }
-            }
-
-            const basePrice = coercePositiveInt(
-                devicesInfo?.priceKopeks ?? devicesInfo?.price_kopeks ?? devicesInfo?.price ?? null,
-                null
-            );
-            if (basePrice !== null) {
-                if (basePrice === 0) {
-                    return t('subscription_settings.price.included');
-                }
-                return formatPriceFromKopeks(basePrice, currency);
-            }
-
-            return '';
-        }
-
-        function renderSubscriptionSettingsDevices(data) {
-            const decreaseBtn = document.getElementById('subscriptionSettingsDevicesDecrease');
-            const increaseBtn = document.getElementById('subscriptionSettingsDevicesIncrease');
-            const valueElement = document.getElementById('subscriptionSettingsDevicesValue');
-            const priceElement = document.getElementById('subscriptionSettingsDevicesPrice');
-            const disabledNote = document.getElementById('subscriptionSettingsDevicesDisabled');
-            const applyButton = document.getElementById('subscriptionSettingsDevicesApply');
-            const hintElement = document.getElementById('subscriptionSettingsDevicesHint');
-            const devicesControl = document.getElementById('subscriptionSettingsDevicesControl');
-            const devicesSection = document.getElementById('subscriptionSettingsDevicesSection');
-
-            if (!decreaseBtn || !increaseBtn || !valueElement || !applyButton) {
-                return;
-            }
-
-            // Ensure devices control and section are visible
-            if (devicesControl) {
-                devicesControl.classList.remove('hidden');
-                devicesControl.style.display = '';
-            }
-            if (devicesSection) {
-                devicesSection.classList.remove('hidden');
-            }
-
-            const devicesInfo = data?.devices || {};
-            const canUpdate = devicesInfo.canUpdate !== false;
-            const min = coercePositiveInt(devicesInfo.min, 0) || 0;
-            const max = coercePositiveInt(devicesInfo.max, 0) || 0;
-            const step = coercePositiveInt(devicesInfo.step, 1) || 1;
-            const current = coercePositiveInt(devicesInfo.current, coercePositiveInt(data?.current?.deviceLimit, 0)) || 0;
-
-            if (subscriptionSettingsSelections.devices == null) {
-                subscriptionSettingsSelections.devices = current;
-            }
-
-            let selected = coercePositiveInt(subscriptionSettingsSelections.devices, current);
-            // Ensure selected doesn't exceed max
-            if (max > 0 && selected > max) {
-                selected = max;
-            }
-            subscriptionSettingsSelections.devices = selected;
-
-            const unlimited = selected <= 0;
-            // Display numeric value for the selector
-            valueElement.textContent = unlimited ? '∞' : String(selected);
-
-            if (priceElement) {
-                priceElement.textContent = resolveDevicePriceLabel(selected, devicesInfo, data.currency);
-            }
-
-            disabledNote?.classList.toggle('hidden', canUpdate);
-
-            const isLoading = subscriptionSettingsAction === 'devices';
-            const canDecrease = canUpdate && !isLoading && selected > min;
-            const canIncrease = canUpdate && !isLoading && (!max || selected < max);
-
-            decreaseBtn.disabled = !canDecrease;
-            increaseBtn.disabled = !canIncrease;
-
-            decreaseBtn.onclick = () => {
-                if (!canDecrease) {
-                    return;
-                }
-                const next = Math.max(min, selected - step);
-                subscriptionSettingsSelections.devices = next;
-                renderSubscriptionSettingsDevices(data);
-            };
-
-            increaseBtn.onclick = () => {
-                if (!canIncrease) {
-                    return;
-                }
-                const limit = max > 0 ? max : (selected + step);
-                const next = Math.min(limit, selected + step);
-                subscriptionSettingsSelections.devices = next;
-                renderSubscriptionSettingsDevices(data);
-            };
-
-            const changed = selected !== current;
-            applyButton.disabled = isLoading || !canUpdate || !changed;
-            if (hintElement) {
-                hintElement.textContent = '';
-            }
-        }
-
-        async function submitSubscriptionServersChange() {
-            if (subscriptionSettingsAction) {
-                return;
-            }
-            const data = subscriptionSettingsData;
-            if (!data) {
-                try {
-                    await ensureSubscriptionSettingsLoaded({ force: true });
-                } catch (error) {
-                    handleSubscriptionSettingsError(error);
-                }
-                return;
-            }
-            const selectionSet = subscriptionSettingsSelections.servers instanceof Set
-                ? subscriptionSettingsSelections.servers
-                : new Set();
-            const selected = Array.from(selectionSet);
-            const minSelectable = coercePositiveInt(data.servers?.min, 0) || 0;
-            const maxSelectable = coercePositiveInt(data.servers?.max, 0) || 0;
-            const currentSet = data.current?.serverSet instanceof Set ? data.current.serverSet : new Set();
-
-            if (!selected.length || selected.length < (minSelectable || 1) || (maxSelectable && selected.length > maxSelectable)) {
-                handleSubscriptionSettingsError(createError('Validation', t('subscription_settings.error.validation')));
-                return;
-            }
-            if (isSameSet(new Set(selected), currentSet)) {
-                return;
-            }
-
-            const initData = tg.initData || '';
-            if (!initData) {
-                handleSubscriptionSettingsError(createError('Auth', t('subscription_settings.error.unauthorized')));
-                return;
-            }
-
-            const added = selected.filter(uuid => !currentSet.has(uuid));
-            const removed = Array.from(currentSet).filter(uuid => !selected.includes(uuid));
-            const proceedServers = await confirmSubscriptionServersUpdate(data, { added, removed });
-            if (!proceedServers) {
-                return;
-            }
-
-            const payload = {
-                initData,
-                squads: selected,
-                servers: selected,
-                squad_uuids: selected,
-                server_uuids: selected,
-                subscription_id: data.subscriptionId || userData?.subscription_id || userData?.subscriptionId || null,
-            };
-
-            subscriptionSettingsAction = 'servers';
-            setSubscriptionSettingsActionLoading('servers', true);
-
-            try {
-                const response = await fetch('/miniapp/subscription/servers', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify(payload),
-                });
-                const body = await parseJsonSafe(response);
-                if (!response.ok || (body && body.success === false)) {
-                    const message = extractSettingsError(body, response.status);
-                    throw createError('Subscription settings error', message, response.status);
-                }
-                showPopup(t('subscription_settings.success.servers'), t('subscription_settings.title'));
-                await refreshSubscriptionData({ silent: true });
-                await ensureSubscriptionSettingsLoaded({ force: true });
-            } catch (error) {
-                handleSubscriptionSettingsError(error);
-            } finally {
-                subscriptionSettingsAction = null;
-                setSubscriptionSettingsActionLoading('servers', false);
-                renderSubscriptionSettingsCard();
-            }
-        }
-
-        async function submitSubscriptionTrafficChange() {
-            if (subscriptionSettingsAction) {
-                return;
-            }
-            const data = subscriptionSettingsData;
-            if (!data) {
-                try {
-                    await ensureSubscriptionSettingsLoaded({ force: true });
-                } catch (error) {
-                    handleSubscriptionSettingsError(error);
-                }
-                return;
-            }
-
-            const selected = subscriptionSettingsSelections.traffic;
-            const currentValue = data.traffic?.currentValue;
-            if (selected === null || selected === undefined) {
-                handleSubscriptionSettingsError(createError('Validation', t('subscription_settings.error.validation')));
-                return;
-            }
-            if (selected === currentValue) {
-                return;
-            }
-
-            const initData = tg.initData || '';
-            if (!initData) {
-                handleSubscriptionSettingsError(createError('Auth', t('subscription_settings.error.unauthorized')));
-                return;
-            }
-
-            const proceedTraffic = await confirmSubscriptionTrafficUpdate(data, currentValue, selected);
-            if (!proceedTraffic) {
-                return;
-            }
-
-            const payload = {
-                initData,
-                traffic: selected,
-                traffic_gb: selected,
-                trafficGb: selected,
-                subscription_id: data.subscriptionId || userData?.subscription_id || userData?.subscriptionId || null,
-            };
-
-            subscriptionSettingsAction = 'traffic';
-            setSubscriptionSettingsActionLoading('traffic', true);
-
-            try {
-                const response = await fetch('/miniapp/subscription/traffic', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify(payload),
-                });
-                const body = await parseJsonSafe(response);
-                if (!response.ok || (body && body.success === false)) {
-                    const message = extractSettingsError(body, response.status);
-                    throw createError('Subscription settings error', message, response.status);
-                }
-                showPopup(t('subscription_settings.success.traffic'), t('subscription_settings.title'));
-                await refreshSubscriptionData({ silent: true });
-                await ensureSubscriptionSettingsLoaded({ force: true });
-            } catch (error) {
-                handleSubscriptionSettingsError(error);
-            } finally {
-                subscriptionSettingsAction = null;
-                setSubscriptionSettingsActionLoading('traffic', false);
-                renderSubscriptionSettingsCard();
-            }
-        }
-
-        async function submitSubscriptionDevicesChange() {
-            if (subscriptionSettingsAction) {
-                return;
-            }
-            const data = subscriptionSettingsData;
-            if (!data) {
-                try {
-                    await ensureSubscriptionSettingsLoaded({ force: true });
-                } catch (error) {
-                    handleSubscriptionSettingsError(error);
-                }
-                return;
-            }
-
-            const selected = coercePositiveInt(subscriptionSettingsSelections.devices, null);
-            const current = coercePositiveInt(data.devices?.current, coercePositiveInt(data.current?.deviceLimit, 0)) || 0;
-            if (selected === null) {
-                handleSubscriptionSettingsError(createError('Validation', t('subscription_settings.error.validation')));
-                return;
-            }
-            if (selected === current) {
-                return;
-            }
-
-            const min = coercePositiveInt(data.devices?.min, 0) || 0;
-            const max = coercePositiveInt(data.devices?.max, 0) || 0;
-            if (selected < min || (max && selected > max)) {
-                handleSubscriptionSettingsError(createError('Validation', t('subscription_settings.error.validation')));
-                return;
-            }
-
-            const initData = tg.initData || '';
-            if (!initData) {
-                handleSubscriptionSettingsError(createError('Auth', t('subscription_settings.error.unauthorized')));
-                return;
-            }
-
-            const proceedDevices = await confirmSubscriptionDevicesUpdate(data, current, selected);
-            if (!proceedDevices) {
-                return;
-            }
-
-            const payload = {
-                initData,
-                devices: selected,
-                device_limit: selected,
-                deviceLimit: selected,
-                subscription_id: data.subscriptionId || userData?.subscription_id || userData?.subscriptionId || null,
-            };
-
-            subscriptionSettingsAction = 'devices';
-            setSubscriptionSettingsActionLoading('devices', true);
-
-            try {
-                const response = await fetch('/miniapp/subscription/devices', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify(payload),
-                });
-                const body = await parseJsonSafe(response);
-                if (!response.ok || (body && body.success === false)) {
-                    const message = extractSettingsError(body, response.status);
-                    throw createError('Subscription settings error', message, response.status);
-                }
-                showPopup(t('subscription_settings.success.devices'), t('subscription_settings.title'));
-                await refreshSubscriptionData({ silent: true });
-                await ensureSubscriptionSettingsLoaded({ force: true });
-            } catch (error) {
-                handleSubscriptionSettingsError(error);
-            } finally {
-                subscriptionSettingsAction = null;
-                setSubscriptionSettingsActionLoading('devices', false);
-                renderSubscriptionSettingsCard();
-            }
-        }
-
-        function restoreSubscriptionPurchaseCard() {
-            const wrapper = document.getElementById('subscriptionPurchaseCardWrapper');
-            const card = document.getElementById('subscriptionPurchaseCard');
-            if (!card || !wrapper) {
-                return;
-            }
-            if (!wrapper.contains(card)) {
-                wrapper.appendChild(card);
-                card.classList.remove('as-modal');
-            }
-        }
-
-        function shouldShowPurchaseConfigurator() {
-            if (subscriptionPurchaseModalOpen) {
-                return true;
-            }
-            // Показываем карточку покупки для триалов и когда нет платной подписки
-            return Boolean(userData?.user) && !hasPaidSubscription();
-        }
-
-        function resolvePurchasePeriodId(period) {
-            if (!period || typeof period !== 'object') {
-                return null;
-            }
-            if (period.id !== undefined && period.id !== null) {
-                return String(period.id);
-            }
-            if (period.period_id !== undefined && period.period_id !== null) {
-                return String(period.period_id);
-            }
-            if (period.periodId !== undefined && period.periodId !== null) {
-                return String(period.periodId);
-            }
-            if (period.code !== undefined && period.code !== null) {
-                return String(period.code);
-            }
-            if (period.key !== undefined && period.key !== null) {
-                return String(period.key);
-            }
-            const days = resolvePurchasePeriodDays(period);
-            if (days !== null) {
-                return `days:${days}`;
-            }
-            return null;
-        }
-
-        function resolvePurchasePeriodDays(period) {
-            if (!period || typeof period !== 'object') {
-                return null;
-            }
-
-            const dayFields = ['days', 'period_days', 'periodDays', 'duration_days', 'durationDays'];
-            for (const field of dayFields) {
-                const value = coercePositiveInt(period[field], null);
-                if (value !== null) {
-                    return value;
-                }
-            }
-
-            const monthFields = ['months', 'period_months', 'periodMonths', 'period'];
-            for (const field of monthFields) {
-                const value = coercePositiveInt(period[field], null);
-                if (value !== null && value > 0) {
-                    return value * 30;
-                }
-            }
-
-            return null;
-        }
-
-        function resolvePurchasePeriodLabel(period) {
-            if (!period) {
-                return '';
-            }
-            if (typeof period.label === 'string' && period.label.trim().length) {
-                return period.label;
-            }
-            if (typeof period.title === 'string' && period.title.trim().length) {
-                return period.title;
-            }
-            const months = coercePositiveInt(period.months ?? period.period ?? period.period_months ?? period.periodMonths, null);
-            if (months) {
-                return formatPeriodLabel(months);
-            }
-            const days = resolvePurchasePeriodDays(period);
-            if (days) {
-                const approxMonths = Math.max(1, Math.round(days / 30));
-                return formatPeriodLabel(approxMonths);
-            }
-            return '';
-        }
-
-        function resolvePurchasePrice(valueSources, labelSources, currency) {
-            for (const source of valueSources) {
-                const value = coercePositiveInt(source, null);
-                if (value !== null) {
-                    return {
-                        kopeks: value,
-                        label: formatPriceFromKopeks(value, currency),
-                    };
-                }
-            }
-
-            for (const label of labelSources) {
-                if (typeof label === 'string' && label.trim().length) {
-                    return {
-                        kopeks: null,
-                        label,
-                    };
-                }
-            }
-
-            return { kopeks: null, label: '' };
-        }
-
-        function formatPurchaseTrafficLabel(option) {
-            if (option == null) {
-                return '';
-            }
-            if (typeof option === 'string') {
-                return option;
-            }
-            if (typeof option.label === 'string' && option.label.trim().length) {
-                return option.label;
-            }
-            const rawValue = option.value ?? option.traffic ?? option.limit ?? option.amount ?? option.gigabytes ?? option.gb ?? null;
-            const numeric = coerceNumber(rawValue, null);
-            if (numeric === null) {
-                return rawValue != null ? String(rawValue) : '';
-            }
-            if (numeric <= 0) {
-                const unlimited = t('subscription_purchase.traffic.unlimited');
-                return unlimited === 'subscription_purchase.traffic.unlimited' ? 'Unlimited' : unlimited;
-            }
-            return formatTrafficLimit(numeric);
-        }
-
-        function normalizePurchaseServerOption(option, currency) {
-            if (!option) {
-                return null;
-            }
-            const base = normalizeServerEntry(option);
-            if (!base) {
-                return null;
-            }
-            const uuid = base.uuid ? String(base.uuid) : null;
-            const priceInfo = resolvePurchasePrice(
-                [
-                    option.final_price_kopeks,
-                    option.finalPriceKopeks,
-                    option.total_price_kopeks,
-                    option.totalPriceKopeks,
-                    option.price_kopeks,
-                    option.priceKopeks,
-                    option.price,
-                    option.cost_kopeks,
-                    option.cost,
-                ],
-                [option.price_label, option.priceLabel],
-                currency
-            );
-            const originalInfo = resolvePurchasePrice(
-                [
-                    option.original_price_kopeks,
-                    option.originalPriceKopeks,
-                    option.base_price_kopeks,
-                    option.basePriceKopeks,
-                ],
-                [option.original_price_label, option.originalPriceLabel],
-                currency
-            );
-            return {
-                uuid,
-                name: option.name || base.name || uuid || '',
-                priceKopeks: priceInfo.kopeks,
-                priceLabel: priceInfo.label,
-                originalPriceKopeks: originalInfo.kopeks,
-                originalPriceLabel: originalInfo.label,
-                discountPercent: coercePositiveInt(option.discount_percent ?? option.discountPercent, null),
-                isAvailable: coerceBoolean(option.is_available ?? option.available ?? option.enabled ?? option.selectable ?? true, true),
-                description: option.description || '',
-            };
-        }
-
-        function filterActivePurchaseServerOptions(options) {
-            if (!Array.isArray(options)) {
-                return [];
-            }
-            return options.filter(option => coerceBoolean(option?.isAvailable ?? true, true));
-        }
-
-        function getSelectedSubscriptionPurchasePeriod() {
-            const data = subscriptionPurchaseData;
-            const periods = ensureArray(data?.periods);
-            if (!periods.length) {
-                subscriptionPurchaseSelections.periodId = null;
-                return null;
-            }
-            const selectedId = subscriptionPurchaseSelections.periodId;
-            if (selectedId != null) {
-                const matched = periods.find(period => {
-                    const id = resolvePurchasePeriodId(period);
-                    return id !== null && String(id) === String(selectedId);
-                });
-                if (matched) {
-                    return matched;
-                }
-            }
-            const fallback = periods[0];
-            subscriptionPurchaseSelections.periodId = resolvePurchasePeriodId(fallback);
-            return fallback;
-        }
-
-        function getSubscriptionPurchaseTrafficConfig(period) {
-            const base = subscriptionPurchaseData?.traffic || {};
-            const override = period && (period.traffic || period.traffic_options || period.trafficOptions);
-            const result = { ...base };
-            if (override && typeof override === 'object') {
-                Object.assign(result, override);
-                if (override.options || override.available) {
-                    result.options = ensureArray(override.options || override.available);
-                }
-            }
-            if (!Array.isArray(result.options) && base.options) {
-                result.options = ensureArray(base.options);
-            }
-            return result;
-        }
-
-        function getSubscriptionPurchaseServersConfig(period) {
-            const base = subscriptionPurchaseData?.servers || subscriptionPurchaseData?.countries || {};
-            const override = period && (period.servers || period.countries);
-            const result = { ...base };
-            if (override && typeof override === 'object') {
-                Object.assign(result, override);
-                if (override.options || override.available) {
-                    result.options = ensureArray(override.options || override.available);
-                }
-            }
-            if (!Array.isArray(result.options)) {
-                result.options = ensureArray(base.options || base.available || []);
-            }
-            return result;
-        }
-
-        function getSubscriptionPurchaseDevicesConfig(period) {
-            const base = subscriptionPurchaseData?.devices || {};
-            const override = period && (period.devices || period.device_options || period.deviceOptions);
-            const result = { ...base };
-            if (override && typeof override === 'object') {
-                Object.assign(result, override);
-                if (override.options) {
-                    result.options = ensureArray(override.options);
-                }
-            }
-            if (!Array.isArray(result.options) && base.options) {
-                result.options = ensureArray(base.options);
-            }
-            return result;
-        }
-
-        function ensurePurchaseTrafficSelection(config) {
-            const selectable = config && config.selectable !== false && String(config.mode || '').toLowerCase() !== 'fixed';
-            const options = ensureArray(config?.options || config?.available || []);
-            if (!selectable || !options.length) {
-                if (config && (config.current !== undefined || config.default !== undefined)) {
-                    const fixedValue = config.current ?? config.default ?? null;
-                    if (fixedValue !== undefined) {
-                        subscriptionPurchaseSelections.trafficValue = fixedValue;
-                    }
-                }
-                return;
-            }
-
-            const normalizedOptions = options
-                .map(option => ({
-                    raw: option,
-                    value: option?.value ?? option?.traffic ?? option?.limit ?? option?.amount ?? option?.id ?? option?.code ?? null,
-                }))
-                .filter(option => option.value !== null && option.value !== undefined);
-
-            let selectedValue = subscriptionPurchaseSelections.trafficValue;
-            if (selectedValue !== null && selectedValue !== undefined) {
-                const exists = normalizedOptions.some(option => String(option.value) === String(selectedValue));
-                if (!exists) {
-                    selectedValue = null;
-                }
-            }
-
-            if (selectedValue === null) {
-                const defaultOption = normalizedOptions.find(option => coerceBoolean(option.raw?.is_default ?? option.raw?.isDefault, false));
-                const fallback = defaultOption || normalizedOptions[0];
-                selectedValue = fallback ? fallback.value : null;
-            }
-
-            subscriptionPurchaseSelections.trafficValue = selectedValue;
-        }
-
-        function ensurePurchaseServersSelection(config) {
-            const currency = (subscriptionPurchaseData?.currency || userData?.balance_currency || 'RUB').toString().toUpperCase();
-            const options = ensureArray(config?.options || config?.available || []);
-            const normalizedOptions = options
-                .map(option => normalizePurchaseServerOption(option, currency))
-                .filter(Boolean);
-            const activeOptions = filterActivePurchaseServerOptions(normalizedOptions);
-            const availableUuids = activeOptions.map(option => option.uuid).filter(Boolean);
-            let minSelectable = coercePositiveInt(config?.min ?? config?.min_selectable ?? config?.minRequired, 0) || 0;
-            let maxSelectable = coercePositiveInt(config?.max ?? config?.max_selectable ?? config?.maxAllowed, 0) || 0;
-
-            if (!availableUuids.length) {
-                minSelectable = 0;
-                if (maxSelectable) {
-                    maxSelectable = 0;
-                }
-            } else {
-                if (minSelectable) {
-                    minSelectable = Math.min(minSelectable, availableUuids.length);
-                }
-                if (maxSelectable) {
-                    maxSelectable = Math.min(maxSelectable, availableUuids.length);
-                }
-            }
-            const selection = subscriptionPurchaseSelections.servers instanceof Set
-                ? new Set(subscriptionPurchaseSelections.servers)
-                : new Set();
-
-            Array.from(selection).forEach(value => {
-                if (!availableUuids.includes(String(value))) {
-                    selection.delete(value);
-                }
-            });
-
-            const selectable = config?.selectable !== false
-                && availableUuids.length > 1
-                && (maxSelectable === 0 || maxSelectable > 1 || minSelectable === 0);
-            if (!selectable) {
-                selection.clear();
-                if (availableUuids[0]) {
-                    selection.add(availableUuids[0]);
-                }
-                subscriptionPurchaseSelections.servers = selection;
-                return;
-            }
-
-            if (!selection.size) {
-                const defaults = ensureArray(config?.selected || config?.default || config?.current || config?.preselected || []);
-                defaults.map(String).forEach(uuid => {
-                    if (availableUuids.includes(uuid)) {
-                        selection.add(uuid);
-                    }
-                });
-            }
-
-            if (!selection.size && minSelectable > 0) {
-                availableUuids.slice(0, minSelectable).forEach(uuid => selection.add(uuid));
-            }
-
-            subscriptionPurchaseSelections.servers = selection;
-        }
-
-        function ensurePurchaseDevicesSelection(config) {
-            const min = coercePositiveInt(config?.min ?? config?.minimum ?? 0, 0) || 0;
-            const max = coercePositiveInt(config?.max ?? config?.maximum ?? 0, 0) || 0;
-            const defaults = [
-                config?.current,
-                config?.default,
-                config?.included,
-                config?.base,
-            ];
-
-            let value = coercePositiveInt(subscriptionPurchaseSelections.devices, null);
-            if (value === null) {
-                for (const candidate of defaults) {
-                    const normalized = coercePositiveInt(candidate, null);
-                    if (normalized !== null) {
-                        value = normalized;
-                        break;
-                    }
-                }
-            }
-
-            if (value === null) {
-                value = min > 0 ? min : 1;
-            }
-
-            value = Math.max(min, value);
-            if (max && value > max) {
-                value = max;
-            }
-
-            subscriptionPurchaseSelections.devices = value;
-        }
-
-        function ensureSubscriptionPurchaseSelectionsValidForPeriod(period) {
-            const trafficConfig = getSubscriptionPurchaseTrafficConfig(period);
-            ensurePurchaseTrafficSelection(trafficConfig);
-            const serversConfig = getSubscriptionPurchaseServersConfig(period);
-            ensurePurchaseServersSelection(serversConfig);
-            const devicesConfig = getSubscriptionPurchaseDevicesConfig(period);
-            ensurePurchaseDevicesSelection(devicesConfig);
-        }
-
-        function normalizeSubscriptionPurchasePayload(payload) {
-            if (!payload || typeof payload !== 'object') {
-                return null;
-            }
-
-            const root = payload.data || payload.config || payload;
-            const currency = (root.currency || payload.currency || userData?.balance_currency || 'RUB').toString().toUpperCase();
-            const balanceKopeks = coercePositiveInt(
-                root.balance_kopeks
-                ?? root.balanceKopeks
-                ?? payload.balance_kopeks
-                ?? payload.balanceKopeks
-                ?? userData?.balance_kopeks,
-                null
-            );
-
-            return {
-                raw: payload,
-                currency,
-                balanceKopeks,
-                balanceLabel: root.balance_label || payload.balance_label || (balanceKopeks !== null ? formatPriceFromKopeks(balanceKopeks, currency) : ''),
-                periods: ensureArray(root.periods || root.available_periods || root.options?.periods || []),
-                traffic: root.traffic || root.traffic_options || root.trafficOptions || {},
-                servers: root.servers || root.countries || {},
-                devices: root.devices || root.device_options || root.deviceOptions || {},
-                selection: root.selection || root.defaultSelection || root.defaults || {},
-                summary: root.summary || payload.summary || null,
-                promo: root.promo || root.discounts || null,
-                subscriptionId: root.subscription_id || root.subscriptionId || payload.subscription_id || payload.subscriptionId || null,
-            };
-        }
-
-        function resetSubscriptionPurchaseSelections(data) {
-            subscriptionPurchaseSelections.periodId = null;
-            subscriptionPurchaseSelections.trafficValue = null;
-            subscriptionPurchaseSelections.servers = new Set();
-            subscriptionPurchaseSelections.devices = null;
-
-            if (!data) {
-                return;
-            }
-
-            const periods = ensureArray(data.periods);
-            const selection = data.selection || {};
-            const periodId = selection.period_id ?? selection.periodId ?? selection.period ?? null;
-            if (periodId !== null && periodId !== undefined) {
-                subscriptionPurchaseSelections.periodId = String(periodId);
-            } else if (periods[0]) {
-                subscriptionPurchaseSelections.periodId = resolvePurchasePeriodId(periods[0]);
-            }
-
-            const trafficValue = selection.traffic_value
-                ?? selection.traffic
-                ?? selection.traffic_gb
-                ?? data.traffic?.current
-                ?? data.traffic?.default
-                ?? null;
-            if (trafficValue !== undefined) {
-                subscriptionPurchaseSelections.trafficValue = trafficValue;
-            }
-
-            const servers = ensureArray(
-                selection.servers
-                || selection.countries
-                || selection.server_uuids
-                || data.servers?.selected
-                || data.servers?.default
-                || []
-            );
-            subscriptionPurchaseSelections.servers = new Set(servers.map(value => String(value)).filter(Boolean));
-
-            const devices = coercePositiveInt(
-                selection.devices
-                ?? selection.device_limit
-                ?? selection.deviceLimit
-                ?? data.devices?.current
-                ?? data.devices?.default
-                ?? null,
-                null
-            );
-            if (devices !== null) {
-                subscriptionPurchaseSelections.devices = devices;
-            }
-
-            const period = getSelectedSubscriptionPurchasePeriod();
-            if (period) {
-                ensureSubscriptionPurchaseSelectionsValidForPeriod(period);
-            }
-        }
-
-        function extractPurchaseErrorMessage(payload, status) {
-            if (!payload || typeof payload !== 'object') {
-                return status === 401
-                    ? t('subscription_settings.error.unauthorized')
-                    : t('subscription_purchase.error.default');
-            }
-            if (typeof payload.detail === 'string') {
-                return payload.detail;
-            }
-            if (payload.detail && typeof payload.detail === 'object' && typeof payload.detail.message === 'string') {
-                return payload.detail.message;
-            }
-            if (typeof payload.message === 'string') {
-                return payload.message;
-            }
-            return t('subscription_purchase.error.default');
-        }
-
-        function ensureSubscriptionPurchaseData(options = {}) {
-            const { force = false } = options;
-
-            if (!force) {
-                if (subscriptionPurchasePromise) {
-                    return subscriptionPurchasePromise;
-                }
-                if (subscriptionPurchaseData && !subscriptionPurchaseError) {
-                    return Promise.resolve(subscriptionPurchaseData);
-                }
-            }
-
-            const initData = tg.initData || '';
-            if (!initData) {
-                const error = createError('Authorization Error', t('subscription_settings.error.unauthorized'));
-                subscriptionPurchaseError = error;
-                subscriptionPurchaseLoading = false;
-                renderSubscriptionPurchaseCard();
-                return Promise.reject(error);
-            }
-
-            subscriptionPurchaseLoading = true;
-            subscriptionPurchaseError = null;
-            renderSubscriptionPurchaseCard();
-
-            const payload = { initData };
-            const request = fetch('/miniapp/subscription/purchase/options', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(payload),
-            }).then(async response => {
-                const body = await parseJsonSafe(response);
-                if (!response.ok || (body && body.success === false)) {
-                    const message = extractPurchaseErrorMessage(body, response.status);
-                    throw createError('Subscription purchase error', message, response.status);
-                }
-
-                const normalized = normalizeSubscriptionPurchasePayload(body);
-                subscriptionPurchaseData = normalized;
-                subscriptionPurchaseError = null;
-                subscriptionPurchaseLoading = false;
-                subscriptionPurchasePromise = null;
-                subscriptionPurchaseFeatureEnabled = true;
-                resetSubscriptionPurchaseSelections(normalized);
-                renderSubscriptionPurchaseCard();
-                const period = getSelectedSubscriptionPurchasePeriod();
-                if (period) {
-                    ensureSubscriptionPurchaseSelectionsValidForPeriod(period);
-                }
-                updateSubscriptionPurchasePreview({ immediate: true }).catch(error => {
-                    console.warn('Failed to update subscription purchase preview:', error);
-                });
-                return normalized;
-            }).catch(error => {
-                subscriptionPurchaseError = error;
-                subscriptionPurchaseLoading = false;
-                subscriptionPurchasePromise = null;
-                console.warn('Failed to load subscription purchase options:', error);
-                renderSubscriptionPurchaseCard();
-                throw error;
-            });
-
-            subscriptionPurchasePromise = request;
-            return request;
-        }
-
-        function getSubscriptionPurchaseCurrency() {
-            return (
-                subscriptionPurchaseData?.currency
-                || userData?.balance_currency
-                || 'RUB'
-            ).toString().toUpperCase();
-        }
-
-        function buildSubscriptionPurchaseSelectionPayload(period) {
-            const selection = {};
-            const periodId = resolvePurchasePeriodId(period);
-            if (periodId !== null && periodId !== undefined) {
-                const idString = String(periodId);
-                selection.period_id = idString;
-                selection.periodId = idString;
-                selection.period_key = idString;
-                selection.periodKey = idString;
-                selection.period = idString;
-                selection.code = idString;
-            }
-
-            const periodDays = resolvePurchasePeriodDays(period);
-            if (periodDays !== null) {
-                selection.period_days = periodDays;
-                selection.periodDays = periodDays;
-                selection.duration_days = periodDays;
-                selection.durationDays = periodDays;
-            }
-
-            const periodMonths = coercePositiveInt(
-                period?.months
-                ?? period?.period
-                ?? period?.period_months
-                ?? period?.periodMonths,
-                null,
-            );
-            if (periodMonths !== null) {
-                selection.months = periodMonths;
-                selection.period_months = periodMonths;
-                selection.periodMonths = periodMonths;
-            }
-
-            const trafficValue = subscriptionPurchaseSelections.trafficValue;
-            if (trafficValue !== null && trafficValue !== undefined) {
-                selection.traffic_value = trafficValue;
-                selection.traffic = trafficValue;
-                selection.traffic_gb = trafficValue;
-                selection.trafficGb = trafficValue;
-                selection.limit = trafficValue;
-            }
-
-            const servers = Array.from(
-                subscriptionPurchaseSelections.servers instanceof Set
-                    ? subscriptionPurchaseSelections.servers
-                    : []
-            );
-            if (servers.length) {
-                selection.servers = servers;
-                selection.countries = servers;
-                selection.server_uuids = servers;
-                selection.serverUuids = servers;
-            }
-
-            const devices = coercePositiveInt(subscriptionPurchaseSelections.devices, null);
-            if (devices !== null) {
-                selection.devices = devices;
-                selection.device_limit = devices;
-                selection.deviceLimit = devices;
-            }
-
-            return selection;
-        }
-
-        function normalizeSubscriptionPurchasePreview(payload) {
-            if (!payload || typeof payload !== 'object') {
-                return null;
-            }
-
-            const currency = getSubscriptionPurchaseCurrency();
-            const root = payload.preview || payload.data || payload.summary || payload;
-
-            const totalInfo = resolvePurchasePrice(
-                [
-                    root.total_price_kopeks,
-                    root.totalPriceKopeks,
-                    root.final_price_kopeks,
-                    root.finalPriceKopeks,
-                    root.price_kopeks,
-                    root.priceKopeks,
-                    root.amount_kopeks,
-                    root.amountKopeks,
-                ],
-                [
-                    root.total_price_label,
-                    root.totalPriceLabel,
-                    root.final_price_label,
-                    root.finalPriceLabel,
-                    root.price_label,
-                    root.priceLabel,
-                    root.amount_label,
-                    root.amountLabel,
-                ],
-                currency,
-            );
-
-            const originalInfo = resolvePurchasePrice(
-                [
-                    root.original_price_kopeks,
-                    root.originalPriceKopeks,
-                    root.base_price_kopeks,
-                    root.basePriceKopeks,
-                ],
-                [
-                    root.original_price_label,
-                    root.originalPriceLabel,
-                    root.base_price_label,
-                    root.basePriceLabel,
-                ],
-                currency,
-            );
-
-            const perMonthInfo = resolvePurchasePrice(
-                [
-                    root.per_month_price_kopeks,
-                    root.perMonthPriceKopeks,
-                    root.monthly_price_kopeks,
-                    root.monthlyPriceKopeks,
-                ],
-                [
-                    root.per_month_price_label,
-                    root.perMonthPriceLabel,
-                    root.monthly_price_label,
-                    root.monthlyPriceLabel,
-                ],
-                currency,
-            );
-
-            const discountPercent = coercePositiveInt(
-                root.discount_percent ?? root.discountPercent,
-                null,
-            );
-            const discountLabel = root.discount_label || root.discountLabel || null;
-            const discountLines = ensureArray(
-                root.discount_lines
-                || root.discountLines
-                || root.promo
-                || root.discounts
-                || [],
-            ).map(line => (typeof line === 'string' ? line : line?.label)).filter(Boolean);
-
-            const breakdown = ensureArray(root.breakdown || root.items || []).map(item => {
-                if (!item) {
-                    return null;
-                }
-                const label = item.label || item.title || '';
-                const value = item.value_label || item.valueLabel || item.value || '';
-                if (!label && !value) {
-                    return null;
-                }
-                return {
-                    label,
-                    value,
-                    highlight: coerceBoolean(item.highlight ?? item.emphasis ?? item.isImportant, false),
-                };
-            }).filter(Boolean);
-
-            const balanceKopeks = coercePositiveInt(
-                root.balance_kopeks
-                ?? root.balanceKopeks
-                ?? payload.balance_kopeks
-                ?? payload.balanceKopeks
-                ?? subscriptionPurchaseData?.balanceKopeks
-                ?? userData?.balance_kopeks,
-                null,
-            );
-            const balanceLabel = root.balance_label
-                || root.balanceLabel
-                || (balanceKopeks !== null ? formatPriceFromKopeks(balanceKopeks, currency) : '');
-
-            const missingAmountKopeks = coercePositiveInt(
-                root.missing_amount_kopeks
-                ?? root.missingAmountKopeks
-                ?? root.balance_needed_kopeks
-                ?? root.balanceNeededKopeks
-                ?? root.amount_due_kopeks
-                ?? root.amountDueKopeks,
-                null,
-            );
-            const missingAmountLabel = root.missing_amount_label
-                || root.missingAmountLabel
-                || (missingAmountKopeks !== null ? formatPriceFromKopeks(missingAmountKopeks, currency) : '');
-
-            return {
-                raw: payload,
-                totalPriceKopeks: totalInfo.kopeks,
-                totalPriceLabel: totalInfo.label,
-                originalPriceKopeks: originalInfo.kopeks,
-                originalPriceLabel: originalInfo.label,
-                perMonthLabel: perMonthInfo.label,
-                discountPercent,
-                discountLabel,
-                discountLines,
-                breakdown,
-                balanceKopeks,
-                balanceLabel,
-                missingAmountKopeks,
-                missingAmountLabel,
-                canPurchase: coerceBoolean(
-                    root.can_purchase
-                    ?? root.canPurchase
-                    ?? (missingAmountKopeks === null || missingAmountKopeks <= 0),
-                    true,
-                ),
-                statusMessage: root.status_message
-                    || root.statusMessage
-                    || payload.status_message
-                    || payload.statusMessage
-                    || '',
-            };
-        }
-
-        function renderSubscriptionPurchaseStatus(message) {
-            const status = document.getElementById('subscriptionPurchaseStatus');
-            if (!status) {
-                return;
-            }
-            const normalized = (message || '').toString().trim();
-            if (normalized) {
-                status.textContent = normalized;
-                status.classList.remove('hidden');
-            } else {
-                status.textContent = '';
-                status.classList.add('hidden');
-            }
-        }
-
-        function renderSubscriptionPurchasePeriods(data) {
-            const container = document.getElementById('subscriptionPurchasePeriodOptions');
-            const metaElement = document.getElementById('subscriptionPurchasePeriodMeta');
-            if (!container) {
-                return;
-            }
-
-            const currency = getSubscriptionPurchaseCurrency();
-            const periods = ensureArray(data?.periods);
-            const selectedId = subscriptionPurchaseSelections.periodId;
-
-            container.innerHTML = '';
-
-            if (!periods.length) {
-                if (metaElement) {
-                    metaElement.textContent = '';
-                }
-                return;
-            }
-
-            let perMonthMeta = '';
-
-            periods.forEach(period => {
-                if (!period) {
-                    return;
-                }
-                const periodId = resolvePurchasePeriodId(period);
-                const isAvailable = coerceBoolean(
-                    period.is_available
-                    ?? period.isAvailable
-                    ?? period.available
-                    ?? period.enabled
-                    ?? true,
-                    true,
-                );
-                const isSelected = periodId !== null && periodId !== undefined
-                    && String(periodId) === String(selectedId);
-
-                const button = document.createElement('button');
-                button.type = 'button';
-                button.className = 'subscription-settings-toggle subscription-purchase-option-card subscription-purchase-option-card--period';
-                if (isSelected) {
-                    button.classList.add('active');
-                }
-                if (!isAvailable) {
-                    button.classList.add('disabled');
-                }
-
-                const content = document.createElement('div');
-                content.className = 'subscription-purchase-option-content';
-
-                const labelContainer = document.createElement('div');
-                labelContainer.className = 'subscription-settings-toggle-label subscription-purchase-option-info';
-
-                const title = document.createElement('div');
-                title.className = 'subscription-settings-toggle-title';
-                title.textContent = resolvePurchasePeriodLabel(period) || t('values.not_available');
-                labelContainer.appendChild(title);
-
-                const description = period.description || period.note || period.tagline;
-                if (description) {
-                    const descriptionEl = document.createElement('div');
-                    descriptionEl.className = 'subscription-purchase-option-description';
-                    descriptionEl.textContent = description;
-                    labelContainer.appendChild(descriptionEl);
-                }
-
-                const priceInfo = resolvePurchasePrice(
-                    [
-                        period.final_price_kopeks,
-                        period.finalPriceKopeks,
-                        period.total_price_kopeks,
-                        period.totalPriceKopeks,
-                        period.price_kopeks,
-                        period.priceKopeks,
-                        period.amount_kopeks,
-                        period.amountKopeks,
-                    ],
-                    [
-                        period.final_price_label,
-                        period.finalPriceLabel,
-                        period.price_label,
-                        period.priceLabel,
-                        period.total_label,
-                        period.totalLabel,
-                    ],
-                    currency,
-                );
-
-                const originalInfo = resolvePurchasePrice(
-                    [
-                        period.original_price_kopeks,
-                        period.originalPriceKopeks,
-                        period.base_price_kopeks,
-                        period.basePriceKopeks,
-                    ],
-                    [
-                        period.original_price_label,
-                        period.originalPriceLabel,
-                        period.base_price_label,
-                        period.basePriceLabel,
-                    ],
-                    currency,
-                );
-
-                const discountPercent = coercePositiveInt(
-                    period.discount_percent ?? period.discountPercent,
-                    null,
-                );
-
-                let perMonthLabel = '';
-                const perMonthInfo = resolvePurchasePrice(
-                    [
-                        period.per_month_price_kopeks,
-                        period.perMonthPriceKopeks,
-                        period.monthly_price_kopeks,
-                        period.monthlyPriceKopeks,
-                    ],
-                    [
-                        period.per_month_price_label,
-                        period.perMonthPriceLabel,
-                        period.monthly_price_label,
-                        period.monthlyPriceLabel,
-                    ],
-                    currency,
-                );
-                if (perMonthInfo.label) {
-                    perMonthLabel = perMonthInfo.label;
-                } else if (priceInfo.kopeks !== null) {
-                    const months = coercePositiveInt(
-                        period.months
-                        ?? period.period
-                        ?? period.period_months
-                        ?? period.periodMonths,
-                        null,
-                    );
-                    const resolvedMonths = months || Math.max(1, Math.round((resolvePurchasePeriodDays(period) || 30) / 30));
-                    if (resolvedMonths > 0) {
-                        const perMonthValue = Math.round(priceInfo.kopeks / resolvedMonths);
-                        perMonthLabel = formatPriceFromKopeks(perMonthValue, currency);
-                    }
-                }
-
-                if (isSelected && perMonthLabel) {
-                    perMonthMeta = perMonthLabel;
-                }
-
-                const priceAside = document.createElement('div');
-                priceAside.className = 'subscription-purchase-option-aside';
-                let hasAsideContent = false;
-
-                if (priceInfo.label || originalInfo.label) {
-                    const priceWrapper = document.createElement('div');
-                    priceWrapper.className = 'subscription-purchase-option-price';
-
-                    if (originalInfo.label && originalInfo.label !== priceInfo.label) {
-                        const originalEl = document.createElement('span');
-                        originalEl.className = 'subscription-purchase-option-price-original';
-                        originalEl.textContent = originalInfo.label;
-                        priceWrapper.appendChild(originalEl);
-                    }
-
-                    const currentEl = document.createElement('span');
-                    currentEl.className = 'subscription-purchase-option-price-current';
-                    currentEl.textContent = priceInfo.label || originalInfo.label || '';
-                    priceWrapper.appendChild(currentEl);
-                    priceAside.appendChild(priceWrapper);
-                    hasAsideContent = true;
-                }
-
-                if (perMonthLabel) {
-                    const perMonthEl = document.createElement('div');
-                    perMonthEl.className = 'subscription-purchase-option-note';
-                    perMonthEl.textContent = t('subscription_purchase.period.per_month').replace('{amount}', perMonthLabel);
-                    priceAside.appendChild(perMonthEl);
-                    hasAsideContent = true;
-                }
-
-                if (discountPercent) {
-                    const discountEl = document.createElement('div');
-                    discountEl.className = 'subscription-purchase-option-discount';
-                    discountEl.textContent = `-${discountPercent}%`;
-                    priceAside.appendChild(discountEl);
-                    hasAsideContent = true;
-                    button.classList.add('has-discount');
-                }
-
-                content.appendChild(labelContainer);
-                if (hasAsideContent) {
-                    content.appendChild(priceAside);
-                }
-
-                button.appendChild(content);
-
-                if (isAvailable && periodId !== null && periodId !== undefined) {
-                    button.addEventListener('click', () => {
-                        handleSubscriptionPurchasePeriodSelect(periodId);
-                    });
-                }
-
-                container.appendChild(button);
-            });
-
-            if (metaElement) {
-                metaElement.textContent = perMonthMeta
-                    ? t('subscription_purchase.period.per_month').replace('{amount}', perMonthMeta)
-                    : '';
-            }
-        }
-
-        function renderSubscriptionRenewalPeriods(data) {
-            const container = document.getElementById('subscriptionRenewalPeriodOptions');
-            const metaElement = document.getElementById('subscriptionRenewalPeriodMeta');
-            if (!container) {
-                return;
-            }
-
-            const currency = getSubscriptionPurchaseCurrency();
-            const periods = ensureArray(data?.periods);
-            const selectedId = subscriptionRenewalSelection.periodId;
-
-            container.innerHTML = '';
-
-            if (!periods.length) {
-                if (metaElement) {
-                    metaElement.textContent = '';
-                }
-                return;
-            }
-
-            let perMonthMeta = '';
-
-            periods.forEach(period => {
-                if (!period) {
-                    return;
-                }
-                const periodId = resolvePurchasePeriodId(period);
-                const isAvailable = coerceBoolean(
-                    period.is_available
-                    ?? period.isAvailable
-                    ?? period.available
-                    ?? period.enabled
-                    ?? true,
-                    true,
-                );
-                const isSelected = periodId !== null && periodId !== undefined
-                    && String(periodId) === String(selectedId);
-
-                const button = document.createElement('button');
-                button.type = 'button';
-                button.className = 'subscription-settings-toggle subscription-purchase-option-card subscription-purchase-option-card--period';
-                if (isSelected) {
-                    button.classList.add('active');
-                }
-                if (!isAvailable) {
-                    button.classList.add('disabled');
-                }
-
-                const content = document.createElement('div');
-                content.className = 'subscription-purchase-option-content';
-
-                const labelContainer = document.createElement('div');
-                labelContainer.className = 'subscription-settings-toggle-label subscription-purchase-option-info';
-
-                const title = document.createElement('div');
-                title.className = 'subscription-settings-toggle-title';
-                title.textContent = resolvePurchasePeriodLabel(period) || t('values.not_available');
-                labelContainer.appendChild(title);
-
-                const description = period.description || period.note || period.tagline;
-                if (description) {
-                    const descriptionEl = document.createElement('div');
-                    descriptionEl.className = 'subscription-purchase-option-description';
-                    descriptionEl.textContent = description;
-                    labelContainer.appendChild(descriptionEl);
-                }
-
-                const priceInfo = resolvePurchasePrice(
-                    [
-                        period.final_price_kopeks,
-                        period.finalPriceKopeks,
-                        period.total_price_kopeks,
-                        period.totalPriceKopeks,
-                        period.price_kopeks,
-                        period.priceKopeks,
-                        period.amount_kopeks,
-                        period.amountKopeks,
-                    ],
-                    [
-                        period.final_price_label,
-                        period.finalPriceLabel,
-                        period.price_label,
-                        period.priceLabel,
-                        period.total_label,
-                        period.totalLabel,
-                    ],
-                    currency,
-                );
-
-                const originalInfo = resolvePurchasePrice(
-                    [
-                        period.original_price_kopeks,
-                        period.originalPriceKopeks,
-                        period.base_price_kopeks,
-                        period.basePriceKopeks,
-                    ],
-                    [
-                        period.original_price_label,
-                        period.originalPriceLabel,
-                        period.base_price_label,
-                        period.basePriceLabel,
-                    ],
-                    currency,
-                );
-
-                const discountPercent = coercePositiveInt(
-                    period.discount_percent ?? period.discountPercent,
-                    null,
-                );
-
-                let perMonthLabel = '';
-                const perMonthInfo = resolvePurchasePrice(
-                    [
-                        period.per_month_price_kopeks,
-                        period.perMonthPriceKopeks,
-                        period.monthly_price_kopeks,
-                        period.monthlyPriceKopeks,
-                    ],
-                    [
-                        period.per_month_price_label,
-                        period.perMonthPriceLabel,
-                        period.monthly_price_label,
-                        period.monthlyPriceLabel,
-                    ],
-                    currency,
-                );
-                if (perMonthInfo.label) {
-                    perMonthLabel = perMonthInfo.label;
-                } else if (priceInfo.kopeks !== null) {
-                    const months = coercePositiveInt(
-                        period.months
-                        ?? period.period
-                        ?? period.period_months
-                        ?? period.periodMonths,
-                        null,
-                    );
-                    const resolvedMonths = months || Math.max(1, Math.round((resolvePurchasePeriodDays(period) || 30) / 30));
-                    if (resolvedMonths > 0) {
-                        const perMonthValue = Math.round(priceInfo.kopeks / resolvedMonths);
-                        perMonthLabel = formatPriceFromKopeks(perMonthValue, currency);
-                    }
-                }
-
-                if (isSelected && perMonthLabel) {
-                    perMonthMeta = perMonthLabel;
-                }
-
-                const priceAside = document.createElement('div');
-                priceAside.className = 'subscription-purchase-option-aside';
-                let hasAsideContent = false;
-
-                if (priceInfo.label || originalInfo.label) {
-                    const priceWrapper = document.createElement('div');
-                    priceWrapper.className = 'subscription-purchase-option-price';
-
-                    if (originalInfo.label && originalInfo.label !== priceInfo.label) {
-                        const originalEl = document.createElement('span');
-                        originalEl.className = 'subscription-purchase-option-price-original';
-                        originalEl.textContent = originalInfo.label;
-                        priceWrapper.appendChild(originalEl);
-                    }
-
-                    const currentEl = document.createElement('span');
-                    currentEl.className = 'subscription-purchase-option-price-current';
-                    currentEl.textContent = priceInfo.label || originalInfo.label || '';
-                    priceWrapper.appendChild(currentEl);
-                    priceAside.appendChild(priceWrapper);
-                    hasAsideContent = true;
-                }
-
-                if (perMonthLabel) {
-                    const perMonthEl = document.createElement('div');
-                    perMonthEl.className = 'subscription-purchase-option-note';
-                    perMonthEl.textContent = t('subscription_purchase.period.per_month').replace('{amount}', perMonthLabel);
-                    priceAside.appendChild(perMonthEl);
-                    hasAsideContent = true;
-                }
-
-                if (discountPercent) {
-                    const discountEl = document.createElement('div');
-                    discountEl.className = 'subscription-purchase-option-discount';
-                    discountEl.textContent = `-${discountPercent}%`;
-                    priceAside.appendChild(discountEl);
-                    hasAsideContent = true;
-                    button.classList.add('has-discount');
-                }
-
-                content.appendChild(labelContainer);
-                if (hasAsideContent) {
-                    content.appendChild(priceAside);
-                }
-
-                button.appendChild(content);
-
-                if (isAvailable && periodId !== null && periodId !== undefined) {
-                    button.addEventListener('click', () => {
-                        handleSubscriptionRenewalPeriodSelect(periodId);
-                    });
-                }
-
-                container.appendChild(button);
-            });
-
-            if (metaElement) {
-                metaElement.textContent = perMonthMeta
-                    ? t('subscription_purchase.period.per_month').replace('{amount}', perMonthMeta)
-                    : '';
-            }
-        }
-
-        function renderSubscriptionPurchaseTraffic(data, period) {
-            const optionsContainer = document.getElementById('subscriptionPurchaseTrafficOptions');
-            const metaElement = document.getElementById('subscriptionPurchaseTrafficMeta');
-            const hintElement = document.getElementById('subscriptionPurchaseTrafficHint');
-            const emptyElement = document.getElementById('subscriptionPurchaseTrafficEmpty');
-
-            if (!optionsContainer) {
-                return;
-            }
-
-            const config = getSubscriptionPurchaseTrafficConfig(period);
-            const selectable = config && config.selectable !== false && String(config.mode || '').toLowerCase() !== 'fixed';
-            const options = ensureArray(config?.options || config?.available || []);
-
-            optionsContainer.innerHTML = '';
-
-            if (!selectable) {
-                const value = subscriptionPurchaseSelections.trafficValue;
-                const label = formatPurchaseTrafficLabel({ value });
-                if (metaElement) {
-                    metaElement.textContent = label
-                        ? t('subscription_purchase.traffic.fixed').replace('{amount}', label)
-                        : '';
-                }
-                if (hintElement) {
-                    const hint = config?.hint || '';
-                    hintElement.textContent = hint;
-                    hintElement.classList.toggle('hidden', !hint);
-                }
-                emptyElement?.classList.add('hidden');
-                return;
-            }
-
-            const selectedValue = subscriptionPurchaseSelections.trafficValue;
-            const currency = getSubscriptionPurchaseCurrency();
-
-            if (!options.length) {
-                emptyElement?.classList.remove('hidden');
-                if (metaElement) {
-                    metaElement.textContent = '';
-                }
-                if (hintElement) {
-                    const hint = config?.hint || '';
-                    hintElement.textContent = hint;
-                    hintElement.classList.toggle('hidden', !hint);
-                }
-                return;
-            }
-
-            emptyElement?.classList.add('hidden');
-
-            options.forEach(option => {
-                if (!option) {
-                    return;
-                }
-                const value = option.value ?? option.traffic ?? option.limit ?? option.amount;
-                const isSelected = value !== undefined && String(value) === String(selectedValue);
-                const isAvailable = coerceBoolean(
-                    option.is_available
-                    ?? option.available
-                    ?? option.enabled
-                    ?? true,
-                    true,
-                );
-
-                const button = document.createElement('button');
-                button.type = 'button';
-                button.className = 'subscription-settings-toggle subscription-purchase-option-card subscription-purchase-option-card--traffic';
-                if (isSelected) {
-                    button.classList.add('active');
-                }
-                if (!isAvailable) {
-                    button.classList.add('disabled');
-                }
-
-                const content = document.createElement('div');
-                content.className = 'subscription-purchase-option-content';
-
-                const labelContainer = document.createElement('div');
-                labelContainer.className = 'subscription-settings-toggle-label subscription-purchase-option-info';
-
-                const title = document.createElement('div');
-                title.className = 'subscription-settings-toggle-title';
-                title.textContent = formatPurchaseTrafficLabel(option);
-                labelContainer.appendChild(title);
-
-                const descriptionText = option.description || option.tagline || option.subtitle || option.detail || '';
-                if (descriptionText && String(descriptionText).trim().length) {
-                    const descriptionEl = document.createElement('div');
-                    descriptionEl.className = 'subscription-purchase-option-description';
-                    descriptionEl.textContent = String(descriptionText).trim();
-                    labelContainer.appendChild(descriptionEl);
-                }
-
-                const badges = [];
-                const seenBadges = new Set();
-                const pushBadge = badgeValue => {
-                    if (badgeValue == null) {
-                        return;
-                    }
-                    if (Array.isArray(badgeValue)) {
-                        badgeValue.forEach(pushBadge);
-                        return;
-                    }
-                    let text = '';
-                    if (typeof badgeValue === 'string' || typeof badgeValue === 'number') {
-                        text = String(badgeValue);
-                    } else if (typeof badgeValue === 'object') {
-                        text = badgeValue.label || badgeValue.title || badgeValue.text || badgeValue.name || '';
-                    }
-                    const normalized = typeof text === 'string' ? text.trim() : '';
-                    if (normalized && !seenBadges.has(normalized)) {
-                        seenBadges.add(normalized);
-                        badges.push(normalized);
-                    }
-                };
-
-                pushBadge(option.badges);
-                pushBadge(option.labels);
-                pushBadge(option.tags);
-                pushBadge(option.badge);
-                pushBadge(option.label_badge ?? option.labelBadge);
-                pushBadge(option.promo_group_labels ?? option.promoGroupLabels);
-                pushBadge(option.promo_offer_labels ?? option.promoOfferLabels);
-                pushBadge(option.highlight_labels ?? option.highlightLabels);
-                pushBadge(option.promo_group_label ?? option.promoGroupLabel);
-                pushBadge(option.promo_offer_label ?? option.promoOfferLabel);
-                pushBadge(option.discount_label ?? option.discountLabel);
-                pushBadge(option.highlight_label ?? option.highlightLabel);
-                pushBadge(option.benefit_label ?? option.benefitLabel);
-                pushBadge(option.ribbon ?? option.ribbon_label ?? option.ribbonLabel);
-
-                if (badges.length) {
-                    const badgesContainer = document.createElement('div');
-                    badgesContainer.className = 'subscription-purchase-option-badges';
-                    badges.forEach(text => {
-                        const badgeEl = document.createElement('span');
-                        badgeEl.className = 'subscription-purchase-option-badge';
-                        badgeEl.textContent = text;
-                        badgesContainer.appendChild(badgeEl);
-                    });
-                    labelContainer.appendChild(badgesContainer);
-                }
-
-                content.appendChild(labelContainer);
-
-                const priceInfo = resolvePurchasePrice(
-                    [
-                        option.final_price_kopeks,
-                        option.finalPriceKopeks,
-                        option.price_kopeks,
-                        option.priceKopeks,
-                    ],
-                    [
-                        option.final_price_label,
-                        option.finalPriceLabel,
-                        option.price_label,
-                        option.priceLabel,
-                    ],
-                    currency,
-                );
-
-                const originalInfo = resolvePurchasePrice(
-                    [option.original_price_kopeks, option.originalPriceKopeks],
-                    [option.original_price_label, option.originalPriceLabel],
-                    currency,
-                );
-
-                const discountPercent = coercePositiveInt(
-                    option.discount_percent ?? option.discountPercent,
-                    null,
-                );
-
-                const priceAside = document.createElement('div');
-                priceAside.className = 'subscription-purchase-option-aside';
-                let hasAsideContent = false;
-
-                if (priceInfo.label || originalInfo.label) {
-                    const priceWrapper = document.createElement('div');
-                    priceWrapper.className = 'subscription-purchase-option-price';
-
-                    if (originalInfo.label && originalInfo.label !== priceInfo.label) {
-                        const originalEl = document.createElement('span');
-                        originalEl.className = 'subscription-purchase-option-price-original';
-                        originalEl.textContent = originalInfo.label;
-                        priceWrapper.appendChild(originalEl);
-                    }
-
-                    if (priceInfo.label) {
-                        const currentEl = document.createElement('span');
-                        currentEl.className = 'subscription-purchase-option-price-current';
-                        currentEl.textContent = priceInfo.label;
-                        priceWrapper.appendChild(currentEl);
-                    }
-
-                    priceAside.appendChild(priceWrapper);
-                    hasAsideContent = true;
-                }
-
-                const priceNote = option.price_note ?? option.priceNote ?? option.note ?? '';
-                if (priceNote && String(priceNote).trim().length) {
-                    const noteEl = document.createElement('div');
-                    noteEl.className = 'subscription-purchase-option-note';
-                    noteEl.textContent = String(priceNote).trim();
-                    priceAside.appendChild(noteEl);
-                    hasAsideContent = true;
-                }
-
-                if (discountPercent) {
-                    const discountEl = document.createElement('div');
-                    discountEl.className = 'subscription-purchase-option-discount';
-                    discountEl.textContent = `-${discountPercent}%`;
-                    priceAside.appendChild(discountEl);
-                    hasAsideContent = true;
-                    button.classList.add('has-discount');
-                }
-
-                if (hasAsideContent) {
-                    content.appendChild(priceAside);
-                }
-
-                button.appendChild(content);
-
-                if (isAvailable && value !== undefined) {
-                    button.addEventListener('click', () => {
-                        handleSubscriptionPurchaseTrafficSelect(value);
-                    });
-                }
-
-                optionsContainer.appendChild(button);
-            });
-
-            if (metaElement) {
-                metaElement.textContent = '';
-            }
-            if (hintElement) {
-                const hint = config?.hint || '';
-                hintElement.textContent = hint;
-                hintElement.classList.toggle('hidden', !hint);
-            }
-        }
-
-        function renderSubscriptionPurchaseServers(data, period) {
-            const optionsContainer = document.getElementById('subscriptionPurchaseServersOptions');
-            const metaElement = document.getElementById('subscriptionPurchaseServersMeta');
-            const hintElement = document.getElementById('subscriptionPurchaseServersHint');
-            const emptyElement = document.getElementById('subscriptionPurchaseServersEmpty');
-
-            if (!optionsContainer) {
-                return;
-            }
-
-            const config = getSubscriptionPurchaseServersConfig(period);
-            const options = ensureArray(config?.options || config?.available || []);
-            const selection = subscriptionPurchaseSelections.servers instanceof Set
-                ? new Set(subscriptionPurchaseSelections.servers)
-                : new Set();
-
-            optionsContainer.innerHTML = '';
-
-            let minSelectable = coercePositiveInt(config?.min ?? config?.min_selectable ?? config?.minRequired, 0) || 0;
-            let maxSelectable = coercePositiveInt(config?.max ?? config?.max_selectable ?? config?.maxAllowed, 0) || 0;
-
-            const currency = getSubscriptionPurchaseCurrency();
-            const normalizedOptions = options
-                .map(option => normalizePurchaseServerOption(option, currency))
-                .filter(Boolean);
-            const visibleOptions = filterActivePurchaseServerOptions(normalizedOptions);
-
-            if (!visibleOptions.length) {
-                subscriptionPurchaseSelections.servers = new Set();
-                emptyElement?.classList.remove('hidden');
-                if (metaElement) {
-                    metaElement.textContent = '';
-                }
-                if (hintElement) {
-                    const hint = config?.hint || '';
-                    hintElement.textContent = hint;
-                    hintElement.classList.toggle('hidden', !hint);
-                }
-                return;
-            }
-
-            emptyElement?.classList.add('hidden');
-
-            const visibleUuidSet = new Set(visibleOptions.map(option => option.uuid).filter(Boolean));
-
-            if (!visibleUuidSet.size) {
-                subscriptionPurchaseSelections.servers = new Set();
-                if (metaElement) {
-                    metaElement.textContent = '';
-                }
-                if (hintElement) {
-                    const hint = config?.hint || '';
-                    hintElement.textContent = hint;
-                    hintElement.classList.toggle('hidden', !hint);
-                }
-                return;
-            }
-
-            if (minSelectable) {
-                minSelectable = Math.min(minSelectable, visibleUuidSet.size);
-            }
-            if (maxSelectable) {
-                maxSelectable = Math.min(maxSelectable, visibleUuidSet.size);
-            }
-
-            const selectable = config?.selectable !== false
-                && visibleOptions.length > 1
-                && (maxSelectable === 0 || maxSelectable > 1 || minSelectable === 0);
-
-            Array.from(selection).forEach(value => {
-                if (!visibleUuidSet.has(String(value))) {
-                    selection.delete(value);
-                }
-            });
-            subscriptionPurchaseSelections.servers = selection;
-
-            if (!selectable) {
-                const selected = visibleOptions.find(option => selection.has(option.uuid)) || visibleOptions[0];
-                selection.clear();
-                if (selected?.uuid) {
-                    selection.add(selected.uuid);
-                }
-                subscriptionPurchaseSelections.servers = selection;
-                if (metaElement && selected) {
-                    metaElement.textContent = t('subscription_purchase.servers.single')
-                        .replace('{name}', selected.name || selected.uuid || '');
-                }
-                if (hintElement) {
-                    const hint = config?.hint || '';
-                    hintElement.textContent = hint;
-                    hintElement.classList.toggle('hidden', !hint);
-                }
-                return;
-            }
-
-            visibleOptions.forEach(option => {
-                if (!option?.uuid) {
-                    return;
-                }
-                const isSelected = selection.has(option.uuid);
-                const isAvailable = coerceBoolean(option.isAvailable ?? true, true);
-
-                const button = document.createElement('button');
-                button.type = 'button';
-                button.className = 'subscription-settings-toggle';
-                if (isSelected) {
-                    button.classList.add('active');
-                }
-                if (!isAvailable) {
-                    button.classList.add('disabled');
-                }
-
-                const labelContainer = document.createElement('div');
-                labelContainer.className = 'subscription-settings-toggle-label';
-
-                const title = document.createElement('div');
-                title.className = 'subscription-settings-toggle-title';
-                title.textContent = option.name || option.uuid;
-                labelContainer.appendChild(title);
-
-                if (option.description) {
-                    const descriptionEl = document.createElement('div');
-                    descriptionEl.className = 'subscription-purchase-option-description';
-                    descriptionEl.textContent = option.description;
-                    labelContainer.appendChild(descriptionEl);
-                }
-
-                const meta = document.createElement('div');
-                meta.className = 'subscription-settings-toggle-meta';
-
-                if (option.priceLabel) {
-                    const currentEl = document.createElement('span');
-                    currentEl.className = 'subscription-purchase-option-price-current';
-                    currentEl.textContent = option.priceLabel;
-                    meta.appendChild(currentEl);
-                }
-                if (option.originalPriceLabel && option.originalPriceLabel !== option.priceLabel) {
-                    const originalEl = document.createElement('span');
-                    originalEl.className = 'subscription-purchase-option-price-original';
-                    originalEl.textContent = option.originalPriceLabel;
-                    meta.appendChild(originalEl);
-                }
-                if (option.discountPercent) {
-                    const discountEl = document.createElement('span');
-                    discountEl.className = 'subscription-purchase-price-discount';
-                    discountEl.textContent = `-${option.discountPercent}%`;
-                    meta.appendChild(discountEl);
-                }
-
-                if (meta.childNodes.length) {
-                    labelContainer.appendChild(meta);
-                }
-
-                button.appendChild(labelContainer);
-
-                if (isAvailable) {
-                    button.addEventListener('click', () => {
-                        handleSubscriptionPurchaseServerToggle(option.uuid);
-                    });
-                }
-
-                optionsContainer.appendChild(button);
-            });
-
-            const selectedCount = subscriptionPurchaseSelections.servers instanceof Set
-                ? Array.from(subscriptionPurchaseSelections.servers).filter(uuid => visibleUuidSet.has(String(uuid))).length
-                : 0;
-
-            if (metaElement) {
-                let metaText = '';
-                if (maxSelectable && maxSelectable !== minSelectable) {
-                    metaText = t('subscription_purchase.servers.limit').replace('{count}', String(maxSelectable));
-                } else if (selectedCount) {
-                    metaText = t('subscription_purchase.servers.selected').replace('{count}', String(selectedCount));
-                }
-                metaElement.textContent = metaText;
-            }
-
-            if (hintElement) {
-                const hintParts = [];
-                if (config?.hint) {
-                    hintParts.push(config.hint);
-                }
-                if (!config?.hint && minSelectable > 0) {
-                    hintParts.push(t('subscription_purchase.servers.limit').replace('{count}', String(minSelectable)));
-                }
-                const hintText = hintParts.join(' ');
-                hintElement.textContent = hintText;
-                hintElement.classList.toggle('hidden', !hintText);
-            }
-        }
-
-        function renderSubscriptionPurchaseDevices(data, period) {
-            const valueElement = document.getElementById('subscriptionPurchaseDevicesValue');
-            const priceElement = document.getElementById('subscriptionPurchaseDevicesPrice');
-            const metaElement = document.getElementById('subscriptionPurchaseDevicesMeta');
-            const hintElement = document.getElementById('subscriptionPurchaseDevicesHint');
-            const decreaseButton = document.getElementById('subscriptionPurchaseDevicesDecrease');
-            const increaseButton = document.getElementById('subscriptionPurchaseDevicesIncrease');
-
-            const config = getSubscriptionPurchaseDevicesConfig(period);
-            const min = coercePositiveInt(config?.min ?? config?.minimum ?? 0, 0) || 0;
-            const max = coercePositiveInt(config?.max ?? config?.maximum ?? 0, 0) || 0;
-
-            let value = coercePositiveInt(subscriptionPurchaseSelections.devices, null);
-            if (value === null) {
-                value = min > 0 ? min : 1;
-            }
-            if (min && value < min) {
-                value = min;
-            }
-            if (max && value > max) {
-                value = max;
-            }
-            subscriptionPurchaseSelections.devices = value;
-
-            if (valueElement) {
-                valueElement.textContent = String(value);
-            }
-
-            if (decreaseButton) {
-                decreaseButton.disabled = subscriptionPurchaseSubmitting || (min ? value <= min : value <= 1);
-            }
-            if (increaseButton) {
-                increaseButton.disabled = subscriptionPurchaseSubmitting || (max ? value >= max : false);
-            }
-
-            if (metaElement) {
-                let metaText = '';
-                if (min && max) {
-                    metaText = t('subscription_purchase.devices.limit')
-                        .replace('{min}', String(min))
-                        .replace('{max}', String(max));
-                } else if (max) {
-                    metaText = t('subscription_purchase.devices.limit')
-                        .replace('{min}', String(min || 1))
-                        .replace('{max}', String(max));
-                } else {
-                    metaText = t('subscription_purchase.devices.unlimited');
-                }
-                metaElement.textContent = metaText;
-            }
-
-            if (priceElement) {
-                const currency = getSubscriptionPurchaseCurrency();
-                const priceInfo = resolvePurchasePrice(
-                    [
-                        config.price_per_device_kopeks,
-                        config.pricePerDeviceKopeks,
-                        config.extra_device_price_kopeks,
-                        config.extraDevicePriceKopeks,
-                        config.price_kopeks,
-                        config.priceKopeks,
-                    ],
-                    [
-                        config.price_per_device_label,
-                        config.pricePerDeviceLabel,
-                        config.extra_device_price_label,
-                        config.extraDevicePriceLabel,
-                        config.price_label,
-                        config.priceLabel,
-                    ],
-                    currency,
-                );
-                const originalInfo = resolvePurchasePrice(
-                    [
-                        config.price_per_device_original_kopeks,
-                        config.pricePerDeviceOriginalKopeks,
-                        config.price_per_device_base_kopeks,
-                        config.pricePerDeviceBaseKopeks,
-                    ],
-                    [
-                        config.price_per_device_original_label,
-                        config.pricePerDeviceOriginalLabel,
-                        config.price_per_device_base_label,
-                        config.pricePerDeviceBaseLabel,
-                    ],
-                    currency,
-                );
-                const discountPercent = coercePositiveInt(
-                    config.discount_percent ?? config.discountPercent,
-                    null,
-                );
-
-                const formatDevicesPriceText = (templateKey, amount, fallbackTemplate) => {
-                    if (!amount) {
-                        return '';
-                    }
-                    const template = t(templateKey);
-                    const resolvedTemplate = template && template !== templateKey
-                        ? template
-                        : fallbackTemplate;
-                    if (resolvedTemplate && resolvedTemplate.includes('{amount}')) {
-                        return resolvedTemplate.replace('{amount}', amount);
-                    }
-                    if (resolvedTemplate) {
-                        return `${resolvedTemplate} ${amount}`;
-                    }
-                    return amount;
-                };
-
-                const fragments = [];
-                if (originalInfo.label && originalInfo.label !== priceInfo.label) {
-                    const fallbackOriginal = preferredLanguage === 'ru'
-                        ? 'Старая цена: {amount}'
-                        : 'Original price: {amount}';
-                    const originalText = formatDevicesPriceText(
-                        'subscription_purchase.devices.price_original_label',
-                        originalInfo.label,
-                        fallbackOriginal,
-                    );
-                    if (originalText) {
-                        fragments.push(
-                            `<span class="subscription-purchase-option-price-original">${escapeHtml(originalText)}</span>`
-                        );
-                    }
-                }
-                if (priceInfo.label) {
-                    const fallbackCurrent = preferredLanguage === 'ru'
-                        ? 'Стоимость за устройство: {amount}'
-                        : 'Per device: {amount}';
-                    const currentText = formatDevicesPriceText(
-                        'subscription_purchase.devices.price_label',
-                        priceInfo.label,
-                        fallbackCurrent,
-                    );
-                    if (currentText) {
-                        fragments.push(
-                            `<span class="subscription-purchase-option-price-current">${escapeHtml(currentText)}</span>`
-                        );
-                    }
-                }
-                if (discountPercent) {
-                    fragments.push(
-                        `<span class="subscription-purchase-price-discount">-${discountPercent}%</span>`
-                    );
-                }
-                priceElement.innerHTML = fragments.join(' ') || '';
-            }
-
-            if (hintElement) {
-                const hint = config?.hint || '';
-                hintElement.textContent = hint;
-                hintElement.classList.toggle('hidden', !hint);
-            }
-        }
-
-        function renderSubscriptionPurchaseSummary(preview, options = {}) {
-            const { loading = false } = options;
-            const priceCurrent = document.getElementById('subscriptionPurchasePriceCurrent');
-            const priceOriginal = document.getElementById('subscriptionPurchasePriceOriginal');
-            const discountElement = document.getElementById('subscriptionPurchaseDiscount');
-            const pricePerMonth = document.getElementById('subscriptionPurchasePricePerMonth');
-            const breakdownContainer = document.getElementById('subscriptionPurchaseBreakdown');
-            const balanceWarning = document.getElementById('subscriptionPurchaseBalanceWarning');
-            const submitButton = document.getElementById('subscriptionPurchaseSubmit');
-            const topupButton = document.getElementById('subscriptionPurchaseTopupBtn');
-
-            if (breakdownContainer) {
-                breakdownContainer.innerHTML = '';
-            }
-
-            if (priceCurrent) {
-                priceCurrent.textContent = loading
-                    ? '…'
-                    : (preview?.totalPriceLabel || '—');
-            }
-
-            if (priceOriginal) {
-                const showOriginal = !loading
-                    && preview?.originalPriceLabel
-                    && preview.originalPriceLabel !== preview.totalPriceLabel;
-                priceOriginal.textContent = showOriginal ? preview.originalPriceLabel : '—';
-                priceOriginal.classList.toggle('hidden', !showOriginal);
-            }
-
-            if (pricePerMonth) {
-                const showPerMonth = !loading && Boolean(preview?.perMonthLabel);
-                if (showPerMonth) {
-                    pricePerMonth.textContent = t('subscription_purchase.summary.per_month')
-                        .replace('{amount}', preview.perMonthLabel || '—');
-                } else {
-                    pricePerMonth.textContent = '—';
-                }
-                pricePerMonth.classList.toggle('hidden', !showPerMonth);
-            }
-
-            if (discountElement) {
-                let discountText = '';
-                if (!loading && preview) {
-                    const label = (preview.discountLabel || '').toString().trim();
-                    const percent = coercePositiveInt(preview.discountPercent, null);
-                    if (label && percent) {
-                        discountText = `${label} (−${percent}%)`;
-                    } else if (label) {
-                        discountText = label;
-                    } else if (percent) {
-                        discountText = `−${percent}%`;
-                    }
-                }
-                discountElement.textContent = discountText;
-                discountElement.classList.toggle('hidden', !discountText);
-            }
-
-            if (breakdownContainer && preview?.breakdown?.length && !loading) {
-                preview.breakdown.forEach(item => {
-                    const row = document.createElement('div');
-                    row.className = 'subscription-purchase-breakdown-item';
-                    const header = document.createElement('div');
-                    header.className = 'subscription-purchase-breakdown-row';
-                    const label = document.createElement('span');
-                    label.textContent = item.label || '';
-                    const value = document.createElement('strong');
-                    value.textContent = item.value || '';
-                    header.appendChild(label);
-                    header.appendChild(value);
-                    row.appendChild(header);
-
-                    const discountNote = (item.discountLabel || item.discount_label || item.discount || '').toString().trim();
-                    if (discountNote) {
-                        const noteEl = document.createElement('div');
-                        noteEl.className = 'subscription-purchase-breakdown-note';
-                        noteEl.textContent = discountNote;
-                        row.appendChild(noteEl);
-                    }
-
-                    breakdownContainer.appendChild(row);
-                });
-            }
-
-            if (balanceWarning) {
-                const hasMissingFunds = !loading && (preview?.missingAmountKopeks || 0) > 0;
-                if (hasMissingFunds) {
-                    const required = preview?.totalPriceLabel || '';
-                    const balance = preview?.balanceLabel || '';
-                    let warningText = t('subscription_purchase.balance.warning')
-                        .replace('{required}', required || '—')
-                        .replace('{balance}', balance || '—');
-                    const hint = t('subscription_purchase.balance.hint');
-                    if (hint && hint !== 'subscription_purchase.balance.hint') {
-                        warningText = `${warningText} ${hint}`;
-                    }
-                    balanceWarning.textContent = warningText;
-                }
-                balanceWarning.classList.toggle('hidden', !hasMissingFunds);
-            }
-
-            if (topupButton) {
-                const showTopup = !loading && (preview?.missingAmountKopeks || 0) > 0;
-                topupButton.classList.toggle('hidden', !showTopup);
-            }
-
-            if (submitButton) {
-                const disabled = loading
-                    || subscriptionPurchaseSubmitting
-                    || !preview
-                    || preview.canPurchase === false
-                    || (preview?.missingAmountKopeks || 0) > 0;
-                submitButton.disabled = disabled;
-            }
-
-            const cardElement = document.getElementById('subscriptionPurchaseCard');
-            if (cardElement) {
-                let hasPromoDetails = false;
-                if (!loading && preview) {
-                    const discountLines = ensureArray(preview.discountLines)
-                        .map(line => {
-                            if (typeof line === 'string') {
-                                return line.trim();
-                            }
-                            if (line && typeof line.label === 'string') {
-                                return line.label.trim();
-                            }
-                            return '';
-                        })
-                        .filter(Boolean);
-
-                    const rawPreview = preview.raw;
-                    const promoRoots = [];
-                    if (rawPreview && typeof rawPreview === 'object') {
-                        promoRoots.push(rawPreview);
-                        ['preview', 'data', 'summary', 'config', 'meta'].forEach(key => {
-                            const candidate = rawPreview[key];
-                            if (candidate && typeof candidate === 'object') {
-                                promoRoots.push(candidate);
-                            }
-                        });
-                    }
-
-                    const hasPromoFromRaw = promoRoots.some(entry => {
-                        if (!entry || typeof entry !== 'object') {
-                            return false;
-                        }
-
-                        const groupActive = entry.promo_group
-                            || entry.promoGroup
-                            || entry.promo_group_active
-                            || entry.promoGroupActive;
-                        const offerActive = entry.promo_offer || entry.promoOffer;
-                        const rawDiscounts = ensureArray(
-                            entry.discount_lines
-                            || entry.discountLines
-                            || entry.promo
-                            || entry.discounts,
-                        )
-                            .map(item => {
-                                if (typeof item === 'string') {
-                                    return item.trim();
-                                }
-                                if (item && typeof item.label === 'string') {
-                                    return item.label.trim();
-                                }
-                                return '';
-                            })
-                            .filter(Boolean);
-
-                        return Boolean(groupActive || offerActive || rawDiscounts.length);
-                    });
-
-                    hasPromoDetails = discountLines.length > 0 || hasPromoFromRaw;
-                }
-
-                cardElement.classList.toggle('has-promo-details', hasPromoDetails);
-            }
-        }
-
-        function requestSubscriptionPurchasePreviewUpdate(options = {}) {
-            const { delay = 250 } = options;
-            if (subscriptionPurchasePreviewUpdateHandle) {
-                clearTimeout(subscriptionPurchasePreviewUpdateHandle);
-            }
-            subscriptionPurchasePreviewUpdateHandle = setTimeout(() => {
-                updateSubscriptionPurchasePreview({ immediate: true });
-            }, Math.max(0, Number.isFinite(delay) ? delay : 250));
-        }
-
-        async function updateSubscriptionPurchasePreview(options = {}) {
-            const { immediate = false, force = false, delay = 250 } = options;
-
-            if (!immediate) {
-                requestSubscriptionPurchasePreviewUpdate({ delay });
-                return null;
-            }
-
-            if (subscriptionPurchasePreviewUpdateHandle) {
-                clearTimeout(subscriptionPurchasePreviewUpdateHandle);
-                subscriptionPurchasePreviewUpdateHandle = null;
-            }
-
-            // Для триалов разрешаем загрузку preview даже если shouldShowPurchaseConfigurator возвращает false
-            if (!shouldShowPurchaseConfigurator() && !subscriptionPurchaseCardForceShow) {
-                return null;
-            }
-
-            if (!subscriptionPurchaseData) {
-                return null;
-            }
-
-            const initData = tg.initData || '';
-            if (!initData) {
-                return null;
-            }
-
-            if (subscriptionPurchasePreviewLoading && !force) {
-                return subscriptionPurchasePreviewPromise || Promise.resolve(subscriptionPurchasePreview);
-            }
-
-            const period = getSelectedSubscriptionPurchasePeriod();
-            if (!period) {
-                return null;
-            }
-
-            ensureSubscriptionPurchaseSelectionsValidForPeriod(period);
-            const selection = buildSubscriptionPurchaseSelectionPayload(period);
-            if (!selection.period_id && !selection.periodId) {
-                return null;
-            }
-
-            const subscriptionId = subscriptionPurchaseData?.subscriptionId
-                || userData?.subscription_id
-                || userData?.subscriptionId
-                || null;
-
-            const payload = {
-                initData,
-                subscription_id: subscriptionId,
-                subscriptionId,
-                selection,
-                ...selection,
-            };
-
-            subscriptionPurchasePreviewLoading = true;
-            subscriptionPurchasePreviewError = null;
-            renderSubscriptionPurchaseCard(subscriptionPurchaseCardForceShow);
-
-            const request = fetch('/miniapp/subscription/purchase/preview', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(payload),
-            }).then(async response => {
-                const body = await parseJsonSafe(response);
-                if (!response.ok || (body && body.success === false)) {
-                    const message = extractPurchaseErrorMessage(body, response.status);
-                    throw createError('Subscription purchase preview error', message, response.status);
-                }
-                const normalized = normalizeSubscriptionPurchasePreview(body);
-                subscriptionPurchasePreview = normalized;
-                subscriptionPurchasePreviewError = null;
-                subscriptionPurchasePreviewLoading = false;
-                subscriptionPurchasePreviewPromise = null;
-                renderSubscriptionPurchaseCard(subscriptionPurchaseCardForceShow);
-                return normalized;
-            }).catch(error => {
-                subscriptionPurchasePreview = null;
-                subscriptionPurchasePreviewError = error;
-                subscriptionPurchasePreviewLoading = false;
-                subscriptionPurchasePreviewPromise = null;
-                console.warn('Failed to fetch subscription purchase preview:', error);
-                renderSubscriptionPurchaseCard(subscriptionPurchaseCardForceShow);
-                throw error;
-            });
-
-            subscriptionPurchasePreviewPromise = request;
-            return request;
-        }
-
-        function renderSubscriptionPurchaseCard(forceShow = false) {
-            const wrapper = document.getElementById('subscriptionPurchaseCardWrapper');
-            const card = document.getElementById('subscriptionPurchaseCard');
-            if (!card || !wrapper) {
-                return;
-            }
-
-            // Используем глобальный флаг принудительного показа или переданный параметр
-            const shouldShow = shouldShowPurchaseConfigurator() || forceShow || subscriptionPurchaseCardForceShow;
-
-            // Если карточка принудительно показывается или должна показываться, не скрываем её
-            if (shouldShow) {
-                wrapper.classList.remove('hidden');
-                card.classList.remove('hidden');
-            } else {
-                wrapper.classList.add('hidden');
-                card.classList.add('hidden');
-            }
-
-            if (!shouldShow) {
-                renderSubscriptionPurchaseStatus('');
-                if (subscriptionPurchaseModalOpen) {
-                    subscriptionPurchaseModalOpen = false;
-                    const modal = document.getElementById('subscriptionPurchaseModal');
-                    modal?.classList.add('hidden');
-                    document.body.classList.remove('modal-open');
-                    restoreSubscriptionPurchaseCard();
-                }
-                return;
-            }
-
-            if (subscriptionPurchaseModalOpen) {
-                const modal = document.getElementById('subscriptionPurchaseModal');
-                const modalBody = document.getElementById('subscriptionPurchaseModalBody');
-                if (modal && modalBody && !modalBody.contains(card)) {
-                    modalBody.appendChild(card);
-                }
-                card.classList.add('as-modal');
-                modal?.classList.remove('hidden');
-                document.body.classList.add('modal-open');
-            } else {
-                const modal = document.getElementById('subscriptionPurchaseModal');
-                modal?.classList.add('hidden');
-                document.body.classList.remove('modal-open');
-                restoreSubscriptionPurchaseCard();
-                // Ensure card is visible on subscriptions screen if no paid subscription (including trials)
-                if (shouldShow && currentNavScreen === 'subscriptions') {
-                    card.classList.remove('hidden');
-                    wrapper.classList.remove('hidden');
-                }
-            }
-
-            const loadingBlock = document.getElementById('subscriptionPurchaseLoading');
-            const errorBlock = document.getElementById('subscriptionPurchaseError');
-            const contentBlock = document.getElementById('subscriptionPurchaseContent');
-
-            if (!subscriptionPurchaseData && !subscriptionPurchaseLoading && !subscriptionPurchaseError) {
-                ensureSubscriptionPurchaseData().catch(error => {
-                    console.warn('Failed to load subscription purchase data:', error);
-                });
-            }
-
-            if (subscriptionPurchaseLoading) {
-                loadingBlock?.classList.remove('hidden');
-                errorBlock?.classList.add('hidden');
-                contentBlock?.classList.add('hidden');
-                renderSubscriptionPurchaseStatus(t('subscription_purchase.status.loading'));
-                return;
-            }
-
-            if (subscriptionPurchaseError) {
-                loadingBlock?.classList.add('hidden');
-                contentBlock?.classList.add('hidden');
-                if (errorBlock) {
-                    const errorText = document.getElementById('subscriptionPurchaseErrorText');
-                    if (errorText) {
-                        errorText.textContent = subscriptionPurchaseError.message
-                            || t('subscription_purchase.error.default');
-                    }
-                    errorBlock.classList.remove('hidden');
-                }
-                renderSubscriptionPurchaseStatus(subscriptionPurchaseError.message || t('subscription_purchase.error.default'));
-                return;
-            }
-
-            if (!subscriptionPurchaseData) {
-                loadingBlock?.classList.remove('hidden');
-                errorBlock?.classList.add('hidden');
-                contentBlock?.classList.add('hidden');
-                renderSubscriptionPurchaseStatus(t('subscription_purchase.status.loading'));
-                return;
-            }
-
-            loadingBlock?.classList.add('hidden');
-            errorBlock?.classList.add('hidden');
-            contentBlock?.classList.remove('hidden');
-
-            const period = getSelectedSubscriptionPurchasePeriod();
-            if (period) {
-                ensureSubscriptionPurchaseSelectionsValidForPeriod(period);
-            }
-
-            renderSubscriptionPurchasePeriods(subscriptionPurchaseData);
-            renderSubscriptionPurchaseTraffic(subscriptionPurchaseData, period);
-            renderSubscriptionPurchaseServers(subscriptionPurchaseData, period);
-            renderSubscriptionPurchaseDevices(subscriptionPurchaseData, period);
-            renderSubscriptionPurchaseSummary(subscriptionPurchasePreview, { loading: subscriptionPurchasePreviewLoading });
-
-            // Ensure all sections are visible
-            const trafficSection = document.getElementById('subscriptionPurchaseTrafficSection');
-            const serversSection = document.getElementById('subscriptionPurchaseServersSection');
-            const devicesSection = document.getElementById('subscriptionPurchaseDevicesSection');
-            if (trafficSection) trafficSection.classList.remove('hidden');
-            if (serversSection) serversSection.classList.remove('hidden');
-            if (devicesSection) devicesSection.classList.remove('hidden');
-
-            let statusMessage = '';
-            if (subscriptionPurchasePreviewLoading) {
-                statusMessage = t('subscription_purchase.status.loading');
-            } else if (subscriptionPurchasePreviewError) {
-                statusMessage = subscriptionPurchasePreviewError.message || t('subscription_purchase.error.default');
-            } else if (subscriptionPurchasePreview?.statusMessage) {
-                statusMessage = subscriptionPurchasePreview.statusMessage;
-            }
-
-            renderSubscriptionPurchaseStatus(statusMessage);
-
-            if (!subscriptionPurchasePreview && !subscriptionPurchasePreviewLoading && !subscriptionPurchasePreviewError) {
-                updateSubscriptionPurchasePreview();
-            }
-        }
-
-        function handleSubscriptionPurchasePeriodSelect(periodId) {
-            if (subscriptionPurchaseLoading || subscriptionPurchaseSubmitting) {
-                return;
-            }
-            if (periodId === null || periodId === undefined) {
-                return;
-            }
-            const idString = String(periodId);
-            if (subscriptionPurchaseSelections.periodId === idString) {
-                return;
-            }
-            subscriptionPurchaseSelections.periodId = idString;
-            const period = getSelectedSubscriptionPurchasePeriod();
-            if (period) {
-                ensureSubscriptionPurchaseSelectionsValidForPeriod(period);
-            }
-            // Сохраняем флаг принудительного показа при рендеринге
-            renderSubscriptionPurchaseCard(subscriptionPurchaseCardForceShow);
-            // Обновляем preview немедленно при выборе периода
-            updateSubscriptionPurchasePreview({ immediate: true }).catch(error => {
-                console.warn('Failed to update purchase preview:', error);
-            });
-        }
-
-        function handleSubscriptionRenewalPeriodSelect(periodId) {
-            if (subscriptionRenewalLoading || subscriptionRenewalSubmitting) {
-                return;
-            }
-            if (periodId === null || periodId === undefined) {
-                return;
-            }
-            const idString = String(periodId);
-            if (subscriptionRenewalSelection.periodId === idString) {
-                return;
-            }
-            subscriptionRenewalSelection.periodId = idString;
-            renderSubscriptionRenewalCard();
-        }
-
-        function handleSubscriptionPurchaseTrafficSelect(value) {
-            if (subscriptionPurchaseLoading || subscriptionPurchaseSubmitting) {
-                return;
-            }
-            subscriptionPurchaseSelections.trafficValue = value;
-            renderSubscriptionPurchaseCard(subscriptionPurchaseCardForceShow);
-            requestSubscriptionPurchasePreviewUpdate();
-        }
-
-        function handleSubscriptionPurchaseServerToggle(uuid) {
-            if (subscriptionPurchaseLoading || subscriptionPurchaseSubmitting) {
-                return;
-            }
-            if (!uuid) {
-                return;
-            }
-            const selection = subscriptionPurchaseSelections.servers instanceof Set
-                ? new Set(subscriptionPurchaseSelections.servers)
-                : new Set();
-            if (selection.has(uuid)) {
-                selection.delete(uuid);
-            } else {
-                selection.add(uuid);
-            }
-            subscriptionPurchaseSelections.servers = selection;
-            const period = getSelectedSubscriptionPurchasePeriod();
-            const config = getSubscriptionPurchaseServersConfig(period);
-            ensurePurchaseServersSelection(config);
-            renderSubscriptionPurchaseCard(subscriptionPurchaseCardForceShow);
-            requestSubscriptionPurchasePreviewUpdate();
-        }
-
-        function handleSubscriptionPurchaseDevicesChange(delta) {
-            if (!Number.isFinite(delta) || subscriptionPurchaseLoading || subscriptionPurchaseSubmitting) {
-                return;
-            }
-            const period = getSelectedSubscriptionPurchasePeriod();
-            const config = getSubscriptionPurchaseDevicesConfig(period);
-            const min = coercePositiveInt(config?.min ?? config?.minimum ?? 0, 0) || 0;
-            const max = coercePositiveInt(config?.max ?? config?.maximum ?? 0, 0) || 0;
-            let value = coercePositiveInt(subscriptionPurchaseSelections.devices, null);
-            if (value === null) {
-                value = min > 0 ? min : 1;
-            }
-            value += delta;
-            if (min && value < min) {
-                value = min;
-            }
-            if (max && value > max) {
-                value = max;
-            }
-            if (value === subscriptionPurchaseSelections.devices) {
-                return;
-            }
-            subscriptionPurchaseSelections.devices = value;
-            renderSubscriptionPurchaseCard(subscriptionPurchaseCardForceShow);
-            requestSubscriptionPurchasePreviewUpdate();
-        }
-
-        function openSubscriptionPurchaseModal() {
-            if (subscriptionPurchaseModalOpen) {
-                return;
-            }
-            // Для триалов всегда показываем карточку покупки
-            const statusRaw = String(
-                userData?.user?.subscription_actual_status
-                || userData?.user?.subscription_status
-                || ''
-            ).toLowerCase();
-            const typeRaw = String(
-                userData?.subscription_type
-                ?? userData?.user?.subscription_type
-                ?? ''
-            ).toLowerCase();
-            const isTrial = ['trial', 'trialing'].includes(statusRaw) || typeRaw === 'trial';
-
-            // Если это триал или shouldShowPurchaseConfigurator возвращает true, открываем модальное окно
-            if (isTrial || shouldShowPurchaseConfigurator()) {
-                subscriptionPurchaseModalOpen = true;
-                renderSubscriptionPurchaseCard();
-                ensureSubscriptionPurchaseData().catch(error => {
-                    console.warn('Failed to prepare subscription purchase data:', error);
-                });
-                return;
-            }
-
-            // Иначе пытаемся открыть внешнюю ссылку
-            const link = getEffectivePurchaseUrl();
-            if (link) {
-                openExternalLink(link, { openInMiniApp: true });
-            }
-        }
-
-        function closeSubscriptionPurchaseModal() {
-            if (!subscriptionPurchaseModalOpen) {
-                restoreSubscriptionPurchaseCard();
-                return;
-            }
-            subscriptionPurchaseModalOpen = false;
-            const modal = document.getElementById('subscriptionPurchaseModal');
-            modal?.classList.add('hidden');
-            document.body.classList.remove('modal-open');
-            restoreSubscriptionPurchaseCard();
-            // Сбрасываем флаг принудительного показа только если это не триал
-            const statusRaw = String(
-                userData?.user?.subscription_actual_status
-                || userData?.user?.subscription_status
-                || ''
-            ).toLowerCase();
-            const typeRaw = String(
-                userData?.subscription_type
-                ?? userData?.user?.subscription_type
-                ?? ''
-            ).toLowerCase();
-            const isTrial = ['trial', 'trialing'].includes(statusRaw) || typeRaw === 'trial';
-            if (!isTrial) {
-                subscriptionPurchaseCardForceShow = false;
-            }
-            renderSubscriptionPurchaseCard(subscriptionPurchaseCardForceShow);
-        }
-
-        async function submitSubscriptionPurchase() {
-            if (subscriptionPurchaseSubmitting) {
-                return;
-            }
-
-            // Для триалов разрешаем оформление подписки даже если shouldShowPurchaseConfigurator возвращает false
-            if (!shouldShowPurchaseConfigurator() && !subscriptionPurchaseCardForceShow) {
-                const link = getEffectivePurchaseUrl();
-                if (link) {
-                    openExternalLink(link, { openInMiniApp: true });
-                }
-                return;
-            }
-
-            const initData = tg.initData || '';
-            if (!initData) {
-                showPopup(t('subscription_settings.error.unauthorized'), t('subscription_purchase.submit.title'));
-                return;
-            }
-
-            if (!subscriptionPurchaseData) {
-                try {
-                    await ensureSubscriptionPurchaseData({ force: true });
-                } catch (error) {
-                    console.warn('Unable to refresh purchase options before submit:', error);
-                    showPopup(error.message || t('subscription_purchase.error.default'), t('subscription_purchase.submit.title'));
-                    return;
-                }
-            }
-
-            const period = getSelectedSubscriptionPurchasePeriod();
-            if (!period) {
-                showPopup(t('subscription_purchase.selection.invalid'), t('subscription_purchase.submit.title'));
-                return;
-            }
-
-            ensureSubscriptionPurchaseSelectionsValidForPeriod(period);
-            const selection = buildSubscriptionPurchaseSelectionPayload(period);
-            if (!selection.period_id && !selection.periodId) {
-                showPopup(t('subscription_purchase.selection.invalid'), t('subscription_purchase.submit.title'));
-                return;
-            }
-
-            const subscriptionId = subscriptionPurchaseData?.subscriptionId
-                || userData?.subscription_id
-                || userData?.subscriptionId
-                || null;
-
-            const payload = {
-                initData,
-                subscription_id: subscriptionId,
-                subscriptionId,
-                selection,
-                ...selection,
-            };
-
-            subscriptionPurchaseSubmitting = true;
-            subscriptionPurchasePreviewError = null;
-            renderSubscriptionPurchaseCard();
-
-            try {
-                const response = await fetch('/miniapp/subscription/purchase', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify(payload),
-                });
-                const body = await parseJsonSafe(response);
-                if (!response.ok || (body && body.success === false)) {
-                    const message = extractPurchaseErrorMessage(body, response.status);
-                    throw createError('Subscription purchase error', message, response.status);
-                }
-
-                const successMessage = body?.message
-                    || t('subscription_purchase.submit.success');
-                showPopup(successMessage, t('subscription_purchase.submit.title'));
-
-                subscriptionPurchasePreview = null;
-                subscriptionPurchasePreviewError = null;
-
-                await refreshSubscriptionData({ silent: true });
-                await ensureSubscriptionPurchaseData({ force: true }).catch(error => {
-                    console.warn('Failed to refresh purchase data after submission:', error);
-                });
-
-                closeSubscriptionPurchaseModal();
-            } catch (error) {
-                subscriptionPurchasePreviewError = error;
-                console.warn('Subscription purchase request failed:', error);
-                const errorMessage = error?.message || t('subscription_purchase.submit.insufficient');
-                showPopup(errorMessage, t('subscription_purchase.submit.title'));
-                if (error?.status === 402 || /insufficient/i.test(errorMessage)) {
-                    requestSubscriptionPurchasePreviewUpdate({ delay: 0 });
-                }
-            } finally {
-                subscriptionPurchaseSubmitting = false;
-                renderSubscriptionPurchaseCard();
-            }
-        }
-
-        function getCurrentSubscriptionUrl() {
-            return userData?.subscription_url || userData?.subscriptionUrl || '';
-        }
-
-        function getHappCryptoLink(data = userData) {
-            if (!data || typeof data !== 'object') {
-                return null;
-            }
-
-            const happData = data.happ && typeof data.happ === 'object'
-                ? data.happ
-                : null;
-
-            const candidates = [
-                data.happ_crypto_link,
-                data.happCryptoLink,
-                happData?.cryptoLink,
-                happData?.crypto_link,
-                happData?.crypto?.link,
-                happData?.links?.crypto,
-                data.subscriptionCryptoLink,
-                data.subscription_crypto_link,
-            ];
-
-            for (const candidate of candidates) {
-                const normalized = normalizeUrl(candidate);
-                if (normalized) {
-                    return normalized;
-                }
-            }
-
-            return null;
-        }
-
-        function getHappCryptolinkRedirectTemplate(data = userData) {
-            if (typeof cachedHappCryptolinkRedirectTemplate !== 'undefined') {
-                return cachedHappCryptolinkRedirectTemplate || null;
-            }
-
-            const candidates = [];
-
-            if (data && typeof data === 'object') {
-                candidates.push(
-                    data.happ_cryptolink_redirect_template,
-                    data.happCryptolinkRedirectTemplate,
-                );
-
-                const happData = data.happ && typeof data.happ === 'object'
-                    ? data.happ
-                    : null;
-
-                if (happData) {
-                    candidates.push(
-                        happData.cryptolinkRedirectTemplate,
-                        happData.cryptolink_redirect_template,
-                        happData.redirectTemplate,
-                        happData.redirect_template,
-                        happData.cryptolink?.redirectTemplate,
-                        happData.cryptolink?.redirect_template,
-                    );
-                }
-            }
-
-            if (typeof window !== 'undefined') {
-                candidates.push(
-                    window.HAPP_CRYPTOLINK_REDIRECT_TEMPLATE,
-                    window.happCryptolinkRedirectTemplate,
-                    window.__HAPP_CRYPTOLINK_REDIRECT_TEMPLATE__,
-                );
-            }
-
-            for (const candidate of candidates) {
-                const normalized = normalizeUrl(candidate);
-                if (normalized) {
-                    cachedHappCryptolinkRedirectTemplate = normalized;
-                    return normalized;
-                }
-            }
-
-            cachedHappCryptolinkRedirectTemplate = null;
-            return null;
-        }
-
-        function buildHappCryptolinkRedirectLink(targetLink, template = null) {
-            const normalizedTarget = normalizeUrl(targetLink);
-            const normalizedTemplate = normalizeUrl(template);
-
-            if (!normalizedTarget || !normalizedTemplate) {
-                return null;
-            }
-
-            const encodedTarget = encodeURIComponent(normalizedTarget);
-            let result = normalizedTemplate;
-            let replaced = false;
-
-            const replacements = [
-                ['{subscription_link}', encodedTarget],
-                ['{link}', encodedTarget],
-                ['{subscription_link_raw}', normalizedTarget],
-                ['{link_raw}', normalizedTarget],
-            ];
-
-            for (const [placeholder, replacement] of replacements) {
-                if (result.includes(placeholder)) {
-                    result = result.split(placeholder).join(replacement);
-                    replaced = true;
-                }
-            }
-
-            if (!replaced) {
-                if (/[?&=]$/.test(result)) {
-                    result = `${result}${encodedTarget}`;
-                } else {
-                    result = `${result}${encodedTarget}`;
-                }
-            }
-
-            return normalizeUrl(result);
-        }
-
-        function encodeToBase64(value) {
-            if (typeof value !== 'string') {
-                return '';
-            }
-
-            try {
-                return btoa(value);
-            } catch (error) {
-                try {
-                    return btoa(encodeURIComponent(value).replace(/%([0-9A-F]{2})/g, (_, p1) => String.fromCharCode(parseInt(p1, 16))));
-                } catch (nestedError) {
-                    console.warn('Failed to base64 encode value:', nestedError);
-                    return value;
-                }
-            }
-        }
-
-        function buildAppSchemeLink(app, subscriptionUrl) {
-            if (!app || !subscriptionUrl) {
-                return null;
-            }
-
-            const scheme = typeof app.urlScheme === 'string' ? app.urlScheme.trim() : '';
-            if (!scheme) {
-                return null;
-            }
-
-            let payload = subscriptionUrl;
-            if (app.isNeedBase64Encoding) {
-                const encoded = encodeToBase64(subscriptionUrl);
-                payload = encoded || subscriptionUrl;
-            }
-
-            return `${scheme}${payload}`;
-        }
-
-        function getConnectLink(appId = null, options = {}) {
-            if (!userData) {
-                return null;
-            }
-
-            const apps = Array.isArray(options.apps)
-                ? options.apps
-                : getAppsForCurrentPlatform();
-            const normalizedAppId = typeof appId === 'string' && appId.trim().length
-                ? appId.trim()
-                : null;
-            const requestedApp = normalizedAppId
-                ? apps.find(app => (app.id || '').toString() === normalizedAppId)
-                : null;
-            const featuredApp = apps.find(app => coerceBoolean(app.isFeatured, false)) || apps[0] || null;
-            const selectedApp = requestedApp || featuredApp || null;
-            const selectedAppId = selectedApp?.id != null
-                ? String(selectedApp.id).trim().toLowerCase()
-                : null;
-            const isHappApp = selectedAppId ? HAPP_APP_IDS.has(selectedAppId) : false;
-
-            const rawSubscriptionUrl = getCurrentSubscriptionUrl();
-            const subscriptionUrl = normalizeUrl(rawSubscriptionUrl);
-            const subscriptionCryptoLink = normalizeUrl(
-                userData?.subscription_crypto_link
-                || userData?.subscriptionCryptoLink
-                || null
-            );
-            const happCryptoLink = getHappCryptoLink();
-            const happData = userData?.happ && typeof userData.happ === 'object'
-                ? userData.happ
-                : null;
-            const redirectLinkRaw = normalizeUrl(
-                userData?.happ_cryptolink_redirect_link
-                || userData?.happCryptolinkRedirectLink
-                || happData?.cryptolinkRedirectLink
-                || happData?.cryptolink_redirect_link
-                || happData?.redirectLink
-                || happData?.redirect_link
-                || null
-            );
-            const happLink = normalizeUrl(
-                userData?.happ_link
-                || userData?.happLink
-                || happData?.link
-                || happData?.appLink
-                || happData?.url
-                || null
-            );
-
-            const schemePayload = subscriptionUrl
-                || (typeof rawSubscriptionUrl === 'string' ? rawSubscriptionUrl.trim() : '');
-            const schemeLink = selectedApp && schemePayload
-                ? buildAppSchemeLink(selectedApp, schemePayload)
-                : null;
-
-            const platformKeyRaw = typeof currentPlatform === 'string'
-                ? currentPlatform
-                : (typeof detectedDevicePlatform === 'string' ? detectedDevicePlatform : 'android');
-            const normalizedPlatformKey = typeof platformKeyRaw === 'string'
-                ? platformKeyRaw.toLowerCase()
-                : 'android';
-            const isPCDevice = normalizedPlatformKey === 'pc';
-            const isMobileDevice = normalizedPlatformKey === 'ios' || normalizedPlatformKey === 'android';
-
-            let redirectTemplate = getHappCryptolinkRedirectTemplate();
-            let redirectTarget = null;
-
-            if (isPCDevice) {
-                if (isHappApp) {
-                    redirectTarget = (
-                        happCryptoLink
-                        || subscriptionCryptoLink
-                        || subscriptionUrl
-                        || happLink
-                        || schemeLink
-                    );
-                } else {
-                    redirectTarget = (
-                        schemeLink
-                        || subscriptionUrl
-                        || subscriptionCryptoLink
-                    );
-                }
-            } else if (isHappApp) {
-                redirectTarget = (
-                    happCryptoLink
-                    || subscriptionCryptoLink
-                    || subscriptionUrl
-                    || happLink
-                    || schemeLink
-                );
-            } else {
-                redirectTarget = (
-                    schemeLink
-                    || subscriptionUrl
-                    || subscriptionCryptoLink
-                );
-            }
-
-            if (isPCDevice && !redirectTemplate) {
-                redirectTemplate = normalizeUrl(
-                    userData?.happ_cryptolink_redirect_template
-                    || userData?.happCryptolinkRedirectTemplate
-                    || null,
-                );
-            }
-
-            const templatedRedirectLink = (isPCDevice && redirectTemplate && redirectTarget)
-                ? buildHappCryptolinkRedirectLink(redirectTarget, redirectTemplate)
-                : null;
-
-            const candidates = [];
-            const seen = new Set();
-            const pushCandidate = value => {
-                const normalized = normalizeUrl(value);
-                if (!normalized || seen.has(normalized)) {
-                    return;
-                }
-                seen.add(normalized);
-                candidates.push(normalized);
-            };
-
-            if (isPCDevice) {
-                pushCandidate(templatedRedirectLink);
-                if (isHappApp) {
-                    pushCandidate(redirectLinkRaw);
-                    pushCandidate(happCryptoLink);
-                    pushCandidate(happLink);
-                    pushCandidate(subscriptionCryptoLink);
-                    pushCandidate(subscriptionUrl);
-                } else {
-                    pushCandidate(subscriptionUrl);
-                    pushCandidate(subscriptionCryptoLink);
-                    pushCandidate(schemeLink);
-                }
-            } else {
-                if (isHappApp) {
-                    pushCandidate(happCryptoLink);
-                    pushCandidate(happLink);
-                    pushCandidate(subscriptionCryptoLink);
-                    pushCandidate(subscriptionUrl);
-                } else {
-                    pushCandidate(schemeLink);
-                    pushCandidate(subscriptionUrl);
-                    pushCandidate(subscriptionCryptoLink);
-                }
-
-                if (!isMobileDevice) {
-                    pushCandidate(templatedRedirectLink);
-                    if (isHappApp) {
-                        pushCandidate(redirectLinkRaw);
-                    }
-                }
-            }
-
-            pushCandidate(subscriptionUrl);
-            pushCandidate(subscriptionCryptoLink);
-            if (isHappApp) {
-                pushCandidate(happCryptoLink);
-                pushCandidate(happLink);
-            } else {
-                pushCandidate(schemeLink);
-            }
-
-            return candidates[0] || null;
-        }
-
-        function hasAnyConnectLink(precomputedApps = null) {
-            const apps = Array.isArray(precomputedApps)
-                ? precomputedApps
-                : getAppsForCurrentPlatform();
-
-            if (Boolean(getConnectLink(null, { apps }))) {
-                return true;
-            }
-
-            return apps.some(app => Boolean(getConnectLink(app.id || null, { apps })));
-        }
-
-        function openExternalLink(link, options = {}) {
-            if (!link) {
-                return;
-            }
-
-            const { openInMiniApp = false } = options;
-
-            // Detect if we're on PC and trying to open a happ:// link
-            const platformKey = (detectedDevicePlatform || currentPlatform || '').toLowerCase();
-            const isPC = platformKey === 'pc' || (!['ios', 'android', 'tv'].includes(platformKey));
-            const isHappLink = link.startsWith('happ://');
-
-            if (isPC && isHappLink) {
-                // For PC users with happ:// links, provide fallback options
-                handlePCHappLink(link);
-                return;
-            }
-
-            if (openInMiniApp) {
-                window.location.href = link;
-                return;
-            }
-
-            // Check if link uses a custom URL scheme (not http/https)
-            // tg.openLink only supports http:// and https:// URLs
-            const isCustomScheme = !/^https?:\/\//i.test(link);
-
-            if (isCustomScheme) {
-                // For custom URL schemes (happ://, flclash://, v2raytun://, etc.)
-                // open a redirect page that will handle the URL scheme
-                const currentOrigin = window.location.origin;
-                const basePath = window.location.pathname.replace(/[^/]*$/, '');
-                const redirectUrl = `${currentOrigin}${basePath}redirect.html?url=${encodeURIComponent(link)}&lang=${encodeURIComponent(preferredLanguage || 'en')}`;
-
-                if (typeof tg.openLink === 'function') {
-                    try {
-                        tg.openLink(redirectUrl, { try_instant_view: false });
-                        return;
-                    } catch (e) {
-                        console.warn('tg.openLink failed for redirect:', e);
-                    }
-                }
-                window.open(redirectUrl, '_blank');
-                return;
-            }
-
-            if (typeof tg.openLink === 'function') {
-                try {
-                    tg.openLink(link, { try_instant_view: false });
-                    return;
-                } catch (error) {
-                    console.warn('tg.openLink failed:', error);
-                }
-            }
-
-            const newWindow = window.open(link, '_blank', 'noopener,noreferrer');
-            if (newWindow) {
-                newWindow.opener = null;
-                return;
-            }
-
-            window.location.href = link;
-        }
-
-        function openNewsLink(targetUrl = null) {
-            const normalized = normalizeUrl(targetUrl) || normalizeUrl(newsUrl);
-            if (!normalized) {
-                return;
-            }
-
-            if (/^https?:\/\/t\.me\//i.test(normalized) && typeof tg.openTelegramLink === 'function') {
-                tg.openTelegramLink(normalized);
-                return;
-            }
-
-            openExternalLink(normalized);
-        }
-
-        function handlePCHappLink(happLink) {
-            // Extract the subscription URL from the happ:// link
-            const subscriptionUrl = happLink.replace('happ://', '');
-
-            // Try to open the happ:// link first (in case user has the app installed)
-            const testWindow = window.open(happLink, '_blank');
-
-            // Set a timeout to check if the link opened successfully
-            setTimeout(() => {
-                // If the window is still open and accessible, the app likely isn't installed
-                if (testWindow && !testWindow.closed) {
-                    testWindow.close();
-
-                    // Show options to the user
-                    if (typeof tg.showPopup === 'function') {
-                        tg.showPopup({
-                            title: t('pc.happ.title') || 'Open Subscription',
-                            message: t('pc.happ.message') || 'The Happ application doesn\'t appear to be installed. Would you like to:',
-                            buttons: [
-                                {
-                                    id: 'copy',
-                                    type: 'default',
-                                    text: t('pc.happ.copy') || 'Copy subscription link'
-                                },
-                                {
-                                    id: 'redirect',
-                                    type: 'default',
-                                    text: t('pc.happ.redirect') || 'Open in browser'
-                                },
-                                {
-                                    type: 'cancel'
-                                }
-                            ]
-                        }, (buttonId) => {
-                            if (buttonId === 'copy') {
-                                copySubscriptionUrl(subscriptionUrl);
-                            } else if (buttonId === 'redirect') {
-                                openWithRedirect(subscriptionUrl);
-                            }
-                        });
-                    } else {
-                        // Fallback for environments without showPopup
-                        const choice = confirm(
-                            'The Happ application doesn\'t appear to be installed.\n\n' +
-                            'Click OK to open the subscription in your browser, or Cancel to copy the link.'
-                        );
-                        if (choice) {
-                            openWithRedirect(subscriptionUrl);
-                        } else {
-                            copySubscriptionUrl(subscriptionUrl);
-                        }
-                    }
-                }
-            }, 1500); // Wait 1.5 seconds to see if the app opens
-        }
-
-        // Add function to open with redirect parameter
-        function openWithRedirect(subscriptionUrl) {
-            // Create the redirect URL
-            const currentOrigin = window.location.origin;
-            const redirectUrl = `${currentOrigin}/index.html?redirect_to=${encodeURIComponent(subscriptionUrl)}`;
-
-            // Open in a new tab/window
-            const newWindow = window.open(redirectUrl, '_blank');
-            if (newWindow) {
-                newWindow.opener = null;
-            } else {
-                window.location.href = redirectUrl;
-            }
-        }
-
-        async function copySubscriptionUrl(url) {
-            if (!url) return;
-
-            try {
-                if (navigator.clipboard && window.isSecureContext) {
-                    await navigator.clipboard.writeText(url);
-                    showPopup(
-                        t('notifications.copy.success') || 'Subscription link copied to clipboard.',
-                        t('notifications.copy.title.success') || 'Copied'
-                    );
-                } else {
-                    // Fallback for non-secure contexts
-                    const textArea = document.createElement('textarea');
-                    textArea.value = url;
-                    textArea.style.position = 'fixed';
-                    textArea.style.left = '-999999px';
-                    document.body.appendChild(textArea);
-                    textArea.focus();
-                    textArea.select();
-
-                    try {
-                        document.execCommand('copy');
-                        showPopup(
-                            t('notifications.copy.success') || 'Subscription link copied to clipboard.',
-                            t('notifications.copy.title.success') || 'Copied'
-                        );
-                    } catch (err) {
-                        throw err;
-                    } finally {
-                        document.body.removeChild(textArea);
-                    }
-                }
-            } catch (error) {
-                console.warn('Clipboard copy failed:', error);
-                showPopup(
-                    t('notifications.copy.failure') || 'Unable to copy. Please copy manually: ' + url,
-                    t('notifications.copy.title.failure') || 'Copy failed'
-                );
-            }
-        }
-
-        function handlePurchaseAction(event) {
-            if (event && typeof event.preventDefault === 'function') {
-                event.preventDefault();
-            }
-
-            if (shouldShowPurchaseConfigurator()) {
-                openSubscriptionPurchaseModal();
-                return true;
-            }
-
-            const link = getEffectivePurchaseUrl();
-            if (link) {
-                openExternalLink(link, { openInMiniApp: true });
-                return true;
-            }
-
-            return false;
-        }
-
-        async function handleTrialAction(event) {
-            if (event && typeof event.preventDefault === 'function') {
-                event.preventDefault();
-            }
-
-            if (trialActivationInProgress) {
-                return false;
-            }
-
-            const trialAvailable = Boolean(
-                userData?.trial_available ?? userData?.trialAvailable
-            );
-
-            if (!trialAvailable) {
-                return handlePurchaseAction(event);
-            }
-
-            const initData = tg.initData || '';
-            if (!initData) {
-                const message = t('trial.activation.error.unauthorized');
-                showPopup(
-                    message && message !== 'trial.activation.error.unauthorized'
-                        ? message
-                        : 'Authorization failed. Please reopen the mini app from Telegram.',
-                    resolveTrialActivationTitle(),
-                );
-                return false;
-            }
-
-            trialActivationInProgress = true;
-            renderSubscriptionMissingCard();
-
-            try {
-                const response = await fetch('/miniapp/subscription/trial', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ initData }),
-                });
-
-                const body = await parseJsonSafe(response);
-                if (!response.ok || (body && body.success === false)) {
-                    const message = extractTrialActivationError(body, response.status);
-                    throw createError('Trial activation error', message, response.status);
-                }
-
-                const successMessage = resolveTrialActivationSuccessMessage(body);
-                showPopup(successMessage, resolveTrialActivationTitle());
-
-                try {
-                    await refreshSubscriptionData({ silent: true });
-                } catch (refreshError) {
-                    console.warn('Failed to refresh data after trial activation:', refreshError);
-                }
-                return true;
-            } catch (error) {
-                console.error('Failed to activate trial subscription:', error);
-                const message = resolveTrialActivationErrorMessage(error);
-                showPopup(message, resolveTrialActivationTitle());
-                return false;
-            } finally {
-                trialActivationInProgress = false;
-                renderSubscriptionMissingCard();
-            }
-        }
-
-        function updateActionButtons() {
-            const copyBtn = document.getElementById('copyBtn');
-            const guideBtn = document.getElementById('openGuideBtn');
-            const connectFloatingBtn = document.getElementById('connectFloatingBtn');
-
-            const connectLink = getConnectLink();
-            const anyConnectLink = hasAnyConnectLink();
-            const showConnectButton = hasActiveSubscription();
-
-            if (guideBtn) {
-                guideBtn.classList.toggle('hidden', !showConnectButton);
-                guideBtn.disabled = !showConnectButton;
-            }
-
-            // Show/hide bedolaga VPN floating connect button
-            if (connectFloatingBtn) {
-                const showFloating = showConnectButton && currentNavScreen === 'home';
-                connectFloatingBtn.classList.toggle('hidden', !showFloating);
-            }
-
-            if (!showConnectButton) {
-                closeInstallationModal();
-            }
-
-            updateInstructionConnectButtons(showConnectButton && anyConnectLink);
-
-            const subscriptionUrl = getCurrentSubscriptionUrl();
-            if (copyBtn) {
-                const hasUrl = Boolean(subscriptionUrl);
-                copyBtn.disabled = !hasUrl || !navigator.clipboard;
-            }
-        }
-
-        function showPopup(message, title = 'Info') {
-            // Use toast for simple success/info messages
-            if (title === 'Info' || title === 'Успех' || title === 'Success') {
-                showToast(message, 'info', 3000);
-                return;
-            }
-
-            if (typeof tg.showPopup === 'function') {
-                tg.showPopup({
-                    title,
-                    message,
-                    buttons: [{ type: 'ok' }]
-                });
-            } else {
-                alert(message);
-            }
-        }
-
-        function showError(error) {
-            document.getElementById('loadingState').classList.add('hidden');
-            document.getElementById('mainContent').classList.add('hidden');
-            currentErrorState = {
-                title: error?.title,
-                message: error?.message,
-                code: typeof error?.code === 'string' ? error.code : null,
-                purchaseUrl: normalizeUrl(error?.purchaseUrl) || null,
-            };
-            updateErrorTexts();
-            document.getElementById('errorState').classList.remove('hidden');
-            updateActionButtons();
-        }
-
-        document.querySelectorAll('.platform-btn').forEach(btn => {
-            btn.addEventListener('click', () => {
-                const nextPlatform = btn.dataset.platform;
-                if (!nextPlatform) {
-                    return;
-                }
-
-                if (currentPlatform !== nextPlatform) {
-                    currentPlatform = nextPlatform;
-                    if (currentPlatform === detectedDevicePlatform && detectedPlatformFilter) {
-                        currentPlatformFilter = detectedPlatformFilter;
-                    } else {
-                        currentPlatformFilter = PLATFORM_FILTER_ALL;
-                    }
-                }
-
-                setActivePlatformButton();
-                renderApps();
-                updateActionButtons();
-            });
-        });
-
-
-        document.getElementById('installationModalClose')?.addEventListener('click', () => {
-            closeInstallationModal();
-        });
-
-        document.getElementById('installationModal')?.addEventListener('click', event => {
-            if (event.target === event.currentTarget) {
-                closeInstallationModal();
-            }
-        });
-
-        // Referral Modal Event Handlers
-        document.getElementById('referralModalCloseHeader')?.addEventListener('click', () => {
-            closeReferralModal();
-        });
-
-        document.getElementById('referralModal')?.addEventListener('click', event => {
-            if (event.target === event.currentTarget) {
-                closeReferralModal();
-            }
-        });
-
-        document.getElementById('referralCopyBtnModal')?.addEventListener('click', () => {
-            const referral = userData?.referral || {};
-            const referralCode = referral.code || referral.link || referral.referral_code || '';
-
-            if (referralCode) {
-                // Используем username бота bedolaga VPN, а не username пользователя
-                const referralLink = `https://t.me/bedolagavpn_bot?start=${referralCode}`;
-
-                if (navigator.clipboard && navigator.clipboard.writeText) {
-                    navigator.clipboard.writeText(referralLink).then(() => {
-                        const btn = document.getElementById('referralCopyBtnModal');
-                        if (btn) {
-                            const originalText = btn.innerHTML;
-                            const copiedText = t('referral.link.copied');
-                            btn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg> ${copiedText}`;
-                            setTimeout(() => {
-                                btn.innerHTML = originalText;
-                            }, 2000);
-                        }
-
-                        if (typeof tg.showPopup === 'function') {
-                            tg.showPopup({
-                                title: 'Ссылка скопирована',
-                                message: 'Реферальная ссылка скопирована в буфер обмена',
-                                buttons: [{ type: 'ok' }]
-                            });
-                        }
-                    }).catch(err => {
-                        console.error('Failed to copy:', err);
-                    });
-                } else {
-                    // Fallback for older browsers
-                    const textArea = document.createElement('textarea');
-                    textArea.value = referralLink;
-                    textArea.style.position = 'fixed';
-                    textArea.style.opacity = '0';
-                    document.body.appendChild(textArea);
-                    textArea.select();
-                    try {
-                        document.execCommand('copy');
-                        const btn = document.getElementById('referralCopyBtnModal');
-                        if (btn) {
-                            const originalText = btn.innerHTML;
-                            const copiedText = t('referral.link.copied');
-                            btn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg> ${copiedText}`;
-                            setTimeout(() => {
-                                btn.innerHTML = originalText;
-                            }, 2000);
-                        }
-                    } catch (err) {
-                        console.error('Failed to copy:', err);
-                    }
-                    document.body.removeChild(textArea);
-                }
-            }
-        });
-
-        document.getElementById('referralMyReferralsBtnModal')?.addEventListener('click', () => {
-            const referralListSection = document.getElementById('referralListSectionModal');
-            const button = document.getElementById('referralMyReferralsBtnModal');
-
-            if (!referralListSection || !button) return;
-
-            const isHidden = referralListSection.classList.contains('hidden');
-
-            if (isHidden) {
-                // Show list
-                referralListSection.classList.remove('hidden');
-                const closeLabel = t('referral.toggle.close');
-                button.textContent = closeLabel === 'referral.toggle.close' ? t('referral.toggle.close') : closeLabel;
-            } else {
-                // Hide list
-                referralListSection.classList.add('hidden');
-                const openLabel = t('referral.toggle.open');
-                button.textContent = openLabel === 'referral.toggle.open' ? t('referral.toggle.open') : openLabel;
-            }
-        });
-
-        const topupButton = document.getElementById('topupBalanceBtn');
-        if (topupButton) {
-            topupButton.addEventListener('click', () => {
-                openTopupModal();
-            });
-        }
-        const topupButtonPayments = document.getElementById('topupBalanceBtnPayments');
-        if (topupButtonPayments) {
-            topupButtonPayments.addEventListener('click', () => {
-                openTopupModal();
-            });
-        }
-
-        const topupModal = document.getElementById('topupModal');
-        if (topupModal) {
-            topupModal.addEventListener('click', event => {
-                if (event.target === topupModal) {
-                    closeTopupModal();
-                }
-            });
-        }
-
-        window.addEventListener('keydown', event => {
-            if (event.key === 'Escape') {
-                const { backdrop } = getTopupElements();
-                if (backdrop && !backdrop.classList.contains('hidden')) {
-                    closeTopupModal();
-                    return;
-                }
-                const installationModal = document.getElementById('installationModal');
-                if (installationModal && !installationModal.classList.contains('hidden')) {
-                    closeInstallationModal();
-                    return;
-                }
-                if (subscriptionPurchaseModalOpen) {
-                    closeSubscriptionPurchaseModal();
-                }
-            }
-        });
-
-        document.getElementById('copyBtn')?.addEventListener('click', async () => {
-            const subscriptionUrl = getCurrentSubscriptionUrl();
-            if (!subscriptionUrl || !navigator.clipboard) {
-                return;
-            }
-
-            try {
-                await navigator.clipboard.writeText(subscriptionUrl);
-                showPopup(t('notifications.copy.success'), t('notifications.copy.title.success'));
-            } catch (error) {
-                console.warn('Clipboard copy failed:', error);
-                showPopup(t('notifications.copy.failure'), t('notifications.copy.title.failure'));
-            }
-        });
-
-        document.getElementById('referralToggleBtn')?.addEventListener('click', () => {
-            referralListExpanded = !referralListExpanded;
-            updateReferralToggleState();
-        });
-
-        document.getElementById('referralCopyBtn')?.addEventListener('click', async () => {
-            const button = document.getElementById('referralCopyBtn');
-            const value = button?.dataset.copyValue || '';
-
-            if (!button || !value) {
-                showPopup(
-                    t('referral.copy.unavailable') || 'Copying is unavailable. Please copy the link manually.',
-                    t('notifications.copy.title.failure') || 'Copy failed'
-                );
-                return;
-            }
-
-            try {
-                if (navigator.clipboard && window.isSecureContext) {
-                    await navigator.clipboard.writeText(value);
-                } else {
-                    const textArea = document.createElement('textarea');
-                    textArea.value = value;
-                    textArea.style.position = 'fixed';
-                    textArea.style.left = '-999999px';
-                    document.body.appendChild(textArea);
-                    textArea.focus();
-                    textArea.select();
-                    document.execCommand('copy');
-                    document.body.removeChild(textArea);
-                }
-
-                showPopup(
-                    t('referral.copy.success') || 'Referral link copied to clipboard.',
-                    t('notifications.copy.title.success') || 'Copied'
-                );
-
-                const copiedLabel = t('referral.link.copied');
-                button.textContent = copiedLabel === 'referral.link.copied' ? 'Link copied' : copiedLabel;
-                clearTimeout(referralCopyResetHandle);
-                referralCopyResetHandle = setTimeout(() => {
-                    const defaultLabel = t('referral.link.copy');
-                    button.textContent = defaultLabel === 'referral.link.copy' ? 'Copy link' : defaultLabel;
-                }, 2000);
-            } catch (error) {
-                console.warn('Clipboard copy failed:', error);
-                let failureMessage = t('referral.copy.failure');
-                if (!failureMessage || failureMessage === 'referral.copy.failure') {
-                    const fallback = t('notifications.copy.failure') || 'Unable to copy automatically.';
-                    failureMessage = `${fallback} ${value}`;
-                } else {
-                    failureMessage = failureMessage.replace('{value}', value);
-                }
-
-                showPopup(
-                    failureMessage,
-                    t('notifications.copy.title.failure') || 'Copy failed'
-                );
-            }
-        });
-
-        document.getElementById('purchaseBtn')?.addEventListener('click', handlePurchaseAction);
-        document.getElementById('subscriptionMissingTrialBtn')?.addEventListener('click', handleTrialAction);
-        document.getElementById('subscriptionMissingTrialBtnSubscriptions')?.addEventListener('click', handleTrialAction);
-
-        // Quick Action buttons
-        document.getElementById('quickActionBalance')?.addEventListener('click', () => {
-            openTopupModal();
-        });
-
-        document.getElementById('quickActionSubscription')?.addEventListener('click', () => {
-            switchScreen('subscriptions');
-        });
-
-        document.getElementById('quickActionInstall')?.addEventListener('click', () => {
-            openInstallationModal();
-        });
-
-        document.getElementById('quickActionSupport')?.addEventListener('click', () => {
-            try {
-                if (supportUrl && supportUrl.includes('t.me/')) {
-                    tg.openTelegramLink(supportUrl);
-                } else if (supportUrl) {
-                    tg.openLink(supportUrl);
-                }
-            } catch (e) {
-                window.open(supportUrl, '_blank');
-            }
-        });
-
-        initializePromoCodeForm();
-        initializePromoCodeFormProfile();
-
-        // ===== New Subscription Details Card =====
-        function renderSubscriptionDetailsCard() {
-            const card = document.getElementById('subscriptionDetailsCard');
-            if (!card) return;
-
-            const subscriptionMissing = Boolean(
-                userData?.subscription_missing ?? userData?.subscriptionMissing
-            );
-
-            card.classList.toggle('hidden', subscriptionMissing);
-
-            if (subscriptionMissing) return;
-
-            const user = userData?.user;
-            if (!user) return;
-
-            // Update subscription type
-            const typeNameEl = document.getElementById('subscriptionTypeNameLarge');
-            if (typeNameEl) {
-                const subscriptionTypeRaw = String(
-                    userData?.subscription_type
-                    || ((user?.subscription_status || '').toLowerCase() === 'trial' ? 'trial' : 'paid')
-                ).toLowerCase();
-                const typeKey = `subscription.type.${subscriptionTypeRaw}`;
-                const typeLabel = t(typeKey);
-                typeNameEl.textContent = typeLabel === typeKey ? (subscriptionTypeRaw === 'trial' ? t('subscription.type.trial') : t('subscription.type.paid')) : typeLabel;
-
-                // Update icon based on subscription type
-                const iconWrapper = document.querySelector('#subscriptionDetailsCard .subscription-icon-wrapper');
-                if (iconWrapper) {
-                    iconWrapper.classList.remove('subscription-type-paid', 'subscription-type-trial');
-                    iconWrapper.classList.add(`subscription-type-${subscriptionTypeRaw}`);
-                }
-            }
-
-            // Check if subscription is expired
-            let isExpired = false;
-            if (user.expires_at) {
-                const expiresAt = new Date(user.expires_at);
-                if (!Number.isNaN(expiresAt.getTime())) {
-                    const diffDays = Math.ceil((expiresAt - new Date()) / (1000 * 60 * 60 * 24));
-                    isExpired = diffDays <= 0;
-                }
-            }
-
-            // Update status badge
-            const statusBadge = document.getElementById('subscriptionStatusBadge');
-            if (statusBadge) {
-                const status = (user.subscription_actual_status || user.subscription_status || 'active').toLowerCase();
-                const isActive = (status === 'active' || status === 'trial') && !isExpired;
-                statusBadge.textContent = isActive ? t('subscription.status.active') : t('subscription.status.expired');
-                statusBadge.style.background = isActive
-                    ? 'rgba(var(--success-rgb), 0.15)'
-                    : 'rgba(var(--danger-rgb), 0.15)';
-                statusBadge.style.color = isActive
-                    ? 'var(--success)'
-                    : 'var(--danger)';
-            }
-
-            // Update expires date
-            const expiresDateEl = document.getElementById('subscriptionExpiresDateDetail');
-            const expiresLabelEl = document.getElementById('subscriptionExpiresLabelDetail');
-            const daysLeftHintEl = document.getElementById('subscriptionDaysLeftHint');
-            if (expiresDateEl && user.expires_at) {
-                const expiresAt = new Date(user.expires_at);
-                if (!Number.isNaN(expiresAt.getTime())) {
-                    const diffDays = Math.ceil((expiresAt - new Date()) / (1000 * 60 * 60 * 24));
-                    if (diffDays <= 0) {
-                        expiresDateEl.textContent = t('info.expires.expired');
-                        expiresDateEl.style.color = 'var(--danger)';
-                        if (expiresLabelEl) {
-                            expiresLabelEl.textContent = t('info.expires.expired');
-                        }
-                        if (daysLeftHintEl) {
-                            daysLeftHintEl.textContent = t('subscription.expired');
-                            daysLeftHintEl.style.color = 'var(--danger)';
-                        }
-                    } else {
-                        expiresDateEl.textContent = formatDate(user.expires_at);
-                        expiresDateEl.style.color = '';
-                        if (expiresLabelEl) {
-                            expiresLabelEl.textContent = t('info.expires.valid_until');
-                        }
-                        if (daysLeftHintEl) {
-                            const daysTemplate = t('stats.days_remaining');
-                            daysLeftHintEl.textContent = daysTemplate === 'stats.days_remaining'
-                                ? t('stats.days_remaining').replace('{days}', String(diffDays))
-                                : daysTemplate.replace('{days}', String(diffDays));
-                            daysLeftHintEl.style.color = '';
-                        }
-                    }
-                } else {
-                    expiresDateEl.textContent = formatDate(user.expires_at);
-                    if (expiresLabelEl) {
-                        expiresLabelEl.textContent = t('info.expires.valid_until');
-                    }
-                }
-            }
-
-            // Update devices
-            const devicesEl = document.getElementById('subscriptionDevicesDetail');
-            if (devicesEl) {
-                const devicesCountRaw = Number(userData?.connected_devices_count);
-                const devicesCount = Number.isFinite(devicesCountRaw)
-                    ? devicesCountRaw
-                    : Array.isArray(userData?.connected_devices)
-                        ? userData.connected_devices.length
-                        : 0;
-                const deviceLimit = typeof user.device_limit === 'number'
-                    ? user.device_limit
-                    : Number.parseInt(user.device_limit ?? '', 10);
-                const deviceLimitValue = Number.isFinite(deviceLimit) ? deviceLimit : 1;
-                devicesEl.textContent = `${devicesCount}/${deviceLimitValue}`;
-            }
-
-            // Update usage
-            const usageEl = document.getElementById('subscriptionUsageDetail');
-            if (usageEl) {
-                const trafficUsed = user.traffic_used_label || formatTraffic(user.traffic_used_gb);
-                // Always display in GB
-                if (trafficUsed.includes('GB')) {
-                    const gbUnit = t('units.gb');
-                    usageEl.textContent = trafficUsed.replace('GB', gbUnit);
-                } else if (trafficUsed.includes('MB')) {
-                    // Convert MB to GB
-                    const mb = parseFloat(trafficUsed) || 0;
-                    const gb = mb / 1024;
-                    const gbUnit = t('units.gb');
-                    usageEl.textContent = `${gb.toFixed(2)} ${gbUnit}`;
-                } else {
-                    // If no unit, assume it's already in GB or use formatTraffic result
-                    const gbUnit = t('units.gb');
-                    usageEl.textContent = trafficUsed.replace('MB', gbUnit).replace('GB', gbUnit);
-                }
-            }
-
-            // Update locations
-            const locationsEl = document.getElementById('subscriptionLocationsDetail');
-            if (locationsEl) {
-                const serversCount = Array.isArray(userData.connected_squads)
-                    ? userData.connected_squads.length
-                    : Array.isArray(userData.connected_servers)
-                        ? userData.connected_servers.length
-                        : Array.isArray(userData.links)
-                            ? userData.links.length
-                            : (userData?.available_servers_count || 0);
-                locationsEl.textContent = serversCount;
-            }
-        }
-
-        // Devices modal functions
-        async function openDevicesModal() {
-            const modal = document.getElementById('devicesModal');
-            if (!modal) return;
-
-            let devices = Array.isArray(userData?.connected_devices)
-                ? userData.connected_devices
-                : [];
-
-            const devicesCountRaw = Number(userData?.connected_devices_count);
-            let devicesCount = Number.isFinite(devicesCountRaw)
-                ? devicesCountRaw
-                : devices.length;
-
-            // Only fetch devices from server if modal is being opened for the first time
-            // and we don't have devices in userData
-            const isModalOpen = !modal.classList.contains('hidden');
-            if (!isModalOpen && devicesCount > 0 && devices.length === 0) {
-                try {
-                    const initData = tg.initData || '';
-                    if (initData) {
-                        const response = await fetch('/miniapp/subscription/devices', {
-                            method: 'GET',
-                            headers: {
-                                'Content-Type': 'application/json',
-                                'X-Telegram-Init-Data': initData
-                            },
-                        });
-
-                        if (response.ok) {
-                            const body = await parseJsonSafe(response);
-                            if (body && Array.isArray(body.devices)) {
-                                devices = body.devices;
-                                devicesCount = devices.length;
-                                // Update userData for future use
-                                if (userData) {
-                                    userData.connected_devices = devices;
-                                    userData.connected_devices_count = devicesCount;
-                                }
-                            } else if (body && Array.isArray(body)) {
-                                devices = body;
-                                devicesCount = devices.length;
-                                // Update userData for future use
-                                if (userData) {
-                                    userData.connected_devices = devices;
-                                    userData.connected_devices_count = devicesCount;
-                                }
-                            }
-                        }
-                    }
-                } catch (error) {
-                    console.warn('Failed to fetch devices:', error);
-                }
-            } else {
-                // Use current devices from userData (already updated after removal)
-                devices = Array.isArray(userData?.connected_devices)
-                    ? userData.connected_devices
-                    : [];
-                devicesCount = devices.length;
-            }
-
-            const user = userData?.user;
-            const deviceLimit = typeof user?.device_limit === 'number'
-                ? user.device_limit
-                : Number.parseInt(user?.device_limit ?? '', 10);
-            const deviceLimitValue = Number.isFinite(deviceLimit) ? deviceLimit : 1;
-
-            const subtitleEl = document.getElementById('devicesModalSubtitle');
-            if (subtitleEl) {
-                const countTemplate = t('devices.count_of_limit');
-                subtitleEl.textContent = countTemplate === 'devices.count_of_limit'
-                    ? `${devicesCount} из ${deviceLimitValue} устройств`
-                    : countTemplate.replace('{current}', String(devicesCount)).replace('{limit}', String(deviceLimitValue));
-            }
-
-            const contentEl = document.getElementById('devicesModalContent');
-            if (contentEl) {
-                // If we have count but no devices array, try to get from devicesList element
-                if (!devices.length && devicesCount > 0) {
-                    // Try to get devices from the existing devicesList if available
-                    const existingDevicesList = document.getElementById('devicesList');
-                    if (existingDevicesList && existingDevicesList.children.length > 0) {
-                        // Extract device data from existing list
-                        const deviceItems = Array.from(existingDevicesList.children);
-                        devices = deviceItems.map(item => {
-                            const titleEl = item.querySelector('.device-title');
-                            const metaEl = item.querySelector('.device-meta');
-                            const removeBtn = item.querySelector('.device-remove-button');
-
-                            return {
-                                platform: titleEl?.textContent?.split(' — ')[0] || '',
-                                device_model: titleEl?.textContent?.split(' — ')[1] || '',
-                                hwid: removeBtn?.dataset?.deviceHwid || '',
-                                last_seen: metaEl?.textContent || '',
-                            };
-                        }).filter(d => d.platform || d.device_model);
-                    }
-                }
-
-                if (!devices.length && devicesCount === 0) {
-                    const emptyText = t('devices.empty');
-                    contentEl.innerHTML = `<div style="text-align: center; padding: 40px 20px; color: var(--text-secondary);">${emptyText}</div>`;
-                } else if (!devices.length && devicesCount > 0) {
-                    const detectedTemplate = t('devices.detected_no_details');
-                    const detectedText = detectedTemplate === 'devices.detected_no_details'
-                        ? `Обнаружено ${devicesCount} устройств, но детали недоступны`
-                        : detectedTemplate.replace('{count}', String(devicesCount));
-                    contentEl.innerHTML = `<div style="text-align: center; padding: 40px 20px; color: var(--text-secondary);">${detectedText}</div>`;
-                } else {
-                    const removeLabelRaw = t('devices.remove_button_label');
-                    const removeLabel = (typeof removeLabelRaw === 'string' && removeLabelRaw !== 'devices.remove_button_label')
-                        ? removeLabelRaw
-                        : 'Сбросить устройство';
-
-                    const devicesHtml = devices.map(device => {
-                        const platform = device?.platform ? String(device.platform) : '';
-                        const model = device?.device_model ? String(device.device_model) : '';
-                        const titleParts = [platform, model].filter(Boolean);
-                        const title = titleParts.length
-                            ? titleParts.join(' — ')
-                            : t('values.not_available') || 'Неизвестное устройство';
-
-                        const metaParts = [];
-                        if (device?.app_version) {
-                            metaParts.push(String(device.app_version));
-                        }
-                        if (device?.last_seen) {
-                            const formatted = formatDateTime(device.last_seen);
-                            if (formatted) {
-                                metaParts.push(formatted);
-                            }
-                        }
-                        if (device?.last_ip) {
-                            metaParts.push(String(device.last_ip));
-                        }
-
-                        const metaHtml = metaParts.length
-                            ? `<div class="device-meta-modal">${metaParts.map(part => `<span>${escapeHtml(part)}</span>`).join(' • ')}</div>`
-                            : '';
-
-                        const deviceHwid = device?.hwid ? String(device.hwid) : '';
-                        const safeTitle = escapeHtml(title);
-                        const removeButtonHtml = deviceHwid
-                            ? `
-                                <button
-                                    class="device-remove-button-modal"
-                                    type="button"
-                                    data-device-hwid="${escapeHtml(deviceHwid)}"
-                                    data-device-label="${safeTitle}"
-                                    aria-label="${escapeHtml(removeLabel)}"
-                                >
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                        <line x1="18" y1="6" x2="6" y2="18"></line>
-                                        <line x1="6" y1="6" x2="18" y2="18"></line>
-                                    </svg>
-                                </button>
-                            `
-                            : '';
-
-                        return `
-                            <div class="device-item-modal">
-                                <div class="device-header-modal">
-                                    <div class="device-title-modal">${safeTitle}</div>
-                                    ${removeButtonHtml}
-                                </div>
-                                ${metaHtml}
-                            </div>
-                        `;
-                    }).join('');
-
-                    contentEl.innerHTML = `<div class="devices-list-modal">${devicesHtml}</div>`;
-
-                    // Add event listeners for remove buttons
-                    contentEl.querySelectorAll('.device-remove-button-modal').forEach(btn => {
-                        btn.addEventListener('click', async () => {
-                            const hwid = btn.dataset.deviceHwid;
-                            const label = btn.dataset.deviceLabel || 'устройство';
-
-                            if (!hwid) return;
-
-                            // Show confirmation
-                            console.log('Device removal: showing confirmation popup', { hwid, label });
-                            const buttonId = await showConfirmationPopup({
-                                title: 'Отключить устройство',
-                                message: `Вы уверены, что хотите отключить устройство "${label}"?`,
-                                confirmText: 'Отключить',
-                                cancelText: 'Отмена',
-                                destructive: true
-                            });
-
-                            console.log('Device removal: confirmation result', { buttonId, hwid, label });
-
-                            // showConfirmationPopup returns true for confirm, false/null for cancel
-                            if (buttonId !== true && buttonId !== 'confirm') {
-                                console.log('Device removal: cancelled by user', { buttonId });
-                                return;
-                            }
-
-                            console.log('Device removal: starting API call', { hwid });
-
-                            try {
-                                const initData = tg.initData || '';
-                                if (!initData) {
-                                    console.error('Device removal: no initData');
-                                    showPopup('Ошибка авторизации', 'Ошибка');
-                                    return;
-                                }
-
-                                console.log('Device removal: calling API', { hwid, initDataLength: initData.length });
-                                const response = await fetch('/miniapp/devices/remove', {
-                                    method: 'POST',
-                                    headers: { 'Content-Type': 'application/json' },
-                                    body: JSON.stringify({ initData, hwid }),
-                                });
-
-                                const body = await parseJsonSafe(response);
-                                if (!response.ok || (body && body.success === false)) {
-                                    throw new Error(body?.message || 'Ошибка при отключении устройства');
-                                }
-
-                                console.log('Device removal successful, hwid:', hwid);
-
-                                // Update local device list first
-                                const normalizedHwid = typeof hwid === 'string' ? hwid.trim() : '';
-                                if (normalizedHwid) {
-                                    applyDeviceRemovalUpdate(normalizedHwid);
-                                }
-
-                                showPopup('Устройство успешно отключено', 'Успех');
-                            } catch (error) {
-                                console.error('Device removal: error in try block', error);
-                                showPopup(error.message || 'Не удалось отключить устройство', 'Ошибка');
-                            }
-                        });
-                    });
-                }
-            }
-
-            modal.classList.remove('hidden');
-        }
-
-        function closeDevicesModal() {
-            const modal = document.getElementById('devicesModal');
-            if (modal) {
-                modal.classList.add('hidden');
-            }
-        }
-
-        // Function to update modal content directly without fetching from server
-        function updateDevicesModalContent() {
-            console.log('updateDevicesModalContent: called');
-            const modal = document.getElementById('devicesModal');
-            if (!modal || modal.classList.contains('hidden')) {
-                console.log('updateDevicesModalContent: modal not found or hidden', {
-                    modalExists: !!modal,
-                    isHidden: modal?.classList.contains('hidden')
-                });
-                return;
-            }
-
-            const devices = Array.isArray(userData?.connected_devices)
-                ? userData.connected_devices
-                : [];
-
-            console.log('updateDevicesModalContent: devices from userData', {
-                devicesCount: devices.length,
-                devices: devices.map(d => ({ hwid: d?.hwid, platform: d?.platform }))
-            });
-
-            const devicesCount = devices.length;
-            const user = userData?.user;
-            const deviceLimit = typeof user?.device_limit === 'number'
-                ? user.device_limit
-                : Number.parseInt(user?.device_limit ?? '', 10);
-            const deviceLimitValue = Number.isFinite(deviceLimit) ? deviceLimit : 1;
-
-            // Update subtitle
-            const subtitleEl = document.getElementById('devicesModalSubtitle');
-            if (subtitleEl) {
-                const countTemplate = t('devices.count_of_limit');
-                subtitleEl.textContent = countTemplate === 'devices.count_of_limit'
-                    ? `${devicesCount} из ${deviceLimitValue} устройств`
-                    : countTemplate.replace('{current}', String(devicesCount)).replace('{limit}', String(deviceLimitValue));
-            }
-
-            // Update content
-            const contentEl = document.getElementById('devicesModalContent');
-            if (!contentEl) {
-                return;
-            }
-
-            if (!devices.length) {
-                const emptyText = t('devices.empty');
-                contentEl.innerHTML = `<div style="text-align: center; padding: 40px 20px; color: var(--text-secondary);">${emptyText}</div>`;
-            } else {
-                const removeLabelRaw = t('devices.remove_button_label');
-                const removeLabel = (typeof removeLabelRaw === 'string' && removeLabelRaw !== 'devices.remove_button_label')
-                    ? removeLabelRaw
-                    : 'Сбросить устройство';
-
-                const devicesHtml = devices.map(device => {
-                    const platform = device?.platform ? String(device.platform) : '';
-                    const model = device?.device_model ? String(device.device_model) : '';
-                    const titleParts = [platform, model].filter(Boolean);
-                    const title = titleParts.length
-                        ? titleParts.join(' — ')
-                        : t('values.not_available') || 'Неизвестное устройство';
-
-                    const metaParts = [];
-                    if (device?.app_version) {
-                        metaParts.push(String(device.app_version));
-                    }
-                    if (device?.last_seen) {
-                        const formatted = formatDateTime(device.last_seen);
-                        if (formatted) {
-                            metaParts.push(formatted);
-                        }
-                    }
-                    if (device?.last_ip) {
-                        metaParts.push(String(device.last_ip));
-                    }
-
-                    const metaHtml = metaParts.length
-                        ? `<div class="device-meta-modal">${metaParts.map(part => `<span>${escapeHtml(part)}</span>`).join(' • ')}</div>`
-                        : '';
-
-                    const deviceHwid = device?.hwid ? String(device.hwid) : '';
-                    const safeTitle = escapeHtml(title);
-                    const removeButtonHtml = deviceHwid
-                        ? `
-                            <button
-                                class="device-remove-button-modal"
-                                type="button"
-                                data-device-hwid="${escapeHtml(deviceHwid)}"
-                                data-device-label="${safeTitle}"
-                                aria-label="${escapeHtml(removeLabel)}"
-                            >
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                    <line x1="18" y1="6" x2="6" y2="18"></line>
-                                    <line x1="6" y1="6" x2="18" y2="18"></line>
-                                </svg>
-                            </button>
-                        `
-                        : '';
-
-                    return `
-                        <div class="device-item-modal">
-                            <div class="device-header-modal">
-                                <div class="device-title-modal">${safeTitle}</div>
-                                ${removeButtonHtml}
-                            </div>
-                            ${metaHtml}
-                        </div>
-                    `;
-                }).join('');
-
-                contentEl.innerHTML = `<div class="devices-list-modal">${devicesHtml}</div>`;
-
-                console.log('updateDevicesModalContent: updated content', {
-                    devicesHtmlLength: devicesHtml.length,
-                    buttonsCount: contentEl.querySelectorAll('.device-remove-button-modal').length
-                });
-
-                // Re-attach event listeners for remove buttons
-                contentEl.querySelectorAll('.device-remove-button-modal').forEach(btn => {
-                    btn.addEventListener('click', async () => {
-                        const hwid = btn.dataset.deviceHwid;
-                        const label = btn.dataset.deviceLabel || 'устройство';
-
-                        if (!hwid) return;
-
-                        // Show confirmation
-                        console.log('Device removal (updateDevicesModalContent): showing confirmation popup', { hwid, label });
-                        const buttonId = await showConfirmationPopup({
-                            title: 'Отключить устройство',
-                            message: `Вы уверены, что хотите отключить устройство "${label}"?`,
-                            confirmText: 'Отключить',
-                            cancelText: 'Отмена',
-                            destructive: true
-                        });
-
-                        console.log('Device removal (updateDevicesModalContent): confirmation result', { buttonId, hwid, label });
-
-                        // showConfirmationPopup returns true for confirm, false/null for cancel
-                        if (buttonId !== true && buttonId !== 'confirm') {
-                            console.log('Device removal (updateDevicesModalContent): cancelled by user', { buttonId });
-                            return;
-                        }
-
-                        console.log('Device removal (updateDevicesModalContent): starting API call', { hwid });
-
-                        try {
-                            const initData = tg.initData || '';
-                            if (!initData) {
-                                console.error('Device removal (updateDevicesModalContent): no initData');
-                                showPopup('Ошибка авторизации', 'Ошибка');
-                                return;
-                            }
-
-                            console.log('Device removal (updateDevicesModalContent): calling API', { hwid, initDataLength: initData.length });
-                            const response = await fetch('/miniapp/devices/remove', {
-                                method: 'POST',
-                                headers: { 'Content-Type': 'application/json' },
-                                body: JSON.stringify({ initData, hwid }),
-                            });
-
-                            const body = await parseJsonSafe(response);
-                            if (!response.ok || (body && body.success === false)) {
-                                throw new Error(body?.message || 'Ошибка при отключении устройства');
-                            }
-
-                            console.log('Device removal successful, hwid:', hwid);
-
-                            // Update local device list first
-                            const normalizedHwid = typeof hwid === 'string' ? hwid.trim() : '';
-                            if (normalizedHwid) {
-                                applyDeviceRemovalUpdate(normalizedHwid);
-                            }
-
-                            showPopup('Устройство успешно отключено', 'Успех');
-                        } catch (error) {
-                            console.error('Failed to remove device:', error);
-                            showPopup(error.message || 'Не удалось отключить устройство', 'Ошибка');
-                        }
-                    });
-                });
-            }
-        }
-
-        // Event handlers for subscription details card
-        document.getElementById('subscriptionMenuBtn')?.addEventListener('click', () => {
-            openDevicesModal();
-        });
-
-        document.getElementById('devicesModalClose')?.addEventListener('click', closeDevicesModal);
-
-        document.getElementById('devicesModal')?.addEventListener('click', (e) => {
-            if (e.target === e.currentTarget) {
-                closeDevicesModal();
-            }
-        });
-
-        document.getElementById('subscriptionDetailDevices')?.addEventListener('click', () => {
-            openDevicesModal();
-        });
-
-        document.getElementById('subscriptionSettingsActionBtn')?.addEventListener('click', () => {
-            // Switch to subscriptions screen and toggle settings card
-            switchScreen('subscriptions');
-            setTimeout(() => {
-                const settingsCard = document.getElementById('subscriptionSettingsCard');
-                const renewalCard = document.getElementById('subscriptionRenewalCard');
-
-                // Hide renewal card if it's open
-                if (renewalCard) {
-                    renewalCard.classList.add('hidden');
-                }
-
-                // Toggle settings card
-                if (settingsCard) {
-                    const isHidden = settingsCard.classList.contains('hidden');
-                    if (isHidden) {
-                        settingsCard.classList.remove('hidden');
-                        // Render card content first
-                        renderSubscriptionSettingsCard();
-                        // Then scroll to it
-                        setTimeout(() => {
-                            settingsCard.scrollIntoView({ behavior: 'smooth', block: 'start' });
-                        }, 50);
-                    } else {
-                        settingsCard.classList.add('hidden');
-                    }
-                }
-            }, 150);
-        });
-
-        document.getElementById('subscriptionRenewActionBtn')?.addEventListener('click', () => {
-            // Проверяем, является ли подписка триалом
-            const statusRaw = String(
-                userData?.user?.subscription_actual_status
-                || userData?.user?.subscription_status
-                || ''
-            ).toLowerCase();
-            const typeRaw = String(
-                userData?.subscription_type
-                ?? userData?.user?.subscription_type
-                ?? ''
-            ).toLowerCase();
-            const isTrial = ['trial', 'trialing'].includes(statusRaw) || typeRaw === 'trial';
-
-            // Если это триал, открываем карточку покупки подписки на странице (не в модальном окне)
-            if (isTrial) {
-                // Устанавливаем флаг принудительного показа карточки для триалов
-                subscriptionPurchaseCardForceShow = true;
-
-                switchScreen('subscriptions');
-                setTimeout(() => {
-                    const purchaseCard = document.getElementById('subscriptionPurchaseCard');
-                    const purchaseWrapper = document.getElementById('subscriptionPurchaseCardWrapper');
-                    const settingsCard = document.getElementById('subscriptionSettingsCard');
-                    const renewalCard = document.getElementById('subscriptionRenewalCard');
-
-                    // Скрываем другие карточки
-                    if (settingsCard) {
-                        settingsCard.classList.add('hidden');
-                    }
-                    if (renewalCard) {
-                        renewalCard.classList.add('hidden');
-                    }
-
-                    // Показываем карточку покупки
-                    if (purchaseCard && purchaseWrapper) {
-                        // Убеждаемся, что модальное окно закрыто
-                        subscriptionPurchaseModalOpen = false;
-                        const modal = document.getElementById('subscriptionPurchaseModal');
-                        if (modal) {
-                            modal.classList.add('hidden');
-                        }
-                        document.body.classList.remove('modal-open');
-                        restoreSubscriptionPurchaseCard();
-
-                        // Принудительно показываем карточку на странице
-                        purchaseWrapper.classList.remove('hidden');
-                        purchaseCard.classList.remove('hidden');
-
-                        // Рендерим карточку с флагом принудительного показа
-                        renderSubscriptionPurchaseCard(true);
-
-                        // Загружаем данные покупки, если они еще не загружены
-                        ensureSubscriptionPurchaseData().then(() => {
-                            // После загрузки данных снова рендерим карточку с флагом принудительного показа
-                            renderSubscriptionPurchaseCard(true);
-                            // Прокручиваем к карточке
-                            setTimeout(() => {
-                                purchaseCard.scrollIntoView({ behavior: 'smooth', block: 'start' });
-                            }, 50);
-                        }).catch(error => {
-                            console.warn('Failed to load purchase data:', error);
-                            // Даже при ошибке показываем карточку
-                            renderSubscriptionPurchaseCard(true);
-                            setTimeout(() => {
-                                purchaseCard.scrollIntoView({ behavior: 'smooth', block: 'start' });
-                            }, 50);
-                        });
-                    }
-                }, 150);
-                return;
-            }
-
-            // Для платных подписок сбрасываем флаг принудительного показа
-            subscriptionPurchaseCardForceShow = false;
-
-            // Для платных подписок открываем карточку продления
-            // Сначала проверяем, что это действительно платная подписка
-            if (!hasPaidSubscription()) {
-                console.warn('Cannot renew: subscription is not paid');
-                return;
-            }
-
-            switchScreen('subscriptions');
-            setTimeout(() => {
-                const renewalCard = document.getElementById('subscriptionRenewalCard');
-                const settingsCard = document.getElementById('subscriptionSettingsCard');
-
-                // Hide settings card if it's open
-                if (settingsCard) {
-                    settingsCard.classList.add('hidden');
-                }
-
-                // Toggle renewal card
-                if (renewalCard) {
-                    const isHidden = renewalCard.classList.contains('hidden');
-                    if (isHidden) {
-                        // Удаляем класс hidden перед рендерингом
-                        renewalCard.classList.remove('hidden');
-                        // Загружаем данные продления, если они еще не загружены
-                        ensureSubscriptionRenewalData().then(() => {
-                            // После загрузки данных рендерим карточку
-                            renderSubscriptionRenewalCard();
-                            // Then scroll to it
-                            setTimeout(() => {
-                                renewalCard.scrollIntoView({ behavior: 'smooth', block: 'start' });
-                            }, 50);
-                        }).catch(error => {
-                            console.warn('Failed to load renewal data:', error);
-                            // Все равно рендерим карточку, даже если загрузка не удалась
-                            renderSubscriptionRenewalCard();
-                        });
-                    } else {
-                        renewalCard.classList.add('hidden');
-                    }
-                }
-            }, 150);
-        });
-
-        // Call renderSubscriptionDetailsCard when data is updated
-        const originalApplySubscriptionData = applySubscriptionData;
-        applySubscriptionData = function(payload) {
-            const result = originalApplySubscriptionData(payload);
-            renderSubscriptionDetailsCard();
-            renderDevicesList();
-            renderServersList();
-            return result;
-        };
-
-        // ===== bedolaga VPN Bottom Navigation =====
-
-        function initBottomNav() {
-            const bottomNav = document.querySelector('.bottom-nav');
-            if (!bottomNav) {
-                console.warn('Bottom nav not found');
-                return;
-            }
-
-            // Use event delegation on the parent element
-            bottomNav.addEventListener('click', (e) => {
-                const navItem = e.target.closest('.nav-item');
-                if (!navItem) return;
-
-                e.preventDefault();
-                e.stopPropagation();
-
-                const screenId = navItem.getAttribute('data-screen');
-                if (screenId) {
-                    switchScreen(screenId);
-                }
-            });
-        }
-
-        function switchScreen(screenId) {
-            if (!screenId) {
-                console.warn('switchScreen: screenId is required');
-                return;
-            }
-
-            currentNavScreen = screenId;
-
-            // Hide all screens with animation
-            const allScreens = document.querySelectorAll('.screen-container');
-            if (!allScreens.length) {
-                console.warn('No screen containers found');
-                return;
-            }
-
-            allScreens.forEach(screen => {
-                if (screen.classList.contains('active')) {
-                    screen.classList.add('switching');
-                    setTimeout(() => {
-                        screen.classList.remove('active', 'switching');
-                    }, 200);
-                } else {
-                    screen.classList.remove('active');
-                }
-            });
-
-            // Show target screen with animation
-            const targetScreen = document.querySelector(`.screen-container[data-screen="${screenId}"]`);
-            if (targetScreen) {
-                setTimeout(() => {
-                    targetScreen.classList.add('active');
-                }, 200);
-            } else {
-                console.warn(`Screen with id "${screenId}" not found`);
-            }
-
-            // Update nav items
-            document.querySelectorAll('.nav-item').forEach(item => {
-                const itemScreenId = item.getAttribute('data-screen');
-                item.classList.toggle('active', itemScreenId === screenId);
-            });
-
-            // Show/hide connect button based on screen
-            const connectFloatingBtn = document.getElementById('connectFloatingBtn');
-            if (connectFloatingBtn) {
-                const showConnect = screenId === 'home' && hasActiveSubscription();
-                connectFloatingBtn.classList.toggle('hidden', !showConnect);
-            }
-
-            // Update subscription cards when switching to subscriptions screen
-            if (screenId === 'subscriptions') {
-                renderSubscriptionDetailsCard();
-                renderSubscriptionMissingCard();
-                setTimeout(() => {
-                    renderSubscriptionPurchaseCard();
-                    // Показываем карточку продления только для платных подписок
-                    if (hasPaidSubscription()) {
-                        renderSubscriptionRenewalCard();
-                    } else {
-                        const renewalCard = document.getElementById('subscriptionRenewalCard');
-                        if (renewalCard) {
-                            renewalCard.classList.add('hidden');
-                        }
-                    }
-                    renderSubscriptionSettingsCard();
-                }, 50);
-            }
-
-            // Update transaction history when switching to payments screen
-            if (screenId === 'payments') {
-                setTimeout(() => {
-                    renderTransactionHistoryPayments();
-                }, 50);
-            }
-
-            // Sync balance amounts between screens
-            syncBalanceAmounts();
-
-            // Scroll to top
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-
-            // Enforce visibility for screen-specific elements
-            try {
-                document.querySelectorAll('[data-screen-only]')
-                    .forEach(el => {
-                        const only = (el.getAttribute('data-screen-only') || '').trim();
-                        // Skip news card if news is disabled
-                        if (el.id === 'newsCard' && !newsEnabled) {
-                            el.classList.add('hidden');
-                            return;
-                        }
-                        el.classList.toggle('hidden', only && only !== screenId);
-                    });
-            } catch (e) {
-                // no-op
-            }
-
-            if (screenId === 'home') {
-                placeNewsSection();
-            }
-        }
-
-        function syncBalanceAmounts() {
-            const balanceAmount = document.getElementById('balanceAmount');
-            const balanceAmountPayments = document.getElementById('balanceAmountPayments');
-            if (balanceAmount && balanceAmountPayments && balanceAmount.textContent !== '—') {
-                balanceAmountPayments.textContent = balanceAmount.textContent;
-            }
-        }
-
-
-        // Support button handler
-        document.getElementById('supportBtn')?.addEventListener('click', () => {
-            if (typeof tg.openTelegramLink === 'function') {
-                tg.openTelegramLink(supportUrl);
-            } else {
-                window.open(supportUrl, '_blank');
-            }
-        });
-
-        // Snowflakes functionality
-        let snowflakesInterval = null;
-        let snowflakesEnabled = true; // Default to enabled
-        const snowflakesContainer = document.getElementById('snowflakesContainer');
-        const snowflakesToggle = document.getElementById('snowflakesToggle');
-
-        function createSnowflake() {
-            if (!snowflakesContainer || snowflakesContainer.classList.contains('hidden')) {
-                return;
-            }
-
-            // Check if body has modal-open class
-            if (document.body.classList.contains('modal-open')) {
-                return;
-            }
-
-            const snowflake = document.createElement('div');
-            snowflake.className = 'snowflake';
-            snowflake.textContent = '❄';
-
-            // Random position across full width (0-100%)
-            const leftPosition = Math.random() * 100;
-            snowflake.style.left = leftPosition + '%';
-
-            // Random horizontal drift (both left and right)
-            const maxDrift = 100; // Maximum drift in pixels
-            const xOffset = (Math.random() - 0.5) * 2 * maxDrift; // -100px to +100px
-            snowflake.style.setProperty('--snowflake-x-offset', xOffset + 'px');
-
-            // Random animation duration (3-8 seconds)
-            const duration = Math.random() * 5 + 3;
-            snowflake.style.animationDuration = duration + 's';
-
-            // Random delay
-            snowflake.style.animationDelay = Math.random() * 2 + 's';
-
-            // Random size
-            const size = Math.random() * 0.5 + 0.5;
-            snowflake.style.fontSize = size + 'em';
-
-            snowflakesContainer.appendChild(snowflake);
-
-            // Remove snowflake after animation
-            setTimeout(() => {
-                if (snowflake.parentNode) {
-                    snowflake.parentNode.removeChild(snowflake);
-                }
-            }, (duration + 2) * 1000);
-        }
-
-        function startSnowflakes() {
-            if (snowflakesInterval) return;
-
-            snowflakesContainer.classList.remove('hidden');
-            snowflakesEnabled = true;
-
-            // Create initial snowflakes
-            for (let i = 0; i < 20; i++) {
-                setTimeout(() => createSnowflake(), i * 200);
-            }
-
-            // Create new snowflake every 300ms
-            snowflakesInterval = setInterval(() => {
-                createSnowflake();
-            }, 300);
-        }
-
-        function stopSnowflakes() {
-            if (snowflakesInterval) {
-                clearInterval(snowflakesInterval);
-                snowflakesInterval = null;
-            }
-            snowflakesContainer.classList.add('hidden');
-            snowflakesEnabled = false;
-
-            // Remove all snowflakes
-            while (snowflakesContainer.firstChild) {
-                snowflakesContainer.removeChild(snowflakesContainer.firstChild);
-            }
-        }
-
-        function toggleSnowflakes() {
-            if (snowflakesEnabled) {
-                stopSnowflakes();
-                snowflakesToggle?.classList.remove('active');
-                localStorage.setItem('snowflakesEnabled', 'false');
-            } else {
-                startSnowflakes();
-                snowflakesToggle?.classList.add('active');
-                localStorage.setItem('snowflakesEnabled', 'true');
-            }
-        }
-
-        // Load saved state from localStorage (default to enabled if not set)
-        const savedSnowflakesState = localStorage.getItem('snowflakesEnabled');
-        if (savedSnowflakesState === null || savedSnowflakesState === 'true') {
-            // Default to enabled if not set or explicitly set to true
-            setTimeout(() => {
-                startSnowflakes();
-                snowflakesToggle?.classList.add('active');
-            }, 500);
-        } else if (savedSnowflakesState === 'false') {
-            // Only disable if explicitly set to false
-            snowflakesEnabled = false;
-            snowflakesToggle?.classList.remove('active');
-        }
-
-        // Toggle button handler
-        snowflakesToggle?.addEventListener('click', () => {
-            toggleSnowflakes();
-        });
-
-        // ===== Toast Notifications =====
-        function showToast(message, type = 'info', duration = 3000) {
-            const container = document.getElementById('toastContainer');
-            if (!container) return;
-
-            const toast = document.createElement('div');
-            toast.className = `toast ${type}`;
-
-            const icons = {
-                success: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>',
-                error: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>',
-                warning: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>',
-                info: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>'
-            };
-
-            toast.innerHTML = `
-                <div class="toast-icon">${icons[type] || icons.info}</div>
-                <div class="toast-content">${escapeHtml(message)}</div>
-                <button class="toast-close" aria-label="Close">
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <line x1="18" y1="6" x2="6" y2="18"></line>
-                        <line x1="6" y1="6" x2="18" y2="18"></line>
-                    </svg>
-                </button>
-            `;
-
-            const closeBtn = toast.querySelector('.toast-close');
-            const closeToast = () => {
-                toast.classList.add('hiding');
-                setTimeout(() => {
-                    if (toast.parentNode) {
-                        toast.parentNode.removeChild(toast);
-                    }
-                }, 250);
-            };
-
-            closeBtn.addEventListener('click', closeToast);
-            container.appendChild(toast);
-
-            if (duration > 0) {
-                setTimeout(closeToast, duration);
-            }
-
-            return toast;
-        }
-
-        // ===== Pull to Refresh =====
-        let pullToRefreshState = {
-            startY: 0,
-            currentY: 0,
-            isPulling: false,
-            threshold: 150,  // Увеличен порог срабатывания
-            maxPull: 200,    // Увеличен максимальный pull
-            minPull: 30,    // Минимальное расстояние для активации
-            startTime: 0
-        };
-
-        function initPullToRefresh() {
-            const screens = document.querySelectorAll('.screen-container');
-
-            screens.forEach(screen => {
-                let startY = 0;
-                let currentY = 0;
-                let isPulling = false;
-                let startTime = 0;
-                const screenId = screen.getAttribute('data-screen');
-
-                // Для экрана профиля делаем еще более строгие условия
-                const isProfileScreen = screenId === 'profile';
-                const threshold = isProfileScreen ? 180 : pullToRefreshState.threshold;
-                const minPull = isProfileScreen ? 50 : pullToRefreshState.minPull;
-
-                const pullIndicator = document.createElement('div');
-                pullIndicator.className = 'pull-to-refresh';
-                pullIndicator.innerHTML = `
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <polyline points="23 4 23 10 17 10"></polyline>
-                        <polyline points="1 20 1 14 7 14"></polyline>
-                        <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
-                    </svg>
-                `;
-                screen.insertBefore(pullIndicator, screen.firstChild);
-
-                screen.addEventListener('touchstart', (e) => {
-                    if (!screen.classList.contains('active')) return;
-                    // Проверяем, что действительно в самом верху (с небольшим допуском)
-                    if (screen.scrollTop > 5) return;
-
-                    startY = e.touches[0].clientY;
-                    startTime = Date.now();
-                    isPulling = false;
-                }, { passive: true });
-
-                screen.addEventListener('touchmove', (e) => {
-                    // Проверяем, что действительно в самом верху
-                    if (screen.scrollTop > 5) {
-                        // Сбрасываем состояние при скролле вниз
-                        if (isPulling) {
-                            isPulling = false;
-                            pullIndicator.classList.remove('active', 'spinning');
-                            pullIndicator.style.transform = '';
-                            pullIndicator.style.opacity = '';
-                        }
-                        startY = 0;
-                        return;
-                    }
-                    if (!startY) return;
-
-                    currentY = e.touches[0].clientY;
-                    const pullDistance = currentY - startY;
-
-                    // Проверяем минимальное расстояние перед активацией
-                    if (pullDistance < minPull) {
-                        if (isPulling) {
-                            isPulling = false;
-                            pullIndicator.classList.remove('active', 'spinning');
-                            pullIndicator.style.transform = '';
-                            pullIndicator.style.opacity = '';
-                        }
-                        return;
-                    }
-
-                    if (pullDistance > 0 && pullDistance < pullToRefreshState.maxPull) {
-                        if (!isPulling) {
-                            isPulling = true;
-                            pullIndicator.classList.add('active');
-                        }
-
-                        const progress = Math.min(pullDistance / threshold, 1);
-                        pullIndicator.style.transform = `translateX(-50%) translateY(${Math.min(pullDistance * 0.5, 40)}px)`;
-                        pullIndicator.style.opacity = Math.min(progress, 1);
-
-                        if (pullDistance >= threshold) {
-                            pullIndicator.classList.add('spinning');
-                        } else {
-                            pullIndicator.classList.remove('spinning');
-                        }
-                    } else if (pullDistance >= pullToRefreshState.maxPull) {
-                        // Ограничиваем максимальное расстояние
-                        if (isPulling) {
-                            pullIndicator.style.transform = `translateX(-50%) translateY(${Math.min(pullToRefreshState.maxPull * 0.5, 40)}px)`;
-                            pullIndicator.style.opacity = 1;
-                        }
-                    }
-                }, { passive: true });
-
-                screen.addEventListener('touchend', async () => {
-                    if (!isPulling) {
-                        startY = 0;
-                        currentY = 0;
-                        startTime = 0;
-                        return;
-                    }
-
-                    const pullDistance = currentY - startY;
-                    const pullDuration = Date.now() - startTime;
-
-                    // Проверяем, что это было намеренное действие:
-                    // 1. Достаточное расстояние
-                    // 2. Не слишком быстрое движение (не случайное)
-                    // 3. Не слишком медленное (не случайное скольжение)
-                    const isValidPull = pullDistance >= threshold
-                        && pullDuration > 100  // Минимум 100мс
-                        && pullDuration < 2000; // Максимум 2 секунды
-
-                    if (isValidPull) {
-                        pullIndicator.classList.add('spinning');
-
-                        // Trigger refresh
-                        await refreshScreen(screenId);
-                    }
-
-                    // Reset
-                    setTimeout(() => {
-                        pullIndicator.classList.remove('active', 'spinning');
-                        pullIndicator.style.transform = '';
-                        pullIndicator.style.opacity = '';
-                    }, 300);
-
-                    startY = 0;
-                    currentY = 0;
-                    startTime = 0;
-                    isPulling = false;
-                }, { passive: true });
-            });
-        }
-
-        async function refreshScreen(screenId) {
-            try {
-                // Обновляем данные подписки
-                await refreshSubscriptionData({ silent: true });
-
-                // Обновляем конкретные экраны
-                switch (screenId) {
-                    case 'home':
-                        // Данные уже обновлены через refreshSubscriptionData
-                        break;
-                    case 'subscriptions':
-                        renderSubscriptionDetailsCard();
-                        renderSubscriptionPurchaseCard();
-                        renderSubscriptionRenewalCard();
-                        renderSubscriptionSettingsCard();
-                        break;
-                    case 'payments':
-                        renderTransactionHistoryPayments();
-                        break;
-                    case 'profile':
-                        // Данные профиля обновляются автоматически
-                        break;
-                }
-                showToast('Данные обновлены', 'success', 2000);
-            } catch (error) {
-                console.error('Refresh error:', error);
-                showToast('Ошибка обновления', 'error', 3000);
-            }
-        }
-
-        // Initialize pull to refresh
-        setTimeout(() => {
-            initPullToRefresh();
-        }, 500);
-
-        // ===== Header Menu =====
-        const headerMenuBtn = document.getElementById('headerMenuBtn');
-        const headerMenuDropdown = document.getElementById('headerMenuDropdown');
-        const menuLanguageSelect = document.getElementById('menuLanguageSelect');
-        const menuLanguageValue = document.getElementById('menuLanguageValue');
-        const menuSnowflakesToggle = document.getElementById('menuSnowflakesToggle');
-        const menuSupportItem = document.getElementById('menuSupportItem');
-        const menuThemeToggle = document.getElementById('menuThemeToggle');
-        const menuThemeValue = document.getElementById('menuThemeValue');
-        const menuThemeIcon = document.getElementById('menuThemeIcon');
-        const menuMoonIcon = document.getElementById('menuMoonIcon');
-        const menuSunIcon = document.getElementById('menuSunIcon');
-
-        // Toggle menu
-        function toggleHeaderMenu() {
-            if (headerMenuDropdown && headerMenuBtn) {
-                const isOpen = headerMenuDropdown.classList.contains('open');
-                if (!isOpen) {
-                    // Calculate position relative to button
-                    const rect = headerMenuBtn.getBoundingClientRect();
-                    const rightOffset = window.innerWidth <= 480 ? 8 : 0;
-                    headerMenuDropdown.style.top = (rect.bottom + 8) + 'px';
-                    headerMenuDropdown.style.right = (window.innerWidth - rect.right + rightOffset) + 'px';
-                }
-                headerMenuDropdown.classList.toggle('open');
-            }
-        }
-
-        // Close menu when clicking outside
-        document.addEventListener('click', (e) => {
-            if (headerMenuDropdown && headerMenuBtn &&
-                !headerMenuDropdown.contains(e.target) &&
-                !headerMenuBtn.contains(e.target)) {
-                headerMenuDropdown.classList.remove('open');
-            }
-        });
-
-        // Prevent menu from closing when clicking on menu items (except support)
-        headerMenuDropdown?.addEventListener('click', (e) => {
-            // Allow clicks on selects and toggles to propagate
-            if (e.target.closest('.header-menu-item-select') ||
-                e.target.closest('.header-menu-item-toggle')) {
-                return;
-            }
-            // Stop propagation for other clicks except support item
-            if (!e.target.closest('#menuSupportItem')) {
-                e.stopPropagation();
-            }
-        });
-
-        // Menu button click handler
-        headerMenuBtn?.addEventListener('click', (e) => {
-            e.stopPropagation();
-            toggleHeaderMenu();
-        });
-
-        // Update menu position on scroll or resize
-        function updateMenuPosition() {
-            if (headerMenuDropdown && headerMenuBtn && headerMenuDropdown.classList.contains('open')) {
-                const rect = headerMenuBtn.getBoundingClientRect();
-                const rightOffset = window.innerWidth <= 480 ? 8 : 0;
-                headerMenuDropdown.style.top = (rect.bottom + 8) + 'px';
-                headerMenuDropdown.style.right = (window.innerWidth - rect.right + rightOffset) + 'px';
-            }
-        }
-
-        window.addEventListener('scroll', updateMenuPosition, true);
-        window.addEventListener('resize', updateMenuPosition);
-
-        // Update menu language value
-        function updateMenuLanguageValue() {
-            const select = document.getElementById('languageSelect');
-            if (select && menuLanguageValue) {
-                const selectedOption = select.options[select.selectedIndex];
-                menuLanguageValue.textContent = selectedOption.textContent;
-            }
-        }
-
-        // Sync menu language select with main select
-        if (menuLanguageSelect) {
-            const mainLanguageSelect = document.getElementById('languageSelect');
-            if (mainLanguageSelect) {
-                // Sync initial value
-                menuLanguageSelect.value = mainLanguageSelect.value;
-                updateMenuLanguageValue();
-
-                // Sync on change
-                menuLanguageSelect.addEventListener('change', (e) => {
-                    e.stopPropagation();
-                    mainLanguageSelect.value = e.target.value;
-                    mainLanguageSelect.dispatchEvent(new Event('change'));
-                    updateMenuLanguageValue();
-                    // Close menu after language change
-                    setTimeout(() => {
-                        headerMenuDropdown?.classList.remove('open');
-                    }, 100);
-                });
-
-                // Update menu when main select changes
-                mainLanguageSelect.addEventListener('change', () => {
-                    menuLanguageSelect.value = mainLanguageSelect.value;
-                    updateMenuLanguageValue();
-                });
-            }
-        }
-
-        // Update menu snowflakes toggle state
-        function updateMenuSnowflakesToggle() {
-            if (menuSnowflakesToggle) {
-                if (snowflakesEnabled) {
-                    menuSnowflakesToggle.classList.add('active');
-                } else {
-                    menuSnowflakesToggle.classList.remove('active');
-                }
-            }
-        }
-
-        // Menu snowflakes toggle handler
-        menuSnowflakesToggle?.addEventListener('click', (e) => {
-            e.stopPropagation();
-            toggleSnowflakes();
-            updateMenuSnowflakesToggle();
-        });
-
-        // Update snowflakes toggle when state changes
-        const originalToggleSnowflakes = toggleSnowflakes;
-        toggleSnowflakes = function() {
-            originalToggleSnowflakes();
-            updateMenuSnowflakesToggle();
-        };
-
-        // Initial update
-        updateMenuSnowflakesToggle();
-
-        // Support menu item handler
-        menuSupportItem?.addEventListener('click', (e) => {
-            e.stopPropagation();
-            if (typeof tg.openTelegramLink === 'function') {
-                tg.openTelegramLink(supportUrl);
-            } else {
-                window.open(supportUrl, '_blank');
-            }
-            headerMenuDropdown?.classList.remove('open');
-        });
-
-        // Update menu theme toggle state
-        function updateMenuThemeToggle() {
-            if (menuThemeToggle && menuThemeValue) {
-                if (currentTheme === 'dark') {
-                    menuThemeToggle.classList.add('active');
-                    menuThemeValue.setAttribute('data-i18n', 'menu.theme.dark');
-                    if (menuMoonIcon) menuMoonIcon.style.display = 'block';
-                    if (menuSunIcon) menuSunIcon.style.display = 'none';
-                } else {
-                    menuThemeToggle.classList.remove('active');
-                    menuThemeValue.setAttribute('data-i18n', 'menu.theme.light');
-                    if (menuMoonIcon) menuMoonIcon.style.display = 'none';
-                    if (menuSunIcon) menuSunIcon.style.display = 'block';
-                }
-                // Update text using translation function
-                const themeText = currentTheme === 'dark' ? t('menu.theme.dark') : t('menu.theme.light');
-                if (themeText && themeText !== 'menu.theme.dark' && themeText !== 'menu.theme.light') {
-                    menuThemeValue.textContent = themeText;
-                }
-            }
-        }
-
-        // Menu theme toggle handler
-        menuThemeToggle?.addEventListener('click', (e) => {
-            e.stopPropagation();
-            const nextTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            applyTheme(nextTheme, { persist: true });
-            updateMenuThemeToggle();
-        });
-
-        // Update theme toggle when theme changes
-        const originalUpdateThemeToggleState = updateThemeToggleState;
-        updateThemeToggleState = function() {
-            originalUpdateThemeToggleState();
-            updateMenuThemeToggle();
-        };
-
-        // Update menu theme toggle when language changes
-        const originalRefreshAfterLanguageChange = refreshAfterLanguageChange;
-        refreshAfterLanguageChange = function() {
-            originalRefreshAfterLanguageChange();
-            updateMenuThemeToggle();
-        };
-
-        // Initial update
-        updateMenuThemeToggle();
-
-        // Connect floating button handler
-
-        init();
-
-        // Initialize bottom nav after DOM is ready
-        function initializeNavigation() {
-            const bottomNav = document.querySelector('.bottom-nav');
-            if (bottomNav) {
-                initBottomNav();
-                switchScreen('home');
-            } else {
-                // Retry after a short delay if elements not ready
-                setTimeout(initializeNavigation, 100);
-            }
-        }
-
-        if (document.readyState === 'loading') {
-            document.addEventListener('DOMContentLoaded', initializeNavigation);
-        } else {
-            // DOM already loaded, but elements might not be in place yet
-            setTimeout(initializeNavigation, 0);
-        }
-
-    </script>
-
-    <!-- Connect Floating Button -->
-    <!-- Bottom Navigation -->
-    <nav class="bottom-nav">
-        <button class="nav-item active" data-screen="home">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
-                <polyline points="9 22 9 12 15 12 15 22"/>
-            </svg>
-            <span>Главная</span>
-        </button>
-        <button class="nav-item" data-screen="subscriptions">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <rect x="3" y="11" width="18" height="11" rx="2"/>
-                <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
-            </svg>
-            <span>Подписки</span>
-        </button>
-        <button class="nav-item" data-screen="payments">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <rect x="1" y="4" width="22" height="16" rx="2"/>
-                <line x1="1" y1="10" x2="23" y2="10"/>
-            </svg>
-            <span>Платежи</span>
-        </button>
-        <button class="nav-item" data-screen="profile">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
-                <circle cx="12" cy="7" r="4"/>
-            </svg>
-            <span>Профиль</span>
-        </button>
-    </nav>
-
-    <!-- Toast Container -->
-    <div class="toast-container" id="toastContainer"></div>
-</body>
-</html>
diff --git a/src/types/index.ts b/src/types/index.ts
index 480fd88..2154f86 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -65,6 +65,7 @@ export interface Subscription {
   autopay_enabled: boolean
   autopay_days_before: number
   subscription_url: string | null
+  hide_subscription_link: boolean
   is_active: boolean
   is_expired: boolean
   traffic_purchases?: TrafficPurchase[]
