Update app.py

app.py

@@ -26,7 +26,7 @@ HF_DATA_FILE_PATH = "data.json"
 HF_TOKEN_WRITE = os.getenv("HF_TOKEN_WRITE")
 HF_TOKEN_READ = os.getenv("HF_TOKEN_READ")
 
-BISHKEK_TZ = pytz.timezone('Asia/Bishkek')
+ALMATY_TZ = pytz.timezone('Asia/Almaty')
 
 app = Flask(__name__)
 logging.basicConfig(level=logging.INFO)
@@ -134,7 +134,7 @@ def upload_data_to_hf():
                  repo_id=REPO_ID,
                  repo_type="dataset",
                  token=HF_TOKEN_WRITE,
-                 commit_message=f"Update bonus data {datetime.now(BISHKEK_TZ).strftime('%Y-%m-%d %H:%M:%S')}"
+                 commit_message=f"Update bonus data {datetime.now(ALMATY_TZ).strftime('%Y-%m-%d %H:%M:%S')}"
              )
         logging.info("Bonus data successfully uploaded to Hugging Face.")
     except Exception as e:
@@ -192,30 +192,27 @@ TEMPLATE = """
     <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
     <style>
         :root {
-            --brand-yellow: #FFC107;
-            --brand-black: #101010;
+            --tg-theme-bg-color: var(--tg-bg-color, #181818);
+            --tg-theme-text-color: var(--tg-text-color, #ffffff);
+            --tg-theme-hint-color: var(--tg-hint-color, #aaaaaa);
+            --tg-theme-button-color: var(--tg-button-color, #FFC107);
+            --tg-theme-button-text-color: var(--tg-button-text-color, #000000);
+            --tg-theme-secondary-bg-color: var(--tg-secondary-bg-color, #2c2c2e);
             --brand-red: #F44336;
             --brand-green: #4CAF50;
             --brand-blue: #2196F3;
-            --card-bg: #1c1c1e;
-            --text-color: #ffffff;
-            --text-secondary-color: #a0a0a0;
-            --border-radius: 16px;
+            --border-radius-l: 24px;
+            --border-radius-m: 16px;
             --padding-m: 16px;
-            --padding-l: 24px;
             --font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
             --shadow-color: rgba(255, 193, 7, 0.15);
             --shadow-glow: 0 0 35px var(--shadow-color);
-            --shadow-color-red: rgba(244, 67, 54, 0.15);
-            --shadow-glow-red: 0 0 35px var(--shadow-color-red);
-            --shadow-color-blue: rgba(33, 150, 243, 0.15);
-            --shadow-glow-blue: 0 0 35px var(--shadow-color-blue);
         }
         * { box-sizing: border-box; margin: 0; padding: 0; }
         html, body {
-            background-color: var(--brand-black);
+            background-color: var(--tg-theme-bg-color);
             font-family: var(--font-family);
-            color: var(--text-color);
+            color: var(--tg-theme-text-color);
             padding: var(--padding-m);
             overscroll-behavior-y: none;
             -webkit-font-smoothing: antialiased;
@@ -223,156 +220,149 @@ TEMPLATE = """
             visibility: hidden;
             min-height: 100vh;
         }
-        .container {
-            max-width: 600px;
-            margin: 0 auto;
-            display: flex;
-            flex-direction: column;
-            gap: var(--padding-m);
-        }
-        .header { text-align: left; padding: var(--padding-m) 0; margin-bottom: 0; }
-        .logo { font-size: 2.5em; font-weight: 800; color: var(--text-color); letter-spacing: -1px; }
-        .logo span { color: var(--brand-yellow); }
-        .welcome-text { font-size: 1em; color: var(--text-secondary-color); margin-top: 4px; }
+        .container { max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: calc(var(--padding-m) + 4px); }
+        .header { text-align: left; padding: 8px 0; }
+        .logo { font-size: 2.5em; font-weight: 800; letter-spacing: -1px; }
+        .logo span { color: var(--tg-theme-button-color); }
+        .welcome-text { font-size: 1em; color: var(--tg-theme-hint-color); margin-top: 4px; }
         .nav-buttons {
-            display: flex;
-            justify-content: space-around;
-            background-color: var(--card-bg);
-            border-radius: var(--border-radius);
-            padding: 8px;
-            margin-bottom: var(--padding-m);
+            display: flex; justify-content: space-around; background-color: var(--tg-theme-secondary-bg-color);
+            border-radius: 50px; padding: 6px; position: sticky; top: var(--padding-m); z-index: 100;
+            backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
         }
         .nav-btn {
-            flex-grow: 1; padding: 10px 15px; border: none; border-radius: 12px;
-            background-color: transparent; color: var(--text-secondary-color);
-            font-family: var(--font-family); font-weight: 600; font-size: 1em;
-            cursor: pointer; transition: background-color 0.2s, color 0.2s;
+            flex-grow: 1; padding: 12px 15px; border: none; border-radius: 50px;
+            background-color: transparent; color: var(--tg-theme-hint-color);
+            font-family: var(--font-family); font-weight: 700; font-size: 1em;
+            cursor: pointer; transition: all 0.3s ease;
         }
