function loadProgress() {
  var container = document.getElementById('progress-container');

  // ----- existing stats -----
  var items = getSavedItems();
  var total = items.length;
  var tagCounts = {};
  for (var i = 0; i < items.length; i++) {
    var tag = items[i].tag || 'General';
    tagCounts[tag] = (tagCounts[tag] || 0) + 1;
  }
  var sortedTags = Object.keys(tagCounts).map(function(k) { return [k, tagCounts[k]]; });
  sortedTags.sort(function(a, b) { return b[1] - a[1]; });
  var maxCount = sortedTags.length > 0 ? sortedTags[0][1] : 1;
  var mostTag = 'None';
  if (sortedTags.length > 0) mostTag = sortedTags[0][0] + ' (' + sortedTags[0][1] + ')';

  // ---- Daily Learning Streak ----
  var streak = computeStreak();
  var today = getToday();
  var day = getDayData(today);
  var completed = isDayCompleted(today);

  // Build last 7 days
  var daysHtml = '';
  var d = new Date();
  for (var k = 6; k >= 0; k--) {
    var dateObj = new Date(d);
    dateObj.setDate(dateObj.getDate() - k);
    var ds = dateObj.toISOString().slice(0, 10);
    var isToday = ds === today;
    var done = isDayCompleted(ds);
    var label = isToday ? 'Today' : dateObj.getDate() + '/' + (dateObj.getMonth()+1);
    var cls = 'lc-day' + (done ? ' done' : '') + (isToday ? ' today' : '');
    daysHtml += '<div class="' + cls + '">' + (isToday ? '📌' : label) + '</div>';
  }

  // ---- Build bars ----
  var barsHtml = '';
  var colors = ['var(--teal)', 'var(--gold)', 'var(--coral)', 'var(--amber)', 'var(--purple)'];
  var colorIndex = 0;
  for (var t = 0; t < sortedTags.length; t++) {
    var tagName = sortedTags[t][0];
    var count = sortedTags[t][1];
    var pct = maxCount > 0 ? Math.round((count / maxCount) * 100) : 0;
    var color = colors[colorIndex % colors.length];
    colorIndex++;
    barsHtml += '<div class="bar-row">' +
                '<div class="bar-label">' + escapeHtml(tagName) + '</div>' +
                '<div class="bar-track"><div class="bar-fill" style="width:' + pct + '%; background:' + color + ';"></div></div>' +
                '<div class="bar-count">' + count + '</div>' +
                '</div>';
  }

  // ---- Render all (no old streak card) ----
  container.innerHTML = '' +
    // Stats grid
    '<div class="progress-grid">' +
    '<div class="progress-stat"><div class="stat-number">' + total + '</div><div class="stat-label">Total Saved</div></div>' +
    '<div class="progress-stat"><div class="stat-number">' + sortedTags.length + '</div><div class="stat-label">Topics</div></div>' +
    '</div>' +

    // Daily Learning Checklist (with streak)
    '<div class="learning-checklist">' +
    '<div class="lc-header">' +
    '<div class="lc-title">📚 Daily Learning</div>' +
    '<div class="lc-streak">🔥 ' + streak + ' day' + (streak !== 1 ? 's' : '') + '</div>' +
    '</div>' +
    '<div class="lc-item">' +
    '<input type="checkbox" id="lc-learned" ' + (day.learned ? 'checked' : '') + ' onchange="toggleActivity(\'learned\')" />' +
    '<label for="lc-learned"><span class="lc-emoji">🧠</span> Learned a new "why" today</label>' +
    '</div>' +
    '<div class="lc-item">' +
    '<input type="checkbox" id="lc-explained" ' + (day.explained ? 'checked' : '') + ' onchange="toggleActivity(\'explained\')" />' +
    '<label for="lc-explained"><span class="lc-emoji">👩‍👧</span> Explained it to my child</label>' +
    '</div>' +
    '<div class="lc-item">' +
    '<input type="checkbox" id="lc-played" ' + (day.played ? 'checked' : '') + ' onchange="toggleActivity(\'played\')" />' +
    '<label for="lc-played"><span class="lc-emoji">🎮</span> Played a 5‑min English game with my child</label>' +
    '</div>' +
    '<div class="lc-status">' + (completed ? '✅ All done today! Keep it up!' : '⚠️ Complete all three to keep your streak!') + '</div>' +
    '<div class="lc-days">' + daysHtml + '</div>' +
    '</div>' +

    // Daily Practice (no streak here)
    '<div class="daily-practice-section">' +
    '<div class="dp-title">📅 Daily Practice</div>' +
    '<div class="dp-status">Review 3 random saved answers to reinforce your learning.</div>' +
    '<button class="dp-btn" onclick="startDailyPractice()">🎯 Start Daily Practice</button>' +
    '</div>' +

    // Tag breakdown
    '<div class="progress-tag-bar">' +
    '<div class="bar-title">📊 Topic Breakdown</div>' +
    (barsHtml || '<div style="color:var(--text-light);">No tags yet.</div>') +
    (sortedTags.length > 0 ? '<div style="font-size:13px; color:var(--text-light); margin-top:8px;">Most saved: <strong>' + mostTag + '</strong></div>' : '') +
    '</div>';
}