<mf-view>
<style>mf-profile-full-v1 {
  *, *::before, *::after { box-sizing: border-box; }

  /* ---------- profile card ---------- */
  mf-profile {
    display: block;
    background: #0c1426;
    border-radius: 14px;
    overflow: hidden;
    color: #e6edf5;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
  }

  /* banner — consumer sets inline style="background-image: url(...)"
     to bind a cover image; otherwise the dark fallback shows. */
  mf-profile-banner {
    display: block;
    height: 320px;
    background-color: #0c1426;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* header — avatar in col 1 (rows 1–2), name in col 2 row 1, handle in col 2 row 2 */
  mf-profile-header {
    display: grid;
    grid-template-columns: 152px 1fr;
    grid-template-rows: auto auto;
    align-items: end;
    padding: 0 28px;
    margin-top: -28px;
    margin-bottom: 18px;
  }

  /* avatar — consumer sets inline style="background-image: url(...)"
     to bind the portrait; transparent fallback when unset. */
  mf-profile-avatar {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: transparent;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 3px solid #0c1426;
  }

  mf-profile-name {
    grid-column: 2;
    grid-row: 1;
    display: block;
    font-size: 30px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.15;
    margin-bottom: 4px;
  }

  mf-profile-handle {
    grid-column: 2;
    grid-row: 2;
    display: block;
    font-size: 17px;
    color: #6b8aa8;
  }

  /* bio */
  mf-profile-bio {
    display: block;
    padding: 0 28px;
    margin-bottom: 18px;
    color: #d6dee8;
  }

  /* meta row */
  mf-profile-meta {
    display: block;
    padding: 0 28px 22px;
    color: #8aa0b8;
    font-size: 14px;
  }
  mf-profile-location {
    display: inline;
    margin-right: 28px;
    color: #d6dee8;
  }
  mf-profile-location::before {
    content: "📍 ";
  }
  mf-profile-joined {
    display: inline;
    color: #8aa0b8;
  }
  mf-profile-joined::before {
    content: "Joined ";
  }

  /* stats */
  mf-profile-stats {
    display: flex;
    gap: 44px;
    padding: 22px 28px;
    border-top: 1px solid #1a2440;
    border-bottom: 1px solid #1a2440;
  }
  mf-profile-stats > * {
    display: flex;
    flex-direction: column;
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
  }
  mf-profile-stats > *::after {
    margin-top: 2px;
    font-size: 13px;
    font-weight: 400;
    color: #8aa0b8;
  }
  mf-profile-post-count::after      { content: "Posts"; }
  mf-profile-follower-count::after  { content: "Followers"; }
  mf-profile-following-count::after { content: "Following"; }

  /* badges */
  mf-profile-badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 22px 28px 12px;
  }
  mf-profile-badge {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid;
    background: transparent;
    font-size: 14px;
    line-height: 1.2;
  }
  mf-profile-badge:nth-child(1) { color: #4a90e2; border-color: #4a90e2; }
  mf-profile-badge:nth-child(2) { color: #2dd4bf; border-color: #2dd4bf; }
  mf-profile-badge:nth-child(3) { color: #f59e0b; border-color: #f59e0b; }

  /* links */
  mf-profile-links {
    display: flex;
    gap: 22px;
    padding: 12px 28px 22px;
  }
  mf-profile-link {
    display: inline-block;
    color: #5fa3ff;
    cursor: pointer;
  }

  /* recent activity */
  mf-profile-activity {
    display: block;
    padding: 0 28px 28px;
  }
  mf-profile-activity::before {
    content: "RECENT ACTIVITY";
    display: block;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: #6b8aa8;
    margin-bottom: 14px;
  }
  mf-activity-item {
    display: block;
    padding: 14px 18px;
    border: 1px solid #1a2440;
    border-radius: 10px;
    margin-bottom: 12px;
  }
  mf-activity-item:last-child { margin-bottom: 0; }
  mf-activity-summary {
    display: block;
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 6px;
  }
  mf-activity-timestamp {
    display: block;
    font-family: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    color: #6b8aa8;
  }

  /* empty-state discipline — anything the CSOM didn't bind collapses cleanly */
  mf-profile-bio:empty,
  mf-profile-location:empty,
  mf-profile-joined:empty,
  mf-profile-name:empty,
  mf-profile-handle:empty,
  mf-profile-badge:empty,
  mf-profile-link:empty,
  mf-activity-summary:empty,
  mf-activity-timestamp:empty {
    display: none;
  }
  mf-activity-item:has(> mf-activity-summary:empty):has(> mf-activity-timestamp:empty) {
    display: none;
  }
}</style>
<mf-profile-full-v1 version="1.0.0"><mf-profile>

    <mf-profile-banner></mf-profile-banner>

    <mf-profile-header>
      <mf-profile-avatar></mf-profile-avatar>
      <mf-profile-name></mf-profile-name>
      <mf-profile-handle></mf-profile-handle>
    </mf-profile-header>

    <mf-profile-bio></mf-profile-bio>

    <mf-profile-meta>
      <mf-profile-location></mf-profile-location>
      <mf-profile-joined></mf-profile-joined>
    </mf-profile-meta>

    <mf-profile-stats>
      <mf-profile-post-count></mf-profile-post-count>
      <mf-profile-follower-count></mf-profile-follower-count>
      <mf-profile-following-count></mf-profile-following-count>
    </mf-profile-stats>

    <mf-profile-badges>
      <mf-profile-badge></mf-profile-badge>
      <mf-profile-badge></mf-profile-badge>
      <mf-profile-badge></mf-profile-badge>
    </mf-profile-badges>

    <mf-profile-links>
      <mf-profile-link></mf-profile-link>
      <mf-profile-link></mf-profile-link>
      <mf-profile-link></mf-profile-link>
    </mf-profile-links>

    <mf-profile-activity>
      <mf-activity-item>
        <mf-activity-summary></mf-activity-summary>
        <mf-activity-timestamp></mf-activity-timestamp>
      </mf-activity-item>
      <mf-activity-item>
        <mf-activity-summary></mf-activity-summary>
        <mf-activity-timestamp></mf-activity-timestamp>
      </mf-activity-item>
      <mf-activity-item>
        <mf-activity-summary></mf-activity-summary>
        <mf-activity-timestamp></mf-activity-timestamp>
      </mf-activity-item>
    </mf-profile-activity>

  </mf-profile></mf-profile-full-v1></mf-view>