-        .nav-btn.active { background-color: var(--brand-yellow); color: var(--brand-black); box-shadow: 0 2px 10px rgba(255,193,7,0.3); }
-        .content-section { display: none; flex-direction: column; gap: var(--padding-m); }
+        .nav-btn.active { background-color: var(--tg-theme-button-color); color: var(--tg-theme-button-text-color); box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
+        .content-section { display: none; flex-direction: column; gap: calc(var(--padding-m) + 4px); }
         .content-section.active { display: flex; }
-        .card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--padding-m); }
-        .bonus-card, .debt-card, .promo-card, .referral-bonus-card {
-            background: linear-gradient(145deg, #2a2a2a, #1c1c1c);
-            border-radius: calc(var(--border-radius) + 8px); padding: var(--padding-l);
-            text-align: center; position: relative; overflow: hidden;
+        .main-bonus-card {
+            background: linear-gradient(45deg, var(--tg-theme-button-color), #ffab00);
+            color: var(--tg-theme-button-text-color);
+            border-radius: var(--border-radius-l); padding: 24px; text-align: center;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
         }
-        .bonus-card { box-shadow: var(--shadow-glow); border: 1px solid rgba(255, 193, 7, 0.2); }
-        .debt-card { box-shadow: var(--shadow-glow-red); border: 1px solid rgba(244, 67, 54, 0.2); }
-        .referral-bonus-card { grid-column: 1 / -1; box-shadow: var(--shadow-glow-blue); border: 1px solid rgba(33, 150, 243, 0.2); }
-        .promo-card { grid-column: 1 / -1; border: 1px solid rgba(255,255,255,0.1); }
-        .card-label { font-size: 1.1em; font-weight: 500; color: var(--text-secondary-color); margin-bottom: 12px; }
-        .bonus-amount, .debt-amount, .referral-bonus-amount { font-size: 3em; font-weight: 800; letter-spacing: -2px; line-height: 1; }
-        .bonus-amount { color: var(--brand-yellow); }
-        .debt-amount { color: var(--brand-red); }
-        .referral-bonus-amount { color: var(--brand-blue); }
-        .client-id-card {
-            background-color: var(--card-bg); border-radius: var(--border-radius);
-            padding: var(--padding-m); display: flex; justify-content: space-between; align-items: center;
+        .main-bonus-card .card-label { font-size: 1.2em; font-weight: 600; opacity: 0.8; margin-bottom: 8px; }
+        .main-bonus-card .bonus-amount { font-size: 3.5em; font-weight: 800; letter-spacing: -2px; line-height: 1; }
+        .balances-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--padding-m); }
+        .balance-card {
+            background-color: var(--tg-theme-secondary-bg-color);
+            border-radius: var(--border-radius-m); padding: 20px; text-align: center;
         }
-        .client-id-label { font-weight: 500; color: var(--text-secondary-color); }
-        .client-id-value {
-            font-size: 1.3em; font-weight: 700; color: var(--brand-yellow);
-            letter-spacing: 2px; background-color: rgba(255,193,7,0.1); padding: 4px 10px; border-radius: 8px;
+        .balance-card .card-label { font-size: 1em; font-weight: 500; color: var(--tg-theme-hint-color); margin-bottom: 10px; }
+        .balance-card .amount { font-size: 2em; font-weight: 700; }
+        .balance-card .amount.debt { color: var(--brand-red); }
+        .balance-card .amount.referral { color: var(--brand-blue); }
+        .promo-card, .client-id-card {
+            background-color: var(--tg-theme-secondary-bg-color);
+            border-radius: var(--border-radius-m); padding: 20px;
         }
+        .promo-card .card-label { font-size: 1em; font-weight: 500; color: var(--tg-theme-hint-color); margin-bottom: 12px; text-align: center; }
         .promo-code-display {
             display: flex; align-items: center; justify-content: center; gap: 12px;
             background-color: rgba(0,0,0,0.2); border-radius: 12px; padding: 12px;
         }
-        .promo-code-value {
-            font-size: 1.5em; font-weight: 700; color: var(--brand-yellow); letter-spacing: 2px;
-        }
+        .promo-code-value { font-size: 1.5em; font-weight: 700; color: var(--tg-theme-button-color); letter-spacing: 2px; }
         .copy-btn {
-            padding: 8px 16px; font-size: 0.9em; font-weight: 600; color: var(--brand-black);
-            background-color: var(--brand-yellow); border: none; border-radius: 8px; cursor: pointer;
-            transition: background-color 0.2s;
-        }
-        .copy-btn:hover { background-color: #ffd447; }
-        .history-section, .invoices-section, .business-card-section {
-            background-color: var(--card-bg); border-radius: var(--border-radius);
-            padding: var(--padding-l); display: flex; flex-direction: column; gap: var(--padding-m);
+            padding: 10px 18px; font-size: 0.9em; font-weight: 700; color: var(--tg-theme-button-text-color);
+            background-color: var(--tg-theme-button-color); border: none; border-radius: 10px; cursor: pointer;
+            transition: transform 0.2s, background-color 0.2s;
         }
-        .history-title, .invoices-title, .business-card-title {
-            font-size: 1.4em; font-weight: 700; padding-bottom: var(--padding-m);
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        .copy-btn:active { transform: scale(0.95); }
+        .client-id-card { display: flex; justify-content: space-between; align-items: center; }
+        .client-id-label { font-weight: 500; color: var(--tg-theme-hint-color); }
+        .client-id-value {
+            font-size: 1.3em; font-weight: 700; color: var(--tg-theme-button-color); letter-spacing: 2px;
+            background-color: rgba(0,0,0,0.2); padding: 6px 12px; border-radius: 10px;
         }
-        .history-list, .invoices-list { list-style: none; padding: 0; margin: 0; max-height: 35vh; overflow-y: auto; }
+        .section-card { background-color: var(--tg-theme-secondary-bg-color); border-radius: var(--border-radius-m); padding: 20px; }
+        .section-title { font-size: 1.4em; font-weight: 700; margin-bottom: 16px; }
+        .history-list, .invoices-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
         .history-item, .invoice-item {
-            display: flex; justify-content: space-between; align-items: center;
-            padding: 14px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+            display: flex; align-items: center; padding: 14px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
         }
         .history-item:last-child, .invoice-item:last-child { border-bottom: none; }
-        .invoice-item { cursor: pointer; transition: background-color 0.2s; border-radius: 8px; }
+        .history-icon { margin-right: 16px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
+        .history-icon svg { width: 22px; height: 22px; }
+        .icon-bonus-accrual { background-color: rgba(76, 175, 80, 0.15); color: var(--brand-green); }
+        .icon-bonus-deduction { background-color: rgba(244, 67, 54, 0.15); color: var(--brand-red); }
+        .icon-debt-accrual { background-color: rgba(244, 67, 54, 0.15); color: var(--brand-red); }
+        .icon-debt-payment { background-color: rgba(76, 175, 80, 0.15); color: var(--brand-green); }
+        .icon-referral { background-color: rgba(33, 150, 243, 0.15); color: var(--brand-blue); }
+        .history-details { flex-grow: 1; }
+        .history-description { font-size: 1em; font-weight: 600; }
+        .history-date { font-size: 0.8em; color: var(--tg-theme-hint-color); margin-top: 4px; }
+        .history-amount { font-size: 1.1em; font-weight: 700; white-space: nowrap; }
+        .history-amount.positive { color: var(--brand-green); }
+        .history-amount.negative { color: var(--brand-red); }
+        .history-amount.referral { color: var(--brand-blue); }
+        .invoice-item { cursor: pointer; transition: background-color 0.2s; border-radius: 12px; }
         .invoice-item:hover { background-color: rgba(255,255,255,0.05); }
-        .history-details, .invoice-details { display: flex; flex-direction: column; }
-        .history-description, .invoice-description { font-size: 1em; font-weight: 500; }
-        .history-date, .invoice-date { font-size: 0.8em; color: var(--text-secondary-color); margin-top: 4px; }
-        .history-amount, .invoice-amount { font-size: 1.1em; font-weight: 700; }
-        .history-amount.bonus.accrual { color: var(--brand-green); }
-        .history-amount.bonus.deduction { color: var(--brand-red); }
-        .history-amount.debt.accrual { color: var(--brand-red); }
-        .history-amount.debt.payment { color: var(--brand-green); }
-        .history-amount.referral.accrual { color: var(--brand-blue); }
-        .invoice-amount { color: var(--brand-yellow); }
-        .no-history, .no-invoices { text-align: center; color: var(--text-secondary-color); padding: 2rem 0; }
-        .business-card-item { margin-bottom: 10px; }
-        .business-card-label { font-weight: 500; color: var(--text-secondary-color); margin-bottom: 4px; }
-        .business-card-value { font-size: 1.1em; font-weight: 600; color: var(--text-color); }
-        .business-card-value a { color: var(--brand-yellow); text-decoration: none; word-break: break-all; }
-        .business-card-value a:hover { text-decoration: underline; }
-        .business-card-phone-list { list-style: none; padding: 0; margin: 0; }
-        .business-card-phone-item { margin-bottom: 5px; }
+        .invoice-details { flex-grow: 1; }
+        .invoice-description, .invoice-date { margin-left: 16px; }
+        .invoice-amount { font-size: 1.1em; font-weight: 700; color: var(--tg-theme-button-color); }
+        .no-data { text-align: center; color: var(--tg-theme-hint-color); padding: 3rem 0; }
+        .business-card-item { margin-bottom: 16px; }
+        .business-card-label { font-weight: 500; color: var(--tg-theme-hint-color); margin-bottom: 6px; font-size: 0.9em; }
+        .business-card-value { font-size: 1.1em; font-weight: 600; }
+        .business-card-value a { color: var(--tg-theme-button-color); text-decoration: none; word-break: break-all; transition: opacity 0.2s; }
+        .business-card-value a:hover { opacity: 0.8; }
+        .business-card-phone-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
         .business-card-phone-item a {
-            display: inline-flex; align-items: center; gap: 8px; color: var(--text-color);
-            text-decoration: none; background-color: #2a2a2a; padding: 8px 12px;
-            border-radius: 8px; transition: background-color 0.2s;
+            display: inline-flex; align-items: center; gap: 10px; color: var(--tg-theme-text-color);
+            text-decoration: none; background-color: rgba(255,255,255,0.08); padding: 10px 14px;
+            border-radius: 12px; transition: background-color 0.2s;
         }
-        .business-card-phone-item a:hover { background-color: #3a3a3a; }
-        .business-card-phone-item img { height: 20px; width: 20px; }
+        .business-card-phone-item a:hover { background-color: rgba(255,255,255,0.12); }
         .modal {
-            display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%;
-            height: 100%; overflow: auto; background-color: rgba(0,0,0,0.7);
-            backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
-            align-items: center; justify-content: center;
+            display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%;
+            background-color: rgba(0,0,0,0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
+            align-items: flex-end; justify-content: center;
         }
         .modal-content {
-            background-color: var(--card-bg); margin: auto; padding: var(--padding-l);
-            border-radius: var(--border-radius); max-width: 90%; width: 500px;
-            box-shadow: 0 5px 15px rgba(0,0,0,0.5); position: relative;
+            background-color: var(--tg-theme-secondary-bg-color); width: 100%;
+            border-top-left-radius: var(--border-radius-l); border-top-right-radius: var(--border-radius-l);
+            box-shadow: 0 -5px 25px rgba(0,0,0,0.3); padding: var(--padding-m); padding-top: 40px; position: relative;
+            max-height: 90vh; overflow-y: auto; animation: slideUp 0.3s ease-out;
         }
+        @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
         .modal-close {
-            color: var(--text-secondary-color); position: absolute; top: 10px; right: 20px;
-            font-size: 28px; font-weight: bold; cursor: pointer;
+            position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
+            width: 40px; height: 5px; background-color: var(--tg-theme-hint-color);
+            border-radius: 3px; cursor: pointer;
         }
-        .modal-close:hover, .modal-close:focus { color: var(--text-color); text-decoration: none; cursor: pointer; }
-        .modal-title { font-size: 1.5em; font-weight: 700; margin-bottom: var(--padding-m); color: var(--brand-yellow); }
-        .invoice-detail-list, .promo-modal-body { list-style: none; padding: 0; margin: 0; }
+        .modal-title { font-size: 1.5em; font-weight: 700; margin-bottom: 20px; text-align: center; color: var(--tg-theme-button-color); }
+        .invoice-detail-list { list-style: none; padding: 0; margin: 0; }
         .invoice-detail-item {
-            display: flex; justify-content: space-between; padding: 10px 0;
-            border-bottom: 1px dashed rgba(255,255,255,0.1);
+            display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px dashed rgba(255,255,255,0.1);
         }
-        .invoice-detail-item:last-child { border-bottom: none; }
         .item-name { font-weight: 500; flex-basis: 60%; }
-        .item-qty-price { font-size: 0.9em; color: var(--text-secondary-color); flex-basis: 20%; text-align: right; }
-        .item-total { font-weight: 700; flex-basis: 20%; text-align: right; color: var(--brand-yellow); }
+        .item-qty-price { font-size: 0.9em; color: var(--tg-theme-hint-color); flex-basis: 20%; text-align: right; }
+        .item-total { font-weight: 700; flex-basis: 20%; text-align: right; color: var(--tg-theme-button-color); }
         .invoice-total-display {
             padding-top: var(--padding-m); border-top: 1px solid rgba(255,255,255,0.2); margin-top: var(--padding-m);
             display: flex; justify-content: space-between; font-size: 1.2em; font-weight: 700;
         }
-        .promo-modal-body { text-align: center; }
-        .promo-modal-body p { color: var(--text-secondary-color); margin-bottom: 1rem; }
-        .promo-modal-body input {
-            width: 100%; padding: 14px; margin-bottom: 1rem; font-size: 1.1em;
-            background-color: #2a2a2a; border: 1px solid #3a3a3a; border-radius: 12px;
-            color: var(--text-color); text-align: center; letter-spacing: 2px;
+        #promoCodeModal .modal-content { align-items: center; text-align: center; padding: 40px 24px 24px; }
+        #promoCodeModal h2 { margin-bottom: 12px; }
+        #promoCodeModal p { color: var(--tg-theme-hint-color); margin-bottom: 20px; }
+        #promoCodeModal input {
+            width: 100%; padding: 16px; margin-bottom: 16px; font-size: 1.2em;
+            background-color: var(--tg-theme-bg-color); border: 1px solid rgba(255,255,255,0.1);
+            border-radius: var(--border-radius-m); color: var(--tg-theme-text-color);
+            text-align: center; letter-spacing: 2px;
         }
-        .promo-modal-actions { display: flex; gap: 1rem; }
-        .promo-modal-actions button {
-            flex-grow: 1; padding: 14px; font-size: 1em; font-weight: 700;
-            border: none; border-radius: 12px; cursor: pointer; transition: all 0.2s;
+        #promoCodeModal .promo-modal-actions { display: flex; gap: 1rem; width: 100%; }
+        #promoCodeModal button {
+            flex-grow: 1; padding: 16px; font-size: 1em; font-weight: 700; border: none;
+            border-radius: var(--border-radius-m); cursor: pointer; transition: all 0.2s;
         }
-        .btn-apply-promo { background-color: var(--brand-yellow); color: var(--brand-black); }
-        .btn-skip-promo { background-color: transparent; border: 2px solid #3a3a3a; color: var(--text-secondary-color); }
+        .btn-apply-promo { background-color: var(--tg-theme-button-color); color: var(--tg-theme-button-text-color); }
+        .btn-skip-promo { background-color: var(--tg-theme-secondary-bg-color); color: var(--tg-theme-text-color); }
         #promoStatus { margin-top: 1rem; font-weight: 500; min-height: 20px; }
     </style>
 </head>
@@ -388,52 +378,68 @@ TEMPLATE = """
             <button class="nav-btn" data-target="business-card-section">Визитка</button>
         </nav>
         <div id="dashboard-section" class="content-section active">
-            <section class="card-grid">
-                <div class="bonus-card">
-                    <p class="card-label">Ваши бонусы</p>
-                    <p class="bonus-amount">{{ "%.2f"|format(user.bonuses|float) }}</p>
-                </div>
-                <div class="debt-card">
+            <section class="main-bonus-card">
+                <p class="card-label">Ваши бонусы</p>
+                <p class="bonus-amount">{{ "%.2f"|format(user.bonuses|float) }}</p>
+            </section>
+            <section class="balances-grid">
+                <div class="balance-card">
                     <p class="card-label">Ваш долг</p>
-                    <p class="debt-amount">{{ "%.2f"|format(user.debts|float) }}</p>
+                    <p class="amount debt">{{ "%.2f"|format(user.debts|float) }}</p>
                 </div>
-                 <div class="referral-bonus-card">
+                <div class="balance-card">
                     <p class="card-label">Бонусы с друзей</p>
-                    <p class="referral-bonus-amount">{{ "%.2f"|format(user.referral_bonuses|float) }}</p>
+                    <p class="amount referral">{{ "%.2f"|format(user.referral_bonuses|float) }}</p>
                 </div>
-                <div class="promo-card">
-                    <p class="card-label">Ваш промокод для друзей</p>
-                    <div class="promo-code-display">
-                        <span class="promo-code-value" id="userPromoCode">{{ user.referral_code }}</span>
-                        <button class="copy-btn" onclick="copyPromoCode()">Копировать</button>
-                    </div>
+            </section>
+            <section class="promo-card">
+                <p class="card-label">Ваш промокод для друзей</p>
+                <div class="promo-code-display">
+                    <span class="promo-code-value" id="userPromoCode">{{ user.referral_code }}</span>
+                    <button class="copy-btn" onclick="copyPromoCode()">Копировать</button>
                 </div>
             </section>
-            
             <section class="client-id-card">
                 <p class="client-id-label">Ваш ID клиента</p>
                 <p class="client-id-value">{{ user.id }}</p>
             </section>
-            <section class="history-section">
-                <h2 class="history-title">История операций</h2>
+            <section class="section-card">
+                <h2 class="section-title">История операций</h2>
                 {% if user.combined_history %}
                     <ul class="history-list">
                         {% for item in user.combined_history %}
                             <li class="history-item">
-                                <div class="history-details">
-                                    <span class="history-description">{{ item.description }}</span>
-                                    <span class="history-date">{{ item.date_str }}</span>
-                                </div>
                                 {% if item.transaction_type == 'bonus' %}
-                                    <span class="history-amount bonus {{ 'accrual' if item.type == 'accrual' else 'deduction' }}">
+                                    <div class="history-icon {{ 'icon-bonus-accrual' if item.type == 'accrual' else 'icon-bonus-deduction' }}">
+                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/></svg>
+                                    </div>
+                                    <div class="history-details">
+                                        <span class="history-description">{{ item.description }}</span>
+                                        <span class="history-date">{{ item.date_str }}</span>
+                                    </div>
+                                    <span class="history-amount {{ 'positive' if item.type == 'accrual' else 'negative' }}">
                                         {{ '+' if item.type == 'accrual' else '-' }}{{ "%.2f"|format(item.amount|float) }}
                                     </span>
                                 {% elif item.transaction_type == 'debt' %}
-                                    <span class="history-amount debt {{ 'payment' if item.type == 'payment' else 'accrual' }}">
+                                    <div class="history-icon {{ 'icon-debt-payment' if item.type == 'payment' else 'icon-debt-accrual' }}">
+                                       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm-1-5h2v2h-2zm0-8h2v6h-2z"/></svg>
+                                    </div>
+                                    <div class="history-details">
+                                        <span class="history-description">{{ item.description }}</span>
+                                        <span class="history-date">{{ item.date_str }}</span>
+                                    </div>
+                                    <span class="history-amount {{ 'positive' if item.type == 'payment' else 'negative' }}">
                                         {{ '-' if item.type == 'payment' else '+' }}{{ "%.2f"|format(item.amount|float) }}
                                     </span>
                                 {% elif item.transaction_type == 'referral' %}
-                                    <span class="history-amount referral accrual">
+                                     <div class="history-icon icon-referral">
+                                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
+                                     </div>
+                                    <div class="history-details">
+                                        <span class="history-description">{{ item.description }}</span>
+                                        <span class="history-date">{{ item.date_str }}</span>
+                                    </div>
+                                    <span class="history-amount referral">
                                         +{{ "%.2f"|format(item.amount|float) }}
                                     </span>
                                 {% endif %}
@@ -441,17 +447,20 @@ TEMPLATE = """
                         {% endfor %}
                     </ul>
                 {% else %}
-                    <p class="no-history">Операций пока не было.</p>
+                    <p class="no-data">Операций пока не было.</p>
                 {% endif %}
             </section>
         </div>
         <div id="invoices-section" class="content-section">
-            <section class="invoices-section">
-                <h2 class="invoices-title">Мои накладные</h2>
+            <section class="section-card">
+                <h2 class="section-title">Мои накладные</h2>
                 {% if user.invoices %}
                     <ul class="invoices-list">
                         {% for invoice in user.invoices|sort(attribute='date', reverse=true) %}
                             <li class="invoice-item" onclick='openInvoiceDetailModal({{ invoice|tojson }})'>
+                                <div class="history-icon icon-bonus-accrual" style="background-color: rgba(255, 193, 7, 0.15); color: var(--tg-theme-button-color);">
+                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>
+                                </div>
                                 <div class="invoice-details">
                                     <span class="invoice-description">Накладная #{{ invoice.invoice_id }}</span>
                                     <span class="invoice-date">{{ invoice.date_str }}</span>
@@ -461,68 +470,66 @@ TEMPLATE = """
                         {% endfor %}
                     </ul>
                 {% else %}
-                    <p class="no-invoices">Накладных пока нет.</p>
+                    <p class="no-data">Накладных пока нет.</p>
                 {% endif %}
             </section>
         </div>
         <div id="business-card-section" class="content-section">
-            <section class="business-card-section">
-                <h2 class="business-card-title">Визитка организации</h2>
-                {% if org_details %}
+            <section class="section-card">
+                <h2 class="section-title">Визитка организации</h2>
+                {% if org_details and (org_details.name or org_details.phone_numbers) %}
+                    {% if org_details.name %}
                     <div class="business-card-item">
                         <div class="business-card-label">Название организации</div>
-                        <div class="business-card-value">{{ org_details.name | default('Не указано') }}</div>
+                        <div class="business-card-value">{{ org_details.name }}</div>
                     </div>
+                    {% endif %}
+                    {% if org_details.phone_numbers %}
                     <div class="business-card-item">
                         <div class="business-card-label">Номера телефонов</div>
-                        {% if org_details.phone_numbers %}
-                            <ul class="business-card-phone-list">
-                                {% for phone in org_details.phone_numbers %}
-                                    <li class="business-card-phone-item">
-                                        <a href="tel:{{ phone }}">
-                                            <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q2vb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJtMjIuMDIyIDEuOTY3LTMuMDkgMy41MjNhOC40OCA4LjQ4IDAgMCAwLTEzLjA5OSAwTDEuOTc4IDEuOTY3Yy0uOTc0LTEuMTA3LTIuNTI1LS40MS0yLjUxMiAxLjAzNXYxOC44NjhjLjAwMSAxLjQ0NSAxLjUyOCAyLjEzNiAyLjQ4OCAxLjAzN2wzLjA5LTMuNTIzYTEwLjE2IDEwLjE2IDAgMCAwIDEzLjA5OSAwbDMuMDkgMy41MjNjLjk3NCAxLjEwNyAyLjUyNS40MSAyLjUxMi0xLjAzN1YyLjAwMWMtLjAwMS0xLjQ0NS0xLjUyOC0yLjEzNi0yLjQ4OC0xLjAzN3oiLz48cGF0aCBkPSJtNy41IDIuOTc2YzEuMjI1LjA2MSAyLjQ1LjA5MSAzLjY3NS4wOTFzMi40NS0uMDMxIDMuNjc1LS4wOTFjLjY4Ny0uMDM0IDEuNDMzLjMyNSAxLjcwOS43NDdsMS40NzMgMS42NzhjLjQ5LjU1Ny44MzcgMS4yNjcuODk5IDIuMDgzLjA0MS41NTEuMDYyIDEuMS4wNjIgMS42NnYxLjUwNGMwIC43NzUtLjE3IDEuNTUzLS41MDggMi4yMzMtLjQ3Mi45MjUtMS4xMTcgMS43NDgtMS45MzUgMi4zODhsLS4xMzQuMTA1Yy0uNzU0LjU4My0xLjY0Ny45NzUtMi41NjIgMS4xODQtLjYwMi4xMzYtMS4wMDkuMjA4LTEuNzI1LjIwOC0xLjExNSAwLjc1NC0uMTUzIDMuNjgyLS4xNTMgNS41NDJzLjE1NCA0Ljc4Ni4xNTMgNS41NDJjLjAwMi0uNjU3LS4wNzgtMS4yNy0uMjItMS44MjQtLjE0OC0uNTU4LS40MTctMS4wODgtLjc2NC0xLjU1MS0uNjMyLS44NDUtMS40NDctMS41NTctMi40MTItMi4wNjItLjk2My0uNTA3LTEuOTk0LS44Mi0zLjA0Ni0uOTUyLS44MTMt.MTA0LTEuNTcxLS4xNDUtMi4zMzgtLjA5OS0uNjk0LjAxMS0xLjMzNy4xMDYtMS45MjQuMjg1LS41ODkuMTg0LTEuMTI2LjQyMS0xLjYwMS42OTMtLjQ3Ni4yNzMtLjkwNi41NzQtMS4yOTcuODktLjM4OC4zMTQtLjc0My42NDctMS4wNjcuOTk4LS4zMjYuMzUzLS42NDYuNzIyLS45NTkuMTA1OS0uMzEzLjMyOC0uNjIuNjUzLS45MjEuOTc1LS4yOTQuMzExLS41NzYuNjIzLS44NDQuOTMyLS4yNy4zMDktLjUyMy42MTctLjc1Ny45MTgtLjE5Ny4yNTQtLjM2MS40OTMtLjQ4MS43MjUtLjExOS4yMzItLjE4NS40NTItLjE5My41OTMtLjAwOS4xNDUtLjAxNC4yOTMtLjAxNi40NDF2MS43NmMwIC41NzYtLjE3NSAxLjEyMi0uNDQ3IDEuNTYtLjIyNy4zOTMtLjU2NS41OTktMS4wMTkuNTk5LTEuMTg2LS4wMDEtMS45OTYtMS4zOTctMi4yOTYtMi44NDItLjMyMy0xLjU1OC0uMzIzLTQuNTY5LS4zMjMtNi40MTFzLjAxNS00Ljg1NC4zMjMtNi40MTJjLjI5OS0xLjQ0NSAxLjExLTIuODQxIDIuMjk2LTIuODQyLjQ1NC4wMDcuNzgxLjI1OSAxLjAxOS42MDkuMjE1LjMzNC4zMjMuNzMuMzIzIDEuMTQ3di45NWMuMDMgMS4zMTQtLjAxNSAyLjYxLS4xNDcgMy44NzUtLjEwNiAxLjAzLS4yMzQgMi4wNDYtLjM1MSAyLjk5NmwuNTkzLS4zNzljLjMyNi0uMjA2LjY4Mi0uMzgxIDEuMDQ5LS41NzEuMzg2LS4xOTcgLjc5LS4zNjUgMS4xOTQtLjQ5NC40MDUtLjEyOS43ODctLjIzMyAxLjEyOC0uMjkwLjM0Mi0uMDU4LjYwNC0uMDc0Ljc4Mi0uMDQ3WiIvPjwvc3ZnPg==">
-                                            {{ phone }}
-                                        </a>
-                                    </li>
-                                {% endfor %}
-                            </ul>
-                        {% else %}
-                            <div class="business-card-value">Не указано</div>
-                        {% endif %}
+                        <ul class="business-card-phone-list">
+                            {% for phone in org_details.phone_numbers %}
+                                <li class="business-card-phone-item">
+                                    <a href="tel:{{ phone.replace(' ', '').replace('-', '') }}">
+                                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M6.54 5c.06.89.21 1.76.45 2.59l-1.2 1.2c-.41-1.2-.67-2.47-.76-3.79h1.51m10.92 0h1.51c-.09 1.32-.35 2.59-.76 3.79l-1.2-1.2c.24-.83.39-1.7.45-2.59M7.5 3H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.49c0-.55-.45-1-1-1-1.24 0-2.45-.2-3.57-.57-.1-.04-.21-.05-.31-.05-.26 0-.51.1-.71.29l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.2c.28-.28.36-.67.25-1.02C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1z"/></svg>
+                                        {{ phone }}
+                                    </a>
+                                </li>
+                            {% endfor %}
+                        </ul>
                     </div>
+                    {% endif %}
+                    {% if org_details.address %}
                     <div class="business-card-item">
                         <div class="business-card-label">Адрес</div>
-                        <div class="business-card-value">{{ org_details.address | default('Не указано') }}</div>
+                        <div class="business-card-value">{{ org_details.address }}</div>
                     </div>
+                    {% endif %}
+                    {% if org_details.whatsapp_link %}
                     <div class="business-card-item">
                         <div class="business-card-label">WhatsApp</div>
                         <div class="business-card-value">
-                            {% if org_details.whatsapp_link %}
-                                <a href="{{ org_details.whatsapp_link }}" target="_blank"> {{ org_details.whatsapp_link }} </a>
-                            {% else %}
-                                <div class="business-card-value">Не указано</div>
-                            {% endif %}
+                            <a href="{{ org_details.whatsapp_link }}" target="_blank">Написать в WhatsApp</a>
                         </div>
                     </div>
+                    {% endif %}
+                    {% if org_details.telegram_link %}
                     <div class="business-card-item">
                         <div class="business-card-label">Telegram</div>
                         <div class="business-card-value">
-                            {% if org_details.telegram_link %}
-                                <a href="{{ org_details.telegram_link }}" target="_blank"> {{ org_details.telegram_link }} </a>
-                            {% else %}
-                                <div class="business-card-value">Не указано</div>
-                            {% endif %}
+                           <a href="{{ org_details.telegram_link }}" target="_blank">Написать в Telegram</a>
                         </div>
                     </div>
+                    {% endif %}
                 {% else %}
-                    <p class="no-history">Данные организации не указаны.</p>
+                    <p class="no-data">Данные организации не указаны.</p>
                 {% endif %}
             </section>
         </div>
     </div>
     <div id="invoiceDetailModal" class="modal">
         <div class="modal-content">
-            <span class="modal-close" onclick="closeModal('invoiceDetailModal')">×</span>
+            <div class="modal-close" onclick="closeModal('invoiceDetailModal')"></div>
             <h2 id="invoiceDetailTitle" class="modal-title"></h2>
             <ul id="invoiceDetailList" class="invoice-detail-list"></ul>
             <div id="invoiceDetailTotal" class="invoice-total-display">
@@ -532,17 +539,15 @@ TEMPLATE = """
         </div>
     </div>
     {% if is_first_visit %}
-    <div id="promoCodeModal" class="modal" style="display: flex;">
+    <div id="promoCodeModal" class="modal" style="display: flex; align-items: center;">
         <div class="modal-content">
             <h2 class="modal-title">Есть промокод?</h2>
-            <div class="promo-modal-body">
-                <p>Если у вас есть промокод от друга, введите его, чтобы получить бонус.</p>
-                <input type="text" id="promoCodeInput" placeholder="PROMO123">
-                <div id="promoStatus"></div>
-                <div class="promo-modal-actions">
-                    <button class="btn-skip-promo" onclick="submitPromoCode(false)">Нет, спасибо</button>
-                    <button class="btn-apply-promo" onclick="submitPromoCode(true)">Применить</button>
-                </div>
+            <p>Если у вас есть промокод от друга, введите его, чтобы получить бонус.</p>
+            <input type="text" id="promoCodeInput" placeholder="PROMO123">
+            <div id="promoStatus"></div>
+            <div class="promo-modal-actions">
+                <button class="btn-skip-promo" onclick="submitPromoCode(false)">Нет, спасибо</button>
+                <button class="btn-apply-promo" onclick="submitPromoCode(true)">Применить</button>
             </div>
         </div>
     </div>
@@ -552,29 +557,28 @@ TEMPLATE = """
         const currentUserId = '{{ user.id }}';
 
         function applyTheme(themeParams) {
-            const root = document.documentElement;
-            const isDark = themeParams.bg_color ? (parseInt(themeParams.bg_color.substring(1, 3), 16) < 128) : true;
-            
-            root.style.setProperty('--brand-black', themeParams.bg_color || '#101010');
-            root.style.setProperty('--text-color', themeParams.text_color || '#ffffff');
-            root.style.setProperty('--text-secondary-color', themeParams.hint_color || '#a0a0a0');
-            root.style.setProperty('--brand-yellow', themeParams.button_color || '#FFC107');
-            root.style.setProperty('--card-bg', themeParams.secondary_bg_color || (isDark ? '#1c1c1e' : '#f1f1f1'));
+            if (!themeParams) return;
+            const root = document.documentElement.style;
+            root.setProperty('--tg-bg-color', themeParams.bg_color || '#181818');
+            root.setProperty('--tg-text-color', themeParams.text_color || '#ffffff');
+            root.setProperty('--tg-hint-color', themeParams.hint_color || '#aaaaaa');
+            root.setProperty('--tg-button-color', themeParams.button_color || '#FFC107');
+            root.setProperty('--tg-button-text-color', themeParams.button_text_color || '#000000');
+            root.setProperty('--tg-secondary-bg-color', themeParams.secondary_bg_color || '#2c2c2e');
         }
         
         function setupTelegram() {
              if (!tg || !tg.initData) {
                  console.error("Telegram WebApp script not loaded or initData is missing.");
                  document.body.style.visibility = 'visible';
+                 applyTheme({});
                  return;
              }
              
             tg.ready();
             tg.expand();
 
-            if (tg.themeParams && Object.keys(tg.themeParams).length > 0) {
-                applyTheme(tg.themeParams);
-            }
+            applyTheme(tg.themeParams);
             tg.onEvent('themeChanged', () => applyTheme(tg.themeParams));
 
              const urlParams = new URLSearchParams(window.location.search);
@@ -624,7 +628,7 @@ TEMPLATE = """
         function closeModal(modalId) { document.getElementById(modalId).style.display = 'none'; }
 
         function openInvoiceDetailModal(invoiceData) {
-            document.getElementById('invoiceDetailTitle').textContent = `Накладная #${invoiceData.invoice_id} от ${invoiceData.date_str}`;
+            document.getElementById('invoiceDetailTitle').textContent = `Накладная #${invoiceData.invoice_id}`;
             const invoiceDetailList = document.getElementById('invoiceDetailList');
             invoiceDetailList.innerHTML = '';
             invoiceData.items.forEach(item => {
@@ -641,7 +645,7 @@ TEMPLATE = """
             const promoCode = document.getElementById('userPromoCode').textContent;
             const copyBtn = document.querySelector('.copy-btn');
             navigator.clipboard.writeText(promoCode).then(() => {
-                copyBtn.textContent = 'Скопировано!';
+                copyBtn.textContent = 'Готово!';
                 setTimeout(() => { copyBtn.textContent = 'Копировать'; }, 2000);
             }).catch(err => {
                 console.error('Failed to copy text: ', err);
@@ -651,7 +655,7 @@ TEMPLATE = """
         async function submitPromoCode(withCode) {
             const promoCode = withCode ? document.getElementById('promoCodeInput').value.trim() : null;
             const statusEl = document.getElementById('promoStatus');
-            statusEl.style.color = 'var(--text-secondary-color)';
+            statusEl.style.color = 'var(--tg-theme-hint-color)';
             statusEl.textContent = 'Проверяем...';
             
             try {
@@ -688,6 +692,7 @@ TEMPLATE = """
              setTimeout(() => {
                  if (document.body.style.visibility !== 'visible') {
                       document.body.style.visibility = 'visible';
+                      applyTheme({});
                   }
              }, 3000);
         }
@@ -796,7 +801,8 @@ ADMIN_TEMPLATE = """
         .invoice-items-table th { background-color: #e9ecef; font-weight: 600; color: var(--admin-text); }
         .invoice-items-table .total-row td { font-weight: 700; background-color: #f0f0f0; }
         .invoice-items-table .action-btn { background: none; border: none; color: var(--admin-danger); cursor: pointer; font-size: 1.2em; }
-        .invoice-section-summary { padding: 1rem; background-color: #f0f0f0; border-radius: 8px; margin-top: 1rem; font-weight: 600; }
+        .invoice-section-summary { padding: 1rem; background-color: #e9ecef; border-radius: 8px; margin-top: 1rem; font-weight: 600; font-size: 1.1em; text-align: right; }
+        .invoice-section-summary span { color: var(--admin-success); }
         .invoice-list-admin { list-style: none; padding: 0; max-height: 200px; overflow-y: auto; border: 1px solid var(--admin-border); border-radius: 8px; }
         .invoice-list-admin li { padding: 8px 12px; border-bottom: 1px solid var(--admin-border); display: flex; justify-content: space-between; align-items: center; }
         .invoice-list-admin li:last-child { border-bottom: none; }
@@ -809,6 +815,13 @@ ADMIN_TEMPLATE = """
         .form-group-horizontal { display: flex; align-items: center; gap: 10px; }
         .form-group-horizontal input { flex-grow: 1; }
         .form-group-horizontal span { font-weight: 500; }
+        .invoice-detail-list { list-style: none; padding: 0; }
+        .invoice-detail-item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed #ccc; }
+        .invoice-detail-item:last-child { border-bottom: none; }
+        .item-name { flex-basis: 60%; }
+        .item-qty-price { flex-basis: 20%; text-align: right; color: #6c757d; }
+        .item-total { flex-basis: 20%; text-align: right; font-weight: bold; }
+        .invoice-total-display { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #dee2e6; display: flex; justify-content: space-between; font-size: 1.2em; font-weight: bold; }
     </style>
 </head>
 <body>
@@ -957,14 +970,25 @@ ADMIN_TEMPLATE = """
                     </thead>
                     <tbody></tbody>
                     <tfoot>
-                        <tr>
-                            <td colspan="3" style="text-align: right;"><strong>Итоговая сумма накладной:</strong></td>
+                        <tr class="total-row">
+                            <td colspan="3" style="text-align: right;"><strong>Итоговая сумма:</strong></td>
                             <td id="newInvoiceTotalAmount">0.00</td><td></td>
                         </tr>
                     </tfoot>
                 </table>
                 <button class="btn btn-primary" style="margin-top: 1rem;" onclick="addNewInvoiceItemRow()">Добавить товар</button>
             </div>
+            <div class="form-section">
+                <h3>Оплата бонусами</h3>
+                <p>Доступно бонусов для списания: <strong id="invoiceAvailableBonuses">0.00</strong></p>
+                <div class="form-group">
+                    <label for="invoiceDeductBonuses">Списать бонусов (не более суммы накладной)</label>
+                    <input type="number" id="invoiceDeductBonuses" oninput="updateNewInvoiceTotal()" placeholder="0.00" step="0.01">
+                </div>
+                <div class="invoice-section-summary">
+                    К оплате: <span id="invoiceFinalAmount">0.00</span>
+                </div>
+            </div>
             <div class="modal-footer">
                 <div id="invoiceStatus" class="status-message"></div>
                 <button class="btn-submit" onclick="submitInvoice()">Сохранить накладную</button>
@@ -994,7 +1018,7 @@ ADMIN_TEMPLATE = """
         </div>
         <div class="form-group" style="margin-bottom: 1.5rem;">
             <label for="newClientPhone">Номер телефона (уникальный)</label>
-            <input type="tel" id="newClientPhone" placeholder="+79001234567">
+            <input type="tel" id="newClientPhone" placeholder="+77001234567">
         </div>
         <div class="modal-footer">
             <div id="addClientStatus" class="status-message"></div>
@@ -1015,7 +1039,7 @@ ADMIN_TEMPLATE = """
                 </div>
                 <div class="form-group">
                     <label for="orgPhoneNumbers">Номера телефонов (через запятую)</label>
-                    <input type="text" id="orgPhoneNumbers" placeholder="+79001112233,+79004445566">
+                    <input type="text" id="orgPhoneNumbers" placeholder="+77001112233,+77004445566">
                 </div>
                 <div class="form-group">
                     <label for="orgAddress">Адрес</label>
@@ -1023,7 +1047,7 @@ ADMIN_TEMPLATE = """
                 </div>
                 <div class="form-group">
                     <label for="orgWhatsAppLink">Ссылка на WhatsApp</label>
-                    <input type="url" id="orgWhatsAppLink" placeholder="https://wa.me/79001112233">
+                    <input type="url" id="orgWhatsAppLink" placeholder="https://wa.me/77001112233">
                 </div>
                 <div class="form-group">
                     <label for="orgTelegramLink">Ссылка на Telegram</label>
@@ -1071,11 +1095,11 @@ ADMIN_TEMPLATE = """
     <div id="adminInvoiceDetailModal" class="modal">
         <div class="modal-content">
             <span class="modal-close" onclick="closeModal('adminInvoiceDetailModal')">×</span>
-            <h2 id="adminInvoiceDetailTitle" class="modal-title"></h2>
+            <div class="modal-header">
+                <h2 id="adminInvoiceDetailTitle"></h2>
+            </div>
             <ul id="adminInvoiceDetailList" class="invoice-detail-list"></ul>
             <div id="adminInvoiceDetailTotal" class="invoice-total-display">
-                <span>Итого:</span>
-                <span id="adminInvoiceTotalAmount">0.00</span>
             </div>
         </div>
     </div>
@@ -1102,6 +1126,9 @@ ADMIN_TEMPLATE = """
             document.getElementById('modalUserUsername').textContent = `@${userData.username || userData.phone_number || ''} | ID: ${userData.id}`;
             ['accrueAmount', 'deductAmount', 'addDebtAmount', 'repayDebtAmount'].forEach(id => document.getElementById(id).value = '');
             ['modalStatus', 'invoiceStatus'].forEach(id => document.getElementById(id).textContent = '');
+            document.getElementById('invoiceDeductBonuses').value = '';
+            document.getElementById('invoiceAvailableBonuses').textContent = (parseFloat(userData.bonuses) || 0).toFixed(2);
+            
             newInvoiceItems = [];
             renderNewInvoiceItems();
             loadUserHistoryAndInvoices();
@@ -1383,8 +1410,8 @@ ADMIN_TEMPLATE = """
             const tableBody = document.getElementById('newInvoiceItemsTable').getElementsByTagName('tbody')[0];
             const newRow = tableBody.insertRow();
             const rowIndex = tableBody.rows.length - 1;
-            newInvoiceItems.push({ product_name: '', quantity: 0, unit_price: 0, item_total: 0 });
-            newRow.innerHTML = `<td><input type="text" placeholder="Название товара" oninput="updateInvoiceItem(${rowIndex}, 'product_name', this.value)"></td><td><input type="number" step="1" min="0" placeholder="0" oninput="updateInvoiceItem(${rowIndex}, 'quantity', parseFloat(this.value))"></td><td><input type="number" step="0.01" min="0" placeholder="0.00" oninput="updateInvoiceItem(${rowIndex}, 'unit_price', parseFloat(this.value))"></td><td class="item-total-display">0.00</td><td><button class="action-btn" onclick="removeInvoiceItemRow(this, ${rowIndex})">🗑️</button></td>`;
+            newInvoiceItems.push({ product_name: '', quantity: 1, unit_price: 0, item_total: 0 });
+            newRow.innerHTML = `<td><input type="text" placeholder="Название товара" oninput="updateInvoiceItem(${rowIndex}, 'product_name', this.value)"></td><td><input type="number" step="1" min="1" value="1" placeholder="1" oninput="updateInvoiceItem(${rowIndex}, 'quantity', parseFloat(this.value))"></td><td><input type="number" step="0.01" min="0" placeholder="0.00" oninput="updateInvoiceItem(${rowIndex}, 'unit_price', parseFloat(this.value))"></td><td class="item-total-display">0.00</td><td><button class="action-btn" onclick="removeInvoiceItemRow(this, ${rowIndex})">🗑️</button></td>`;
         }
 
         function updateInvoiceItem(index, field, value) {
@@ -1401,34 +1428,37 @@ ADMIN_TEMPLATE = """
         }
 
         function removeInvoiceItemRow(button, index) {
-            const tableBody = document.getElementById('newInvoiceItemsTable').getElementsByTagName('tbody')[0];
-            tableBody.deleteRow(button.parentNode.parentNode.rowIndex - 1);
             newInvoiceItems.splice(index, 1);
-            for (let i = 0; i < tableBody.rows.length; i++) {
-                const row = tableBody.rows[i];
-                row.querySelector('input[type="text"]').setAttribute('oninput', `updateInvoiceItem(${i}, 'product_name', this.value)`);
-                row.querySelector('input[type="number"][step="1"]').setAttribute('oninput', `updateInvoiceItem(${i}, 'quantity', parseFloat(this.value))`);
-                row.querySelector('input[type="number"][step="0.01"]').setAttribute('oninput', `updateInvoiceItem(${i}, 'unit_price', parseFloat(this.value))`);
-                row.querySelector('.action-btn').setAttribute('onclick', `removeInvoiceItemRow(this, ${i})`);
-            }
-            updateNewInvoiceTotal();
-        }
-
-        function updateNewInvoiceTotal() {
-            let total = newInvoiceItems.reduce((sum, item) => sum + (parseFloat(item.item_total) || 0), 0);
-            document.getElementById('newInvoiceTotalAmount').textContent = total.toFixed(2);
+            renderNewInvoiceItems();
         }
-
+        
         function renderNewInvoiceItems() {
             const tableBody = document.getElementById('newInvoiceItemsTable').getElementsByTagName('tbody')[0];
             tableBody.innerHTML = '';
             newInvoiceItems.forEach((item, index) => {
                 const newRow = tableBody.insertRow();
-                newRow.innerHTML = `<td><input type="text" placeholder="Название товара" value="${item.product_name}" oninput="updateInvoiceItem(${index}, 'product_name', this.value)"></td><td><input type="number" step="1" min="0" placeholder="0" value="${item.quantity || ''}" oninput="updateInvoiceItem(${index}, 'quantity', parseFloat(this.value))"></td><td><input type="number" step="0.01" min="0" placeholder="0.00" value="${item.unit_price || ''}" oninput="updateInvoiceItem(${index}, 'unit_price', parseFloat(this.value))"></td><td class="item-total-display">${(item.item_total || 0).toFixed(2)}</td><td><button class="action-btn" onclick="removeInvoiceItemRow(this, ${index})">🗑️</button></td>`;
+                newRow.innerHTML = `<td><input type="text" placeholder="Название товара" value="${item.product_name}" oninput="updateInvoiceItem(${index}, 'product_name', this.value)"></td><td><input type="number" step="1" min="1" placeholder="1" value="${item.quantity || '1'}" oninput="updateInvoiceItem(${index}, 'quantity', parseFloat(this.value))"></td><td><input type="number" step="0.01" min="0" placeholder="0.00" value="${item.unit_price || ''}" oninput="updateInvoiceItem(${index}, 'unit_price', parseFloat(this.value))"></td><td class="item-total-display">${(item.item_total || 0).toFixed(2)}</td><td><button class="action-btn" onclick="removeInvoiceItemRow(this, ${index})">🗑️</button></td>`;
             });
             updateNewInvoiceTotal();
         }
 
+        function updateNewInvoiceTotal() {
+            let total = newInvoiceItems.reduce((sum, item) => sum + (parseFloat(item.item_total) || 0), 0);
+            document.getElementById('newInvoiceTotalAmount').textContent = total.toFixed(2);
+            
+            const availableBonuses = parseFloat(currentUserData.bonuses) || 0;
+            const deductBonusesInput = document.getElementById('invoiceDeductBonuses');
+            let deductAmount = parseFloat(deductBonusesInput.value) || 0;
+
+            let cappedDeductAmount = Math.max(0, Math.min(deductAmount, availableBonuses, total));
+            if (deductAmount !== cappedDeductAmount) {
+                deductBonusesInput.value = cappedDeductAmount > 0 ? cappedDeductAmount.toFixed(2) : '';
+            }
+            
+            let finalAmount = total - cappedDeductAmount;
+            document.getElementById('invoiceFinalAmount').textContent = finalAmount.toFixed(2);
+        }
+
         async function submitInvoice() {
             const statusEl = document.getElementById('invoiceStatus');
             statusEl.style.color = 'var(--admin-secondary)';
@@ -1445,7 +1475,13 @@ ADMIN_TEMPLATE = """
                 return;
             }
             const totalAmount = itemsToAdd.reduce((sum, item) => sum + item.item_total, 0);
-            const payload = { user_id: currentUserData.id, total_amount: totalAmount, items: itemsToAdd };
+            const deductBonuses = parseFloat(document.getElementById('invoiceDeductBonuses').value) || 0;
+            const payload = { 
+                user_id: currentUserData.id, 
+                total_amount: totalAmount, 
+                items: itemsToAdd,
+                deduct_bonuses: deductBonuses
+            };
             try {
                 const response = await fetch('/admin/add_invoice', {
                     method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload)
@@ -1472,7 +1508,18 @@ ADMIN_TEMPLATE = """
                 li.innerHTML = `<span class="item-name">${item.product_name}</span><span class="item-qty-price">${item.quantity} x ${parseFloat(item.unit_price).toFixed(2)}</span><span class="item-total">${parseFloat(item.item_total).toFixed(2)}</span>`;
                 invoiceDetailList.appendChild(li);
             });
-            document.getElementById('adminInvoiceTotalAmount').textContent = parseFloat(invoiceData.total_amount).toFixed(2);
+
+            const totalDisplay = document.getElementById('adminInvoiceDetailTotal');
+            let bonusesDeducted = parseFloat(invoiceData.bonuses_deducted || 0);
+            let totalAmount = parseFloat(invoiceData.total_amount);
+            let finalAmount = totalAmount - bonusesDeducted;
+
+            let totalHTML = `<span>Итого:</span><span>${totalAmount.toFixed(2)}</span>`;
+            if (bonusesDeducted > 0) {
+                totalHTML += `<br><span>Списано бонусов:</span><span style="color: var(--admin-danger);">- ${bonusesDeducted.toFixed(2)}</span>`;
+                totalHTML += `<hr style="border: none; border-top: 1px solid #ccc; margin: 5px 0;"><span>К оплате:</span><span style="color: var(--admin-success);">${finalAmount.toFixed(2)}</span>`;
+            }
+            totalDisplay.innerHTML = totalHTML;
             adminInvoiceDetailModal.style.display = 'block';
         }
 
@@ -1545,7 +1592,7 @@ def verify_data():
         if is_valid:
             tg_user_id = user_info_dict.get('id')
             if tg_user_id:
-                now = datetime.now(BISHKEK_TZ)
+                now = datetime.now(ALMATY_TZ)
                 user_id_to_save = None
 
                 with _data_lock:
@@ -1618,7 +1665,7 @@ def submit_referral():
 
                 if promo_bonus > 0:
                     user['bonuses'] = user.get('bonuses', 0) + promo_bonus
-                    now = datetime.now(BISHKEK_TZ)
+                    now = datetime.now(ALMATY_TZ)
                     history_entry = {
                         "type": "accrual", "amount": promo_bonus, "description": "Бонус за промокод",
                         "date": now.isoformat(), "date_str": now.strftime('%Y-%m-%d %H:%M:%S')
@@ -1672,7 +1719,7 @@ def add_client():
             if any(u.get('phone_number') == phone_number for k, u in visitor_data_cache.items() if k not in ["organization_details", "bonus_program_settings"]):
                 return jsonify({"status": "error", "message": "Клиент с таким номером телефона уже существует."}), 409
 
-            now = datetime.now(BISHKEK_TZ)
+            now = datetime.now(ALMATY_TZ)
             new_id = generate_unique_id(visitor_data_cache)
             new_client = {
                 'id': new_id, 'telegram_id': None, 'first_name': first_name, 'last_name': None,
@@ -1703,7 +1750,7 @@ def add_transaction():
         with _data_lock:
             if user_id not in visitor_data_cache: return jsonify({"status": "error", "message": "User not found"}), 404
             user = visitor_data_cache[user_id]
-            now = datetime.now(BISHKEK_TZ)
+            now = datetime.now(ALMATY_TZ)
             now_iso, now_str = now.isoformat(), now.strftime('%Y-%m-%d %H:%M:%S')
             if deduct_amount > user.get('bonuses', 0): return jsonify({"status": "error", "message": "Недостаточно бонусов для списания"}), 400
             if repay_debt_amount > user.get('debts', 0): return jsonify({"status": "error", "message": "Сумма погашения превышает текущий долг"}), 400
@@ -1731,20 +1778,37 @@ def add_invoice():
         user_id = str(data.get('user_id'))
         total_amount = float(data.get('total_amount', 0))
         items = data.get('items', [])
+        deduct_bonuses = float(data.get('deduct_bonuses', 0))
+
         if not user_id: return jsonify({"status": "error", "message": "User ID is required"}), 400
         if not items: return jsonify({"status": "error", "message": "Необходимо добавить товары в накладную."}), 400
         
         with _data_lock:
             if user_id not in visitor_data_cache: return jsonify({"status": "error", "message": "User not found"}), 404
             user = visitor_data_cache[user_id]
-            now = datetime.now(BISHKEK_TZ)
+            
+            if deduct_bonuses > user.get('bonuses', 0): return jsonify({"status": "error", "message": "Недостаточно бонусов для списания."}), 400
+            if deduct_bonuses > total_amount: return jsonify({"status": "error", "message": "Сумма списания не может превышать сумму накладной."}), 400
+
+            now = datetime.now(ALMATY_TZ)
             now_iso, now_str = now.isoformat(), now.strftime('%Y-%m-%d %H:%M:%S')
             invoice_id = str(uuid.uuid4().hex[:8]).upper()
+            
             processed_items = [{"product_name": item.get('product_name'), "quantity": float(item.get('quantity', 0)), "unit_price": float(item.get('unit_price', 0)), "item_total": round(float(item.get('quantity', 0)) * float(item.get('unit_price', 0)), 2)} for item in items]
-            new_invoice = {"invoice_id": invoice_id, "date": now_iso, "date_str": now_str, "total_amount": round(total_amount, 2), "items": processed_items}
+            
+            new_invoice = {
+                "invoice_id": invoice_id, "date": now_iso, "date_str": now_str, 
+                "total_amount": round(total_amount, 2), "items": processed_items,
+                "bonuses_deducted": round(deduct_bonuses, 2)
+            }
             if 'invoices' not in user: user['invoices'] = []
             user['invoices'].append(new_invoice)
             
+            if deduct_bonuses > 0:
+                user['bonuses'] = round(user.get('bonuses', 0) - deduct_bonuses, 2)
+                if 'history' not in user: user['history'] = []
+                user['history'].append({"type": "deduction", "amount": deduct_bonuses, "description": f"Оплата по накладной #{invoice_id}", "date": now_iso, "date_str": now_str})
+            
             bonus_settings = visitor_data_cache.get('bonus_program_settings', {})
             invoice_bonus_percentage = float(bonus_settings.get('invoice_bonus_percentage', 0))
             if invoice_bonus_percentage > 0 and total_amount > 0: