Update app.py

app.py

@@ -12,118 +12,142 @@ from datetime import datetime
 import logging
 import threading
 from huggingface_hub import HfApi, hf_hub_download
-from huggingface_hub.utils import RepositoryNotFoundError, HFValidationError
+from huggingface_hub.utils import RepositoryNotFoundError
 
 # --- Configuration ---
-BOT_TOKEN = os.getenv("BOT_TOKEN", "7566834146:AAGiG4MaTZZvvbTVsqEJVG5SYK5hUlc_Ewo") # Replace with your actual bot token or set env var
+BOT_TOKEN = os.getenv("BOT_TOKEN", "7566834146:AAGiG4MaTZZvvbTVsqEJVG5SYK5hUlc_Ewo") # Use environment variable or default
 HOST = '0.0.0.0'
 PORT = 7860
-USER_DATA_FILE = 'data.json'
+DATA_FILE = 'data.json' # Local file for visitor data
 
-# Hugging Face Settings for User Data
-HF_USER_DATA_REPO_ID = "flpolprojects/teledata"
-HF_TOKEN_WRITE = os.getenv("HF_TOKEN_WRITE") # Needs write access to the repo
-HF_TOKEN_READ = os.getenv("HF_TOKEN_READ", HF_TOKEN_WRITE) # Can use write token if read token not set
+# Hugging Face Settings
+REPO_ID = "flpolprojects/teledata"
+HF_DATA_FILE_PATH = "data.json" # Path within the HF repo
+HF_TOKEN_WRITE = os.getenv("HF_TOKEN_WRITE") # Token with write access
+HF_TOKEN_READ = os.getenv("HF_TOKEN_READ") # Token with read access (can be same as write)
 
-# --- Flask App Initialization ---
 app = Flask(__name__)
+logging.basicConfig(level=logging.INFO)
+app.secret_key = os.urandom(24) # For potential future session use
 
-# --- Logging Setup ---
-logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s')
+# --- Hugging Face & Data Handling ---
+_data_lock = threading.Lock()
+visitor_data_cache = {} # In-memory cache
 
-# --- Hugging Face Interaction ---
-def download_user_data_from_hf():
-    if not HF_TOKEN_READ or not HF_USER_DATA_REPO_ID:
-        logging.warning("Hugging Face read token or repo ID not configured. Skipping download.")
-        return
+def download_data_from_hf():
+    global visitor_data_cache
+    if not HF_TOKEN_READ:
+        logging.warning("HF_TOKEN_READ not set. Skipping Hugging Face download.")
+        return False
     try:
-        logging.info(f"Attempting to download {USER_DATA_FILE} from {HF_USER_DATA_REPO_ID}")
+        logging.info(f"Attempting to download {HF_DATA_FILE_PATH} from {REPO_ID}...")
         hf_hub_download(
-            repo_id=HF_USER_DATA_REPO_ID,
-            filename=USER_DATA_FILE,
+            repo_id=REPO_ID,
+            filename=HF_DATA_FILE_PATH,
             repo_type="dataset",
             token=HF_TOKEN_READ,
             local_dir=".",
             local_dir_use_symlinks=False,
             force_download=True, # Ensure we get the latest version
-            etag_timeout=60 # Extend timeout for potentially larger files
+            etag_timeout=10 # Shorter timeout to avoid hanging
         )
-        logging.info(f"{USER_DATA_FILE} successfully downloaded from Hugging Face.")
+        logging.info("Data file successfully downloaded from Hugging Face.")
+        # Force reload from downloaded file
+        with _data_lock:
+            try:
+                with open(DATA_FILE, 'r', encoding='utf-8') as f:
+                    visitor_data_cache = json.load(f)
+                logging.info("Successfully loaded downloaded data into cache.")
+            except (FileNotFoundError, json.JSONDecodeError) as e:
+                 logging.error(f"Error reading downloaded data file: {e}. Starting with empty cache.")
+                 visitor_data_cache = {}
+        return True
     except RepositoryNotFoundError:
-        logging.warning(f"Repository {HF_USER_DATA_REPO_ID} not found on Hugging Face. Will create local file if needed.")
-    except HFValidationError as e:
-         logging.error(f"Hugging Face Validation Error during download (Check Token Permissions?): {e}")
+        logging.error(f"Hugging Face repository '{REPO_ID}' not found. Cannot download data.")
+        # Don't clear local cache if repo not found, might have local data
     except Exception as e:
-        # Catch specific exceptions like hf_hub.utils._errors.HfHubHTTPError if possible
-        if "404" in str(e):
-             logging.warning(f"{USER_DATA_FILE} not found in repository {HF_USER_DATA_REPO_ID}. Will create local file if needed.")
-        else:
-            logging.error(f"Error downloading {USER_DATA_FILE} from Hugging Face: {e}")
+        logging.error(f"Error downloading data from Hugging Face: {e}")
+        # Don't clear local cache on generic download errors
+    return False
+
+def load_visitor_data():
+    global visitor_data_cache
+    with _data_lock:
+        if not visitor_data_cache: # Only load from file if cache is empty
+            try:
+                with open(DATA_FILE, 'r', encoding='utf-8') as f:
+                    visitor_data_cache = json.load(f)
+                logging.info("Visitor data loaded from local JSON.")
+            except FileNotFoundError:
+                logging.warning(f"{DATA_FILE} not found locally. Starting with empty data.")
+                visitor_data_cache = {}
+            except json.JSONDecodeError:
+                logging.error(f"Error decoding {DATA_FILE}. Starting with empty data.")
+                visitor_data_cache = {}
+            except Exception as e:
+                logging.error(f"Unexpected error loading visitor data: {e}")
+                visitor_data_cache = {}
+        return visitor_data_cache
+
+def save_visitor_data(data):
+    with _data_lock:
+        try:
+            # Update cache first
+            visitor_data_cache.update(data)
+            # Save updated cache to file
+            with open(DATA_FILE, 'w', encoding='utf-8') as f:
+                json.dump(visitor_data_cache, f, ensure_ascii=False, indent=4)
+            logging.info(f"Visitor data successfully saved to {DATA_FILE}.")
+            # Trigger upload after successful local save
+            upload_data_to_hf_async() # Use async upload
+        except Exception as e:
+            logging.error(f"Error saving visitor data: {e}")
+
+def upload_data_to_hf():
+    if not HF_TOKEN_WRITE:
+        logging.warning("HF_TOKEN_WRITE not set. Skipping Hugging Face upload.")
+        return
+    if not os.path.exists(DATA_FILE):
+        logging.warning(f"{DATA_FILE} does not exist. Skipping upload.")
+        return
 
-def upload_user_data_to_hf():
-    if not HF_TOKEN_WRITE or not HF_USER_DATA_REPO_ID:
-        logging.warning("Hugging Face write token or repo ID not configured. Skipping upload.")
-        return False
-    if not os.path.exists(USER_DATA_FILE):
-        logging.warning(f"{USER_DATA_FILE} does not exist locally. Skipping upload.")
-        return False
     try:
         api = HfApi()
-        api.upload_file(
-            path_or_fileobj=USER_DATA_FILE,
-            path_in_repo=USER_DATA_FILE,
-            repo_id=HF_USER_DATA_REPO_ID,
-            repo_type="dataset",
-            token=HF_TOKEN_WRITE,
-            commit_message=f"Update user data {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}"
-        )
-        logging.info(f"{USER_DATA_FILE} successfully uploaded to Hugging Face.")
-        return True
-    except HFValidationError as e:
-         logging.error(f"Hugging Face Validation Error during upload (Check Token Permissions?): {e}")
-         return False
+        with _data_lock: # Ensure file isn't being written while reading for upload
+             file_content_exists = os.path.getsize(DATA_FILE) > 0
+             if not file_content_exists:
+                 logging.warning(f"{DATA_FILE} is empty. Skipping upload.")
+                 return
+
+             logging.info(f"Attempting to upload {DATA_FILE} to {REPO_ID}/{HF_DATA_FILE_PATH}...")
+             api.upload_file(
+                 path_or_fileobj=DATA_FILE,
+                 path_in_repo=HF_DATA_FILE_PATH,
+                 repo_id=REPO_ID,
+                 repo_type="dataset",
+                 token=HF_TOKEN_WRITE,
+                 commit_message=f"Update visitor data {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}"
+             )
+        logging.info("Visitor data successfully uploaded to Hugging Face.")
     except Exception as e:
