Add '📌 You are here — L4+L3 Hybrid' badge above ladder on My Progress tab

index.html

@@ -922,7 +922,21 @@
       border: 1px solid var(--border);
       color: var(--text-muted);
       opacity: 0.5;
-    transition: all 0.3s;
+    }
+    .roi-location-badge {
+      background: linear-gradient(135deg,rgba(99,102,241,0.15),rgba(139,92,246,0.15));
+      border: 1px solid rgba(99,102,241,0.3);
+      border-radius: 8px;
+      padding: 8px 14px;
+      margin-bottom: 12px;
+      font-size: 0.9rem;
+      color: #e2e8f0;
+      display: inline-block;
+    }
+    .roi-location-badge span {
+      color: #818cf8;
+      font-weight: 600;
+    }
   }
   .roi-ladder-step.active {
     background: rgba(108,92,231,0.2);
@@ -1398,6 +1412,7 @@
         <!-- Phase Tracker -->
         <div class="roi-phase-tracker">
           <div class="roi-phase-title">🪜 Your Ladder — Where You Are vs Endgame</div>
+          <div class="roi-location-badge" id="roiLocationBadge">📌 You are here — <span id="roiHerePhase">—</span></div>
           <div class="roi-ladder" id="roiLadder">
             <div class="roi-ladder-step" data-phase="l1">L1</div>
             <div class="roi-ladder-step" data-phase="l2l1">L2+L1</div>
@@ -2189,6 +2204,14 @@ function updateROI() {
   // Ladder visualization
   const ladderOrder = ['l1','l2l1','l3l1','l4','l4l3','l5','l5l3','l6','l6l3','l7solo','l7x3'];
   const phaseIndex = ladderOrder.indexOf(phase);
+  // Location badge
+  const phaseNames = {
+    l1:'L1 Only', l2l1:'L2 + L1', l3l1:'L3 + L1', l4:'L4 Only',
+    l4l3:'L4 + L3 Hybrid', l5:'L5 Only', l5l3:'L5 + L3 Hybrid',
+    l6:'L6 Only', l6l3:'L6 + L3 Hybrid', l7solo:'L7 Solo', l7x3:'3× L7 Endgame'
+  };
+  document.getElementById('roiHerePhase').textContent = phase && phaseNames[phase] ? phaseNames[phase] : '—';
+
   document.querySelectorAll('.roi-ladder-step').forEach(el => {
     el.classList.remove('active', 'passed');
     const idx = ladderOrder.indexOf(el.dataset.phase);