fix(leetcode): visually group heatmap + badges into one bordered card (#6)

The compact badges row was sitting outside the heatmap's card boundary,
making it ambiguous whose badges belonged to whom — readers had to
trace upward past a border to find the engineer name.

- Pull the border out to .lc-heatmap-card itself; remove the inner
  heatmap's border so the whole engineer block is one container:
  header → heatmap → badges, top-to-bottom.
- Add a "Badges · N" subtitle (.lc-badges-compact-title) above the
  icon row, separated by a top border, so the section reads as a
  labeled subsection of the engineer's card rather than a floating
  strip.
- Engineer header gets a bottom border to anchor it visually.

Co-authored-by: Truong Le Vinh Phuc <phuc.truong@katalon.com>
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: 3 people

app/globals.css

@@ -1356,19 +1356,32 @@ footer {
 
 .lc-heatmap-list {
   display: grid;
-  gap: 24px;
+  gap: 20px;
 }
 
 .lc-heatmap-card {
   display: flex;
   flex-direction: column;
-  gap: 14px;
+  gap: 16px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--r-card);
+  padding: 20px;
+}
+
+/* When wrapped in a card, the heatmap doesn't need its own border */
+.lc-heatmap-card .lc-heatmap {
+  background: transparent;
+  border: none;
+  padding: 0;
 }
 
 .lc-heatmap-cardhead {
   display: flex;
   align-items: center;
   gap: 12px;
+  padding-bottom: 14px;
+  border-bottom: 1px solid var(--border);
 }
 
 .lc-heatmap-cardhead a {
@@ -1398,8 +1411,25 @@ footer {
   align-items: center;
 }
 
-.lc-badges-compact {
-  margin-top: 12px;
+.lc-badges-compact-wrap {
+  border-top: 1px solid var(--border);
+  padding-top: 14px;
+}
+
+.lc-badges-compact-title {
+  font-family: var(--font-display);
+  font-size: 0.95rem;
+  font-weight: 500;
+  color: var(--text-bright);
+  margin: 0 0 10px;
+  letter-spacing: -0.2px;
+}
+
+.lc-badges-compact-title .muted {
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+  font-weight: 400;
+  color: var(--text-mute);
 }
 
 .lc-badge {

components/LeetcodeBadges.tsx

@@ -28,13 +28,18 @@ export default function LeetcodeBadges({ badges, variant = "compact", limit }: P
     const list = limit != null ? sorted.slice(0, limit) : sorted;
     const hidden = limit != null ? Math.max(0, sorted.length - limit) : 0;
     return (
-      <div className="lc-badges lc-badges-compact" aria-label={`${sorted.length} badges`}>
-        {list.map((b) => (
-          <span key={b.id} className="lc-badge" title={`${b.name} · ${b.creationDate}`}>
-            <img src={b.icon} alt={b.name} loading="lazy" />
-          </span>
-        ))}
-        {hidden > 0 && <span className="lc-badge-more">+{hidden}</span>}
+      <div className="lc-badges-compact-wrap">
+        <h4 className="lc-badges-compact-title">
+          Badges <span className="muted">· {sorted.length}</span>
+        </h4>
+        <div className="lc-badges" aria-label={`${sorted.length} badges`}>
+          {list.map((b) => (
+            <span key={b.id} className="lc-badge" title={`${b.name} · ${b.creationDate}`}>
+              <img src={b.icon} alt={b.name} loading="lazy" />
+            </span>
+          ))}
+          {hidden > 0 && <span className="lc-badge-more">+{hidden}</span>}
+        </div>
       </div>
     );
   }