-        logging.error(f"Error uploading {USER_DATA_FILE} to Hugging Face: {e}")
-        return False
-
-def periodic_user_data_backup():
-    while True:
-        time.sleep(3600) # Backup every hour
-        logging.info("Performing periodic backup of user data...")
-        upload_user_data_to_hf()
-
-# --- User Data Handling ---
-def load_user_data():
-    # Try to get the latest from HF first
-    # download_user_data_from_hf() # Removed to prevent download on every load, rely on initial download + uploads
-    try:
-        with open(USER_DATA_FILE, 'r', encoding='utf-8') as f:
-            data = json.load(f)
-            if not isinstance(data, dict):
-                logging.warning(f"{USER_DATA_FILE} does not contain a dictionary. Resetting.")
-                return {}
-            return data
-    except FileNotFoundError:
-        logging.info(f"{USER_DATA_FILE} not found locally. Initializing empty data.")
-        return {}
-    except json.JSONDecodeError:
-        logging.error(f"Error decoding JSON from {USER_DATA_FILE}. Returning empty data.")
-        return {}
-    except Exception as e:
-        logging.error(f"Error loading user data from {USER_DATA_FILE}: {e}")
-        return {}
-
-def save_user_data(data):
-    try:
-        with open(USER_DATA_FILE, 'w', encoding='utf-8') as f:
-            json.dump(data, f, ensure_ascii=False, indent=4)
-        logging.info(f"User data saved locally to {USER_DATA_FILE}.")
-        # Attempt to upload immediately after saving locally
-        upload_user_data_to_hf()
-    except Exception as e:
-        logging.error(f"Error saving user data to {USER_DATA_FILE}: {e}")
-
-# --- Telegram Data Verification ---
+        logging.error(f"Error uploading data to Hugging Face: {e}")
+        # Consider adding retry logic here if needed
+
+def upload_data_to_hf_async():
+     # Run upload in a separate thread to avoid blocking web requests
+     upload_thread = threading.Thread(target=upload_data_to_hf, daemon=True)
+     upload_thread.start()
+
+def periodic_backup():
+     if not HF_TOKEN_WRITE:
+         logging.info("Periodic backup disabled: HF_TOKEN_WRITE not set.")
+         return
+     while True:
+         time.sleep(3600) # Backup every hour
+         logging.info("Initiating periodic backup...")
+         upload_data_to_hf()
+
+# --- Telegram Verification ---
 def verify_telegram_data(init_data_str):
     try:
         parsed_data = parse_qs(init_data_str)
@@ -143,7 +167,7 @@ def verify_telegram_data(init_data_str):
         if calculated_hash == received_hash:
             auth_date = int(parsed_data.get('auth_date', [0])[0])
             current_time = int(time.time())
-            if current_time - auth_date > 3600: # 1 hour validity
+            if current_time - auth_date > 86400: # Allow data up to 24 hours old
                  logging.warning(f"Telegram InitData is older than 1 hour (Auth Date: {auth_date}, Current: {current_time}).")
             return parsed_data, True
         else:
@@ -154,383 +178,397 @@ def verify_telegram_data(init_data_str):
         return None, False
 
 # --- HTML Templates ---
-
-# Main Application Template
 TEMPLATE = """
 <!DOCTYPE html>
 <html lang="ru">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, user-scalable=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, user-scalable=no, viewport-fit=cover">
     <title>Morshen Group</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@300;400;500;600;700;800&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <style>
         :root {
-            --bg-gradient-start: #0f172a; /* Slate 900 */
-            --bg-gradient-end: #1e293b;   /* Slate 800 */
-            --card-bg: #334155;         /* Slate 700 */
-            --card-bg-hover: #475569;   /* Slate 600 */
-            --text-primary: #f1f5f9;    /* Slate 100 */
-            --text-secondary: #cbd5e1;  /* Slate 300 */
-            --text-muted: #94a3b8;     /* Slate 400 */
-            --accent-primary-start: #3b82f6; /* Blue 500 */
-            --accent-primary-end: #6366f1;   /* Indigo 500 */
-            --accent-secondary-start: #10b981; /* Emerald 500 */
-            --accent-secondary-end: #22c55e; /* Green 500 */
+            --tg-theme-bg-color: {{ theme.bg_color | default('#121212') }};
+            --tg-theme-text-color: {{ theme.text_color | default('#ffffff') }};
+            --tg-theme-hint-color: {{ theme.hint_color | default('#aaaaaa') }};
+            --tg-theme-link-color: {{ theme.link_color | default('#62bcf9') }};
+            --tg-theme-button-color: {{ theme.button_color | default('#31a5f5') }};
+            --tg-theme-button-text-color: {{ theme.button_text_color | default('#ffffff') }};
+            --tg-theme-secondary-bg-color: {{ theme.secondary_bg_color | default('#1e1e1e') }};
+
+            --bg-gradient: linear-gradient(160deg, #1a232f 0%, #121212 100%);
+            --card-bg: rgba(44, 44, 46, 0.8); /* Semi-transparent card */
+            --card-bg-solid: #2c2c2e;
+            --text-color: var(--tg-theme-text-color);
+            --text-secondary-color: var(--tg-theme-hint-color);
+            --accent-gradient: linear-gradient(95deg, var(--tg-theme-button-color, #007aff), #5856d6);
+            --accent-gradient-green: linear-gradient(95deg, #34c759, #30d158);
             --tag-bg: rgba(255, 255, 255, 0.1);
-            --tag-text: #e2e8f0;         /* Slate 200 */
-            --border-color: #475569;     /* Slate 600 */
-            --shadow-color: rgba(0, 0, 0, 0.3);
-            --border-radius-sm: 6px;
-            --border-radius-md: 12px;
-            --border-radius-lg: 18px;
-            --padding-xs: 4px;
-            --padding-sm: 8px;
-            --padding-md: 16px;
-            --padding-lg: 24px;
-            --padding-xl: 32px;
+            --border-radius-s: 8px;
+            --border-radius-m: 14px; /* Increased radius */
+            --border-radius-l: 18px; /* Increased radius */
+            --padding-s: 10px;
+            --padding-m: 18px; /* Increased padding */
+            --padding-l: 28px; /* Increased padding */
             --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            --shadow-color: rgba(0, 0, 0, 0.3);
+            --shadow-light: 0 4px 15px var(--shadow-color);
+            --shadow-medium: 0 6px 25px var(--shadow-color);
+            --backdrop-blur: 10px; /* Glassmorphism effect */
         }
         * { box-sizing: border-box; margin: 0; padding: 0; }
         html {
-            background: linear-gradient(160deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
-            min-height: 100vh;
+            background-color: var(--tg-theme-bg-color);
+            scroll-behavior: smooth;
         }
         body {
             font-family: var(--font-family);
-            background: linear-gradient(160deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
-            color: var(--text-primary);
-            padding: var(--padding-md);
-            padding-bottom: 120px; /* Space for fixed button */
+            background: var(--bg-gradient);
+            color: var(--text-color);
+            padding: var(--padding-m);
+            padding-bottom: 120px; /* More space for fixed button */
             overscroll-behavior-y: none;
             -webkit-font-smoothing: antialiased;
             -moz-osx-font-smoothing: grayscale;
             visibility: hidden; /* Hide until ready */
-            line-height: 1.6;
+            min-height: 100vh;
         }
         .container {
-            max-width: 700px;
+            max-width: 650px;
             margin: 0 auto;
             display: flex;
             flex-direction: column;
-            gap: var(--padding-xl);
+            gap: var(--padding-l);
         }
         .header {
             display: flex;
             justify-content: space-between;
             align-items: center;
-            margin-bottom: var(--padding-md);
-            padding: var(--padding-sm) 0;
+            margin-bottom: var(--padding-m);
+            padding: var(--padding-s) 0;
         }
-        .logo { display: flex; align-items: center; gap: var(--padding-md); }
+        .logo { display: flex; align-items: center; gap: var(--padding-s); }
         .logo img {
-            width: 50px;
+            width: 50px; /* Larger logo */
             height: 50px;
             border-radius: 50%;
+            background-color: var(--card-bg-solid);
             object-fit: cover;
-            border: 2px solid rgba(255, 255, 255, 0.1);
-            box-shadow: 0 4px 15px var(--shadow-color);
-            transition: transform 0.3s ease;
+            border: 2px solid rgba(255, 255, 255, 0.15);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
         }
-        .logo img:hover { transform: scale(1.1); }
-        .logo span { font-size: 1.6em; font-weight: 700; letter-spacing: -0.5px; }
+        .logo span { font-size: 1.6em; font-weight: 700; letter-spacing: -0.5px; } /* Bold, slightly larger */
         .btn {
             display: inline-flex; align-items: center; justify-content: center;
-            padding: 12px var(--padding-lg);
-            border-radius: var(--border-radius-md);
-            background: linear-gradient(90deg, var(--accent-primary-start), var(--accent-primary-end));
-            color: var(--text-primary);
-            text-decoration: none;
-            font-weight: 600;
-            border: none;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            gap: var(--padding-sm);
-            font-size: 1em;
-            box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
+            padding: 12px var(--padding-m); border-radius: var(--border-radius-m);
+            background: var(--accent-gradient); color: var(--tg-theme-button-text-color);
+            text-decoration: none; font-weight: 600; /* Bolder */
+            border: none; cursor: pointer;
+            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+            gap: 8px; font-size: 1em;
+            box-shadow: var(--shadow-light);
+            letter-spacing: 0.3px;
+        }
+        .btn:hover {
+            opacity: 0.9;
+            box-shadow: var(--shadow-medium);
+            transform: translateY(-2px);
         }
-        .btn:hover { opacity: 0.9; box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4); transform: translateY(-2px); }
         .btn-secondary {
             background: var(--card-bg);
-            color: var(--accent-primary-start);
-            box-shadow: 0 2px 8px rgba(0,0,0, 0.2);
-        }
-        .btn-secondary:hover { background: var(--card-bg-hover); box-shadow: 0 4px 12px rgba(0,0,0, 0.3); }
-        .btn-cta {
-            background: linear-gradient(90deg, var(--accent-secondary-start), var(--accent-secondary-end));
-            box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
+            color: var(--tg-theme-link-color);
+            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), var(--shadow-light);
         }
-        .btn-cta:hover {
-            box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
+        .btn-secondary:hover {
+            background: rgba(44, 44, 46, 0.95);
+            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), var(--shadow-medium);
         }
         .tag {
-            display: inline-block;
-            background: var(--tag-bg);
-            color: var(--tag-text);
-            padding: var(--padding-xs) var(--padding-sm);
-            border-radius: var(--border-radius-sm);
-            font-size: 0.8em;
+            display: inline-block; background: var(--tag-bg); color: var(--text-secondary-color);
+            padding: 6px 12px; border-radius: var(--border-radius-s); font-size: 0.85em;
+            margin: 4px 6px 4px 0; white-space: nowrap;
             font-weight: 500;
-            margin: var(--padding-xs) var(--padding-xs) var(--padding-xs) 0;
-            white-space: nowrap;
-            border: 1px solid rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.05);
         }
-        .tag i { margin-right: 4px; opacity: 0.8; color: var(--accent-secondary-start); }
+        .tag i { margin-right: 5px; opacity: 0.8; }
         .section-card {
             background-color: var(--card-bg);
-            border-radius: var(--border-radius-lg);
-            padding: var(--padding-lg);
-            border: 1px solid var(--border-color);
-            box-shadow: 0 8px 25px var(--shadow-color);
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
-            overflow: hidden; /* Ensure children don't overflow rounded corners */
-        }
-        .section-card:hover {
-             transform: translateY(-3px);
-             box-shadow: 0 12px 30px var(--shadow-color);
+            border-radius: var(--border-radius-l);
+            padding: var(--padding-l);
+            margin-bottom: 0; /* Removed bottom margin, gap handles spacing */
+            box-shadow: var(--shadow-medium);
+            border: 1px solid rgba(255, 255, 255, 0.08);
+            backdrop-filter: blur(var(--backdrop-blur));
+            -webkit-backdrop-filter: blur(var(--backdrop-blur));
         }
         .section-title {
-            font-size: 2em;
-            font-weight: 800;
-            margin-bottom: var(--padding-sm);
-            line-height: 1.2;
-            letter-spacing: -0.8px;
-            background: linear-gradient(90deg, var(--text-primary), var(--text-secondary));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-        }
-        .section-subtitle { font-size: 1.1em; font-weight: 500; color: var(--text-secondary); margin-bottom: var(--padding-md); }
-        .description { font-size: 1em; line-height: 1.7; color: var(--text-secondary); margin-bottom: var(--padding-lg); }
-        .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: var(--padding-md); margin-top: var(--padding-lg); }
-        .stat-item { background-color: rgba(255, 255, 255, 0.05); padding: var(--padding-md); border-radius: var(--border-radius-md); text-align: center; border: 1px solid rgba(255, 255, 255, 0.08); transition: background-color 0.3s ease;}
-        .stat-item:hover { background-color: rgba(255, 255, 255, 0.1); }
-        .stat-value { font-size: 1.8em; font-weight: 700; display: block; color: var(--text-primary); }
-        .stat-value i { font-size: 0.8em; margin-right: 4px; opacity: 0.7; }
-        .stat-label { font-size: 0.85em; color: var(--text-muted); display: block; margin-top: var(--padding-xs); text-transform: uppercase; letter-spacing: 0.5px; }
-        .list-item { background-color: rgba(255, 255, 255, 0.05); padding: var(--padding-md); border-radius: var(--border-radius-md); margin-bottom: var(--padding-sm); display: flex; align-items: center; gap: var(--padding-md); font-size: 1.1em; font-weight: 500; border: 1px solid rgba(255, 255, 255, 0.08); transition: background-color 0.3s ease; }
-        .list-item:hover { background-color: rgba(255, 255, 255, 0.1); }
-        .list-item i { font-size: 1.3em; color: var(--accent-primary-start); opacity: 0.9; }
-        .footer-greeting { text-align: center; color: var(--text-muted); font-size: 0.9em; margin-top: var(--padding-xl); }
+            font-size: 2em; /* Larger titles */
+            font-weight: 700; margin-bottom: var(--padding-s); line-height: 1.25;
+            letter-spacing: -0.6px;
+        }
+        .section-subtitle {
+            font-size: 1.2em; font-weight: 500; color: var(--text-secondary-color);
+            margin-bottom: var(--padding-m);
+        }
+        .description {
+            font-size: 1.05em; line-height: 1.6; color: var(--text-secondary-color); /* Slightly larger desc */
+            margin-bottom: var(--padding-m);
+        }
+        .stats-grid {
+            display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
+            gap: var(--padding-m); margin-top: var(--padding-m); text-align: center;
+        }
+        .stat-item {
+            background-color: rgba(255, 255, 255, 0.05);
+            padding: var(--padding-m); border-radius: var(--border-radius-m);
+            border: 1px solid rgba(255, 255, 255, 0.05);
+            transition: background-color 0.2s ease;
+        }
+        .stat-item:hover { background-color: rgba(255, 255, 255, 0.08); }
+        .stat-value { font-size: 1.7em; font-weight: 600; display: block; color: var(--tg-theme-link-color);}
+        .stat-label { font-size: 0.9em; color: var(--text-secondary-color); display: block; margin-top: 4px;}
+        .list-item {
+            background-color: var(--card-bg-solid);
+            padding: var(--padding-m); border-radius: var(--border-radius-m);
+            margin-bottom: var(--padding-s); display: flex; align-items: center;
+            gap: var(--padding-m); /* Increased gap */
+            font-size: 1.1em; font-weight: 500;
+            border: 1px solid rgba(255, 255, 255, 0.08);
+            transition: background-color 0.2s ease, transform 0.2s ease;
+        }
+        .list-item:hover {
+            background-color: rgba(44, 44, 46, 0.9);
+            transform: translateX(3px);
+        }
+        .list-item i { font-size: 1.4em; color: var(--accent-gradient-start, #34c759); opacity: 0.9; width: 25px; text-align: center;}
+        .footer-greeting {
+            text-align: center; color: var(--text-secondary-color); font-size: 0.95em;
+            margin-top: var(--padding-l); padding-bottom: var(--padding-l);
+        }
         .save-card-button {
             position: fixed;
-            bottom: 20px;
+            bottom: 30px; /* Raised */
             left: 50%;
             transform: translateX(-50%);
-            padding: 14px 28px;
-            border-radius: 30px;
-            background: linear-gradient(90deg, var(--accent-secondary-start), var(--accent-secondary-end));
-            color: var(--text-primary);
+            padding: 14px 28px; /* Larger padding */
+            border-radius: 30px; /* More rounded */
+            background: var(--accent-gradient-green);
+            color: var(--tg-theme-button-text-color);
             text-decoration: none;
-            font-weight: 700;
+            font-weight: 600;
             border: none;
             cursor: pointer;
-            transition: all 0.3s ease;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
             z-index: 1000;
-            box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
-            font-size: 1.05em;
+            box-shadow: var(--shadow-medium), 0 0 0 4px rgba(var(--tg-theme-bg-color-rgb, 18, 18, 18), 0.5); /* Add outer glow */
+            font-size: 1.05em; /* Slightly larger text */
             display: flex;
             align-items: center;
-            gap: 10px;
+            gap: 10px; /* Increased gap */
+            backdrop-filter: blur(5px);
+            -webkit-backdrop-filter: blur(5px);
+        }
+        .save-card-button:hover {
+            opacity: 0.95;
+            transform: translateX(-50%) scale(1.05); /* Slightly larger scale */
+            box-shadow: var(--shadow-medium), 0 0 0 4px rgba(var(--tg-theme-bg-color-rgb, 18, 18, 18), 0.3);
         }
-        .save-card-button:hover { opacity: 0.9; transform: translateX(-50%) scale(1.05); box-shadow: 0 8px 25px rgba(16, 185, 129, 0.5); }
+        .save-card-button i { font-size: 1.2em; }
 
-        /* Modal Styles (Enhanced) */
+        /* Modal Styles */
         .modal {
             display: none; position: fixed; z-index: 1001;
             left: 0; top: 0; width: 100%; height: 100%;
-            overflow: auto; background-color: rgba(15, 23, 42, 0.8); /* Slate 900 with opacity */
-            backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
-            display: flex; align-items: center; justify-content: center;
+            overflow: auto; background-color: rgba(0,0,0,0.7); /* Darker backdrop */
+            backdrop-filter: blur(8px);
+            -webkit-backdrop-filter: blur(8px);
             animation: fadeIn 0.3s ease-out;
         }
         @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
         .modal-content {
-            background-color: var(--card-bg); color: var(--text-primary);
-            margin: auto; padding: var(--padding-xl);
-            border: 1px solid var(--border-color);
-            width: 85%; max-width: 450px;
-            border-radius: var(--border-radius-lg);
+            background-color: var(--card-bg-solid); color: var(--text-color);
+            margin: 15% auto; padding: var(--padding-l);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            width: 88%; max-width: 480px;
+            border-radius: var(--border-radius-l);
             text-align: center; position: relative;
-            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
+            box-shadow: var(--shadow-medium);
             animation: scaleUp 0.3s ease-out;
         }
-        @keyframes scaleUp { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
+         @keyframes scaleUp { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
         .modal-close {
-            color: var(--text-muted); position: absolute;
-            top: 15px; right: 20px; font-size: 28px;
-            font-weight: bold; cursor: pointer; line-height: 1;
-            transition: color 0.3s ease, transform 0.3s ease;
+            color: var(--text-secondary-color);
+            position: absolute; top: 15px; right: 20px;
+            font-size: 32px; font-weight: bold; cursor: pointer;
+            line-height: 1; transition: color 0.2s ease;
         }
-        .modal-close:hover { color: var(--text-primary); transform: rotate(90deg); }
-        .modal-text { font-size: 1.15em; line-height: 1.6; margin-bottom: var(--padding-md); word-wrap: break-word; }
-        .modal-text b { color: var(--accent-secondary-start); font-weight: 700; }
-        .modal-instruction { font-size: 0.95em; color: var(--text-muted); margin-top: var(--padding-sm); }
+        .modal-close:hover, .modal-close:focus { color: var(--text-color); }
+        .modal-text { font-size: 1.2em; line-height: 1.6; margin-bottom: var(--padding-s); word-wrap: break-word; }
+        .modal-text b { color: var(--tg-theme-link-color); font-weight: 600; }
+        .modal-instruction { font-size: 1em; color: var(--text-secondary-color); margin-top: var(--padding-m); }
 
         /* Icons */
-        [class^="icon-"]::before {
-            display: inline-block;
-            font-style: normal;
-            font-variant: normal;
-            text-rendering: auto;
-            -webkit-font-smoothing: antialiased;
-            margin-right: 8px;
-            opacity: 0.9;
-            font-size: 1.1em; /* Slightly larger icons */
-        }
-        .icon-save::before { content: '💾'; color: #a7f3d0; } /* Emerald 200 */
-        .icon-web::before { content: '🌐'; color: #93c5fd; } /* Blue 300 */
-        .icon-mobile::before { content: '📱'; color: #a5b4fc; } /* Indigo 300 */
-        .icon-code::before { content: '💻'; color: #fde047; } /* Yellow 400 */
-        .icon-ai::before { content: '🧠'; color: #f9a8d4; } /* Pink 300 */
-        .icon-quantum::before { content: '⚛️'; color: #d8b4fe; } /* Purple 300 */
-        .icon-business::before { content: '💼'; color: #fdba74; } /* Orange 300 */
-        .icon-speed::before { content: '⚡️'; color: #facc15; } /* Amber 400 */
-        .icon-complexity::before { content: '🧩'; color: #a7f3d0; } /* Emerald 200 */
-        .icon-experience::before { content: '⏳'; color: #fca5a5; } /* Red 300 */
-        .icon-clients::before { content: '👥'; color: #67e8f9; } /* Cyan 300 */
-        .icon-market::before { content: '📈'; color: #86efac; } /* Green 300 */
-        .icon-location::before { content: '📍'; color: #f87171; } /* Red 400 */
-        .icon-global::before { content: '🌍'; color: #60a5fa; } /* Blue 400 */
-        .icon-innovation::before { content: '💡'; color: #fcd34d; } /* Amber 300 */
-        .icon-contact::before { content: '💬'; color: #5eead4; } /* Teal 300 */
-        .icon-link::before { content: '🔗'; color: #9ca3af; } /* Gray 400 */
-        .icon-leader::before { content: '🏆'; color: #fde047; } /* Yellow 400 */
-        .icon-company::before { content: '🏢'; color: #a5b4fc; } /* Indigo 300 */
+        .icon { display: inline-block; width: 1.2em; text-align: center; margin-right: 8px; opacity: 0.9; }
+        .icon-save::before { content: '💾'; }
+        .icon-web::before { content: '🌐'; }
+        .icon-mobile::before { content: '📱'; }
+        .icon-code::before { content: '💻'; }
+        .icon-ai::before { content: '🧠'; }
+        .icon-quantum::before { content: '⚛️'; }
+        .icon-business::before { content: '💼'; }
+        .icon-speed::before { content: '⚡️'; }
+        .icon-complexity::before { content: '🧩'; }
+        .icon-experience::before { content: '⏳'; }
+        .icon-clients::before { content: '👥'; }
+        .icon-market::before { content: '📈'; }
+        .icon-location::before { content: '📍'; }
+        .icon-global::before { content: '🌍'; }
+        .icon-innovation::before { content: '💡'; }
+        .icon-contact::before { content: '💬'; }
+        .icon-link::before { content: '🔗'; }
+        .icon-leader::before { content: '🏆'; }
+        .icon-company::before { content: '🏢'; }
+
+        /* Responsive adjustments */
+        @media (max-width: 480px) {
+            .section-title { font-size: 1.8em; }
+            .logo span { font-size: 1.4em; }
+            .btn { padding: 10px var(--padding-m); font-size: 0.95em; }
+            .save-card-button { padding: 12px 24px; font-size: 1em; bottom: 20px; }
+            .stats-grid { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: var(--padding-s); }
+            .stat-value { font-size: 1.5em; }
+            .modal-content { margin: 25% auto; width: 92%; }
+        }
     </style>
 </head>
 <body>
     <div class="container">
 
-        <section class="morshen-group-intro section-card" style="border-top: 4px solid var(--accent-primary-start);">
+        <section class="morshen-group-intro section-card">
             <div class="header">
                  <div class="logo">
                      <img src="https://huggingface.co/spaces/Aleksmorshen/Telemap8/resolve/main/morshengroup.jpg" alt="Morshen Group Logo">
                     <span>Morshen Group</span>
                 </div>
-                <a href="#" class="btn contact-link"><i class="icon-contact"></i>Связаться</a>
+                <a href="#" class="btn contact-link"><i class="icon icon-contact"></i>Связаться</a>
             </div>
-            <div style="margin: var(--padding-sm) 0 var(--padding-md) 0;">
-                <span class="tag"><i class="icon-leader"></i>Лидер инноваций 2025</span>
-                <span class="tag"><i class="icon-global"></i>Международный</span>
+            <div>
+                <span class="tag"><i class="icon icon-leader"></i>Лидер инноваций 2025</span>
             </div>
-            <h1 class="section-title" style="font-size: 2.4em;">Международный IT холдинг</h1>
+            <h1 class="section-title">Международный IT холдинг</h1>
             <p class="description">
                 Объединяем передовые технологические компании для создания инновационных
-                решений мирового уровня, формируя цифровое будущее.
+                решений мирового уровня. Мы строим будущее технологий сегодня.
             </p>
-             <a href="#" class="btn btn-cta contact-link" style="width: 100%; margin-top: var(--padding-md); padding: 14px 0;">
-                 <i class="icon-contact"></i>Связаться с нами
+             <a href="#" class="btn contact-link" style="background: var(--accent-gradient-green); width: 100%; margin-top: var(--padding-s);">
+                 <i class="icon icon-contact"></i>Написать нам в Telegram
              </a>
         </section>
 
          <section class="ecosystem-header">
-             <div style="text-align: center; margin-bottom: var(--padding-md);">
-                 <span class="tag"><i class="icon-company"></i>Наши компании</span>
-             </div>
-             <h2 class="section-title" style="text-align: center;">Экосистема Инноваций</h2>
-             <p class="description" style="text-align: center; max-width: 550px; margin-left: auto; margin-right: auto;">
+             <h2 class="section-title"><i class="icon icon-company"></i>Экосистема инноваций</h2>
+             <p class="description">
                  В состав холдинга входят компании, специализирующиеся на различных
-                 направлениях передовых технологий, от ИИ до веб-разработки.
+                 направлениях передовых технологий, создавая синергию для прорывных решений.
              </p>
          </section>
 
         <section class="section-card">
-            <div class="logo">
-                 <img src="https://huggingface.co/spaces/Aleksmorshen/Telemap8/resolve/main/morshengroup.jpg" alt="Morshen Alpha Logo" style="width: 45px; height: 45px;">
-                <span style="font-size: 1.5em; font-weight: 700;">Morshen Alpha</span>
+            <div class="logo" style="margin-bottom: var(--padding-m);">
+                 <img src="https://huggingface.co/spaces/Aleksmorshen/Telemap8/resolve/main/morshengroup.jpg" alt="Morshen Alpha Logo">
+                <span style="font-size: 1.4em; font-weight: 600;">Morshen Alpha</span>
             </div>
-            <div style="margin: var(--padding-md) 0;">
-                <span class="tag"><i class="icon-ai"></i>Искусственный интеллект</span>
-                <span class="tag"><i class="icon-quantum"></i>Квантовые технологии</span>
-                <span class="tag"><i class="icon-business"></i>Бизнес-решения</span>
+            <div style="margin-bottom: var(--padding-m);">
+                <span class="tag"><i class="icon icon-ai"></i>Искусственный интеллект</span>
+                <span class="tag"><i class="icon icon-quantum"></i>Квантовые технологии</span>
+                <span class="tag"><i class="icon icon-business"></i>Бизнес-решения</span>
             </div>
             <p class="description">
-                Флагманская R&D компания холдинга. Специализируемся на разработке прорывных
-                бизнес-решений, исследованиях в сфере ИИ и квантовых технологий. Наши инновации формируют будущее индустрии.
+                Флагманская компания холдинга. Разрабатываем передовые бизнес-решения, проводим R&D в сфере AI
+                и квантовых технологий. Наши инновации формируют будущее индустрии.
             </p>
             <div class="stats-grid">
                 <div class="stat-item">
-                    <span class="stat-value"><i class="icon-global"></i> 3</span>
-                    <span class="stat-label">Страны</span>
+                    <span class="stat-value"><i class="icon icon-global"></i> 3+</span>
+                    <span class="stat-label">Страны присутствия</span>
                 </div>
                 <div class="stat-item">
-                    <span class="stat-value"><i class="icon-clients"></i> 3K+</span>
-                    <span class="stat-label">Клиенты</span>
+                    <span class="stat-value"><i class="icon icon-clients"></i> 3K+</span>
+                    <span class="stat-label">Готовых клиентов</span>
                 </div>
                 <div class="stat-item">
-                    <span class="stat-value"><i class="icon-market"></i> 5</span>
+                    <span class="stat-value"><i class="icon icon-market"></i> 5+</span>
                     <span class="stat-label">Лет на рынке</span>
                 </div>
             </div>
         </section>
 
         <section class="section-card">
-             <div class="logo">
-                 <img src="https://huggingface.co/spaces/holmgardstudio/dev/resolve/main/image.jpg" alt="Holmgard Logo" style="width: 45px; height: 45px;">
-                <span style="font-size: 1.5em; font-weight: 700;">Holmgard</span>
+             <div class="logo" style="margin-bottom: var(--padding-m);">
+                 <img src="https://huggingface.co/spaces/holmgardstudio/dev/resolve/main/image.jpg" alt="Holmgard Logo" style="width: 50px; height: 50px;">
+                <span style="font-size: 1.4em; font-weight: 600;">Holmgard Studio</span>
             </div>
-             <div style="margin: var(--padding-md) 0;">
-                 <span class="tag"><i class="icon-web"></i>Веб-разработка</span>
-                 <span class="tag"><i class="icon-mobile"></i>Мобильные приложения</span>
-                 <span class="tag"><i class="icon-code"></i>ПО на заказ</span>
+             <div style="margin-bottom: var(--padding-m);">
+                 <span class="tag"><i class="icon icon-web"></i>Веб-разработка</span>
+                 <span class="tag"><i class="icon icon-mobile"></i>Мобильные приложения</span>
+                 <span class="tag"><i class="icon icon-code"></i>ПО на заказ</span>
              </div>
              <p class="description">
-                Инновационная студия разработки, создающая высокотехнологичные цифровые продукты
-                для бизнеса любого масштаба. Сайты, мобильные приложения и ПО с использованием
-                передовых технологий и гибких методологий.
+                Инновационная студия разработки, создающая высокотехнологичные веб-сайты,
+                мобильные приложения и ПО для бизнеса любого масштаба.
+                Используем передовые технологии и гибкие методологии.
              </p>
              <div class="stats-grid">
                  <div class="stat-item">
-                     <span class="stat-value"><i class="icon-experience"></i> 10+</span>
+                     <span class="stat-value"><i class="icon icon-experience"></i> 10+</span>
                      <span class="stat-label">Лет опыта</span>
                  </div>
                  <div class="stat-item">
-                     <span class="stat-value"><i class="icon-complexity"></i> ∞</span>
-                     <span class="stat-label">Сложность</span>
+                     <span class="stat-value"><i class="icon icon-complexity"></i> PRO</span>
+                     <span class="stat-label">Любая сложность</span>
                  </div>
                  <div class="stat-item">
-                     <span class="stat-value"><i class="icon-speed"></i></span>
-                     <span class="stat-label">Скорость</span>
+                     <span class="stat-value"><i class="icon icon-speed"></i> FAST</span>
+                     <span class="stat-label">Высокая скорость</span>
                  </div>
              </div>
-             <div style="display: flex; gap: var(--padding-md); margin-top: var(--padding-lg); flex-wrap: wrap;">
-                 <a href="https://holmgard.ru" target="_blank" class="btn btn-secondary" style="flex-grow: 1;"><i class="icon-link"></i>Веб-сайт</a>
-                 <a href="#" class="btn contact-link" style="flex-grow: 1;"><i class="icon-contact"></i>Связаться</a>
+             <div style="display: flex; gap: var(--padding-s); margin-top: var(--padding-m); flex-wrap: wrap;">
+                 <a href="https://holmgard.ru" target="_blank" class="btn btn-secondary" style="flex-grow: 1;"><i class="icon icon-link"></i>Веб-сайт студии</a>
+                 <a href="#" class="btn contact-link" style="flex-grow: 1;"><i class="icon icon-contact"></i>Связаться</a>
              </div>
         </section>
 
-        <section>
-            <div style="text-align: center; margin-bottom: var(--padding-md);">
-                <span class="tag"><i class="icon-global"></i>Глобальное Присутствие</span>
-            </div>
-            <h2 class="section-title" style="text-align: center;">География Присутствия</h2>
-            <p class="description" style="text-align: center;">Наши инновационные решения активно используются в странах:</p>
-            <div style="display: flex; flex-direction: column; gap: var(--padding-sm);">
-                <div class="list-item"><i class="icon-location"></i>Узбекистан</div>
-                <div class="list-item"><i class="icon-location"></i>Казахстан</div>
-                <div class="list-item"><i class="icon-location"></i>Кыргызстан</div>
+        <section class="section-card">
+            <h2 class="section-title"><i class="icon icon-global"></i>Глобальное присутствие</h2>
+            <p class="description">Наши инновационные решения и экспертиза доступны в странах Центральной Азии и за ее пределами:</p>
+            <div>
+                <div class="list-item"><i class="icon icon-location"></i>Узбекистан</div>
+                <div class="list-item"><i class="icon icon-location"></i>Казахстан</div>
+                <div class="list-item"><i class="icon icon-location"></i>Кыргызстан</div>
+                 <div class="list-item"><i class="icon icon-innovation"></i>Расширяем горизонты...</div>
             </div>
         </section>
 
         <footer class="footer-greeting">
-             <p id="greeting">Загрузка данных пользователя...</p>
+             <p id="greeting">Инициализация...</p>
         </footer>
 
     </div>
 
     <button class="save-card-button" id="save-card-btn">
-        <i class="icon-save"></i>Сохранить визитку
+        <i class="icon icon-save"></i>Сохранить визитку
     </button>
 
     <!-- The Modal -->
     <div id="saveModal" class="modal">
       <div class="modal-content">
         <span class="modal-close" id="modal-close-btn">×</span>
-        <p class="modal-text"><b>+996500398754</b></p>
-        <p class="modal-text">Morshen Group, IT компания</p>
+        <p class="modal-text"><b>+996 500 398 754</b></p>
+        <p class="modal-text">Morshen Group</p>
+        <p class="modal-text" style="font-size: 1em; color: var(--text-secondary-color);">Международный IT Холдинг</p>
         <p class="modal-instruction">Сделайте скриншот экрана, чтобы сохранить контакт.</p>
       </div>
     </div>
@@ -540,36 +578,33 @@ TEMPLATE = """
         const tg = window.Telegram.WebApp;
 
         function applyTheme(themeParams) {
-            // Example of adapting to TG theme (can be more complex)
-            const isDark = themeParams.bg_color && themeParams.bg_color.startsWith('#') && parseInt(themeParams.bg_color.substring(1), 16) < parseInt('888888', 16);
-
-            if (isDark) {
-                // Use default dark theme or potentially adjust CSS vars based on themeParams
-                document.body.classList.add('tg-dark'); // Add a class to target specific styles
-            } else {
-                // Use default light theme or adjust
-                document.body.classList.remove('tg-dark');
+            const root = document.documentElement;
+            root.style.setProperty('--tg-theme-bg-color', themeParams.bg_color || '#121212');
+            root.style.setProperty('--tg-theme-text-color', themeParams.text_color || '#ffffff');
+            root.style.setProperty('--tg-theme-hint-color', themeParams.hint_color || '#aaaaaa');
+            root.style.setProperty('--tg-theme-link-color', themeParams.link_color || '#62bcf9');
+            root.style.setProperty('--tg-theme-button-color', themeParams.button_color || '#31a5f5');
+            root.style.setProperty('--tg-theme-button-text-color', themeParams.button_text_color || '#ffffff');
+            root.style.setProperty('--tg-theme-secondary-bg-color', themeParams.secondary_bg_color || '#1e1e1e');
+
+            // Optional: Convert main bg color to RGB for glow effect alpha
+            try {
+                 const bgColor = themeParams.bg_color || '#121212';
+                 const r = parseInt(bgColor.slice(1, 3), 16);
+                 const g = parseInt(bgColor.slice(3, 5), 16);
+                 const b = parseInt(bgColor.slice(5, 7), 16);
+                 root.style.setProperty('--tg-theme-bg-color-rgb', `${r}, ${g}, ${b}`);
+            } catch (e) {
+                 root.style.setProperty('--tg-theme-bg-color-rgb', `18, 18, 18`); // Fallback
             }
-
-             // Apply specific colors if available (more granular control)
-             if (themeParams.bg_color) document.documentElement.style.setProperty('--tg-bg-color', themeParams.bg_color);
-             if (themeParams.text_color) document.documentElement.style.setProperty('--tg-text-color', themeParams.text_color);
-             if (themeParams.button_color) {
-                document.documentElement.style.setProperty('--tg-button-color', themeParams.button_color);
-                // Example: Update accent gradient if needed based on button color
-                // document.documentElement.style.setProperty('--accent-primary-start', themeParams.button_color);
-             }
-             if (themeParams.button_text_color) document.documentElement.style.setProperty('--tg-button-text-color', themeParams.button_text_color);
-             if (themeParams.secondary_bg_color) document.documentElement.style.setProperty('--tg-secondary-bg-color', themeParams.secondary_bg_color);
-
-            console.log("Applied Telegram Theme:", themeParams);
         }
 
         function setupTelegram() {
             if (!tg || !tg.initData) {
                  console.error("Telegram WebApp script not loaded or initData is missing.");
                  const greetingElement = document.getElementById('greeting');
-                 if(greetingElement) greetingElement.textContent = 'Не удалось загрузить данные Telegram.';
+                 if(greetingElement) greetingElement.textContent = 'Не удалось связаться с Telegram.';
+                 // Apply default dark theme maybe? Or leave as is.
                  document.body.style.visibility = 'visible';
                  return;
              }
@@ -577,41 +612,41 @@ TEMPLATE = """
             tg.ready();
             tg.expand();
 
-            // Apply Theme
-            applyTheme(tg.themeParams || {});
+            applyTheme(tg.themeParams);
             tg.onEvent('themeChanged', () => applyTheme(tg.themeParams));
 
-
-             // Send initData for verification and user logging
+            // Send initData for verification and user logging
              fetch('/verify', {
                  method: 'POST',
-                 headers: { 'Content-Type': 'application/json', },
+                 headers: {
+                     'Content-Type': 'application/json',
+                     'Accept': 'application/json'
+                 },
                  body: JSON.stringify({ initData: tg.initData }),
              })
-             .then(response => response.json())
+             .then(response => {
+                 if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); }
+                 return response.json();
+             })
              .then(data => {
                  if (data.status === 'ok' && data.verified) {
-                     console.log('Backend verification successful.', data.user);
+                     console.log('Backend verification successful.');
                  } else {
                      console.warn('Backend verification failed:', data.message);
-                     // Optional: Show visual warning in the UI
-                     // const greetingElement = document.getElementById('greeting');
-                     // if(greetingElement) greetingElement.innerHTML += ' <span style="color: yellow;">(верификация не пройдена)</span>';
+                     // Potentially show a non-blocking warning to user if needed
                  }
              })
              .catch(error => {
                  console.error('Error sending initData for verification:', error);
+                 // Display a more user-friendly error?
              });
 
 
-             // User Greeting (using unsafe data for speed)
+             // User Greeting (using unsafe data for immediate feedback)
              const user = tg.initDataUnsafe?.user;
              const greetingElement = document.getElementById('greeting');
              if (user) {
-                 const firstName = user.first_name || '';
-                 const lastName = user.last_name || '';
-                 const username = user.username ? `@${user.username}` : '';
-                 const name = `${firstName} ${lastName}`.trim() || username || 'Гость';
+                 const name = user.first_name || user.username || 'Гость';
                  greetingElement.textContent = `Добро пожаловать, ${name}! 👋`;
              } else {
                  greetingElement.textContent = 'Добро пожаловать!';
@@ -623,12 +658,7 @@ TEMPLATE = """
              contactButtons.forEach(button => {
                  button.addEventListener('click', (e) => {
                      e.preventDefault();
-                     try {
-                         tg.openTelegramLink('https://t.me/morshenkhan'); // Replace with actual contact username
-                     } catch (err) {
-                         console.error("Failed to open TG link:", err);
-                         window.open('https://t.me/morshenkhan', '_blank'); // Fallback
-                     }
+                     tg.openTelegramLink('https://t.me/morshenkhan'); // Use actual contact username
                  });
              });
 
@@ -640,9 +670,9 @@ TEMPLATE = """
              if (saveCardBtn && modal && closeBtn) {
                  saveCardBtn.addEventListener('click', (e) => {
                      e.preventDefault();
-                     modal.style.display = "flex"; // Use flex for centering
+                     modal.style.display = "block";
                      if (tg.HapticFeedback) {
-                         tg.HapticFeedback.impactOccurred('light');
+                        tg.HapticFeedback.impactOccurred('light');
                      }
                  });
 
@@ -650,9 +680,8 @@ TEMPLATE = """
                      modal.style.display = "none";
                  });
 
-                 // Close modal if clicked outside the content (on the backdrop)
-                 modal.addEventListener('click', (event) => {
-                     if (event.target === modal) { // Check if the click is directly on the modal backdrop
+                 window.addEventListener('click', (event) => {
+                     if (event.target == modal) {
                          modal.style.display = "none";
                      }
                  });
@@ -660,47 +689,29 @@ TEMPLATE = """
                  console.error("Modal elements not found!");
              }
 
-             document.body.style.visibility = 'visible'; // Make body visible now
-         }
-
-        // Initialize Telegram WebApp robustly
-         try {
-             if (tg && tg.initData) {
-                 setupTelegram();
-             } else {
-                  console.log("Telegram WebApp object not immediately available, waiting for window.load");
-                 window.addEventListener('load', setupTelegram);
-             }
-         } catch (e) {
-             console.error("Error during initial Telegram WebApp setup:", e);
-              const greetingElement = document.getElementById('greeting');
-             if(greetingElement) greetingElement.textContent = 'Ошибка инициализации Telegram.';
-             document.body.style.visibility = 'visible'; // Show body anyway on error
+             document.body.style.visibility = 'visible';
          }
 
-
-         // Fallback timeout in case 'load' doesn't fire or TG script fails silently
-         setTimeout(() => {
-             if (document.body.style.visibility !== 'visible') {
-                  console.error("Telegram WebApp script fallback timeout triggered. Forcing visibility.");
-                  const greetingElement = document.getElementById('greeting');
-                  if(greetingElement && greetingElement.textContent.includes('Загрузка')) {
-                      greetingElement.textContent = 'Ошибка загрузки Telegram.';
+        if (window.Telegram && window.Telegram.WebApp) {
+            setupTelegram();
+        } else {
+            console.warn("Telegram WebApp script not immediately available, waiting for window.onload");
+            window.addEventListener('load', setupTelegram);
+             setTimeout(() => {
+                 if (document.body.style.visibility !== 'visible') {
+                      console.error("Telegram WebApp script fallback timeout triggered.");
+                      const greetingElement = document.getElementById('greeting');
+                      if(greetingElement) greetingElement.textContent = 'Ошибка загрузки интерфейса Telegram.';
+                      document.body.style.visibility = 'visible';
                   }
-                  document.body.style.visibility = 'visible';
-                  // Attempt setup one last time if it failed
-                  if (typeof window.Telegram !== 'undefined' && typeof window.Telegram.WebApp !== 'undefined') {
-                      setupTelegram();
-                  }
-              }
-         }, 4000); // Increased timeout
+             }, 3500); // Slightly longer timeout
+        }
 
     </script>
 </body>
 </html>
 """
 
-# Admin Panel Template
 ADMIN_TEMPLATE = """
 <!DOCTYPE html>
 <html lang="ru">
@@ -713,19 +724,18 @@ ADMIN_TEMPLATE = """
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <style>
         :root {
-            --admin-bg: #f8fafc; /* Slate 50 */
-            --admin-text: #1e293b; /* Slate 800 */
+            --admin-bg: #f8f9fa;
+            --admin-text: #212529;
             --admin-card-bg: #ffffff;
-            --admin-border: #e2e8f0; /* Slate 200 */
+            --admin-border: #dee2e6;
             --admin-shadow: rgba(0, 0, 0, 0.05);
-            --admin-accent: #3b82f6; /* Blue 500 */
-            --admin-text-muted: #64748b; /* Slate 500 */
-            --admin-danger-bg: #fee2e2; /* Red 100 */
-            --admin-danger-text: #b91c1c; /* Red 700 */
-            --admin-danger-border: #ef4444; /* Red 500 */
-            --border-radius-md: 8px;
-            --padding-md: 16px;
-            --padding-lg: 24px;
+            --admin-primary: #0d6efd;
+            --admin-secondary: #6c757d;
+            --admin-success: #198754;
+            --admin-danger: #dc3545;
+            --admin-warning: #ffc107;
+            --border-radius: 12px;
+            --padding: 1.5rem;
             --font-family: 'Inter', sans-serif;
         }
         body {
@@ -733,26 +743,22 @@ ADMIN_TEMPLATE = """
             background-color: var(--admin-bg);
             color: var(--admin-text);
             margin: 0;
-            padding: var(--padding-lg);
+            padding: var(--padding);
             line-height: 1.6;
         }
-        h1 {
-            text-align: center;
-            color: var(--admin-text);
-            font-weight: 700;
-            margin-bottom: var(--padding-lg);
-        }
+        .container { max-width: 1140px; margin: 0 auto; }
+        h1 { text-align: center; color: var(--admin-secondary); margin-bottom: var(--padding); font-weight: 600; }
         .user-grid {
             display: grid;
             grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-            gap: var(--padding-lg);
-            margin-top: var(--padding-lg);
+            gap: var(--padding);
+            margin-top: var(--padding);
         }
         .user-card {
             background-color: var(--admin-card-bg);
-            border-radius: var(--border-radius-md);
-            padding: var(--padding-lg);
-            box-shadow: 0 4px 10px var(--admin-shadow);
+            border-radius: var(--border-radius);
+            padding: var(--padding);
+            box-shadow: 0 4px 15px var(--admin-shadow);
             border: 1px solid var(--admin-border);
             display: flex;
             flex-direction: column;
@@ -761,123 +767,155 @@ ADMIN_TEMPLATE = """
             transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
         }
         .user-card:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 6px 15px rgba(0,0,0,0.08);
+            transform: translateY(-5px);
+            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
         }
         .user-card img {
-            width: 80px;
-            height: 80px;
-            border-radius: 50%;
-            margin-bottom: var(--padding-md);
-            object-fit: cover;
-            border: 3px solid var(--admin-border);
-            background-color: #f1f5f9; /* Placeholder bg */
-        }
-        .user-card .name {
-            font-weight: 600;
-            font-size: 1.15em;
-            margin-bottom: 4px;
-            color: var(--admin-text);
-        }
-        .user-card .username {
-            color: var(--admin-accent);
-            margin-bottom: var(--padding-md);
-            font-size: 0.95em;
-            font-weight: 500;
-        }
-        .user-card .details {
-            font-size: 0.9em;
-            color: var(--admin-text-muted);
-            word-break: break-word; /* Ensure long IDs don't overflow */
-            width: 100%;
-            line-height: 1.5;
-        }
-         .user-card .details span { display: block; margin-bottom: 4px; }
-         .user-card .details strong { color: #475569; } /* Slate 600 */
-        .user-card .timestamp {
-            font-size: 0.8em;
-            color: #94a3b8; /* Slate 400 */
-            margin-top: var(--padding-md);
-        }
-        .no-users {
-            text-align: center;
-            color: var(--admin-text-muted);
-            margin-top: 40px;
-            font-size: 1.1em;
+            width: 80px; height: 80px;
+            border-radius: 50%; margin-bottom: 1rem;
+            object-fit: cover; border: 3px solid var(--admin-border);
+            background-color: #eee; /* Placeholder bg */
         }
+        .user-card .name { font-weight: 600; font-size: 1.2em; margin-bottom: 0.3rem; color: var(--admin-primary); }
+        .user-card .username { color: var(--admin-secondary); margin-bottom: 0.8rem; font-size: 0.95em; }
+        .user-card .details { font-size: 0.9em; color: #495057; word-break: break-word; }
+        .user-card .detail-item { margin-bottom: 0.3rem; }
+        .user-card .detail-item strong { color: var(--admin-text); }
+        .user-card .timestamp { font-size: 0.8em; color: var(--admin-secondary); margin-top: 1rem; }
+        .no-users { text-align: center; color: var(--admin-secondary); margin-top: 2rem; font-size: 1.1em; }
         .alert {
-            background-color: var(--admin-danger-bg);
-            border-left: 5px solid var(--admin-danger-border);
-            margin-bottom: var(--padding-lg);
-            padding: var(--padding-md);
-            color: var(--admin-danger-text);
-            border-radius: var(--border-radius-md);
-            text-align: center;
-            font-weight: 500;
+             background-color: #fff3cd; border-left: 6px solid var(--admin-warning);
+             margin-bottom: var(--padding); padding: 1rem 1.5rem;
+             color: #664d03; border-radius: 8px; text-align: center; font-weight: 500;
         }
-        .total-users {
-            text-align: center;
-            font-size: 1.1em;
-            color: var(--admin-text-muted);
-            margin-bottom: var(--padding-lg);
-        }
-         .button-container {
-             text-align: center;
-             margin-bottom: 20px;
-         }
-         .button-container button {
+        .refresh-btn {
+             display: block;
+             margin: 1rem auto;
              padding: 10px 20px;
              font-size: 1em;
+             font-weight: 500;
+             color: #fff;
+             background-color: var(--admin-primary);
+             border: none;
+             border-radius: 8px;
              cursor: pointer;
+             transition: background-color 0.2s ease;
+        }
+         .refresh-btn:hover { background-color: #0b5ed7; }
+
+        /* Admin Controls */
+        .admin-controls {
+            background: var(--admin-card-bg);
+            padding: var(--padding);
+            border-radius: var(--border-radius);
+            box-shadow: 0 4px 15px var(--admin-shadow);
+            border: 1px solid var(--admin-border);
+            margin-bottom: var(--padding);
+            text-align: center;
+        }
+         .admin-controls h2 { margin-top: 0; margin-bottom: 1rem; font-weight: 600; color: var(--admin-secondary); }
+         .admin-controls .btn {
+             padding: 10px 18px;
+             font-size: 0.95em;
+             font-weight: 500;
              border: none;
-             border-radius: 6px;
-             background-color: var(--admin-accent);
-             color: white;
-             transition: background-color 0.3s ease;
+             border-radius: 8px;
+             cursor: pointer;
+             transition: all 0.2s ease;
+             margin: 0.5rem;
+             color: #fff;
          }
-         .button-container button:hover {
-             background-color: #2563eb; /* Darker blue */
+         .admin-controls .btn-backup { background-color: var(--admin-success); }
+         .admin-controls .btn-backup:hover { background-color: #157347; }
+         .admin-controls .btn-download { background-color: var(--admin-primary); }
+         .admin-controls .btn-download:hover { background-color: #0b5ed7; }
+         .admin-controls .status { font-size: 0.9em; margin-top: 1rem; color: var(--admin-secondary); }
+         .admin-controls .loader {
+             border: 4px solid #f3f3f3; border-radius: 50%; border-top: 4px solid var(--admin-primary);
+             width: 20px; height: 20px; animation: spin 1s linear infinite; display: inline-block; margin-left: 10px; vertical-align: middle;
+             display: none; /* Hidden by default */
          }
+         @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
     </style>
 </head>
 <body>
-    <h1>Панель Администратора - Посетители</h1>
-    <div class="alert">ВНИМАНИЕ: Этот раздел не защищен! Добавьте аутентификацию для реального использования.</div>
-
-    <div class="button-container">
-        <form method="POST" action="{{ url_for('force_backup') }}" style="display: inline;">
-            <button type="submit">Принудительно Загрузить на HF</button>
-        </form>
-         <form method="POST" action="{{ url_for('force_download') }}" style="display: inline; margin-left: 10px;">
-             <button type="submit" style="background-color: #059669;">Принудительно Скачать с HF</button>
-         </form>
+    <div class="container">
+        <h1>Посетители Mini App</h1>
+        <div class="alert">ВНИМАНИЕ: Этот раздел не защищен! Добавьте аутентификацию для реального использования.</div>
+
+        <div class="admin-controls">
+            <h2>Управление данными</h2>
+            <button class="btn btn-download" onclick="triggerDownload()">Скачать данные с HF</button>
+            <button class="btn btn-backup" onclick="triggerUpload()">Загрузить данные на HF</button>
+            <div class="loader" id="loader"></div>
+            <div class="status" id="status-message"></div>
+        </div>
+
+        <button class="refresh-btn" onclick="location.reload()">Обновить список</button>
+
+        {% if users %}
+            <div class="user-grid">
+                {% for user in users|sort(attribute='visited_at', reverse=true) %}
+                    <div class="user-card">
+                        <img src="{{ user.photo_url if user.photo_url else 'data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27%3e%3crect width=%27100%27 height=%27100%27 fill=%27%23e9ecef%27/%3e%3ctext x=%2750%25%27 y=%2755%25%27 dominant-baseline=%27middle%27 text-anchor=%27middle%27 font-size=%2745%27 font-family=%27sans-serif%27 fill=%27%23adb5bd%27%3e?%3c/text%3e%3c/svg%3e' }}" alt="User Avatar">
+                        <div class="name">{{ user.first_name or '' }} {{ user.last_name or '' }}</div>
+                        {% if user.username %}
+                            <div class="username"><a href="https://t.me/{{ user.username }}" target="_blank" style="color: inherit; text-decoration: none;">@{{ user.username }}</a></div>
+                        {% else %}
+                             <div class="username" style="height: 1.3em;"></div> {# Placeholder for spacing #}
+                        {% endif %}
+                        <div class="details">
+                           <div class="detail-item"><strong>ID:</strong> {{ user.id }}</div>
+                           <div class="detail-item"><strong>Язык:</strong> {{ user.language_code or 'N/A' }}</div>
+                           <div class="detail-item"><strong>Premium:</strong> {{ 'Да' if user.is_premium else 'Нет' }}</div>
+                           <div class="detail-item"><strong>Телефон:</strong> {{ user.phone_number or 'Недоступен' }}</div>
+                        </div>
+                         <div class="timestamp">Визит: {{ user.visited_at_str }}</div>
+                    </div>
+                {% endfor %}
+            </div>
+        {% else %}
+            <p class="no-users">Данных о посетителях пока нет.</p>
+        {% endif %}
     </div>
 
+    <script>
+        const loader = document.getElementById('loader');
+        const statusMessage = document.getElementById('status-message');
+
+        async function handleFetch(url, action) {
+            loader.style.display = 'inline-block';
+            statusMessage.textContent = `Выполняется ${action}...`;
+            statusMessage.style.color = 'var(--admin-secondary)';
+            try {
+                const response = await fetch(url, { method: 'POST' });
+                const data = await response.json();
+                if (response.ok && data.status === 'ok') {
+                    statusMessage.textContent = data.message;
+                    statusMessage.style.color = 'var(--admin-success)';
+                    if (action === 'скачивание') {
+                        setTimeout(() => location.reload(), 1500); // Reload after download success
+                    }
+                } else {
+                    throw new Error(data.message || 'Произошла ошибка');
+                }
+            } catch (error) {
+                statusMessage.textContent = `Ошибка ${action}: ${error.message}`;
+                statusMessage.style.color = 'var(--admin-danger)';
+                console.error(`Error during ${action}:`, error);
+            } finally {
+                loader.style.display = 'none';
+            }
+        }
 
-    {% if users %}
-        <p class="total-users">Всего уникальных посетителей: {{ users|length }}</p>
-        <div class="user-grid">
-            {% for user_id, user in users.items()|sort(attribute='1.visited_at', reverse=true) %}
-                <div class="user-card">
-                    <img src="{{ user.photo_url if user.photo_url else 'data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27%3e%3crect width=%27100%27 height=%27100%27 fill=%27%23e2e8f0%27/%3e%3ctext x=%2750%25%27 y=%2755%25%27 dominant-baseline=%27middle%27 text-anchor=%27middle%27 font-size=%2745%27 font-family=%27Inter, sans-serif%27 fill=%27%2394a3b8%27%3e{{ (user.first_name or '?')[0]|upper }}{{ (user.last_name or '?')[0]|upper if user.last_name }}%3c/text%3e%3c/svg%3e' }}" alt="User Avatar">
-                    <div class="name">{{ user.first_name or '' }} {{ user.last_name or '' }}</div>
-                    {% if user.username %}
-                        <div class="username">@{{ user.username }}</div>
-                    {% else %}
-                         <div class="username" style="opacity: 0.5;">(нет username)</div>
-                    {% endif %}
-                    <div class="details">
-                       <span><strong>ID:</strong> {{ user.id }}</span>
-                       <span><strong>Язык:</strong> {{ user.language_code or 'N/A' }}</span>
-                       <span><strong>Телефон:</strong> <span style="color: #f87171;">Недоступен</span></span>
-                    </div>
-                     <div class="timestamp">Визит: {{ user.visited_at_str }}</div>
-                </div>
-            {% endfor %}
-        </div>
-    {% else %}
-        <p class="no-users">Пока нет данных о посетителях.</p>
-    {% endif %}
+        function triggerDownload() {
+            handleFetch('/admin/download_data', 'скачивание');
+        }
+
+        function triggerUpload() {
+            handleFetch('/admin/upload_data', 'загрузка');
+        }
+    </script>
 </body>
 </html>
 """
@@ -885,15 +923,17 @@ ADMIN_TEMPLATE = """
 # --- Flask Routes ---
 @app.route('/')
 def index():
-    return render_template_string(TEMPLATE)
+    # Pass theme parameters for initial render if available (e.g., from query params or session)
+    # For simplicity, we let the JS handle theme application after tg.ready()
+    theme_params = {} # Or load from request if needed
+    return render_template_string(TEMPLATE, theme=theme_params)
 
 @app.route('/verify', methods=['POST'])
 def verify_data():
     try:
-        data = request.get_json()
-        init_data_str = data.get('initData')
+        req_data = request.get_json()
+        init_data_str = req_data.get('initData')
         if not init_data_str:
-            logging.warning("Verification request missing initData.")
             return jsonify({"status": "error", "message": "Missing initData"}), 400
 
         user_data_parsed, is_valid = verify_telegram_data(init_data_str)
@@ -904,99 +944,104 @@ def verify_data():
                 user_json_str = unquote(user_data_parsed['user'][0])
                 user_info_dict = json.loads(user_json_str)
             except Exception as e:
-                logging.error(f"Could not parse user JSON from initData: {e}")
+                logging.error(f"Could not parse user JSON: {e}")
                 user_info_dict = {}
 
         if is_valid:
             user_id = user_info_dict.get('id')
             if user_id:
-                user_id_str = str(user_id) # Use string keys for JSON consistency
-                visited_users = load_user_data() # Load current data
-
                 now = time.time()
-                user_record = {
-                     'id': user_id,
-                     'first_name': user_info_dict.get('first_name'),
-                     'last_name': user_info_dict.get('last_name'),
-                     'username': user_info_dict.get('username'),
-                     'photo_url': user_info_dict.get('photo_url'),
-                     'language_code': user_info_dict.get('language_code'),
-                     'visited_at': now,
-                     'visited_at_str': datetime.fromtimestamp(now).strftime('%Y-%m-%d %H:%M:%S')
-                 }
-
-                # Update existing record or add new one
-                visited_users[user_id_str] = user_record
-                logging.info(f"User visit recorded/updated for ID: {user_id_str}")
-
-                save_user_data(visited_users) # Save updated data locally and trigger HF upload
-
+                # Create data entry for the specific user
+                user_entry = {
+                    str(user_id): { # Use string keys for JSON compatibility
+                        'id': user_id,
+                        'first_name': user_info_dict.get('first_name'),
+                        'last_name': user_info_dict.get('last_name'),
+                        'username': user_info_dict.get('username'),
+                        'photo_url': user_info_dict.get('photo_url'),
+                        'language_code': user_info_dict.get('language_code'),
+                        'is_premium': user_info_dict.get('is_premium', False),
+                        'phone_number': user_info_dict.get('phone_number'), # Note: Only available if requested via button
+                        'visited_at': now,
+                        'visited_at_str': datetime.fromtimestamp(now).strftime('%Y-%m-%d %H:%M:%S')
+                    }
+                }
+                # Save/update this specific user's data
+                save_visitor_data(user_entry)
             return jsonify({"status": "ok", "verified": True, "user": user_info_dict}), 200
         else:
-            logging.warning(f"Verification failed for potential user: {user_info_dict.get('id')}")
+            logging.warning(f"Verification failed for user: {user_info_dict.get('id')}")
             return jsonify({"status": "error", "verified": False, "message": "Invalid data"}), 403
 
     except Exception as e:
-        logging.exception("Critical error in /verify endpoint") # Log full traceback
+        logging.exception("Error in /verify endpoint")
         return jsonify({"status": "error", "message": "Internal server error"}), 500
 
 @app.route('/admin')
 def admin_panel():
     # WARNING: This route is unprotected! Add proper authentication/authorization.
-    users_data = load_user_data()
-    return render_template_string(ADMIN_TEMPLATE, users=users_data)
-
-@app.route('/force_backup', methods=['POST'])
-def force_backup():
-    # WARNING: Unprotected route
-    logging.info("Admin triggered force backup to Hugging Face.")
-    success = upload_user_data_to_hf()
-    # Redirect back to admin panel or show a message
-    # For now, just redirecting. Add flash messages for better UX.
-    return redirect(url_for('admin_panel'))
-
-@app.route('/force_download', methods=['POST'])
-def force_download():
-     # WARNING: Unprotected route
-     logging.info("Admin triggered force download from Hugging Face.")
-     download_user_data_from_hf()
-     # Redirect back to admin panel
-     return redirect(url_for('admin_panel'))
-
-
-# --- Main Execution ---
-if __name__ == '__main__':
-    if not BOT_TOKEN or ':' not in BOT_TOKEN:
-        logging.error("FATAL: BOT_TOKEN is not set or invalid.")
-        exit(1)
+    current_data = load_visitor_data() # Load from cache/file
+    users_list = list(current_data.values())
+    return render_template_string(ADMIN_TEMPLATE, users=users_list)
+
+@app.route('/admin/download_data', methods=['POST'])
+def admin_trigger_download():
+    # WARNING: Unprotected endpoint
+    success = download_data_from_hf()
+    if success:
+         return jsonify({"status": "ok", "message": "Скачивание данных с Hugging Face завершено. Страница будет обновлена."})
+    else:
+         return jsonify({"status": "error", "message": "Ошибка скачивания данных с Hugging Face. Проверьте логи."}), 500
+
+@app.route('/admin/upload_data', methods=['POST'])
+def admin_trigger_upload():
+    # WARNING: Unprotected endpoint
     if not HF_TOKEN_WRITE:
-         logging.warning("HF_TOKEN_WRITE is not set. User data upload to Hugging Face will be disabled.")
-    if not HF_TOKEN_READ:
-        logging.warning("HF_TOKEN_READ is not set. Will try to use HF_TOKEN_WRITE for downloads if available.")
+        return jsonify({"status": "error", "message": "HF_TOKEN_WRITE не настроен на сервере."}), 400
+    upload_data_to_hf_async() # Trigger async upload
+    return jsonify({"status": "ok", "message": "Загрузка данных на Hugging Face запущена в фоновом режиме."})
 
-    # Initial download of user data when the app starts
-    logging.info("Attempting initial download of user data...")
-    download_user_data_from_hf()
 
-    # Start the periodic backup thread
-    if HF_TOKEN_WRITE and HF_USER_DATA_REPO_ID:
-        backup_thread = threading.Thread(target=periodic_user_data_backup, daemon=True)
+# --- App Initialization ---
+if __name__ == '__main__':
+    print("---")
+    print("--- MORSHEN GROUP MINI APP SERVER ---")
+    print("---")
+    print(f"Flask server starting on http://{HOST}:{PORT}")
+    print(f"Using Bot Token ID: {BOT_TOKEN.split(':')[0]}")
+    print(f"Visitor data file: {DATA_FILE}")
+    print(f"Hugging Face Repo: {REPO_ID}")
+    print(f"HF Data Path: {HF_DATA_FILE_PATH}")
+    if not HF_TOKEN_READ or not HF_TOKEN_WRITE:
+         print("---")
+         print("--- WARNING: HUGGING FACE TOKEN(S) NOT SET ---")
+         print("--- Backup/restore functionality will be limited. Set HF_TOKEN_READ and HF_TOKEN_WRITE environment variables.")
+         print("---")
+    else:
+         print("--- Hugging Face tokens found.")
+         # Initial attempt to download data on startup
+         print("--- Attempting initial data download from Hugging Face...")
+         download_data_from_hf()
+
+    # Load initial data from local file (might have been updated by download)
+    load_visitor_data()
+
+    print("---")
+    print("--- SECURITY WARNING ---")
+    print("--- The /admin route and its sub-routes are NOT protected.")
+    print("--- Implement proper authentication before deploying.")
+    print("---")
+
+    # Start periodic backup thread if write token is available
+    if HF_TOKEN_WRITE:
+        backup_thread = threading.Thread(target=periodic_backup, daemon=True)
         backup_thread.start()
-        logging.info("Periodic user data backup thread started.")
+        print("--- Periodic backup thread started (every hour).")
     else:
-        logging.warning("Periodic backup disabled due to missing HF configuration.")
-
-
-    logging.info(f"--- SECURITY WARNING ---")
-    logging.info(f"The /admin, /force_backup, /force_download routes are NOT protected.")
-    logging.info(f"Implement proper security (e.g., password, IP restriction) before production.")
-    logging.info(f"------------------------")
-    logging.info(f"Starting Flask server on http://{HOST}:{PORT}")
-    logging.info(f"Using Bot Token ID: {BOT_TOKEN.split(':')[0]}")
-    logging.info(f"User data file: {USER_DATA_FILE}")
-    logging.info(f"User data HF Repo: {HF_USER_DATA_REPO_ID}")
+        print("--- Periodic backup disabled (HF_TOKEN_WRITE missing).")
 
-    # Use a production-ready server like Waitress or Gunicorn instead of app.run() for deployment
+    print("--- Server Ready ---")
+    # Use a production server like Waitress or Gunicorn instead of app.run() for deployment
     # from waitress import serve
     # serve(app, host=HOST, port=PORT)
-    app.run(host=HOST, port=PORT, debug=False) # debug=False for production
+    app.run(host=HOST, port=PORT, debug=False) # debug=False for production recommended