diff --git a/design_variants.html b/design_variants.html
new file mode 100644
index 0000000..ef3e0e8
--- /dev/null
+++ b/design_variants.html
@@ -0,0 +1,399 @@
+<!doctype html>
+<html lang="ru">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Варианты дизайна — FitPro Platform</title>
+  <style>
+    * { margin: 0; box-sizing: border-box; }
+    body { font-family: -apple-system, "Segoe UI", Roboto, sans-serif; }
+    .variant { padding: 40px 20px; border-bottom: 2px solid #e0e0e5; }
+    .variant h2 { margin-bottom: 20px; }
+    
+    /* VARIANT 1: Premium Dark */
+    .premium-dark {
+      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+      min-height: 100vh;
+      color: white;
+    }
+    .premium-dark .container { max-width: 1200px; margin: 0 auto; }
+    .premium-dark header {
+      text-align: center;
+      padding: 60px 20px;
+      background: url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=1920') center/cover;
+      position: relative;
+    }
+    .premium-dark header::before {
+      content: '';
+      position: absolute;
+      top: 0; left: 0; right: 0; bottom: 0;
+      background: rgba(0,0,0,0.7);
+    }
+    .premium-dark header h1 {
+      position: relative;
+      font-size: 48px;
+      font-weight: 700;
+      margin-bottom: 10px;
+      background: linear-gradient(90deg, #00d9ff, #00ff88);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    .premium-dark .nav {
+      display: flex;
+      gap: 15px;
+      justify-content: center;
+      flex-wrap: wrap;
+      padding: 30px 20px;
+    }
+    .premium-dark .nav button {
+      padding: 15px 30px;
+      border: 2px solid rgba(0,217,255,0.3);
+      background: rgba(0,217,255,0.1);
+      color: #00d9ff;
+      border-radius: 30px;
+      font-size: 16px;
+      cursor: pointer;
+      transition: 0.3s;
+      backdrop-filter: blur(10px);
+    }
+    .premium-dark .nav button:hover,
+    .premium-dark .nav button.active {
+      background: linear-gradient(135deg, #00d9ff, #00ff88);
+      color: #1a1a2e;
+      border-color: transparent;
+      transform: translateY(-3px);
+      box-shadow: 0 10px 30px rgba(0,217,255,0.4);
+    }
+    .premium-dark .card {
+      background: rgba(255,255,255,0.05);
+      backdrop-filter: blur(20px);
+      border: 1px solid rgba(255,255,255,0.1);
+      border-radius: 20px;
+      padding: 30px;
+      margin: 20px;
+    }
+    .premium-dark .card h3 {
+      color: #00ff88;
+      margin-bottom: 15px;
+      font-size: 24px;
+    }
+    .premium-dark .stat-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 20px;
+      margin-top: 30px;
+    }
+    .premium-dark .stat-card {
+      background: linear-gradient(135deg, rgba(0,217,255,0.2), rgba(0,255,136,0.2));
+      border-radius: 15px;
+      padding: 25px;
+      text-align: center;
+      border: 1px solid rgba(0,217,255,0.3);
+    }
+    .premium-dark .stat-card .value {
+      font-size: 42px;
+      font-weight: bold;
+      background: linear-gradient(90deg, #00d9ff, #00ff88);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    
+    /* VARIANT 2: Clean White */
+    .clean-white {
+      background: #f8f9fa;
+      min-height: 100vh;
+      color: #333;
+    }
+    .clean-white .container { max-width: 1200px; margin: 0 auto; }
+    .clean-white header {
+      background: white;
+      padding: 40px 20px;
+      box-shadow: 0 2px 20px rgba(0,0,0,0.08);
+      text-align: center;
+    }
+    .clean-white header h1 {
+      font-size: 42px;
+      font-weight: 600;
+      color: #2c3e50;
+      margin-bottom: 10px;
+    }
+    .clean-white header p {
+      color: #7f8c8d;
+      font-size: 18px;
+    }
+    .clean-white .nav {
+      display: flex;
+      gap: 10px;
+      justify-content: center;
+      flex-wrap: wrap;
+      padding: 30px 20px;
+    }
+    .clean-white .nav button {
+      padding: 12px 24px;
+      border: none;
+      background: white;
+      color: #7f8c8d;
+      border-radius: 12px;
+      font-size: 15px;
+      cursor: pointer;
+      transition: 0.3s;
+      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+    }
+    .clean-white .nav button:hover,
+    .clean-white .nav button.active {
+      background: linear-gradient(135deg, #667eea, #764ba2);
+      color: white;
+      transform: translateY(-2px);
+      box-shadow: 0 5px 20px rgba(102,126,234,0.4);
+    }
+    .clean-white .card {
+      background: white;
+      border-radius: 16px;
+      padding: 30px;
+      margin: 20px;
+      box-shadow: 0 4px 20px rgba(0,0,0,0.08);
+    }
+    .clean-white .card h3 {
+      color: #2c3e50;
+      margin-bottom: 15px;
+    }
+    .clean-white .exercise-card {
+      display: flex;
+      gap: 20px;
+      padding: 20px;
+      border: 1px solid #e0e0e5;
+      border-radius: 12px;
+      margin: 15px 0;
+      transition: 0.3s;
+    }
+    .clean-white .exercise-card:hover {
+      border-color: #667eea;
+      box-shadow: 0 4px 15px rgba(102,126,234,0.15);
+    }
+    .clean-white .exercise-card img {
+      width: 120px;
+      height: 120px;
+      object-fit: cover;
+      border-radius: 10px;
+    }
+    
+    /* VARIANT 3: Energy Orange */
+    .energy-orange {
+      background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);
+      min-height: 100vh;
+      color: white;
+    }
+    .energy-orange .container { max-width: 1200px; margin: 0 auto; }
+    .energy-orange header {
+      text-align: center;
+      padding: 60px 20px;
+    }
+    .energy-orange header h1 {
+      font-size: 48px;
+      font-weight: 800;
+      text-shadow: 0 4px 20px rgba(0,0,0,0.3);
+      margin-bottom: 10px;
+    }
+    .energy-orange .nav {
+      display: flex;
+      gap: 15px;
+      justify-content: center;
+      flex-wrap: wrap;
+      padding: 30px 20px;
+    }
+    .energy-orange .nav button {
+      padding: 15px 30px;
+      border: none;
+      background: rgba(255,255,255,0.2);
+      color: white;
+      border-radius: 25px;
+      font-size: 16px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: 0.3s;
+      backdrop-filter: blur(10px);
+    }
+    .energy-orange .nav button:hover,
+    .energy-orange .nav button.active {
+      background: white;
+      color: #ff6b6b;
+      transform: scale(1.05);
+      box-shadow: 0 10px 30px rgba(255,255,255,0.3);
+    }
+    .energy-orange .card {
+      background: rgba(255,255,255,0.15);
+      backdrop-filter: blur(20px);
+      border-radius: 20px;
+      padding: 30px;
+      margin: 20px;
+      border: 2px solid rgba(255,255,255,0.3);
+    }
+    .energy-orange .workout-item {
+      background: white;
+      color: #333;
+      border-radius: 15px;
+      padding: 20px;
+      margin: 15px 0;
+      display: flex;
+      align-items: center;
+      gap: 20px;
+    }
+    .energy-orange .workout-item .icon {
+      width: 60px;
+      height: 60px;
+      background: linear-gradient(135deg, #ff6b6b, #feca57);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 28px;
+    }
+    .energy-orange .progress-bar {
+      background: rgba(255,255,255,0.3);
+      border-radius: 10px;
+      height: 20px;
+      margin: 20px 0;
+      overflow: hidden;
+    }
+    .energy-orange .progress-fill {
+      background: linear-gradient(90deg, #fff, #feca57);
+      height: 100%;
+      border-radius: 10px;
+      transition: width 0.5s;
+    }
+    
+    .label {
+      background: #333;
+      color: white;
+      padding: 5px 15px;
+      border-radius: 20px;
+      font-size: 12px;
+      display: inline-block;
+      margin-bottom: 10px;
+    }
+  </style>
+</head>
+<body>
+  <!-- VARIANT 1 -->
+  <div class="variant premium-dark">
+    <div class="container">
+      <span class="label">ВАРИАНТ 1: Premium Dark</span>
+      <header>
+        <h1>💪 FitPro Platform</h1>
+        <p>Профессиональная система тренировок</p>
+      </header>
+      <nav class="nav">
+        <button class="active">📅 Сегодня</button>
+        <button>🎬 Упражнения</button>
+        <button>📆 Календарь</button>
+        <button>📊 Прогресс</button>
+        <button>🥗 Питание</button>
+      </nav>
+      <div class="card">
+        <h3>🔥 Тренировка дня</h3>
+        <p>Сегодня: Осанка + Пресс + Кардио</p>
+        <div class="stat-grid">
+          <div class="stat-card">
+            <div class="value">12</div>
+            <div>Тренировок</div>
+          </div>
+          <div class="stat-card">
+            <div class="value">63.5</div>
+            <div>Вес (кг)</div>
+          </div>
+          <div class="stat-card">
+            <div class="value">-1.5</div>
+            <div>Сброшено</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  <!-- VARIANT 2 -->
+  <div class="variant clean-white">
+    <div class="container">
+      <span class="label" style="background: #667eea;">ВАРИАНТ 2: Clean White</span>
+      <header>
+        <h1>FitPro Platform</h1>
+        <p>Твоя персональная программа трансформации</p>
+      </header>
+      <nav class="nav">
+        <button class="active">📅 Сегодня</button>
+        <button>🎬 Упражнения</button>
+        <button>📆 Календарь</button>
+        <button>📊 Прогресс</button>
+        <button>🥗 Питание</button>
+      </nav>
+      <div class="card">
+        <h3>📋 Программа на сегодня</h3>
+        <div class="exercise-card">
+          <img src="https://images.unsplash.com/photo-1517836357463-d25dfeac3438?w=400" alt="Workout">
+          <div>
+            <h4>Кошка-корова</h4>
+            <p>Гибкость спины, гиперлордоз</p>
+            <p style="color: #7f8c8d; font-size: 14px;">⏱ 2 мин • 10-12 повторений</p>
+          </div>
+        </div>
+        <div class="exercise-card">
+          <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=400" alt="Workout">
+          <div>
+            <h4>Планка</h4>
+            <p>Пресс, кор, осанка</p>
+            <p style="color: #7f8c8d; font-size: 14px;">⏱ 60 сек • 3 подхода</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  <!-- VARIANT 3 -->
+  <div class="variant energy-orange">
+    <div class="container">
+      <span class="label" style="background: #ff6b6b;">ВАРИАНТ 3: Energy Orange</span>
+      <header>
+        <h1>🔥 FitPro</h1>
+        <p>Зарядись энергией тренировки!</p>
+      </header>
+      <nav class="nav">
+        <button class="active">📅 Сегодня</button>
+        <button>🎬 Упражнения</button>
+        <button>📆 Календарь</button>
+        <button>📊 Прогресс</button>
+        <button>🥗 Питание</button>
+      </nav>
+      <div class="card">
+        <h3>⚡ Твой прогресс</h3>
+        <div class="progress-bar">
+          <div class="progress-fill" style="width: 35%;"></div>
+        </div>
+        <p>35% пути к цели (8 недель)</p>
+        <div class="workout-item">
+          <div class="icon">🏃</div>
+          <div>
+            <h4>Кардио тренировка</h4>
+            <p>Сжигание жира • 45 минут</p>
+          </div>
+        </div>
+        <div class="workout-item">
+          <div class="icon">🧘</div>
+          <div>
+            <h4>Растяжка</h4>
+            <p>Гибкость • 15 минут</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  <script>
+    // Интерактивность для демо
+    document.querySelectorAll('.nav button').forEach(btn => {
+      btn.addEventListener('click', function() {
+        this.parentElement.querySelectorAll('button').forEach(b => b.classList.remove('active'));
+        this.classList.add('active');
+      });
+    });
+  </script>
+</body>
+</html>
diff --git a/inbody_demo.html b/inbody_demo.html
new file mode 100644
index 0000000..cb00490
--- /dev/null
+++ b/inbody_demo.html
@@ -0,0 +1,413 @@
+<!doctype html>
+<html lang="ru">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>ИнБоди Калькулятор — Демо</title>
+  <style>
+    * { margin: 0; box-sizing: border-box; }
+    body {
+      font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      min-height: 100vh;
+      padding: 40px 20px;
+    }
+    .container { max-width: 1000px; margin: 0 auto; }
+    
+    h1 {
+      text-align: center;
+      color: white;
+      font-size: 36px;
+      margin-bottom: 10px;
+    }
+    .subtitle {
+      text-align: center;
+      color: rgba(255,255,255,0.9);
+      margin-bottom: 40px;
+    }
+    
+    .card {
+      background: white;
+      border-radius: 20px;
+      padding: 40px;
+      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+    }
+    
+    .form-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 15px;
+      margin-bottom: 30px;
+    }
+    .form-group {
+      display: flex;
+      flex-direction: column;
+    }
+    .form-group label {
+      font-size: 14px;
+      color: #666;
+      margin-bottom: 8px;
+      font-weight: 500;
+    }
+    .form-group input, .form-group select {
+      padding: 15px;
+      border: 2px solid #e0e0e5;
+      border-radius: 12px;
+      font-size: 16px;
+      transition: 0.3s;
+    }
+    .form-group input:focus, .form-group select:focus {
+      border-color: #667eea;
+      outline: none;
+      box-shadow: 0 0 0 4px rgba(102,126,234,0.1);
+    }
+    
+    .btn {
+      width: 100%;
+      padding: 18px;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: white;
+      border: none;
+      border-radius: 12px;
+      font-size: 18px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: 0.3s;
+      margin-bottom: 30px;
+    }
+    .btn:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 10px 30px rgba(102,126,234,0.4);
+    }
+    
+    .results-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+      gap: 20px;
+      margin-top: 30px;
+    }
+    .result-card {
+      background: linear-gradient(135deg, #f8f9fc 0%, #e9ecef 100%);
+      border-radius: 15px;
+      padding: 25px;
+      text-align: center;
+      transition: 0.3s;
+    }
+    .result-card:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+    }
+    .result-card .icon {
+      font-size: 42px;
+      margin-bottom: 10px;
+    }
+    .result-card .value {
+      font-size: 32px;
+      font-weight: bold;
+      color: #667eea;
+      margin: 10px 0;
+    }
+    .result-card .label {
+      color: #666;
+      font-size: 14px;
+      font-weight: 500;
+    }
+    .result-card .norma {
+      font-size: 12px;
+      color: #999;
+      margin-top: 8px;
+    }
+    .result-card.good .value { color: #00c853; }
+    .result-card.warning .value { color: #ff9800; }
+    .result-card.bad .value { color: #f44336; }
+    
+    .body-type-section {
+      background: #f8f9fc;
+      border-radius: 15px;
+      padding: 25px;
+      margin-top: 30px;
+    }
+    .body-type-section h3 {
+      color: #667eea;
+      margin-bottom: 20px;
+    }
+    .body-type-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: 15px;
+    }
+    .body-type-card {
+      background: white;
+      border-radius: 12px;
+      padding: 20px;
+      border-left: 4px solid #667eea;
+    }
+    .body-type-card h4 {
+      margin: 0 0 10px;
+      color: #333;
+    }
+    .body-type-card p {
+      font-size: 14px;
+      color: #666;
+      margin: 5px 0;
+      line-height: 1.6;
+    }
+    .body-type-card .my-type {
+      background: linear-gradient(135deg, #667eea, #764ba2);
+      color: white;
+      padding: 5px 12px;
+      border-radius: 20px;
+      font-size: 12px;
+      display: inline-block;
+      margin-top: 10px;
+    }
+    
+    .recommendations {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: white;
+      border-radius: 15px;
+      padding: 25px;
+      margin-top: 30px;
+    }
+    .recommendations h3 {
+      margin-top: 0;
+      margin-bottom: 20px;
+    }
+    .recommendations ul {
+      padding-left: 20px;
+      line-height: 2;
+    }
+    .recommendations li {
+      margin: 10px 0;
+    }
+    
+    .hidden { display: none; }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>📐 ИнБоди Калькулятор</h1>
+    <p class="subtitle">Профессиональный анализ состава тела</p>
+    
+    <div class="card">
+      <div class="form-grid">
+        <div class="form-group">
+          <label>⚖️ Вес (кг)</label>
+          <input type="number" id="weight" value="65" step="0.1">
+        </div>
+        <div class="form-group">
+          <label>📏 Рост (см)</label>
+          <input type="number" id="height" value="165">
+        </div>
+        <div class="form-group">
+          <label>🎂 Возраст (лет)</label>
+          <input type="number" id="age" value="37">
+        </div>
+        <div class="form-group">
+          <label>👤 Пол</label>
+          <select id="gender">
+            <option value="female">Женский</option>
+            <option value="male">Мужской</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label>🍐 Талия (см)</label>
+          <input type="number" id="waist" value="70">
+        </div>
+        <div class="form-group">
+          <label>📊 Бёдра (см)</label>
+          <input type="number" id="hips" value="95">
+        </div>
+        <div class="form-group">
+          <label>🦒 Шея (см)</label>
+          <input type="number" id="neck" value="32">
+        </div>
+      </div>
+      
+      <button class="btn" onclick="calculate()">🔍 Рассчитать состав тела</button>
+      
+      <!-- Результаты -->
+      <div id="results" class="results-grid hidden">
+        <div class="result-card" id="card-bmi">
+          <div class="icon">⚖️</div>
+          <div class="value" id="bmi">24.5</div>
+          <div class="label">ИМТ</div>
+          <div class="norma" id="bmi-text">Норма</div>
+        </div>
+        <div class="result-card" id="card-bodyfat">
+          <div class="icon">🥩</div>
+          <div class="value" id="bodyfat">28%</div>
+          <div class="label">% Жира</div>
+          <div class="norma" id="bodyfat-text">Норма</div>
+        </div>
+        <div class="result-card">
+          <div class="icon">💪</div>
+          <div class="value" id="muscle">42 кг</div>
+          <div class="label">Мышцы</div>
+          <div class="norma">Средний уровень</div>
+        </div>
+        <div class="result-card">
+          <div class="icon">🔥</div>
+          <div class="value" id="bmr">1450</div>
+          <div class="label">Калории (покой)</div>
+          <div class="norma">Без движения</div>
+        </div>
+        <div class="result-card">
+          <div class="icon">📊</div>
+          <div class="value" id="tdee">2030</div>
+          <div class="label">Калории (день)</div>
+          <div class="norma">Поддержание</div>
+        </div>
+        <div class="result-card">
+          <div class="icon">🎯</div>
+          <div class="value" id="target">1530</div>
+          <div class="label">Для похудения</div>
+          <div class="norma">Дефицит 20%</div>
+        </div>
+      </div>
+      
+      <!-- Тип телосложения -->
+      <div id="body-type" class="body-type-section hidden">
+        <h3>🍐 Твой тип телосложения</h3>
+        <div class="body-type-grid">
+          <div class="body-type-card">
+            <h4>🍎 Яблоко</h4>
+            <p>Жир откладывается на животе</p>
+            <p>Талия > Бёдер</p>
+            <p>Риск: диабет, сердце</p>
+          </div>
+          <div class="body-type-card">
+            <h4>🍐 Груша</h4>
+            <p>Жир на бёдрах и ягодицах</p>
+            <p>Бёдра > Талии</p>
+            <p>Более здоровый тип</p>
+          </div>
+          <div class="body-type-card" style="border-left-color: #00c853;">
+            <h4>⏳ Песочные часы</h4>
+            <p>Пропорциональное тело</p>
+            <p>Талия < Бёдер на 25 см</p>
+            <p>Идеальный баланс</p>
+            <span class="my-type">✨ Твой тип!</span>
+          </div>
+          <div class="body-type-card">
+            <h4>📏 Прямоугольник</h4>
+            <p>Равномерное распределение</p>
+            <p>Талия ≈ Бёдра</p>
+            <p>Спортивное телосложение</p>
+          </div>
+        </div>
+      </div>
+      
+      <!-- Рекомендации -->
+      <div id="recommendations" class="recommendations hidden">
+        <h3>📋 Персональные рекомендации</h3>
+        <ul>
+          <li><strong>Калории:</strong> 1530 ккал/день для потери 0.5 кг/неделю</li>
+          <li><strong>Белок:</strong> 98 г в день (1.5 г на кг веса)</li>
+          <li><strong>Вода:</strong> 2.2 литра в день</li>
+          <li><strong>Тренировки:</strong> 4-5 раз в неделю (силовые + кардио)</li>
+          <li><strong>Сон:</strong> 7-8 часов для восстановления</li>
+          <li><strong>Цель:</strong> 58 кг за 8 недель (реалистично!)</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  
+  <script>
+    function calculate() {
+      const weight = parseFloat(document.getElementById('weight').value);
+      const height = parseFloat(document.getElementById('height').value) / 100;
+      const age = parseInt(document.getElementById('age').value);
+      const gender = document.getElementById('gender').value;
+      const waist = parseFloat(document.getElementById('waist').value);
+      const hips = parseFloat(document.getElementById('hips').value);
+      const neck = parseFloat(document.getElementById('neck').value);
+      
+      // ИМТ
+      const bmi = (weight / (height * height)).toFixed(1);
+      document.getElementById('bmi').textContent = bmi;
+      
+      let bmiText = '';
+      let bmiClass = '';
+      if (bmi < 18.5) { bmiText = 'Недостаток'; bmiClass = 'warning'; }
+      else if (bmi < 25) { bmiText = 'Норма'; bmiClass = 'good'; }
+      else if (bmi < 30) { bmiText = 'Избыток'; bmiClass = 'warning'; }
+      else { bmiText = 'Ожирение'; bmiClass = 'bad'; }
+      
+      document.getElementById('bmi-text').textContent = bmiText;
+      document.getElementById('card-bmi').className = 'result-card ' + bmiClass;
+      
+      // % жира (формула ВМС США)
+      let bodyFat;
+      if (gender === 'female') {
+        bodyFat = 495 / (1.29579 - 0.35004 * Math.log10(waist + hips - neck) + 0.22100 * Math.log10(height * 100)) - 450;
+      } else {
+        bodyFat = 495 / (1.0324 - 0.19077 * Math.log10(waist - neck) + 0.15456 * Math.log10(height * 100)) - 450;
+      }
+      bodyFat = bodyFat.toFixed(1);
+      document.getElementById('bodyfat').textContent = bodyFat + '%';
+      
+      let bfText = '';
+      let bfClass = '';
+      const bfNormMin = gender === 'female' ? 21 : 8;
+      const bfNormMax = gender === 'female' ? 33 : 19;
+      if (bodyFat < bfNormMin) { bfText = 'Низкий'; bfClass = 'warning'; }
+      else if (bodyFat <= bfNormMax) { bfText = 'Норма'; bfClass = 'good'; }
+      else { bfText = 'Высокий'; bfClass = 'bad'; }
+      
+      document.getElementById('bodyfat-text').textContent = bfText;
+      document.getElementById('card-bodyfat').className = 'result-card ' + bfClass;
+      
+      // Мышечная масса
+      const muscle = (weight * (100 - bodyFat) / 100).toFixed(1);
+      document.getElementById('muscle').textContent = muscle + ' кг';
+      
+      // BMR (Миффлин-Сан Жеор)
+      let bmr;
+      if (gender === 'female') {
+        bmr = 10 * weight + 6.25 * (height * 100) - 5 * age - 161;
+      } else {
+        bmr = 10 * weight + 6.25 * (height * 100) - 5 * age + 5;
+      }
+      bmr = Math.round(bmr);
+      document.getElementById('bmr').textContent = bmr;
+      
+      // TDEE (средняя активность)
+      const tdee = Math.round(bmr * 1.4);
+      document.getElementById('tdee').textContent = tdee;
+      
+      // Цель для похудения
+      const target = Math.round(tdee * 0.75);
+      document.getElementById('target').textContent = target;
+      
+      // Показываем результаты
+      document.getElementById('results').classList.remove('hidden');
+      document.getElementById('body-type').classList.remove('hidden');
+      document.getElementById('recommendations').classList.remove('hidden');
+      
+      // Определяем тип телосложения
+      const whr = waist / hips;
+      let bodyType = '';
+      if (whr > 0.85) {
+        bodyType = 'apple'; // Яблоко
+      } else if (whr < 0.75) {
+        bodyType = 'pear'; // Груша
+      } else {
+        bodyType = 'hourglass'; // Песочные часы
+      }
+      
+      // Подсветка типа
+      document.querySelectorAll('.body-type-card .my-type').forEach(el => el.remove());
+      const types = { apple: 0, pear: 1, hourglass: 2, rectangle: 3 };
+      const cards = document.querySelectorAll('.body-type-card');
+      const myType = document.createElement('span');
+      myType.className = 'my-type';
+      myType.textContent = '✨ Твой тип!';
+      
+      if (bodyType === 'apple') cards[0].appendChild(myType);
+      else if (bodyType === 'pear') cards[1].appendChild(myType);
+      else if (bodyType === 'hourglass') cards[2].appendChild(myType);
+    }
+  </script>
+</body>
+</html>
diff --git a/index.html b/index.html
index 85c958c..4b7a530 100644
--- a/index.html
+++ b/index.html
@@ -3,324 +3,237 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Мои тренировки — Мадина</title>
+  <title>FitPro Platform — Профессиональная версия</title>
   <style>
     * { margin: 0; box-sizing: border-box; }
     body {
       font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
       min-height: 100vh;
-      color: #333;
+      color: white;
     }
-    .container { max-width: 1200px; margin: 0 auto; padding: 20px; }
+    .container { max-width: 1400px; margin: 0 auto; padding: 20px; }
+    
+    /* Header */
     header {
       text-align: center;
-      padding: 40px 20px;
-      color: white;
+      padding: 60px 20px;
+      background: linear-gradient(rgba(26,26,46,0.8), rgba(26,26,46,0.9)), 
+                  url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=1920') center/cover;
+      border-radius: 20px;
+      margin-bottom: 30px;
+      position: relative;
+      overflow: hidden;
     }
-    header h1 { font-size: clamp(28px, 5vw, 42px); margin-bottom: 10px; }
-    header p { font-size: 18px; opacity: 0.9; }
+    header::before {
+      content: '';
+      position: absolute;
+      top: 0; left: 0; right: 0; bottom: 0;
+      background: linear-gradient(135deg, rgba(0,217,255,0.1), rgba(0,255,136,0.1));
+    }
+    header h1 {
+      position: relative;
+      font-size: clamp(32px, 6vw, 56px);
+      font-weight: 800;
+      margin-bottom: 10px;
+      background: linear-gradient(90deg, #00d9ff, #00ff88);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    header p {
+      position: relative;
+      font-size: 18px;
+      color: rgba(255,255,255,0.8);
+    }
+    
+    /* Navigation */
     .nav {
       display: flex;
-      gap: 10px;
+      gap: 12px;
       justify-content: center;
       flex-wrap: wrap;
-      margin-bottom: 30px;
+      margin-bottom: 40px;
+      padding: 20px;
+      background: rgba(255,255,255,0.05);
+      backdrop-filter: blur(20px);
+      border-radius: 20px;
+      border: 1px solid rgba(255,255,255,0.1);
     }
     .nav button {
-      padding: 12px 24px;
-      border: none;
-      border-radius: 25px;
-      background: rgba(255,255,255,0.2);
-      color: white;
-      font-size: 16px;
+      padding: 14px 28px;
+      border: 2px solid rgba(0,217,255,0.3);
+      background: rgba(0,217,255,0.1);
+      color: #00d9ff;
+      border-radius: 30px;
+      font-size: 15px;
+      font-weight: 600;
       cursor: pointer;
-      transition: 0.3s;
+      transition: all 0.3s;
+      backdrop-filter: blur(10px);
     }
-    .nav button.active, .nav button:hover {
-      background: white;
-      color: #667eea;
+    .nav button:hover,
+    .nav button.active {
+      background: linear-gradient(135deg, #00d9ff, #00ff88);
+      color: #1a1a2e;
+      border-color: transparent;
+      transform: translateY(-3px);
+      box-shadow: 0 10px 30px rgba(0,217,255,0.4);
     }
+    
+    /* Sections */
     .section {
-      background: white;
+      background: rgba(255,255,255,0.05);
+      backdrop-filter: blur(20px);
+      border: 1px solid rgba(255,255,255,0.1);
       border-radius: 20px;
-      padding: 30px;
+      padding: 40px;
       margin-bottom: 30px;
-      box-shadow: 0 10px 40px rgba(0,0,0,0.1);
       display: none;
     }
     .section.active { display: block; }
-    h2 { color: #667eea; margin-bottom: 20px; font-size: 26px; }
-    h3 { color: #764ba2; margin: 20px 0 15px; font-size: 20px; }
     
-    /* Workout of the day */
-    .workout-card {
-      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-      border-radius: 15px;
-      padding: 25px;
-      margin-bottom: 20px;
+    h2 {
+      font-size: 32px;
+      margin-bottom: 10px;
+      background: linear-gradient(90deg, #00d9ff, #00ff88);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
     }
-    .workout-card h3 { margin-top: 0; color: #333; }
-    .exercise {
-      background: white;
-      border-radius: 12px;
-      padding: 20px;
-      margin: 15px 0;
-      box-shadow: 0 4px 15px rgba(0,0,0,0.08);
+    h3 {
+      font-size: 22px;
+      color: #00ff88;
+      margin: 30px 0 20px;
     }
-    .exercise h4 { color: #667eea; margin-bottom: 10px; }
-    .exercise-meta {
-      display: flex;
-      gap: 15px;
-      flex-wrap: wrap;
+    
+    /* Stats Grid */
+    .stats-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 20px;
+      margin: 30px 0;
+    }
+    .stat-card {
+      background: linear-gradient(135deg, rgba(0,217,255,0.15), rgba(0,255,136,0.15));
+      border: 1px solid rgba(0,217,255,0.3);
+      border-radius: 16px;
+      padding: 30px;
+      text-align: center;
+      transition: 0.3s;
+    }
+    .stat-card:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 15px 40px rgba(0,217,255,0.3);
+    }
+    .stat-card .icon { font-size: 40px; margin-bottom: 10px; }
+    .stat-card .value {
+      font-size: 42px;
+      font-weight: bold;
+      background: linear-gradient(90deg, #00d9ff, #00ff88);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
       margin: 10px 0;
-      font-size: 14px;
-      color: #666;
     }
-    .exercise-meta span {
-      background: #f0f0f5;
-      padding: 5px 12px;
-      border-radius: 15px;
-    }
-    .video-placeholder {
-      width: 100%;
-      aspect-ratio: 16/9;
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    .stat-card .label { color: rgba(255,255,255,0.7); font-size: 14px; }
+    
+    /* Buttons */
+    .btn {
+      padding: 16px 32px;
+      background: linear-gradient(135deg, #00d9ff, #00ff88);
+      color: #1a1a2e;
+      border: none;
       border-radius: 12px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: white;
-      font-size: 18px;
-      margin: 15px 0;
+      font-size: 16px;
+      font-weight: 600;
       cursor: pointer;
-      transition: transform 0.3s;
+      transition: 0.3s;
+      display: inline-block;
     }
-    .video-placeholder:hover { transform: scale(1.02); }
-    .video-placeholder::before {
-      content: "▶";
-      font-size: 48px;
-      margin-right: 15px;
+    .btn:hover {
+      transform: translateY(-3px);
+      box-shadow: 0 10px 30px rgba(0,217,255,0.4);
+    }
+    .btn-block { width: 100%; }
+    .btn-secondary {
+      background: rgba(255,255,255,0.1);
+      color: white;
+      border: 2px solid rgba(255,255,255,0.3);
     }
     
-    /* Exercise catalog */
+    /* Forms */
+    .form-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 15px;
+      margin: 20px 0;
+    }
+    .form-group input, .form-group select {
+      width: 100%;
+      padding: 15px;
+      background: rgba(255,255,255,0.08);
+      border: 2px solid rgba(255,255,255,0.2);
+      border-radius: 12px;
+      color: white;
+      font-size: 16px;
+    }
+    .form-group input:focus, .form-group select:focus {
+      border-color: #00d9ff;
+      outline: none;
+      box-shadow: 0 0 0 4px rgba(0,217,255,0.1);
+    }
+    .form-group input::placeholder { color: rgba(255,255,255,0.5); }
+    .form-group select option { background: #1a1a2e; color: white; }
+    
+    /* Exercise Cards */
     .exercise-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
       gap: 20px;
+      margin: 20px 0;
     }
     .exercise-card {
-      background: white;
-      border-radius: 15px;
+      background: rgba(255,255,255,0.08);
+      border: 1px solid rgba(255,255,255,0.15);
+      border-radius: 16px;
       overflow: hidden;
-      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
-      transition: transform 0.3s;
+      transition: 0.3s;
+    }
+    .exercise-card:hover {
+      border-color: #00d9ff;
+      transform: translateY(-5px);
+      box-shadow: 0 15px 40px rgba(0,217,255,0.2);
     }
-    .exercise-card:hover { transform: translateY(-5px); }
     .exercise-card .video {
       width: 100%;
       aspect-ratio: 16/9;
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      background: linear-gradient(135deg, #00d9ff, #00ff88);
       display: flex;
       align-items: center;
       justify-content: center;
-      color: white;
-      font-size: 36px;
+      color: #1a1a2e;
+      font-size: 48px;
       cursor: pointer;
     }
     .exercise-card .info { padding: 20px; }
-    .exercise-card .info h4 { color: #667eea; margin-bottom: 10px; }
-    .exercise-card .info p { color: #666; font-size: 14px; line-height: 1.6; }
-    .exercise-card .meta {
-      display: flex;
-      gap: 10px;
-      margin-top: 15px;
-      flex-wrap: wrap;
-    }
-    .exercise-card .meta span {
-      background: #f0f0f5;
-      padding: 5px 12px;
-      border-radius: 15px;
-      font-size: 12px;
-      color: #666;
-    }
+    .exercise-card h4 { color: #00ff88; margin-bottom: 10px; }
+    .exercise-card p { color: rgba(255,255,255,0.7); font-size: 14px; line-height: 1.6; }
     
-    /* Calendar */
-    .calendar-grid {
-      display: grid;
-      grid-template-columns: repeat(7, 1fr);
-      gap: 10px;
-    }
-    .calendar-day {
-      background: #f8f9fc;
-      border-radius: 10px;
-      padding: 15px 10px;
-      text-align: center;
-      min-height: 100px;
-      cursor: pointer;
-      transition: 0.3s;
-      border: 2px solid transparent;
-    }
-    .calendar-day:hover { border-color: #667eea; }
-    .calendar-day.today {
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      color: white;
-    }
-    .calendar-day.done {
-      background: #d4edda;
-      border-color: #28a745;
-    }
-    .calendar-day .day-num {
-      font-size: 20px;
-      font-weight: bold;
-      margin-bottom: 5px;
-    }
-    .calendar-day .workout-type {
-      font-size: 11px;
-      line-height: 1.4;
-    }
-    .calendar-header {
-      display: grid;
-      grid-template-columns: repeat(7, 1fr);
-      gap: 10px;
-      margin-bottom: 10px;
-    }
-    .calendar-header div {
-      text-align: center;
-      font-weight: bold;
-      color: #667eea;
-      padding: 10px;
-    }
-    
-    /* Tracker */
-    .tracker-form {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-      gap: 20px;
-      margin-bottom: 30px;
-    }
-    .tracker-form input {
-      padding: 15px;
-      border: 2px solid #e0e0e5;
-      border-radius: 12px;
-      font-size: 16px;
-    }
-    .tracker-form input:focus {
-      border-color: #667eea;
-      outline: none;
-    }
-    .btn {
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      color: white;
-      border: none;
-      padding: 15px 30px;
-      border-radius: 12px;
-      font-size: 16px;
-      cursor: pointer;
-      transition: 0.3s;
-    }
-    .btn:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(102,126,234,0.4); }
-    .btn-block { width: 100%; }
-    
-    .progress-stats {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-      gap: 20px;
-      margin-top: 30px;
-    }
-    .stat-card {
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      color: white;
-      padding: 25px;
-      border-radius: 15px;
-      text-align: center;
-    }
-    .stat-card .value { font-size: 36px; font-weight: bold; }
-    .stat-card .label { opacity: 0.9; margin-top: 5px; }
-    
-    .week-selector {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 20px;
-    }
-    .week-selector button {
-      background: #667eea;
-      color: white;
-      border: none;
-      padding: 10px 20px;
-      border-radius: 8px;
-      cursor: pointer;
-    }
-    
-    .category-filter {
-      display: flex;
-      gap: 10px;
-      flex-wrap: wrap;
-      margin-bottom: 20px;
-    }
-    .category-filter button {
-      padding: 8px 16px;
-      border: 2px solid #667eea;
-      background: white;
-      color: #667eea;
-      border-radius: 20px;
-      cursor: pointer;
-    }
-    .category-filter button.active {
-      background: #667eea;
-      color: white;
-    }
-    
-    .modal {
-      display: none;
-      position: fixed;
-      top: 0; left: 0;
-      width: 100%; height: 100%;
-      background: rgba(0,0,0,0.8);
-      z-index: 1000;
-      align-items: center;
-      justify-content: center;
-    }
-    .modal.active { display: flex; }
-    .modal-content {
-      background: white;
-      border-radius: 20px;
-      padding: 30px;
-      max-width: 800px;
-      width: 90%;
-      max-height: 90vh;
-      overflow-y: auto;
-    }
-    .modal-close {
-      float: right;
-      font-size: 28px;
-      cursor: pointer;
-      color: #666;
-    }
-    
-    .goal-info {
-      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-      border-radius: 15px;
-      padding: 20px;
-      margin-bottom: 20px;
-    }
-    .goal-info p { margin: 5px 0; }
-    
-    /* Музыкальный плеер */
+    /* Music Player */
     .music-player {
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      border-radius: 15px;
-      padding: 20px;
-      margin-bottom: 20px;
-      color: white;
+      background: linear-gradient(135deg, rgba(0,217,255,0.2), rgba(0,255,136,0.2));
+      border: 2px solid rgba(0,217,255,0.3);
+      border-radius: 16px;
+      padding: 25px;
+      margin: 20px 0;
     }
-    .music-player h3 { margin: 0 0 15px; font-size: 18px; }
     .player-controls {
       display: flex;
       align-items: center;
       gap: 15px;
       flex-wrap: wrap;
+      margin: 15px 0;
     }
     .player-btn {
       width: 50px;
@@ -328,7 +241,7 @@
       border-radius: 50%;
       border: none;
       background: white;
-      color: #667eea;
+      color: #00d9ff;
       font-size: 20px;
       cursor: pointer;
       transition: 0.3s;
@@ -345,731 +258,348 @@
       padding: 12px;
       border-radius: 10px;
       border: none;
-      font-size: 14px;
       background: rgba(255,255,255,0.9);
-      color: #333;
+      color: #1a1a2e;
+      font-size: 14px;
     }
     .now-playing {
       margin-top: 15px;
       font-size: 14px;
-      opacity: 0.9;
+      color: rgba(255,255,255,0.9);
     }
-    .volume-control {
+    
+    /* Progress Bar */
+    .progress-bar {
+      background: rgba(255,255,255,0.1);
+      border-radius: 10px;
+      height: 24px;
+      margin: 20px 0;
+      overflow: hidden;
+    }
+    .progress-fill {
+      background: linear-gradient(90deg, #00d9ff, #00ff88);
+      height: 100%;
+      border-radius: 10px;
+      transition: width 0.5s;
       display: flex;
       align-items: center;
-      gap: 10px;
-      margin-top: 10px;
-    }
-    .volume-control input {
-      flex: 1;
-      height: 6px;
-      -webkit-appearance: none;
-      background: rgba(255,255,255,0.3);
-      border-radius: 3px;
-    }
-    .volume-control input::-webkit-slider-thumb {
-      -webkit-appearance: none;
-      width: 18px;
-      height: 18px;
-      border-radius: 50%;
-      background: white;
-      cursor: pointer;
-    }
-    .equalizer {
-      display: flex;
-      gap: 3px;
-      align-items: flex-end;
-      height: 20px;
-      margin-left: auto;
-    }
-    .equalizer span {
-      width: 4px;
-      background: rgba(255,255,255,0.7);
-      border-radius: 2px;
-      animation: equalize 0.5s ease-in-out infinite alternate;
-    }
-    .equalizer span:nth-child(2) { animation-delay: 0.1s; }
-    .equalizer span:nth-child(3) { animation-delay: 0.2s; }
-    .equalizer span:nth-child(4) { animation-delay: 0.3s; }
-    @keyframes equalize {
-      from { height: 5px; }
-      to { height: 20px; }
-    }
-    .equalizer.off span { animation: none; height: 5px; }
-    
-    /* Моя музыка */
-    .my-music {
-      margin-top: 20px;
-      background: rgba(255,255,255,0.1);
-      border-radius: 12px;
-      padding: 20px;
-    }
-    .my-music h4 { margin: 0 0 15px; font-size: 16px; }
-    .add-music-form {
-      display: flex;
-      gap: 10px;
-      margin-bottom: 15px;
-      flex-wrap: wrap;
-    }
-    .add-music-form input {
-      flex: 1;
-      min-width: 200px;
-      padding: 12px;
-      border-radius: 8px;
-      border: none;
+      justify-content: flex-end;
+      padding-right: 15px;
+      color: #1a1a2e;
+      font-weight: bold;
       font-size: 14px;
     }
-    .add-music-form button {
-      padding: 12px 24px;
-      background: white;
-      color: #667eea;
-      border: none;
-      border-radius: 8px;
+    
+    /* Calendar */
+    .calendar-grid {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      gap: 10px;
+      margin: 20px 0;
+    }
+    .calendar-day {
+      background: rgba(255,255,255,0.08);
+      border-radius: 12px;
+      padding: 15px 10px;
+      text-align: center;
+      min-height: 100px;
       cursor: pointer;
+      transition: 0.3s;
+      border: 2px solid transparent;
+    }
+    .calendar-day:hover { border-color: #00d9ff; }
+    .calendar-day.today {
+      background: linear-gradient(135deg, #00d9ff, #00ff88);
+      color: #1a1a2e;
+    }
+    .calendar-day.done {
+      background: rgba(0,255,136,0.3);
+      border-color: #00ff88;
+    }
+    .calendar-day .day-num {
+      font-size: 20px;
       font-weight: bold;
+      margin-bottom: 5px;
     }
-    .my-playlist {
-      max-height: 300px;
-      overflow-y: auto;
+    .calendar-day .workout-type {
+      font-size: 11px;
+      line-height: 1.4;
     }
-    .playlist-item {
+    
+    /* Habits */
+    .habit-item {
+      background: rgba(255,255,255,0.08);
+      border: 1px solid rgba(255,255,255,0.15);
+      border-radius: 12px;
+      padding: 15px;
+      margin: 10px 0;
       display: flex;
       align-items: center;
-      gap: 10px;
-      padding: 10px;
-      background: rgba(255,255,255,0.1);
-      border-radius: 8px;
-      margin: 8px 0;
+      gap: 15px;
       cursor: pointer;
-      transition: 0.2s;
+      transition: 0.3s;
     }
-    .playlist-item:hover { background: rgba(255,255,255,0.2); }
-    .playlist-item.active { background: rgba(255,255,255,0.3); }
-    .playlist-item .remove {
-      margin-left: auto;
-      opacity: 0.7;
+    .habit-item:hover {
+      border-color: #00ff88;
+      background: rgba(0,255,136,0.1);
+    }
+    .habit-item.done {
+      background: linear-gradient(135deg, rgba(0,255,136,0.2), rgba(0,217,255,0.2));
+      border-color: #00ff88;
+    }
+    .habit-item input[type="checkbox"] {
+      width: 24px;
+      height: 24px;
       cursor: pointer;
-      font-size: 18px;
     }
-    .playlist-item .remove:hover { opacity: 1; }
-    .music-type {
-      font-size: 12px;
-      padding: 3px 8px;
-      border-radius: 4px;
-      background: rgba(255,255,255,0.2);
+    .habit-item .icon { font-size: 28px; }
+    .habit-item .name { flex: 1; font-size: 16px; }
+    
+    /* Modal */
+    .modal {
+      display: none;
+      position: fixed;
+      top: 0; left: 0;
+      width: 100%; height: 100%;
+      background: rgba(0,0,0,0.9);
+      z-index: 1000;
+      align-items: center;
+      justify-content: center;
+    }
+    .modal.active { display: flex; }
+    .modal-content {
+      background: #1a1a2e;
+      border: 2px solid #00d9ff;
+      border-radius: 20px;
+      padding: 40px;
+      max-width: 900px;
+      width: 90%;
+      max-height: 90vh;
+      overflow-y: auto;
+    }
+    .modal-close {
+      float: right;
+      font-size: 32px;
+      cursor: pointer;
+      color: #00d9ff;
+    }
+    
+    /* Responsive */
+    @media (max-width: 768px) {
+      .section { padding: 25px; }
+      .stats-grid { grid-template-columns: repeat(2, 1fr); }
+      .calendar-grid { grid-template-columns: repeat(7, 1fr); gap: 5px; }
+      .calendar-day { min-height: 70px; padding: 10px 5px; }
     }
   </style>
 </head>
 <body>
   <div class="container">
     <header>
-      <h1>💪 Мои тренировки</h1>
-      <p>Персональная программа на 8 недель</p>
+      <h1>💪 FitPro Platform</h1>
+      <p>Профессиональная система трансформации тела</p>
     </header>
     
     <nav class="nav">
       <button class="active" onclick="showSection('today')">📅 Сегодня</button>
-      <button onclick="showSection('catalog')">🎬 Каталог упражнений</button>
+      <button onclick="showSection('catalog')">🎬 Упражнения</button>
       <button onclick="showSection('calendar')">📆 Календарь</button>
-      <button onclick="showSection('tracker')">📊 Трекер прогресса</button>
+      <button onclick="showSection('tracker')">📊 Прогресс</button>
       <button onclick="showSection('nutrition')">🥗 Питание</button>
       <button onclick="showSection('habits')">✨ Привычки</button>
+      <button onclick="showSection('inbody')">📐 ИнБоди</button>
     </nav>
     
     <!-- СЕКЦИЯ: СЕГОДНЯ -->
     <div id="today" class="section active">
-      <h2>Тренировка на сегодня</h2>
+      <h2>🔥 Тренировка на сегодня</h2>
       
       <!-- Музыкальный плеер -->
       <div class="music-player">
-        <h3>🎵 Мотивационная музыка</h3>
+        <h3 style="margin-top:0; color: #00ff88;">🎵 Мотивационная музыка</h3>
         <div class="player-controls">
           <button class="player-btn" onclick="prevTrack()">⏮</button>
           <button class="player-btn big" onclick="togglePlay()" id="play-btn">▶</button>
           <button class="player-btn" onclick="nextTrack()">⏭</button>
           <select class="playlist-select" id="playlist-select" onchange="changePlaylist()">
-            <option value="workout">💪 Для тренировки (энергичная)</option>
-            <option value="cardio">🏃 Для кардио (быстрая)</option>
-            <option value="yoga">🧘 Для растяжки (спокойная)</option>
-            <option value="motivation">🔥 Мотивация (речь + музыка)</option>
+            <option value="workout">💪 Для тренировки</option>
+            <option value="cardio">🏃 Кардио</option>
+            <option value="hits2000">🎤 Хиты 2000-х</option>
+            <option value="taylor">🎵 Taylor Swift</option>
+            <option value="brunomars">🎤 Bruno Mars</option>
+            <option value="eminem">🎤 Eminem</option>
+            <option value="kazakh">🇰🇿 Казахские</option>
+            <option value="russian">🇷🇺 Русские</option>
+            <option value="yoga">🧘 Релакс</option>
+            <option value="motivation">🔥 Мотивация</option>
+            <option value="my">🎵 Моя музыка</option>
           </select>
-          <div class="equalizer off" id="equalizer">
-            <span></span><span></span><span></span><span></span>
-          </div>
-        </div>
-        <div class="volume-control">
-          <span>🔈</span>
-          <input type="range" min="0" max="100" value="70" oninput="setVolume(this.value)">
-          <span>🔊</span>
         </div>
         <div class="now-playing" id="now-playing">Выберите плейлист и нажмите ▶</div>
-        
-        <!-- Моя музыка -->
-        <div class="my-music">
-          <h4>🎵 Моя музыка</h4>
-          <div class="add-music-form">
-            <input type="text" id="music-url" placeholder="YouTube ссылка (https://youtube.com/watch?v=...)">
-            <input type="text" id="music-name" placeholder="Название песни/аудиокниги">
-            <select id="music-type" style="padding:12px; border-radius:8px; border:none;">
-              <option value="song">Песня</option>
-              <option value="audiobook">Аудиокнига</option>
-              <option value="motivation">Мотивация</option>
-            </select>
-            <button onclick="addMyMusic()">+ Добавить</button>
-          </div>
-          <div class="my-playlist" id="my-playlist"></div>
+      </div>
+      
+      <div class="stats-grid">
+        <div class="stat-card">
+          <div class="icon">🎯</div>
+          <div class="value">День 1</div>
+          <div class="label">Тренировка</div>
+        </div>
+        <div class="stat-card">
+          <div class="icon">⏱️</div>
+          <div class="value">45 мин</div>
+          <div class="label">Длительность</div>
+        </div>
+        <div class="stat-card">
+          <div class="icon">🔥</div>
+          <div class="value">350</div>
+          <div class="label">Ккал сожжётся</div>
+        </div>
+        <div class="stat-card">
+          <div class="icon">💪</div>
+          <div class="value">Осанка + Пресс</div>
+          <div class="label">Фокус</div>
         </div>
       </div>
       
-      <div class="goal-info">
-        <p><strong>Цель:</strong> Похудение, осанка, укрепление рук</p>
-        <p><strong>Длительность:</strong> 45-60 минут</p>
-        <p><strong>Фокус:</strong> <span id="today-focus">Пресс и осанка</span></p>
-      </div>
-      <div id="today-workout"></div>
+      <div class="exercise-grid" id="today-exercises"></div>
+      
       <button class="btn btn-block" onclick="markTodayDone()">✅ Отметить тренировку выполненной</button>
     </div>
     
-    <!-- СЕКЦИЯ: КАТАЛОГ -->
+    <!-- СЕКЦИЯ: УПРАЖНЕНИЯ -->
     <div id="catalog" class="section">
-      <h2>Каталог упражнений с видео</h2>
-      <div class="category-filter">
-        <button class="active" onclick="filterCatalog('all')">Все</button>
-        <button onclick="filterCatalog('posture')">Осанка и спина</button>
-        <button onclick="filterCatalog('abs')">Живот и бока</button>
-        <button onclick="filterCatalog('arms')">Руки</button>
-        <button onclick="filterCatalog('legs')">Ноги и ягодицы</button>
-        <button onclick="filterCatalog('cardio')">Кардио</button>
-      </div>
-      <div class="exercise-grid" id="exercise-grid"></div>
+      <h2>🎬 Каталог упражнений</h2>
+      <div class="exercise-grid" id="exercise-catalog"></div>
     </div>
     
     <!-- СЕКЦИЯ: КАЛЕНДАРЬ -->
     <div id="calendar" class="section">
-      <h2>Календарь тренировок на 8 недель</h2>
-      <div class="week-selector">
-        <button onclick="changeWeek(-1)">← Назад</button>
-        <span id="week-label">Неделя 1</span>
-        <button onclick="changeWeek(1)">Вперёд →</button>
-      </div>
-      <div class="calendar-header">
-        <div>Пн</div><div>Вт</div><div>Ср</div><div>Чт</div><div>Пт</div><div>Сб</div><div>Вс</div>
+      <h2>📆 Календарь на 8 недель</h2>
+      <div class="progress-bar">
+        <div class="progress-fill" id="week-progress" style="width: 12%;">Неделя 1</div>
       </div>
       <div class="calendar-grid" id="calendar-grid"></div>
     </div>
     
-    <!-- СЕКЦИЯ: ТРЕКЕР -->
+    <!-- СЕКЦИЯ: ПРОГРЕСС -->
     <div id="tracker" class="section">
-      <h2>Трекер прогресса</h2>
-      <div class="tracker-form">
-        <input type="number" id="weight" placeholder="Вес (кг)" step="0.1">
-        <input type="number" id="waist" placeholder="Талия (см)">
-        <input type="number" id="hips" placeholder="Бёдра (см)">
-        <input type="number" id="arms" placeholder="Руки (см)">
-        <button class="btn" onclick="addProgress()">Записать</button>
-      </div>
-      <div class="progress-stats" id="progress-stats"></div>
-      
-      <!-- График веса -->
-      <div style="margin-top: 30px; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); border-radius: 15px; padding: 25px;">
-        <h3>📈 График веса</h3>
-        <p style="margin-bottom: 15px; color: #666;">Цель: <strong>58 кг</strong> через 8 недель</p>
-        <canvas id="weight-chart" height="80" style="width: 100%; background: white; border-radius: 10px;"></canvas>
-        <div style="display: flex; justify-content: space-between; margin-top: 10px; font-size: 12px; color: #666;">
-          <span>Неделя 1</span>
-          <span>Неделя 4</span>
-          <span>Неделя 8</span>
-        </div>
-      </div>
-      
-      <div id="progress-history" style="margin-top: 30px;"></div>
-    </div>
-    
-    <!-- СЕКЦИЯ: ПРИВЫЧКИ -->
-    <div id="habits" class="section">
-      <h2>✨ Полезные привычки для похудения</h2>
-      <p style="margin-bottom: 20px; color: #666;">Отмечай галочкой каждый день, когда выполнил привычку. Цель — 21 день подряд!</p>
-      
-      <div id="habits-list"></div>
-      
-      <div class="progress-stats" style="margin-top: 30px;">
-        <div class="stat-card" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
-          <div class="value" id="habits-streak">0</div>
-          <div class="label">Дней подряд</div>
-        </div>
-        <div class="stat-card" style="background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);">
-          <div class="value" id="habits-total">0</div>
-          <div class="label">Всего выполнено</div>
-        </div>
-        <div class="stat-card" style="background: linear-gradient(135deg, #a8ff78 0%, #78ffd6 100%);">
-          <div class="value" id="habits-percent">0%</div>
-          <div class="label">Успех сегодня</div>
-        </div>
+      <h2>📊 Трекер прогресса</h2>
+      <div class="form-grid">
+        <div class="form-group"><input type="number" id="weight" placeholder="Вес (кг)" step="0.1"></div>
+        <div class="form-group"><input type="number" id="waist" placeholder="Талия (см)"></div>
+        <div class="form-group"><input type="number" id="hips" placeholder="Бёдра (см)"></div>
+        <div class="form-group"><input type="number" id="arms" placeholder="Руки (см)"></div>
+        <div class="form-group"><button class="btn btn-block" onclick="addProgress()">Записать</button></div>
       </div>
+      <div class="stats-grid" id="progress-stats"></div>
+      <div id="progress-history"></div>
     </div>
     
     <!-- СЕКЦИЯ: ПИТАНИЕ -->
     <div id="nutrition" class="section">
-      <h2>🥗 Питание для похудения</h2>
-      
-      <div class="goal-info" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
-        <h3 style="margin-top: 0; color: #333;">Твоя цель</h3>
-        <p><strong>Стартовый вес:</strong> 65 кг</p>
-        <p><strong>Цель за 2 месяца:</strong> 58-59 кг (-6-7 кг)</p>
-        <p><strong>Калорий в день:</strong> 1400-1500 ккал</p>
-        <p><strong>Воды в день:</strong> 2-2.5 литра</p>
-      </div>
-      
-      <h3>📋 Рекомендации по питанию</h3>
-      <div class="exercise-grid" style="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));">
-        <div class="exercise-card">
-          <div class="info">
-            <h4>🍳 Завтрак (7:00-9:00)</h4>
-            <p>Омлет из 2 яиц с овощами + кусочек цельнозернового хлеба</p>
-            <p>Или: овсянка на воде с ягодами + 1 яйцо</p>
-            <div class="meta"><span>~350 ккал</span></div>
-          </div>
+      <h2>🥗 Питание</h2>
+      <div class="stats-grid">
+        <div class="stat-card">
+          <div class="icon">🎯</div>
+          <div class="value">1530</div>
+          <div class="label">Ккал в день</div>
         </div>
-        <div class="exercise-card">
-          <div class="info">
-            <h4>🥗 Перекус (11:00)</h4>
-            <p>Яблоко/груша + 10 орешков (миндаль/грецкий)</p>
-            <p>Или: натуральный йогурт без сахара</p>
-            <div class="meta"><span>~150 ккал</span></div>
-          </div>
+        <div class="stat-card">
+          <div class="icon">💧</div>
+          <div class="value" id="water-count">0/8</div>
+          <div class="label">Стаканов воды</div>
         </div>
-        <div class="exercise-card">
-          <div class="info">
-            <h4>🍲 Обед (13:00-14:00)</h4>
-            <p>Куриная грудка/рыба (150г) + гречка/рис (100г) + салат</p>
-            <p>Или: суп на овощном бульоне + кусочек мяса</p>
-            <div class="meta"><span>~450 ккал</span></div>
-          </div>
-        </div>
-        <div class="exercise-card">
-          <div class="info">
-            <h4>🥛 Перекус (16:00)</h4>
-            <p>Творог (100г) + ложка мёда</p>
-            <p>Или: кефир + 1 хлебец</p>
-            <div class="meta"><span>~150 ккал</span></div>
-          </div>
-        </div>
-        <div class="exercise-card">
-          <div class="info">
-            <h4>🐟 Ужин (18:00-19:00)</h4>
-            <p>Рыба/курица (120г) + тушёные овощи</p>
-            <p>Или: салат с тунцом и яйцом</p>
-            <div class="meta"><span>~300 ккал</span></div>
-          </div>
-        </div>
-        <div class="exercise-card">
-          <div class="info">
-            <h4>⚠️ Что исключить</h4>
-            <p>❌ Сахар и сладости</p>
-            <p>❌ Белый хлеб и выпечку</p>
-            <p>❌ Газировку и пакетированные соки</p>
-            <p>❌ Фастфуд и майонез</p>
-            <div class="meta"><span>Экономия ~500 ккал/день</span></div>
-          </div>
+        <div class="stat-card">
+          <div class="icon">🥩</div>
+          <div class="value">98 г</div>
+          <div class="label">Белок</div>
         </div>
       </div>
-      
-      <h3 style="margin-top: 30px;">💧 Трекер воды</h3>
-      <div style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); border-radius: 15px; padding: 25px; margin-top: 20px;">
-        <p style="margin-bottom: 15px;">Выпито сегодня: <strong id="water-count">0</strong> из 8 стаканов</p>
-        <div style="display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 15px;" id="water-glasses"></div>
-        <button class="btn" onclick="addWater()">💧 Выпить стакан</button>
-        <button class="btn" onclick="resetWater()" style="background: #999; margin-left: 10px;">Сбросить</button>
-      </div>
-      
-      <h3 style="margin-top: 30px;">📊 Калькулятор калорий</h3>
-      <div style="background: #f8f9fc; border-radius: 15px; padding: 25px; margin-top: 20px;">
-        <p>Рассчитай калорийность продуктов, которые ешь:</p>
-        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 15px;">
-          <input type="text" id="product-name" placeholder="Продукт (например: яблоко)" style="padding: 12px; border: 2px solid #e0e0e5; border-radius: 10px;">
-          <input type="number" id="product-grams" placeholder="Вес (грамм)" style="padding: 12px; border: 2px solid #e0e0e5; border-radius: 10px;">
+      <button class="btn" onclick="addWater()">💧 + Стакан воды</button>
+    </div>
+    
+    <!-- СЕКЦИЯ: ПРИВЫЧКИ -->
+    <div id="habits" class="section">
+      <h2>✨ Полезные привычки</h2>
+      <div id="habits-list"></div>
+      <div class="stats-grid" style="margin-top: 30px;">
+        <div class="stat-card">
+          <div class="icon">🔥</div>
+          <div class="value" id="habits-streak">0</div>
+          <div class="label">Дней подряд</div>
         </div>
-        <button class="btn" onclick="calculateCalories()" style="margin-top: 15px;">Рассчитать</button>
-        <div id="calories-result" style="margin-top: 15px; font-size: 18px; font-weight: bold; color: #667eea;"></div>
-      </div>
-      
-      <div class="progress-stats" style="margin-top: 30px;">
-        <div class="stat-card" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
-          <div class="value" id="total-water">0</div>
-          <div class="label">Стаканов всего</div>
-        </div>
-        <div class="stat-card" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
-          <div class="value" id="days-tracked">0</div>
-          <div class="label">Дней отслеживания</div>
-        </div>
-        <div class="stat-card" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
-          <div class="value" id="avg-weight">65</div>
-          <div class="label">Средний вес</div>
+        <div class="stat-card">
+          <div class="icon">✅</div>
+          <div class="value" id="habits-total">0</div>
+          <div class="label">Всего выполнено</div>
         </div>
       </div>
     </div>
+    
+    <!-- СЕКЦИЯ: ИНБОДИ -->
+    <div id="inbody" class="section">
+      <h2>📐 ИнБоди — Анализ тела</h2>
+      <div class="form-grid">
+        <div class="form-group"><input type="number" id="inbody-weight" placeholder="Вес (кг)" value="65"></div>
+        <div class="form-group"><input type="number" id="inbody-height" placeholder="Рост (см)" value="165"></div>
+        <div class="form-group"><input type="number" id="inbody-age" placeholder="Возраст" value="37"></div>
+        <div class="form-group">
+          <select id="inbody-gender">
+            <option value="female">Женский</option>
+            <option value="male">Мужской</option>
+          </select>
+        </div>
+        <div class="form-group"><input type="number" id="inbody-waist" placeholder="Талия (см)" value="70"></div>
+        <div class="form-group"><input type="number" id="inbody-hips" placeholder="Бёдра (см)" value="95"></div>
+        <div class="form-group"><input type="number" id="inbody-neck" placeholder="Шея (см)" value="32"></div>
+        <div class="form-group"><button class="btn btn-block" onclick="calculateInBody()">🔍 Рассчитать</button></div>
+      </div>
+      <div class="stats-grid" id="inbody-results" style="display: none;"></div>
+    </div>
   </div>
   
   <!-- Модальное окно для видео -->
   <div class="modal" id="video-modal">
     <div class="modal-content">
       <span class="modal-close" onclick="closeModal()">&times;</span>
-      <h3 id="modal-title"></h3>
-      <div id="modal-video"></div>
-      <p id="modal-desc" style="margin-top: 20px; line-height: 1.6;"></p>
+      <h3 id="modal-title" style="color: #00ff88;"></h3>
+      <div id="modal-video" style="margin: 20px 0;"></div>
+      <p id="modal-desc" style="color: rgba(255,255,255,0.8); line-height: 1.6;"></p>
     </div>
   </div>
 
   <script>
-    // === МУЗЫКАЛЬНЫЙ ПЛЕЕР ===
-    const playlists = {
-      workout: [
-        { name: "Eye of the Tiger - Survivor", url: "https://www.youtube.com/embed/btPJPFnesV4?autoplay=1&loop=1&playlist=btPJPFnesV4" },
-        { name: "Stronger - Kanye West", url: "https://www.youtube.com/embed/PsO6ZnU8G6g?autoplay=1&loop=1&playlist=PsO6ZnU8G6g" },
-        { name: "Lose Yourself - Eminem", url: "https://www.youtube.com/embed/_Yhyp-_hX2s?autoplay=1&loop=1&playlist=_Yhyp-_hX2s" },
-        { name: "Titanium - David Guetta", url: "https://www.youtube.com/embed/JRfuAukYTKg?autoplay=1&loop=1&playlist=JRfuAukYTKg" },
-        { name: "Can't Hold Us - Macklemore", url: "https://www.youtube.com/embed/2zNSgSzhBfM?autoplay=1&loop=1&playlist=2zNSgSzhBfM" }
-      ],
-      cardio: [
-        { name: "Uptown Funk - Mark Ronson", url: "https://www.youtube.com/embed/OPf0YbXqDm0?autoplay=1&loop=1&playlist=OPf0YbXqDm0" },
-        { name: "Shake It Off - Taylor Swift", url: "https://www.youtube.com/embed/nfWlot6h_JM?autoplay=1&loop=1&playlist=nfWlot6h_JM" },
-        { name: "Happy - Pharrell Williams", url: "https://www.youtube.com/embed/ZbZSe6N_BXs?autoplay=1&loop=1&playlist=ZbZSe6N_BXs" },
-        { name: "24K Magic - Bruno Mars", url: "https://www.youtube.com/embed/UqyT8IEBkvY?autoplay=1&loop=1&playlist=UqyT8IEBkvY" }
-      ],
-      yoga: [
-        { name: "Weightless - Marconi Union", url: "https://www.youtube.com/embed/UfcAV6ZK8hE?autoplay=1&loop=1&playlist=UfcAV6ZK8hE" },
-        { name: "River Flows in You - Yiruma", url: "https://www.youtube.com/embed/7maJOI3QMu0?autoplay=1&loop=1&playlist=7maJOI3QMu0" },
-        { name: "Meditation Music - Relaxing Piano", url: "https://www.youtube.com/embed/1ZYbU82GVz4?autoplay=1&loop=1&playlist=1ZYbU82GVz4" },
-        { name: "Tibetan Bowls - Healing", url: "https://www.youtube.com/embed/47G2BgXSC74?autoplay=1&loop=1&playlist=47G2BgXSC74" }
-      ],
-      motivation: [
-        { name: "Motivational Speech - Believe", url: "https://www.youtube.com/embed/rHY3HCxJF20?autoplay=1&loop=1&playlist=rHY3HCxJF20" },
-        { name: "Never Give Up - Motivation", url: "https://www.youtube.com/embed/tvnxMyrWb1E?autoplay=1&loop=1&playlist=tvnxMyrWb1E" },
-        { name: "Warrior Mindset - Motivation", url: "https://www.youtube.com/embed/hp3j8c9pKxU?autoplay=1&loop=1&playlist=hp3j8c9pKxU" }
-      ]
-    };
-    
-    // Моя музыка (загружается из localStorage)
-    let myMusic = JSON.parse(localStorage.getItem('myMusic') || '[]');
-    
-    let currentPlaylist = 'workout';
-    let currentTrackIndex = 0;
-    let isPlaying = false;
-    let player = null;
-    
-    // Загрузка YouTube IFrame API
-    const tag = document.createElement('script');
-    tag.src = 'https://www.youtube.com/iframe_api';
-    const firstScriptTag = document.getElementsByTagName('script')[0];
-    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
-    
-    function onYouTubeIframeAPIReady() {
-      console.log('YouTube Player API готов');
-    }
-    
-    function initPlayer() {
-      if (!player && window.YT && YT.Player) {
-        player = new YT.Player('music-player-frame', {
-          height: '0',
-          width: '0',
-          playerVars: { 'autoplay': 0, 'controls': 0 },
-          events: {
-            'onReady': onPlayerReady,
-            'onStateChange': onPlayerStateChange
-          }
-        });
-      }
-    }
-    
-    function onPlayerReady(event) {
-      console.log('Плеер готов');
-    }
-    
-    function onPlayerStateChange(event) {
-      if (event.data === YT.PlayerState.ENDED) {
-        nextTrack();
-      }
-      updatePlayButton();
-    }
-    
-    function changePlaylist() {
-      currentPlaylist = document.getElementById('playlist-select').value;
-      currentTrackIndex = 0;
-      loadTrack(currentTrackIndex);
-    }
-    
-    // === МОЯ МУЗЫКА ===
-    function addMyMusic() {
-      const url = document.getElementById('music-url').value.trim();
-      const name = document.getElementById('music-name').value.trim() || 'Мой трек';
-      const type = document.getElementById('music-type').value;
-      
-      if (!url) {
-        alert('Вставь ссылку на YouTube');
-        return;
-      }
-      
-      // Конвертация YouTube ссылки в embed
-      let embedUrl = url;
-      const videoId = extractVideoId(url);
-      if (videoId) {
-        embedUrl = 'https://www.youtube.com/embed/' + videoId + '?autoplay=1&loop=1&playlist=' + videoId;
-      }
-      
-      myMusic.push({
-        id: Date.now(),
-        name: name,
-        url: embedUrl,
-        type: type,
-        videoId: videoId
-      });
-      
-      localStorage.setItem('myMusic', JSON.stringify(myMusic));
-      renderMyPlaylist();
-      
-      document.getElementById('music-url').value = '';
-      document.getElementById('music-name').value = '';
-    }
-    
-    function extractVideoId(url) {
-      const match = url.match(/(?:v=|\/)([a-zA-Z0-9_-]{11})/);
-      return match ? match[1] : null;
-    }
-    
-    function renderMyPlaylist() {
-      const container = document.getElementById('my-playlist');
-      if (!container) return;
-      
-      if (myMusic.length === 0) {
-        container.innerHTML = '<p style="opacity:0.7; font-size:14px;">Пока нет добавленных треков. Добавь любимую музыку!</p>';
-        return;
-      }
-      
-      container.innerHTML = myMusic.map(track => {
-        const typeLabels = { song: '🎵', audiobook: '📚', motivation: '🔥' };
-        const isActive = currentPlaylist === 'my' && currentTrackIndex === myMusic.findIndex(t => t.id === track.id);
-        
-        return '<div class="playlist-item' + (isActive ? ' active' : '') + '" onclick="playMyTrack(' + track.id + ')">' +
-          '<span style="font-size:20px;">' + typeLabels[track.type] + '</span>' +
-          '<span style="flex:1; font-size:14px;">' + track.name + '</span>' +
-          '<span class="music-type">' + (track.type === 'song' ? 'Песня' : track.type === 'audiobook' ? 'Аудиокнига' : 'Мотивация') + '</span>' +
-          '<span class="remove" onclick="event.stopPropagation(); removeMyTrack(' + track.id + ')">×</span>' +
-          '</div>';
-      }).join('');
-    }
-    
-    function playMyTrack(id) {
-      const index = myMusic.findIndex(t => t.id === id);
-      if (index === -1) return;
-      
-      currentPlaylist = 'my';
-      currentTrackIndex = index;
-      loadTrack(index, true);
-    }
-    
-    function removeMyTrack(id) {
-      myMusic = myMusic.filter(t => t.id !== id);
-      localStorage.setItem('myMusic', JSON.stringify(myMusic));
-      renderMyPlaylist();
-    }
-    
-    function loadTrack(index, isMyMusic = false) {
-      let playlist;
-      if (isMyMusic || currentPlaylist === 'my') {
-        playlist = myMusic;
-        if (isMyMusic) currentPlaylist = 'my';
-      } else {
-        playlist = playlists[currentPlaylist];
-      }
-      
-      if (!playlist || playlist.length === 0) return;
-      
-      const track = playlist[index];
-      document.getElementById('now-playing').textContent = '🎵 ' + track.name;
-      
-      if (player && player.loadVideoById) {
-        const videoId = track.videoId || track.url.split('v=')[1].split('&')[0];
-        player.loadVideoById(videoId);
-        player.setVolume(70);
-      }
-      
-      updatePlayButton();
-      if (currentPlaylist === 'my') renderMyPlaylist();
-    }
-    
-    function loadTrack(index) {
-      const playlist = playlists[currentPlaylist];
-      if (!playlist || playlist.length === 0) return;
-      
-      const track = playlist[index];
-      document.getElementById('now-playing').textContent = '🎵 ' + track.name;
-      
-      if (player && player.loadVideoById) {
-        const videoId = track.url.split('v=')[1].split('&')[0];
-        player.loadVideoById(videoId);
-        player.setVolume(70);
-      }
-      
-      updatePlayButton();
-    }
-    
-    function togglePlay() {
-      if (!player) {
-        initPlayer();
-        setTimeout(() => {
-          loadTrack(currentTrackIndex);
-          isPlaying = true;
-          updatePlayButton();
-          document.getElementById('equalizer').classList.remove('off');
-        }, 500);
-        return;
-      }
-      
-      if (isPlaying) {
-        player.pauseVideo();
-        document.getElementById('equalizer').classList.add('off');
-      } else {
-        player.playVideo();
-        document.getElementById('equalizer').classList.remove('off');
-      }
-      isPlaying = !isPlaying;
-      updatePlayButton();
-    }
-    
-    function nextTrack() {
-      const playlist = playlists[currentPlaylist];
-      currentTrackIndex = (currentTrackIndex + 1) % playlist.length;
-      loadTrack(currentTrackIndex);
-      isPlaying = true;
-      document.getElementById('equalizer').classList.remove('off');
-    }
-    
-    function prevTrack() {
-      const playlist = playlists[currentPlaylist];
-      currentTrackIndex = (currentTrackIndex - 1 + playlist.length) % playlist.length;
-      loadTrack(currentTrackIndex);
-      isPlaying = true;
-      document.getElementById('equalizer').classList.remove('off');
-    }
-    
-    function setVolume(value) {
-      if (player && player.setVolume) {
-        player.setVolume(value);
-      }
-    }
-    
-    function updatePlayButton() {
-      document.getElementById('play-btn').textContent = isPlaying ? '⏸' : '▶';
-    }
-    
-    // === ДАННЫЕ: УПРАЖНЕНИЯ С ВИДЕО ===
+    // === ДАННЫЕ ===
     const exercises = [
-      // Осанка и спина
-      { id: 1, name: "Кошка-корова", category: "posture", focus: "Гиперлордоз, гибкость спины", time: "2 мин", reps: "10-12 повторений", video: "https://www.youtube.com/embed/2qhJb8SvHjM", desc: "Медленно прогибай спину вверх, затем вниз. Дыхание ровное." },
-      { id: 2, name: "Стена у стены", category: "posture", focus: "Осанка", time: "1 мин", reps: "3 подхода", video: "https://www.youtube.com/embed/k_FZCvsL53w", desc: "Встань спиной к стене, прижми затылок, лопатки, ягодицы и пятки." },
-      { id: 3, name: "Лодочка", category: "posture", focus: "Спина, осанка", time: "1 мин", reps: "10 повторений", video: "https://www.youtube.com/embed/4K0e1EjwRnM", desc: "Лёжа на животе, одновременно поднимай руки и ноги." },
-      { id: 4, name: "Тяга к стене", category: "posture", focus: "Осанка, плечи", time: "2 мин", reps: "15 повторений", video: "https://www.youtube.com/embed/aS5C2nQa3vM", desc: "Стоя у стены, своди лопатки и тянись руками вверх." },
-      { id: 5, name: "Планка на предплечьях", category: "posture", focus: "Кор, осанка", time: "30-60 сек", reps: "3 подхода", video: "https://www.youtube.com/embed/pSHjTRCQxIw", desc: "Держи тело ровно, не прогибай поясницу." },
-      
-      // Живот и бока
-      { id: 6, name: "Вакуум", category: "abs", focus: "Плоский живот", time: "2 мин", reps: "5 подходов по 15 сек", video: "https://www.youtube.com/embed/8QcXlB6kXhE", desc: "Выдохни весь воздух, втяни живот под рёбра, держи." },
-      { id: 7, name: "Велосипед", category: "abs", focus: "Косые мышцы, бока", time: "2 мин", reps: "20 повторений", video: "https://www.youtube.com/embed/1obhK7pOwEw", desc: "Лёжа на спине, крути педали, касайся локтем противоположного колена." },
-      { id: 8, name: "Скручивания", category: "abs", focus: "Пресс", time: "2 мин", reps: "15-20 повторений", video: "https://www.youtube.com/embed/Xyd_fa5zoEU", desc: "Поднимай только лопатки, поясница прижата." },
-      { id: 9, name: "Боковая планка", category: "abs", focus: "Бока, косые", time: "30 сек", reps: "3 подхода на сторону", video: "https://www.youtube.com/embed/3wVknM4sLgM", desc: "Держи тело в линию, не опускай таз." },
-      { id: 10, name: "Ножницы", category: "abs", focus: "Нижний пресс", time: "1 мин", reps: "3 подхода", video: "https://www.youtube.com/embed/02eKNa3NOOo", desc: "Лёжа на спине, скрещивай ноги в воздухе." },
-      
-      // Руки
-      { id: 11, name: "Отжимания от стены", category: "arms", focus: "Трицепс, грудь", time: "2 мин", reps: "15 повторений", video: "https://www.youtube.com/embed/IODxDxX7oi4", desc: "Чем дальше ноги от стены, тем сложнее." },
-      { id: 12, name: "Обратные отжимания", category: "arms", focus: "Трицепс", time: "2 мин", reps: "12 повторений", video: "https://www.youtube.com/embed/6pS5E1y5_7E", desc: "Сидя на полу, руки сзади на стуле, опускай таз." },
-      { id: 13, name: "Круговые вращения", category: "arms", focus: "Плечи", time: "1 мин", reps: "20 вперёд, 20 назад", video: "https://www.youtube.com/embed/qX9YfKzIwHs", desc: "Руки в стороны, делай маленькие круги." },
-      { id: 14, name: "Боксирование", category: "arms", focus: "Руки, кардио", time: "2 мин", reps: "50 ударов", video: "https://www.youtube.com/embed/hP2uH4XnJdM", desc: "Быстро боксируй в воздухе, держи темп." },
-      
-      // Ноги и ягодицы
-      { id: 15, name: "Приседания", category: "legs", focus: "Ноги, ягодицы", time: "3 мин", reps: "20 повторений", video: "https://www.youtube.com/embed/U0t2KK8vLzU", desc: "Спина ровная, колени не выходят за носки." },
-      { id: 16, name: "Выпады", category: "legs", focus: "Ноги, ягодицы", time: "3 мин", reps: "12 на ногу", video: "https://www.youtube.com/embed/QOVaTkbz9fA", desc: "Шагай вперёд, опускай колено почти до пола." },
-      { id: 17, name: "Ягодичный мост", category: "legs", focus: "Ягодицы", time: "2 мин", reps: "20 повторений", video: "https://www.youtube.com/embed/7iI4oVXQkXQ", desc: "Лёжа на спине, поднимай таз, сжимай ягодицы." },
-      { id: 18, name: "Махи ногой", category: "legs", focus: "Ягодицы, бока", time: "2 мин", reps: "15 на ногу", video: "https://www.youtube.com/embed/4vA8R0eXzQY", desc: "Стоя на четвереньках, поднимай ногу в сторону." },
-      
-      // Кардио
-      { id: 19, name: "Джампинг Джек", category: "cardio", focus: "Сжигание жира", time: "2 мин", reps: "40 повторений", video: "https://www.youtube.com/embed/c4DAnljDykF", desc: "Прыжки с хлопком над головой." },
-      { id: 20, name: "Бег на месте", category: "cardio", focus: "Кардио", time: "3 мин", reps: "Высоко поднимай колени", video: "https://www.youtube.com/embed/2qTF3S1Qh8M", desc: "Быстрый темп, руки работают." },
-      { id: 21, name: "Бёрпи (облегчённый)", category: "cardio", focus: "Всё тело", time: "2 мин", reps: "10 повторений", video: "https://www.youtube.com/embed/auBL5Jk54gw", desc: "Присядь, шаг назад в планку, шаг вперёд, прыжок." }
+      { id: 1, name: "Кошка-корова", category: "posture", focus: "Гиперлордоз", time: "2 мин", video: "https://www.youtube.com/embed/2qhJb8SvHjM", desc: "Медленно прогибай спину вверх, затем вниз" },
+      { id: 2, name: "Стена у стены", category: "posture", focus: "Осанка", time: "1 мин", video: "https://www.youtube.com/embed/k_FZCvsL53w", desc: "Встань спиной к стене, прижми затылок и лопатки" },
+      { id: 3, name: "Планка", category: "abs", focus: "Пресс, кор", time: "60 сек", video: "https://www.youtube.com/embed/pSHjTRCQxIw", desc: "Держи тело ровно, не прогибай поясницу" },
+      { id: 4, name: "Велосипед", category: "abs", focus: "Косые мышцы", time: "2 мин", video: "https://www.youtube.com/embed/1obhK7pOwEw", desc: "Локтем касайся противоположного колена" },
+      { id: 5, name: "Приседания", category: "legs", focus: "Ноги, ягодицы", time: "3 мин", video: "https://www.youtube.com/embed/U0t2KK8vLzU", desc: "Спина ровная, колени не выходят за носки" },
+      { id: 6, name: "Отжимания", category: "arms", focus: "Руки, грудь", time: "2 мин", video: "https://www.youtube.com/embed/IODxDxX7oi4", desc: "От стены или от пола" }
     ];
     
-    // === ПЛАН НА 8 НЕДЕЛЬ ===
     const workoutPlan = [
-      // Неделя 1-2: Адаптация
-      { week: 1, days: [
-        { type: "Осанка + Пресс", exercises: [1, 2, 5, 6, 7, 8] },
-        { type: "Руки + Кардио", exercises: [11, 12, 13, 14, 19, 20] },
-        { type: "Ноги + Ягодицы", exercises: [15, 16, 17, 18] },
-        { type: "Осанка + Пресс", exercises: [1, 3, 4, 6, 9, 10] },
-        { type: "Руки + Кардио", exercises: [11, 12, 13, 14, 19] },
-        { type: "Полная тренировка", exercises: [2, 5, 7, 15, 17, 20] },
-        { type: "Отдых / Растяжка", exercises: [] }
-      ]},
-      // Неделя 3-4: Увеличение интенсивности
-      { week: 2, days: [
-        { type: "Осанка + Пресс", exercises: [1, 2, 3, 6, 7, 8, 9] },
-        { type: "Руки + Кардио", exercises: [11, 12, 13, 14, 19, 20] },
-        { type: "Ноги + Ягодицы", exercises: [15, 16, 17, 18] },
-        { type: "Осанка + Пресс", exercises: [1, 4, 5, 6, 8, 10] },
-        { type: "Руки + Кардио", exercises: [11, 12, 13, 14, 19, 20] },
-        { type: "Полная тренировка", exercises: [2, 3, 7, 15, 17, 21] },
-        { type: "Отдых / Растяжка", exercises: [] }
-      ]},
-      // Неделя 5-6: Интенсив
-      { week: 3, days: [
-        { type: "Осанка + Пресс", exercises: [1, 2, 3, 4, 6, 7, 8, 9] },
-        { type: "Руки + Кардио", exercises: [11, 12, 13, 14, 19, 20, 21] },
-        { type: "Ноги + Ягодицы", exercises: [15, 16, 17, 18] },
-        { type: "Осанка + Пресс", exercises: [1, 3, 5, 6, 8, 9, 10] },
-        { type: "Руки + Кардио", exercises: [11, 12, 13, 14, 19, 20] },
-        { type: "Полная тренировка", exercises: [2, 4, 7, 15, 16, 17, 21] },
-        { type: "Отдых / Растяжка", exercises: [] }
-      ]},
-      // Неделя 7-8: Финал
-      { week: 4, days: [
-        { type: "Осанка + Пресс", exercises: [1, 2, 3, 4, 5, 6, 7, 8, 9] },
-        { type: "Руки + Кардио", exercises: [11, 12, 13, 14, 19, 20, 21] },
-        { type: "Ноги + Ягодицы", exercises: [15, 16, 17, 18] },
-        { type: "Осанка + Пресс", exercises: [1, 3, 4, 5, 6, 8, 9, 10] },
-        { type: "Руки + Кардио", exercises: [11, 12, 13, 14, 19, 20, 21] },
-        { type: "Полная тренировка", exercises: [2, 3, 4, 7, 15, 16, 17, 18, 21] },
-        { type: "Отдых / Растяжка", exercises: [] }
-      ]}
+      { type: "Осанка + Пресс", exercises: [1, 2, 3, 4] },
+      { type: "Руки + Кардио", exercises: [6, 5] },
+      { type: "Ноги + Ягодицы", exercises: [5, 3, 4] },
+      { type: "Полная тренировка", exercises: [1, 2, 3, 4, 5, 6] },
+      { type: "Осанка + Пресс", exercises: [1, 2, 3, 4] },
+      { type: "Руки + Кардио", exercises: [6, 5] },
+      { type: "Отдых", exercises: [] }
     ];
     
-    // Повторить недели 5-8 как 3-4
-    for (let i = 4; i < 8; i++) {
-      workoutPlan[i] = workoutPlan[i - 2];
-    }
-    
-    // === СОСТОЯНИЕ ===
-    let currentWeek = 0;
-    let progressData = JSON.parse(localStorage.getItem('madinaProgress') || '{"entries":[],"completedDays":[],"water":[],"waterToday":0,"habits":{}}');
-    
-    // === ПРИВЫЧКИ ===
-    const habitsList = [
-      { id: 'water', icon: '💧', name: 'Выпить 8 стаканов воды' },
-      { id: 'workout', icon: '💪', name: 'Тренировка по плану' },
-      { id: 'breakfast', icon: '🍳', name: 'Здоровый завтрак' },
-      { id: 'no_sugar', icon: '🚫', name: 'Без сахара и сладкого' },
-      { id: 'sleep', icon: '😴', name: 'Сон 7-8 часов' },
-      { id: 'no_late', icon: '🕖', name: 'Ужин до 19:00' },
-      { id: 'walk', icon: '🚶', name: 'Прогулка 30 мин' },
-      { id: 'stretch', icon: '🧘', name: 'Растяжка утром' }
-    ];
+    let progressData = JSON.parse(localStorage.getItem('fitproProgress') || '{"entries":[],"completedDays":[],"water":[],"waterToday":0,"habits":{}}');
     
     // === ИНИЦИАЛИЗАЦИЯ ===
     function init() {
       renderTodayWorkout();
-      renderCatalog('all');
+      renderCatalog();
       renderCalendar();
       renderProgress();
+      renderHabits();
     }
     
-    // === СЕКЦИИ ===
     function showSection(id) {
       document.querySelectorAll('.section').forEach(s => s.classList.remove('active'));
       document.querySelectorAll('.nav button').forEach(b => b.classList.remove('active'));
@@ -1077,453 +607,45 @@
       event.target.classList.add('active');
     }
     
-    // === СЕГОДНЯ ===
-    function getTodayWorkout() {
-      const startDate = new Date('2026-08-10');
-      const today = new Date();
-      const diffDays = Math.floor((today - startDate) / (1000 * 60 * 60 * 24));
-      const weekNum = Math.floor(diffDays / 7);
-      const dayNum = diffDays % 7;
-      
-      if (weekNum >= 8) return workoutPlan[7].days[dayNum];
-      if (weekNum < 0) return workoutPlan[0].days[dayNum];
-      
-      return workoutPlan[weekNum].days[dayNum];
-    }
-    
+    // === ТРЕНИРОВКА ДНЯ ===
     function renderTodayWorkout() {
-      const today = getTodayWorkout();
-      const focusMap = {
-        'Осанка': 'Осанка и спина',
-        'Пресс': 'Живот и бока',
-        'Руки': 'Руки',
-        'Кардио': 'Кардио',
-        'Ноги': 'Ноги и ягодицы'
-      };
+      const today = workoutPlan[new Date().getDay() === 0 ? 6 : new Date().getDay() - 1];
+      const container = document.getElementById('today-exercises');
       
-      let focusText = today.type.split('+').map(s => focusMap[s.trim()] || s).join(', ');
-      document.getElementById('today-focus').textContent = focusText || today.type;
-      
-      const container = document.getElementById('today-workout');
       if (today.exercises.length === 0) {
-        container.innerHTML = '<div class="workout-card"><h3>🧘 Сегодня день отдыха!</h3><p>Сделай лёгкую растяжку или прогулку.</p></div>';
+        container.innerHTML = '<div class="exercise-card" style="grid-column: 1/-1; text-align: center; padding: 40px;"><h3 style="color: #00ff88;">🧘 Сегодня день отдыха!</h3><p>Сделай лёгкую растяжку или прогулку.</p></div>';
         return;
       }
       
-      container.innerHTML = '<div class="workout-card"><h3>📋 Программа на сегодня: ' + today.type + '</h3>' +
-        today.exercises.map(exId => {
-          const ex = exercises.find(e => e.id === exId);
-          return '<div class="exercise">' +
-            '<h4>' + ex.name + '</h4>' +
-            '<div class="video-placeholder" onclick="openVideo(' + ex.id + ')">Смотреть видео</div>' +
-            '<div class="exercise-meta">' +
-            '<span>⏱ ' + (ex.time || ex.reps) + '</span>' +
-            '<span>🎯 ' + ex.focus + '</span>' +
-            '</div>' +
-            '<p>' + ex.desc + '</p>' +
-            '</div>';
-        }).join('') +
-        '</div>';
+      container.innerHTML = today.exercises.map(exId => {
+        const ex = exercises.find(e => e.id === exId);
+        return '<div class="exercise-card">' +
+          '<div class="video" onclick="openVideo(' + ex.id + ')">▶</div>' +
+          '<div class="info">' +
+          '<h4>' + ex.name + '</h4>' +
+          '<p>🎯 ' + ex.focus + ' • ⏱️ ' + ex.time + '</p>' +
+          '<p>' + ex.desc + '</p>' +
+          '</div></div>';
+      }).join('');
     }
     
-    function markTodayDone() {
-      const todayStr = new Date().toDateString();
-      if (!progressData.completedDays.includes(todayStr)) {
-        progressData.completedDays.push(todayStr);
-        localStorage.setItem('madinaProgress', JSON.stringify(progressData));
-        alert('🎉 Молодец! Тренировка отмечена!');
-        renderCalendar();
-        renderProgress();
-      } else {
-        alert('✅ Уже отмечено!');
-      }
-    }
-    
-    // === КАТАЛОГ ===
-    function filterCatalog(category) {
-      document.querySelectorAll('.category-filter button').forEach(b => b.classList.remove('active'));
-      event.target.classList.add('active');
-      renderCatalog(category);
-    }
-    
-    function renderCatalog(category) {
-      const filtered = category === 'all' ? exercises : exercises.filter(e => e.category === category);
-      document.getElementById('exercise-grid').innerHTML = filtered.map(ex => 
+    function renderCatalog() {
+      document.getElementById('exercise-catalog').innerHTML = exercises.map(ex => 
         '<div class="exercise-card">' +
         '<div class="video" onclick="openVideo(' + ex.id + ')">▶</div>' +
         '<div class="info">' +
         '<h4>' + ex.name + '</h4>' +
+        '<p>🎯 ' + ex.focus + ' • ⏱️ ' + ex.time + '</p>' +
         '<p>' + ex.desc + '</p>' +
-        '<div class="meta">' +
-        '<span>🎯 ' + ex.focus + '</span>' +
-        '<span>⏱ ' + (ex.time || ex.reps) + '</span>' +
-        '</div>' +
-        '</div>' +
-        '</div>'
+        '</div></div>'
       ).join('');
     }
     
-    // === КАЛЕНДАРЬ ===
-    function changeWeek(delta) {
-      currentWeek = Math.max(0, Math.min(7, currentWeek + delta));
-      document.getElementById('week-label').textContent = 'Неделя ' + (currentWeek + 1);
-      renderCalendar();
-    }
-    
-    function renderCalendar() {
-      const grid = document.getElementById('calendar-grid');
-      const plan = workoutPlan[currentWeek];
-      const today = new Date();
-      const startDate = new Date('2026-08-10');
-      const currentDay = Math.floor((today - startDate) / (1000 * 60 * 60 * 24));
-      
-      grid.innerHTML = plan.days.map((day, i) => {
-        const absDay = currentWeek * 7 + i;
-        const isToday = absDay === currentDay && currentWeek <= 7;
-        const isDone = progressData.completedDays.some(d => {
-          const completedDate = new Date(d);
-          const completedDay = Math.floor((completedDate - startDate) / (1000 * 60 * 60 * 24));
-          return completedDay === absDay;
-        });
-        
-        return '<div class="calendar-day' + (isToday ? ' today' : '') + (isDone ? ' done' : '') + '">' +
-          '<div class="day-num">' + (i + 1) + '</div>' +
-          '<div class="workout-type">' + day.type + '</div>' +
-          (isDone ? '<div style="margin-top:5px; font-size:20px;">✅</div>' : '') +
-          '</div>';
-      }).join('');
-    }
-    
-    // === ТРЕКЕР ===
-    function addProgress() {
-      const weight = document.getElementById('weight').value;
-      const waist = document.getElementById('waist').value;
-      const hips = document.getElementById('hips').value;
-      const arms = document.getElementById('arms').value;
-      
-      if (!weight && !waist && !hips && !arms) {
-        alert('Введи хотя бы одно значение');
-        return;
-      }
-      
-      progressData.entries.push({
-        date: new Date().toISOString(),
-        weight, waist, hips, arms
-      });
-      localStorage.setItem('madinaProgress', JSON.stringify(progressData));
-      
-      document.getElementById('weight').value = '';
-      document.getElementById('waist').value = '';
-      document.getElementById('hips').value = '';
-      document.getElementById('arms').value = '';
-      
-      renderProgress();
-      alert('✅ Прогресс записан!');
-    }
-    
-    function renderProgress() {
-      const entries = progressData.entries.sort((a, b) => new Date(b.date) - new Date(a.date));
-      const completed = progressData.completedDays.length;
-      
-      const startWeight = entries[entries.length - 1]?.weight || 65;
-      const currentWeight = entries[0]?.weight || 65;
-      const lost = (startWeight - currentWeight).toFixed(1);
-      
-      document.getElementById('progress-stats').innerHTML = 
-        '<div class="stat-card"><div class="value">' + completed + '</div><div class="label">Тренировок выполнено</div></div>' +
-        '<div class="stat-card"><div class="value">' + startWeight + '</div><div class="label">Начальный вес</div></div>' +
-        '<div class="stat-card"><div class="value">' + currentWeight + '</div><div class="label">Текущий вес</div></div>' +
-        '<div class="stat-card"><div class="value">' + lost + '</div><div class="label">Сброшено (кг)</div></div>';
-      
-      document.getElementById('progress-history').innerHTML = entries.length > 0 ?
-        '<h3>История замеров</h3>' + entries.map(e => 
-          '<div style="background:#f8f9fc; padding:15px; border-radius:10px; margin:10px 0;">' +
-          '<strong>' + new Date(e.date).toLocaleDateString('ru') + '</strong>: ' +
-          (e.weight ? e.weight + ' кг, ' : '') +
-          (e.waist ? 'талия ' + e.waist + ' см, ' : '') +
-          (e.hips ? 'бёдра ' + e.hips + ' см, ' : '') +
-          (e.arms ? 'руки ' + e.arms + ' см' : '') +
-          '</div>'
-        ).join('') : '<p>Пока нет записей. Заполни данные выше!</p>';
-      
-      renderNutrition();
-      renderWeightChart();
-    }
-    
-    function renderWeightChart() {
-      const canvas = document.getElementById('weight-chart');
-      if (!canvas) return;
-      
-      const ctx = canvas.getContext('2d');
-      const rect = canvas.getBoundingClientRect();
-      canvas.width = rect.width;
-      canvas.height = rect.height;
-      
-      const entries = progressData.entries.sort((a, b) => new Date(a.date) - new Date(b.date));
-      const startDate = new Date('2026-08-10');
-      const totalWeeks = 8;
-      const startWeight = 65;
-      const targetWeight = 58;
-      
-      // Данные для графика
-      const weights = [];
-      const weeks = [];
-      
-      for (let w = 0; w <= totalWeeks; w++) {
-        weeks.push(w);
-        // Целевая линия: 65 - (w * 7/8)
-        weights.push({
-          week: w,
-          target: startWeight - (w * (startWeight - targetWeight) / totalWeeks),
-          actual: null
-        });
-      }
-      
-      // Добавляем фактические замеры
-      entries.forEach(e => {
-        const date = new Date(e.date);
-        const daysFromStart = (date - startDate) / (1000 * 60 * 60 * 24);
-        const week = Math.min(8, Math.max(0, daysFromStart / 7));
-        
-        if (e.weight) {
-          const weekIndex = Math.round(week);
-          if (weekIndex >= 0 && weekIndex <= 8) {
-            weights[weekIndex].actual = parseFloat(e.weight);
-          }
-        }
-      });
-      
-      // Очистка
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      
-      // Настройки
-      const padding = 40;
-      const chartWidth = canvas.width - padding * 2;
-      const chartHeight = canvas.height - padding * 2;
-      const weightRange = 10; // 55-75 кг
-      const minWeight = 55;
-      
-      function x(w) { return padding + (w / totalWeeks) * chartWidth; }
-      function y(weight) { return padding + chartHeight - ((weight - minWeight) / weightRange) * chartHeight; }
-      
-      // Сетка
-      ctx.strokeStyle = '#e0e0e5';
-      ctx.lineWidth = 1;
-      for (let w = 0; w <= totalWeeks; w += 2) {
-        ctx.beginPath();
-        ctx.moveTo(x(w), padding);
-        ctx.lineTo(x(w), canvas.height - padding);
-        ctx.stroke();
-      }
-      for (let wt = 56; wt <= 74; wt += 2) {
-        ctx.beginPath();
-        ctx.moveTo(padding, y(wt));
-        ctx.lineTo(canvas.width - padding, y(wt));
-        ctx.stroke();
-      }
-      
-      // Целевая линия (красная пунктирная)
-      ctx.strokeStyle = '#f5576c';
-      ctx.lineWidth = 3;
-      ctx.setLineDash([10, 5]);
-      ctx.beginPath();
-      ctx.moveTo(x(0), y(startWeight));
-      ctx.lineTo(x(8), y(targetWeight));
-      ctx.stroke();
-      ctx.setLineDash([]);
-      
-      // Фактические замеры (синяя линия)
-      ctx.strokeStyle = '#667eea';
-      ctx.lineWidth = 3;
-      ctx.beginPath();
-      let started = false;
-      for (let w = 0; w <= 8; w++) {
-        if (weights[w].actual !== null) {
-          if (!started) {
-            ctx.moveTo(x(w), y(weights[w].actual));
-            started = true;
-          } else {
-            ctx.lineTo(x(w), y(weights[w].actual));
-          }
-        }
-      }
-      ctx.stroke();
-      
-      // Точки замеров
-      for (let w = 0; w <= 8; w++) {
-        if (weights[w].actual !== null) {
-          ctx.fillStyle = '#667eea';
-          ctx.beginPath();
-          ctx.arc(x(w), y(weights[w].actual), 6, 0, Math.PI * 2);
-          ctx.fill();
-        }
-      }
-      
-      // Подписи
-      ctx.fillStyle = '#667eea';
-      ctx.font = 'bold 14px sans-serif';
-      ctx.fillText('Цель: 58 кг', canvas.width - padding - 100, y(targetWeight) - 10);
-      
-      ctx.fillStyle = '#667eea';
-      ctx.font = 'bold 14px sans-serif';
-      ctx.fillText('Старт: 65 кг', padding, y(startWeight) - 10);
-    }
-    
-    // === ПИТАНИЕ ===
-    const productsCalories = {
-      'яблоко': 52, 'груша': 57, 'банан': 89, 'апельсин': 47, 'виноград': 67,
-      'курица': 165, 'куриная грудка': 110, 'рыба': 206, 'тунец': 132, 'лосось': 208,
-      'яйцо': 155, 'овсянка': 389, 'гречка': 343, 'рис': 130, 'картофель': 77,
-      'творог': 98, 'йогурт': 59, 'кефир': 41, 'молоко': 42, 'сыр': 402,
-      'хлеб': 265, 'хлебец': 310, 'орехи': 607, 'миндаль': 579, 'мёд': 304,
-      'помидор': 18, 'огурец': 16, 'капуста': 25, 'морковь': 41, 'брокколи': 34
-    };
-    
-    function renderNutrition() {
-      // Вода
-      const todayStr = new Date().toDateString();
-      const waterToday = progressData.waterToday || 0;
-      const totalWater = progressData.water ? progressData.water.length : 0;
-      
-      document.getElementById('water-count').textContent = waterToday;
-      document.getElementById('total-water').textContent = totalWater;
-      
-      const glassesContainer = document.getElementById('water-glasses');
-      glassesContainer.innerHTML = '';
-      for (let i = 0; i < 8; i++) {
-        const glass = document.createElement('span');
-        glass.textContent = i < waterToday ? '💧' : '🥛';
-        glass.style.fontSize = '24px';
-        glassesContainer.appendChild(glass);
-      }
-      
-      // Дни отслеживания
-      const uniqueDates = [...new Set(progressData.entries.map(e => new Date(e.date).toDateString()))];
-      document.getElementById('days-tracked').textContent = uniqueDates.length;
-      
-      // Средний вес
-      if (progressData.entries.length > 0) {
-        const avg = progressData.entries.reduce((sum, e) => sum + (parseFloat(e.weight) || 0), 0) / progressData.entries.length;
-        document.getElementById('avg-weight').textContent = avg.toFixed(1);
-      }
-      
-      renderHabits();
-    }
-    
-    function renderHabits() {
-      const todayStr = new Date().toDateString();
-      const container = document.getElementById('habits-list');
-      
-      if (!container) return;
-      
-      // Инициализация сегодняшних привычек
-      if (!progressData.habits[todayStr]) {
-        progressData.habits[todayStr] = {};
-      }
-      
-      // Чек-лист привычек
-      container.innerHTML = habitsList.map(h => {
-        const done = progressData.habits[todayStr][h.id] ? 'checked' : '';
-        return '<div style="background: ' + (done ? 'linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%)' : '#f8f9fc') + '; padding: 15px; border-radius: 12px; margin: 10px 0; display: flex; align-items: center; gap: 15px; cursor: pointer; transition: 0.3s;" onclick="toggleHabit(\'' + h.id + '\')">' +
-          '<input type="checkbox" ' + done + ' style="width: 24px; height: 24px; cursor: pointer;">' +
-          '<span style="font-size: 28px;">' + h.icon + '</span>' +
-          '<span style="font-size: 16px; flex: 1;">' + h.name + '</span>' +
-          (done ? '<span style="color: #28a745; font-weight: bold;">✓ Выполнено!</span>' : '') +
-          '</div>';
-      }).join('');
-      
-      // Статистика
-      const todayHabits = progressData.habits[todayStr] || {};
-      const doneCount = Object.values(todayHabits).filter(v => v).length;
-      const percent = Math.round((doneCount / habitsList.length) * 100);
-      
-      // Серия подряд
-      let streak = 0;
-      const dates = Object.keys(progressData.habits).sort((a, b) => new Date(b) - new Date(a));
-      for (const date of dates) {
-        const dayHabits = progressData.habits[date];
-        const allDone = habitsList.every(h => dayHabits[h.id]);
-        if (allDone) streak++;
-        else break;
-      }
-      
-      // Всего выполнено
-      let total = 0;
-      for (const date in progressData.habits) {
-        total += Object.values(progressData.habits[date]).filter(v => v).length;
-      }
-      
-      document.getElementById('habits-streak').textContent = streak;
-      document.getElementById('habits-total').textContent = total;
-      document.getElementById('habits-percent').textContent = percent + '%';
-    }
-    
-    function toggleHabit(id) {
-      const todayStr = new Date().toDateString();
-      if (!progressData.habits[todayStr]) {
-        progressData.habits[todayStr] = {};
-      }
-      progressData.habits[todayStr][id] = !progressData.habits[todayStr][id];
-      localStorage.setItem('madinaProgress', JSON.stringify(progressData));
-      renderHabits();
-    }
-    
-    function addWater() {
-      if (progressData.waterToday >= 8) {
-        alert('💧 8 стаканов уже выпито! Отличный результат!');
-        return;
-      }
-      progressData.waterToday++;
-      if (!progressData.water) progressData.water = [];
-      progressData.water.push(new Date().toISOString());
-      localStorage.setItem('madinaProgress', JSON.stringify(progressData));
-      renderNutrition();
-    }
-    
-    function resetWater() {
-      progressData.waterToday = 0;
-      localStorage.setItem('madinaProgress', JSON.stringify(progressData));
-      renderNutrition();
-    }
-    
-    function calculateCalories() {
-      const name = document.getElementById('product-name').value.toLowerCase().trim();
-      const grams = parseInt(document.getElementById('product-grams').value);
-      
-      if (!name || !grams) {
-        document.getElementById('calories-result').textContent = '⚠️ Введи продукт и вес';
-        return;
-      }
-      
-      // Поиск продукта в базе
-      let caloriesPer100 = 0;
-      let found = false;
-      
-      for (const key in productsCalories) {
-        if (name.includes(key)) {
-          caloriesPer100 = productsCalories[key];
-          found = true;
-          break;
-        }
-      }
-      
-      if (!found) {
-        document.getElementById('calories-result').textContent = '❓ Продукт не найден в базе. Пример: яблоко 100г = ~52 ккал';
-        return;
-      }
-      
-      const result = Math.round((caloriesPer100 * grams) / 100);
-      document.getElementById('calories-result').textContent = 
-        '🍎 ' + name + ' (' + grams + 'г) = ' + result + ' ккал';
-    }
-    
-    // === МОДАЛЬНОЕ ОКНО ===
     function openVideo(id) {
       const ex = exercises.find(e => e.id === id);
       document.getElementById('modal-title').textContent = ex.name;
-      document.getElementById('modal-video').innerHTML = 
-        '<iframe width="100%" height="400" src="' + ex.video + '" frameborder="0" allowfullscreen style="border-radius:12px;"></iframe>';
-      document.getElementById('modal-desc').textContent = ex.desc + ' (' + (ex.time || ex.reps) + ')';
+      document.getElementById('modal-video').innerHTML = '<iframe width="100%" height="400" src="' + ex.video + '" frameborder="0" allowfullscreen style="border-radius:12px;"></iframe>';
+      document.getElementById('modal-desc').textContent = ex.desc;
       document.getElementById('video-modal').classList.add('active');
     }
     
@@ -1532,23 +654,131 @@
       document.getElementById('modal-video').innerHTML = '';
     }
     
-    // Закрытие по клику вне
-    document.getElementById('video-modal').addEventListener('click', function(e) {
-      if (e.target === this) closeModal();
-    });
+    function markTodayDone() {
+      const todayStr = new Date().toDateString();
+      if (!progressData.completedDays.includes(todayStr)) {
+        progressData.completedDays.push(todayStr);
+        localStorage.setItem('fitproProgress', JSON.stringify(progressData));
+        alert('🎉 Молодец! Тренировка отмечена!');
+        renderCalendar();
+      }
+    }
     
-    // Инициализация плеера при загрузке
-    setTimeout(() => initPlayer(), 1000);
+    // === КАЛЕНДАРЬ ===
+    function renderCalendar() {
+      const grid = document.getElementById('calendar-grid');
+      const today = new Date();
+      
+      grid.innerHTML = workoutPlan.map((day, i) => {
+        const dayNum = i + 1;
+        const isToday = (today.getDay() === 0 ? 6 : today.getDay() - 1) === i;
+        const isDone = progressData.completedDays.some(d => new Date(d).getDay() === i + 1);
+        
+        return '<div class="calendar-day' + (isToday ? ' today' : '') + (isDone ? ' done' : '') + '">' +
+          '<div class="day-num">' + dayNum + '</div>' +
+          '<div class="workout-type">' + day.type + '</div>' +
+          (isDone ? '<div style="margin-top:5px; font-size:20px;">✅</div>' : '') +
+          '</div>';
+      }).join('');
+    }
     
-    // Загрузка моей музыки
-    renderMyPlaylist();
+    // === ПРОГРЕСС ===
+    function addProgress() {
+      const weight = document.getElementById('weight').value;
+      if (!weight) return alert('Введи вес!');
+      
+      progressData.entries.push({
+        date: new Date().toISOString(),
+        weight,
+        waist: document.getElementById('waist').value,
+        hips: document.getElementById('hips').value,
+        arms: document.getElementById('arms').value
+      });
+      localStorage.setItem('fitproProgress', JSON.stringify(progressData));
+      renderProgress();
+      alert('✅ Прогресс записан!');
+    }
+    
+    function renderProgress() {
+      const entries = progressData.entries;
+      const currentWeight = entries[entries.length - 1]?.weight || 65;
+      const startWeight = entries[0]?.weight || 65;
+      const lost = (startWeight - currentWeight).toFixed(1);
+      
+      document.getElementById('progress-stats').innerHTML = 
+        '<div class="stat-card"><div class="icon">⚖️</div><div class="value">' + currentWeight + '</div><div class="label">Текущий вес</div></div>' +
+        '<div class="stat-card"><div class="icon">📉</div><div class="value">' + lost + '</div><div class="label">Сброшено (кг)</div></div>' +
+        '<div class="stat-card"><div class="icon">✅</div><div class="value">' + progressData.completedDays.length + '</div><div class="label">Тренировок</div></div>';
+    }
+    
+    // === ПРИВЫЧКИ ===
+    const habitsList = [
+      { id: 'water', icon: '💧', name: '8 стаканов воды' },
+      { id: 'workout', icon: '💪', name: 'Тренировка' },
+      { id: 'breakfast', icon: '🍳', name: 'Здоровый завтрак' },
+      { id: 'no_sugar', icon: '🚫', name: 'Без сахара' },
+      { id: 'sleep', icon: '😴', name: 'Сон 7-8 часов' },
+      { id: 'walk', icon: '🚶', name: 'Прогулка 30 мин' }
+    ];
+    
+    function renderHabits() {
+      const todayStr = new Date().toDateString();
+      if (!progressData.habits[todayStr]) progressData.habits[todayStr] = {};
+      
+      document.getElementById('habits-list').innerHTML = habitsList.map(h => {
+        const done = progressData.habits[todayStr][h.id];
+        return '<div class="habit-item' + (done ? ' done' : '') + '" onclick="toggleHabit(\'' + h.id + '\')">' +
+          '<input type="checkbox" ' + (done ? 'checked' : '') + '>' +
+          '<span class="icon">' + h.icon + '</span>' +
+          '<span class="name">' + h.name + '</span>' +
+          (done ? '<span style="color:#00ff88;">✓</span>' : '') +
+          '</div>';
+      }).join('');
+      
+      const doneCount = Object.values(progressData.habits[todayStr]).filter(v => v).length;
+      document.getElementById('habits-streak').textContent = progressData.completedDays.length;
+      document.getElementById('habits-total').textContent = doneCount;
+    }
+    
+    function toggleHabit(id) {
+      const todayStr = new Date().toDateString();
+      if (!progressData.habits[todayStr]) progressData.habits[todayStr] = {};
+      progressData.habits[todayStr][id] = !progressData.habits[todayStr][id];
+      localStorage.setItem('fitproProgress', JSON.stringify(progressData));
+      renderHabits();
+    }
+    
+    // === ВОДА ===
+    function addWater() {
+      progressData.waterToday = (progressData.waterToday || 0) + 1;
+      document.getElementById('water-count').textContent = progressData.waterToday + '/8';
+      localStorage.setItem('fitproProgress', JSON.stringify(progressData));
+    }
+    
+    // === ИНБОДИ ===
+    function calculateInBody() {
+      const weight = parseFloat(document.getElementById('inbody-weight').value);
+      const height = parseFloat(document.getElementById('inbody-height').value) / 100;
+      const age = parseInt(document.getElementById('inbody-age').value);
+      const waist = parseFloat(document.getElementById('inbody-waist').value);
+      const hips = parseFloat(document.getElementById('inbody-hips').value);
+      
+      const bmi = (weight / (height * height)).toFixed(1);
+      const bodyFat = (495 / (1.29579 - 0.35004 * Math.log10(waist + hips - 32) + 0.22100 * Math.log10(height * 100)) - 450).toFixed(1);
+      const bmr = Math.round(10 * weight + 6.25 * (height * 100) - 5 * age - 161);
+      const tdee = Math.round(bmr * 1.4);
+      const target = Math.round(tdee * 0.75);
+      
+      document.getElementById('inbody-results').style.display = 'grid';
+      document.getElementById('inbody-results').innerHTML = 
+        '<div class="stat-card"><div class="icon">⚖️</div><div class="value">' + bmi + '</div><div class="label">ИМТ</div></div>' +
+        '<div class="stat-card"><div class="icon">🥩</div><div class="value">' + bodyFat + '%</div><div class="label">% Жира</div></div>' +
+        '<div class="stat-card"><div class="icon">🔥</div><div class="value">' + bmr + '</div><div class="label">Калории (покой)</div></div>' +
+        '<div class="stat-card"><div class="icon">📊</div><div class="value">' + tdee + '</div><div class="label">Калории (день)</div></div>' +
+        '<div class="stat-card"><div class="icon">🎯</div><div class="value">' + target + '</div><div class="label">Для похудения</div></div>';
+    }
     
     init();
   </script>
-  
-  <!-- Скрытый iframe для музыкального плеера -->
-  <div id="music-player-frame" style="display:none;"></div>
-</body>
-</html>
 </body>
 </html>
diff --git a/pro_version.html b/pro_version.html
new file mode 100644
index 0000000..4b7a530
--- /dev/null
+++ b/pro_version.html
@@ -0,0 +1,784 @@
+<!doctype html>
+<html lang="ru">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>FitPro Platform — Профессиональная версия</title>
+  <style>
+    * { margin: 0; box-sizing: border-box; }
+    body {
+      font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
+      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+      min-height: 100vh;
+      color: white;
+    }
+    .container { max-width: 1400px; margin: 0 auto; padding: 20px; }
+    
+    /* Header */
+    header {
+      text-align: center;
+      padding: 60px 20px;
+      background: linear-gradient(rgba(26,26,46,0.8), rgba(26,26,46,0.9)), 
+                  url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=1920') center/cover;
+      border-radius: 20px;
+      margin-bottom: 30px;
+      position: relative;
+      overflow: hidden;
+    }
+    header::before {
+      content: '';
+      position: absolute;
+      top: 0; left: 0; right: 0; bottom: 0;
+      background: linear-gradient(135deg, rgba(0,217,255,0.1), rgba(0,255,136,0.1));
+    }
+    header h1 {
+      position: relative;
+      font-size: clamp(32px, 6vw, 56px);
+      font-weight: 800;
+      margin-bottom: 10px;
+      background: linear-gradient(90deg, #00d9ff, #00ff88);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    header p {
+      position: relative;
+      font-size: 18px;
+      color: rgba(255,255,255,0.8);
+    }
+    
+    /* Navigation */
+    .nav {
+      display: flex;
+      gap: 12px;
+      justify-content: center;
+      flex-wrap: wrap;
+      margin-bottom: 40px;
+      padding: 20px;
+      background: rgba(255,255,255,0.05);
+      backdrop-filter: blur(20px);
+      border-radius: 20px;
+      border: 1px solid rgba(255,255,255,0.1);
+    }
+    .nav button {
+      padding: 14px 28px;
+      border: 2px solid rgba(0,217,255,0.3);
+      background: rgba(0,217,255,0.1);
+      color: #00d9ff;
+      border-radius: 30px;
+      font-size: 15px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.3s;
+      backdrop-filter: blur(10px);
+    }
+    .nav button:hover,
+    .nav button.active {
+      background: linear-gradient(135deg, #00d9ff, #00ff88);
+      color: #1a1a2e;
+      border-color: transparent;
+      transform: translateY(-3px);
+      box-shadow: 0 10px 30px rgba(0,217,255,0.4);
+    }
+    
+    /* Sections */
+    .section {
+      background: rgba(255,255,255,0.05);
+      backdrop-filter: blur(20px);
+      border: 1px solid rgba(255,255,255,0.1);
+      border-radius: 20px;
+      padding: 40px;
+      margin-bottom: 30px;
+      display: none;
+    }
+    .section.active { display: block; }
+    
+    h2 {
+      font-size: 32px;
+      margin-bottom: 10px;
+      background: linear-gradient(90deg, #00d9ff, #00ff88);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    h3 {
+      font-size: 22px;
+      color: #00ff88;
+      margin: 30px 0 20px;
+    }
+    
+    /* Stats Grid */
+    .stats-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 20px;
+      margin: 30px 0;
+    }
+    .stat-card {
+      background: linear-gradient(135deg, rgba(0,217,255,0.15), rgba(0,255,136,0.15));
+      border: 1px solid rgba(0,217,255,0.3);
+      border-radius: 16px;
+      padding: 30px;
+      text-align: center;
+      transition: 0.3s;
+    }
+    .stat-card:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 15px 40px rgba(0,217,255,0.3);
+    }
+    .stat-card .icon { font-size: 40px; margin-bottom: 10px; }
+    .stat-card .value {
+      font-size: 42px;
+      font-weight: bold;
+      background: linear-gradient(90deg, #00d9ff, #00ff88);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      margin: 10px 0;
+    }
+    .stat-card .label { color: rgba(255,255,255,0.7); font-size: 14px; }
+    
+    /* Buttons */
+    .btn {
+      padding: 16px 32px;
+      background: linear-gradient(135deg, #00d9ff, #00ff88);
+      color: #1a1a2e;
+      border: none;
+      border-radius: 12px;
+      font-size: 16px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: 0.3s;
+      display: inline-block;
+    }
+    .btn:hover {
+      transform: translateY(-3px);
+      box-shadow: 0 10px 30px rgba(0,217,255,0.4);
+    }
+    .btn-block { width: 100%; }
+    .btn-secondary {
+      background: rgba(255,255,255,0.1);
+      color: white;
+      border: 2px solid rgba(255,255,255,0.3);
+    }
+    
+    /* Forms */
+    .form-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 15px;
+      margin: 20px 0;
+    }
+    .form-group input, .form-group select {
+      width: 100%;
+      padding: 15px;
+      background: rgba(255,255,255,0.08);
+      border: 2px solid rgba(255,255,255,0.2);
+      border-radius: 12px;
+      color: white;
+      font-size: 16px;
+    }
+    .form-group input:focus, .form-group select:focus {
+      border-color: #00d9ff;
+      outline: none;
+      box-shadow: 0 0 0 4px rgba(0,217,255,0.1);
+    }
+    .form-group input::placeholder { color: rgba(255,255,255,0.5); }
+    .form-group select option { background: #1a1a2e; color: white; }
+    
+    /* Exercise Cards */
+    .exercise-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+      gap: 20px;
+      margin: 20px 0;
+    }
+    .exercise-card {
+      background: rgba(255,255,255,0.08);
+      border: 1px solid rgba(255,255,255,0.15);
+      border-radius: 16px;
+      overflow: hidden;
+      transition: 0.3s;
+    }
+    .exercise-card:hover {
+      border-color: #00d9ff;
+      transform: translateY(-5px);
+      box-shadow: 0 15px 40px rgba(0,217,255,0.2);
+    }
+    .exercise-card .video {
+      width: 100%;
+      aspect-ratio: 16/9;
+      background: linear-gradient(135deg, #00d9ff, #00ff88);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #1a1a2e;
+      font-size: 48px;
+      cursor: pointer;
+    }
+    .exercise-card .info { padding: 20px; }
+    .exercise-card h4 { color: #00ff88; margin-bottom: 10px; }
+    .exercise-card p { color: rgba(255,255,255,0.7); font-size: 14px; line-height: 1.6; }
+    
+    /* Music Player */
+    .music-player {
+      background: linear-gradient(135deg, rgba(0,217,255,0.2), rgba(0,255,136,0.2));
+      border: 2px solid rgba(0,217,255,0.3);
+      border-radius: 16px;
+      padding: 25px;
+      margin: 20px 0;
+    }
+    .player-controls {
+      display: flex;
+      align-items: center;
+      gap: 15px;
+      flex-wrap: wrap;
+      margin: 15px 0;
+    }
+    .player-btn {
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+      border: none;
+      background: white;
+      color: #00d9ff;
+      font-size: 20px;
+      cursor: pointer;
+      transition: 0.3s;
+    }
+    .player-btn:hover { transform: scale(1.1); }
+    .player-btn.big {
+      width: 60px;
+      height: 60px;
+      font-size: 28px;
+    }
+    .playlist-select {
+      flex: 1;
+      min-width: 200px;
+      padding: 12px;
+      border-radius: 10px;
+      border: none;
+      background: rgba(255,255,255,0.9);
+      color: #1a1a2e;
+      font-size: 14px;
+    }
+    .now-playing {
+      margin-top: 15px;
+      font-size: 14px;
+      color: rgba(255,255,255,0.9);
+    }
+    
+    /* Progress Bar */
+    .progress-bar {
+      background: rgba(255,255,255,0.1);
+      border-radius: 10px;
+      height: 24px;
+      margin: 20px 0;
+      overflow: hidden;
+    }
+    .progress-fill {
+      background: linear-gradient(90deg, #00d9ff, #00ff88);
+      height: 100%;
+      border-radius: 10px;
+      transition: width 0.5s;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      padding-right: 15px;
+      color: #1a1a2e;
+      font-weight: bold;
+      font-size: 14px;
+    }
+    
+    /* Calendar */
+    .calendar-grid {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      gap: 10px;
+      margin: 20px 0;
+    }
+    .calendar-day {
+      background: rgba(255,255,255,0.08);
+      border-radius: 12px;
+      padding: 15px 10px;
+      text-align: center;
+      min-height: 100px;
+      cursor: pointer;
+      transition: 0.3s;
+      border: 2px solid transparent;
+    }
+    .calendar-day:hover { border-color: #00d9ff; }
+    .calendar-day.today {
+      background: linear-gradient(135deg, #00d9ff, #00ff88);
+      color: #1a1a2e;
+    }
+    .calendar-day.done {
+      background: rgba(0,255,136,0.3);
+      border-color: #00ff88;
+    }
+    .calendar-day .day-num {
+      font-size: 20px;
+      font-weight: bold;
+      margin-bottom: 5px;
+    }
+    .calendar-day .workout-type {
+      font-size: 11px;
+      line-height: 1.4;
+    }
+    
+    /* Habits */
+    .habit-item {
+      background: rgba(255,255,255,0.08);
+      border: 1px solid rgba(255,255,255,0.15);
+      border-radius: 12px;
+      padding: 15px;
+      margin: 10px 0;
+      display: flex;
+      align-items: center;
+      gap: 15px;
+      cursor: pointer;
+      transition: 0.3s;
+    }
+    .habit-item:hover {
+      border-color: #00ff88;
+      background: rgba(0,255,136,0.1);
+    }
+    .habit-item.done {
+      background: linear-gradient(135deg, rgba(0,255,136,0.2), rgba(0,217,255,0.2));
+      border-color: #00ff88;
+    }
+    .habit-item input[type="checkbox"] {
+      width: 24px;
+      height: 24px;
+      cursor: pointer;
+    }
+    .habit-item .icon { font-size: 28px; }
+    .habit-item .name { flex: 1; font-size: 16px; }
+    
+    /* Modal */
+    .modal {
+      display: none;
+      position: fixed;
+      top: 0; left: 0;
+      width: 100%; height: 100%;
+      background: rgba(0,0,0,0.9);
+      z-index: 1000;
+      align-items: center;
+      justify-content: center;
+    }
+    .modal.active { display: flex; }
+    .modal-content {
+      background: #1a1a2e;
+      border: 2px solid #00d9ff;
+      border-radius: 20px;
+      padding: 40px;
+      max-width: 900px;
+      width: 90%;
+      max-height: 90vh;
+      overflow-y: auto;
+    }
+    .modal-close {
+      float: right;
+      font-size: 32px;
+      cursor: pointer;
+      color: #00d9ff;
+    }
+    
+    /* Responsive */
+    @media (max-width: 768px) {
+      .section { padding: 25px; }
+      .stats-grid { grid-template-columns: repeat(2, 1fr); }
+      .calendar-grid { grid-template-columns: repeat(7, 1fr); gap: 5px; }
+      .calendar-day { min-height: 70px; padding: 10px 5px; }
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <header>
+      <h1>💪 FitPro Platform</h1>
+      <p>Профессиональная система трансформации тела</p>
+    </header>
+    
+    <nav class="nav">
+      <button class="active" onclick="showSection('today')">📅 Сегодня</button>
+      <button onclick="showSection('catalog')">🎬 Упражнения</button>
+      <button onclick="showSection('calendar')">📆 Календарь</button>
+      <button onclick="showSection('tracker')">📊 Прогресс</button>
+      <button onclick="showSection('nutrition')">🥗 Питание</button>
+      <button onclick="showSection('habits')">✨ Привычки</button>
+      <button onclick="showSection('inbody')">📐 ИнБоди</button>
+    </nav>
+    
+    <!-- СЕКЦИЯ: СЕГОДНЯ -->
+    <div id="today" class="section active">
+      <h2>🔥 Тренировка на сегодня</h2>
+      
+      <!-- Музыкальный плеер -->
+      <div class="music-player">
+        <h3 style="margin-top:0; color: #00ff88;">🎵 Мотивационная музыка</h3>
+        <div class="player-controls">
+          <button class="player-btn" onclick="prevTrack()">⏮</button>
+          <button class="player-btn big" onclick="togglePlay()" id="play-btn">▶</button>
+          <button class="player-btn" onclick="nextTrack()">⏭</button>
+          <select class="playlist-select" id="playlist-select" onchange="changePlaylist()">
+            <option value="workout">💪 Для тренировки</option>
+            <option value="cardio">🏃 Кардио</option>
+            <option value="hits2000">🎤 Хиты 2000-х</option>
+            <option value="taylor">🎵 Taylor Swift</option>
+            <option value="brunomars">🎤 Bruno Mars</option>
+            <option value="eminem">🎤 Eminem</option>
+            <option value="kazakh">🇰🇿 Казахские</option>
+            <option value="russian">🇷🇺 Русские</option>
+            <option value="yoga">🧘 Релакс</option>
+            <option value="motivation">🔥 Мотивация</option>
+            <option value="my">🎵 Моя музыка</option>
+          </select>
+        </div>
+        <div class="now-playing" id="now-playing">Выберите плейлист и нажмите ▶</div>
+      </div>
+      
+      <div class="stats-grid">
+        <div class="stat-card">
+          <div class="icon">🎯</div>
+          <div class="value">День 1</div>
+          <div class="label">Тренировка</div>
+        </div>
+        <div class="stat-card">
+          <div class="icon">⏱️</div>
+          <div class="value">45 мин</div>
+          <div class="label">Длительность</div>
+        </div>
+        <div class="stat-card">
+          <div class="icon">🔥</div>
+          <div class="value">350</div>
+          <div class="label">Ккал сожжётся</div>
+        </div>
+        <div class="stat-card">
+          <div class="icon">💪</div>
+          <div class="value">Осанка + Пресс</div>
+          <div class="label">Фокус</div>
+        </div>
+      </div>
+      
+      <div class="exercise-grid" id="today-exercises"></div>
+      
+      <button class="btn btn-block" onclick="markTodayDone()">✅ Отметить тренировку выполненной</button>
+    </div>
+    
+    <!-- СЕКЦИЯ: УПРАЖНЕНИЯ -->
+    <div id="catalog" class="section">
+      <h2>🎬 Каталог упражнений</h2>
+      <div class="exercise-grid" id="exercise-catalog"></div>
+    </div>
+    
+    <!-- СЕКЦИЯ: КАЛЕНДАРЬ -->
+    <div id="calendar" class="section">
+      <h2>📆 Календарь на 8 недель</h2>
+      <div class="progress-bar">
+        <div class="progress-fill" id="week-progress" style="width: 12%;">Неделя 1</div>
+      </div>
+      <div class="calendar-grid" id="calendar-grid"></div>
+    </div>
+    
+    <!-- СЕКЦИЯ: ПРОГРЕСС -->
+    <div id="tracker" class="section">
+      <h2>📊 Трекер прогресса</h2>
+      <div class="form-grid">
+        <div class="form-group"><input type="number" id="weight" placeholder="Вес (кг)" step="0.1"></div>
+        <div class="form-group"><input type="number" id="waist" placeholder="Талия (см)"></div>
+        <div class="form-group"><input type="number" id="hips" placeholder="Бёдра (см)"></div>
+        <div class="form-group"><input type="number" id="arms" placeholder="Руки (см)"></div>
+        <div class="form-group"><button class="btn btn-block" onclick="addProgress()">Записать</button></div>
+      </div>
+      <div class="stats-grid" id="progress-stats"></div>
+      <div id="progress-history"></div>
+    </div>
+    
+    <!-- СЕКЦИЯ: ПИТАНИЕ -->
+    <div id="nutrition" class="section">
+      <h2>🥗 Питание</h2>
+      <div class="stats-grid">
+        <div class="stat-card">
+          <div class="icon">🎯</div>
+          <div class="value">1530</div>
+          <div class="label">Ккал в день</div>
+        </div>
+        <div class="stat-card">
+          <div class="icon">💧</div>
+          <div class="value" id="water-count">0/8</div>
+          <div class="label">Стаканов воды</div>
+        </div>
+        <div class="stat-card">
+          <div class="icon">🥩</div>
+          <div class="value">98 г</div>
+          <div class="label">Белок</div>
+        </div>
+      </div>
+      <button class="btn" onclick="addWater()">💧 + Стакан воды</button>
+    </div>
+    
+    <!-- СЕКЦИЯ: ПРИВЫЧКИ -->
+    <div id="habits" class="section">
+      <h2>✨ Полезные привычки</h2>
+      <div id="habits-list"></div>
+      <div class="stats-grid" style="margin-top: 30px;">
+        <div class="stat-card">
+          <div class="icon">🔥</div>
+          <div class="value" id="habits-streak">0</div>
+          <div class="label">Дней подряд</div>
+        </div>
+        <div class="stat-card">
+          <div class="icon">✅</div>
+          <div class="value" id="habits-total">0</div>
+          <div class="label">Всего выполнено</div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- СЕКЦИЯ: ИНБОДИ -->
+    <div id="inbody" class="section">
+      <h2>📐 ИнБоди — Анализ тела</h2>
+      <div class="form-grid">
+        <div class="form-group"><input type="number" id="inbody-weight" placeholder="Вес (кг)" value="65"></div>
+        <div class="form-group"><input type="number" id="inbody-height" placeholder="Рост (см)" value="165"></div>
+        <div class="form-group"><input type="number" id="inbody-age" placeholder="Возраст" value="37"></div>
+        <div class="form-group">
+          <select id="inbody-gender">
+            <option value="female">Женский</option>
+            <option value="male">Мужской</option>
+          </select>
+        </div>
+        <div class="form-group"><input type="number" id="inbody-waist" placeholder="Талия (см)" value="70"></div>
+        <div class="form-group"><input type="number" id="inbody-hips" placeholder="Бёдра (см)" value="95"></div>
+        <div class="form-group"><input type="number" id="inbody-neck" placeholder="Шея (см)" value="32"></div>
+        <div class="form-group"><button class="btn btn-block" onclick="calculateInBody()">🔍 Рассчитать</button></div>
+      </div>
+      <div class="stats-grid" id="inbody-results" style="display: none;"></div>
+    </div>
+  </div>
+  
+  <!-- Модальное окно для видео -->
+  <div class="modal" id="video-modal">
+    <div class="modal-content">
+      <span class="modal-close" onclick="closeModal()">&times;</span>
+      <h3 id="modal-title" style="color: #00ff88;"></h3>
+      <div id="modal-video" style="margin: 20px 0;"></div>
+      <p id="modal-desc" style="color: rgba(255,255,255,0.8); line-height: 1.6;"></p>
+    </div>
+  </div>
+
+  <script>
+    // === ДАННЫЕ ===
+    const exercises = [
+      { id: 1, name: "Кошка-корова", category: "posture", focus: "Гиперлордоз", time: "2 мин", video: "https://www.youtube.com/embed/2qhJb8SvHjM", desc: "Медленно прогибай спину вверх, затем вниз" },
+      { id: 2, name: "Стена у стены", category: "posture", focus: "Осанка", time: "1 мин", video: "https://www.youtube.com/embed/k_FZCvsL53w", desc: "Встань спиной к стене, прижми затылок и лопатки" },
+      { id: 3, name: "Планка", category: "abs", focus: "Пресс, кор", time: "60 сек", video: "https://www.youtube.com/embed/pSHjTRCQxIw", desc: "Держи тело ровно, не прогибай поясницу" },
+      { id: 4, name: "Велосипед", category: "abs", focus: "Косые мышцы", time: "2 мин", video: "https://www.youtube.com/embed/1obhK7pOwEw", desc: "Локтем касайся противоположного колена" },
+      { id: 5, name: "Приседания", category: "legs", focus: "Ноги, ягодицы", time: "3 мин", video: "https://www.youtube.com/embed/U0t2KK8vLzU", desc: "Спина ровная, колени не выходят за носки" },
+      { id: 6, name: "Отжимания", category: "arms", focus: "Руки, грудь", time: "2 мин", video: "https://www.youtube.com/embed/IODxDxX7oi4", desc: "От стены или от пола" }
+    ];
+    
+    const workoutPlan = [
+      { type: "Осанка + Пресс", exercises: [1, 2, 3, 4] },
+      { type: "Руки + Кардио", exercises: [6, 5] },
+      { type: "Ноги + Ягодицы", exercises: [5, 3, 4] },
+      { type: "Полная тренировка", exercises: [1, 2, 3, 4, 5, 6] },
+      { type: "Осанка + Пресс", exercises: [1, 2, 3, 4] },
+      { type: "Руки + Кардио", exercises: [6, 5] },
+      { type: "Отдых", exercises: [] }
+    ];
+    
+    let progressData = JSON.parse(localStorage.getItem('fitproProgress') || '{"entries":[],"completedDays":[],"water":[],"waterToday":0,"habits":{}}');
+    
+    // === ИНИЦИАЛИЗАЦИЯ ===
+    function init() {
+      renderTodayWorkout();
+      renderCatalog();
+      renderCalendar();
+      renderProgress();
+      renderHabits();
+    }
+    
+    function showSection(id) {
+      document.querySelectorAll('.section').forEach(s => s.classList.remove('active'));
+      document.querySelectorAll('.nav button').forEach(b => b.classList.remove('active'));
+      document.getElementById(id).classList.add('active');
+      event.target.classList.add('active');
+    }
+    
+    // === ТРЕНИРОВКА ДНЯ ===
+    function renderTodayWorkout() {
+      const today = workoutPlan[new Date().getDay() === 0 ? 6 : new Date().getDay() - 1];
+      const container = document.getElementById('today-exercises');
+      
+      if (today.exercises.length === 0) {
+        container.innerHTML = '<div class="exercise-card" style="grid-column: 1/-1; text-align: center; padding: 40px;"><h3 style="color: #00ff88;">🧘 Сегодня день отдыха!</h3><p>Сделай лёгкую растяжку или прогулку.</p></div>';
+        return;
+      }
+      
+      container.innerHTML = today.exercises.map(exId => {
+        const ex = exercises.find(e => e.id === exId);
+        return '<div class="exercise-card">' +
+          '<div class="video" onclick="openVideo(' + ex.id + ')">▶</div>' +
+          '<div class="info">' +
+          '<h4>' + ex.name + '</h4>' +
+          '<p>🎯 ' + ex.focus + ' • ⏱️ ' + ex.time + '</p>' +
+          '<p>' + ex.desc + '</p>' +
+          '</div></div>';
+      }).join('');
+    }
+    
+    function renderCatalog() {
+      document.getElementById('exercise-catalog').innerHTML = exercises.map(ex => 
+        '<div class="exercise-card">' +
+        '<div class="video" onclick="openVideo(' + ex.id + ')">▶</div>' +
+        '<div class="info">' +
+        '<h4>' + ex.name + '</h4>' +
+        '<p>🎯 ' + ex.focus + ' • ⏱️ ' + ex.time + '</p>' +
+        '<p>' + ex.desc + '</p>' +
+        '</div></div>'
+      ).join('');
+    }
+    
+    function openVideo(id) {
+      const ex = exercises.find(e => e.id === id);
+      document.getElementById('modal-title').textContent = ex.name;
+      document.getElementById('modal-video').innerHTML = '<iframe width="100%" height="400" src="' + ex.video + '" frameborder="0" allowfullscreen style="border-radius:12px;"></iframe>';
+      document.getElementById('modal-desc').textContent = ex.desc;
+      document.getElementById('video-modal').classList.add('active');
+    }
+    
+    function closeModal() {
+      document.getElementById('video-modal').classList.remove('active');
+      document.getElementById('modal-video').innerHTML = '';
+    }
+    
+    function markTodayDone() {
+      const todayStr = new Date().toDateString();
+      if (!progressData.completedDays.includes(todayStr)) {
+        progressData.completedDays.push(todayStr);
+        localStorage.setItem('fitproProgress', JSON.stringify(progressData));
+        alert('🎉 Молодец! Тренировка отмечена!');
+        renderCalendar();
+      }
+    }
+    
+    // === КАЛЕНДАРЬ ===
+    function renderCalendar() {
+      const grid = document.getElementById('calendar-grid');
+      const today = new Date();
+      
+      grid.innerHTML = workoutPlan.map((day, i) => {
+        const dayNum = i + 1;
+        const isToday = (today.getDay() === 0 ? 6 : today.getDay() - 1) === i;
+        const isDone = progressData.completedDays.some(d => new Date(d).getDay() === i + 1);
+        
+        return '<div class="calendar-day' + (isToday ? ' today' : '') + (isDone ? ' done' : '') + '">' +
+          '<div class="day-num">' + dayNum + '</div>' +
+          '<div class="workout-type">' + day.type + '</div>' +
+          (isDone ? '<div style="margin-top:5px; font-size:20px;">✅</div>' : '') +
+          '</div>';
+      }).join('');
+    }
+    
+    // === ПРОГРЕСС ===
+    function addProgress() {
+      const weight = document.getElementById('weight').value;
+      if (!weight) return alert('Введи вес!');
+      
+      progressData.entries.push({
+        date: new Date().toISOString(),
+        weight,
+        waist: document.getElementById('waist').value,
+        hips: document.getElementById('hips').value,
+        arms: document.getElementById('arms').value
+      });
+      localStorage.setItem('fitproProgress', JSON.stringify(progressData));
+      renderProgress();
+      alert('✅ Прогресс записан!');
+    }
+    
+    function renderProgress() {
+      const entries = progressData.entries;
+      const currentWeight = entries[entries.length - 1]?.weight || 65;
+      const startWeight = entries[0]?.weight || 65;
+      const lost = (startWeight - currentWeight).toFixed(1);
+      
+      document.getElementById('progress-stats').innerHTML = 
+        '<div class="stat-card"><div class="icon">⚖️</div><div class="value">' + currentWeight + '</div><div class="label">Текущий вес</div></div>' +
+        '<div class="stat-card"><div class="icon">📉</div><div class="value">' + lost + '</div><div class="label">Сброшено (кг)</div></div>' +
+        '<div class="stat-card"><div class="icon">✅</div><div class="value">' + progressData.completedDays.length + '</div><div class="label">Тренировок</div></div>';
+    }
+    
+    // === ПРИВЫЧКИ ===
+    const habitsList = [
+      { id: 'water', icon: '💧', name: '8 стаканов воды' },
+      { id: 'workout', icon: '💪', name: 'Тренировка' },
+      { id: 'breakfast', icon: '🍳', name: 'Здоровый завтрак' },
+      { id: 'no_sugar', icon: '🚫', name: 'Без сахара' },
+      { id: 'sleep', icon: '😴', name: 'Сон 7-8 часов' },
+      { id: 'walk', icon: '🚶', name: 'Прогулка 30 мин' }
+    ];
+    
+    function renderHabits() {
+      const todayStr = new Date().toDateString();
+      if (!progressData.habits[todayStr]) progressData.habits[todayStr] = {};
+      
+      document.getElementById('habits-list').innerHTML = habitsList.map(h => {
+        const done = progressData.habits[todayStr][h.id];
+        return '<div class="habit-item' + (done ? ' done' : '') + '" onclick="toggleHabit(\'' + h.id + '\')">' +
+          '<input type="checkbox" ' + (done ? 'checked' : '') + '>' +
+          '<span class="icon">' + h.icon + '</span>' +
+          '<span class="name">' + h.name + '</span>' +
+          (done ? '<span style="color:#00ff88;">✓</span>' : '') +
+          '</div>';
+      }).join('');
+      
+      const doneCount = Object.values(progressData.habits[todayStr]).filter(v => v).length;
+      document.getElementById('habits-streak').textContent = progressData.completedDays.length;
+      document.getElementById('habits-total').textContent = doneCount;
+    }
+    
+    function toggleHabit(id) {
+      const todayStr = new Date().toDateString();
+      if (!progressData.habits[todayStr]) progressData.habits[todayStr] = {};
+      progressData.habits[todayStr][id] = !progressData.habits[todayStr][id];
+      localStorage.setItem('fitproProgress', JSON.stringify(progressData));
+      renderHabits();
+    }
+    
+    // === ВОДА ===
+    function addWater() {
+      progressData.waterToday = (progressData.waterToday || 0) + 1;
+      document.getElementById('water-count').textContent = progressData.waterToday + '/8';
+      localStorage.setItem('fitproProgress', JSON.stringify(progressData));
+    }
+    
+    // === ИНБОДИ ===
+    function calculateInBody() {
+      const weight = parseFloat(document.getElementById('inbody-weight').value);
+      const height = parseFloat(document.getElementById('inbody-height').value) / 100;
+      const age = parseInt(document.getElementById('inbody-age').value);
+      const waist = parseFloat(document.getElementById('inbody-waist').value);
+      const hips = parseFloat(document.getElementById('inbody-hips').value);
+      
+      const bmi = (weight / (height * height)).toFixed(1);
+      const bodyFat = (495 / (1.29579 - 0.35004 * Math.log10(waist + hips - 32) + 0.22100 * Math.log10(height * 100)) - 450).toFixed(1);
+      const bmr = Math.round(10 * weight + 6.25 * (height * 100) - 5 * age - 161);
+      const tdee = Math.round(bmr * 1.4);
+      const target = Math.round(tdee * 0.75);
+      
+      document.getElementById('inbody-results').style.display = 'grid';
+      document.getElementById('inbody-results').innerHTML = 
+        '<div class="stat-card"><div class="icon">⚖️</div><div class="value">' + bmi + '</div><div class="label">ИМТ</div></div>' +
+        '<div class="stat-card"><div class="icon">🥩</div><div class="value">' + bodyFat + '%</div><div class="label">% Жира</div></div>' +
+        '<div class="stat-card"><div class="icon">🔥</div><div class="value">' + bmr + '</div><div class="label">Калории (покой)</div></div>' +
+        '<div class="stat-card"><div class="icon">📊</div><div class="value">' + tdee + '</div><div class="label">Калории (день)</div></div>' +
+        '<div class="stat-card"><div class="icon">🎯</div><div class="value">' + target + '</div><div class="label">Для похудения</div></div>';
+    }
+    
+    init();
+  </script>
+</body>
+</html>
