/* Redesigned profile view (Overview/Activity/Friends/... tabs, level and streak cards). */
  /* ---- Redesigned view mode (.pfx) ------------------------------------
     Shared by profile.html and member.php. Everything is scoped under .pfx (or
     uses a pfx- prefix) so it never touches the older pf-hero/pf-grid rules in
     style.css that other pages still use. Cards reuse style.css's pf-card /
     pf-card-head / pf-card-icon / pf-card-title / pf-card-link building blocks. */
  .pfx { --pfx-line: #E8E4F5; --pfx-soft: #F5F2FD; --pfx-ink: #1B1B3A; --pfx-orange: #F08A24; }
  .pfx svg { display: block; flex-shrink: 0; }
  [data-pfx-icon] { display: inline-flex; align-items: center; justify-content: center; }

  .pfx-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; background: linear-gradient(135deg, #F4F1FE, #ECE7FB); border: 1px solid var(--pfx-line); border-radius: 18px; padding: 22px 26px; margin-bottom: 18px; }
  .pfx-hero-decor { position: absolute; top: -18px; right: -18px; width: 130px; height: 130px; background-image: radial-gradient(#C9BEF0 1.5px, transparent 1.5px); background-size: 12px 12px; opacity: 0.55; pointer-events: none; }
  .pfx-hero-main { position: relative; display: flex; align-items: center; gap: 18px; flex: 1 1 340px; min-width: 0; }
  .pfx .pf-avatar, .pfx .pf-avatar-placeholder { width: 84px; height: 84px; }
  .pfx .pf-camera-btn { width: 26px; height: 26px; color: #555; }
  /* Kabayan+ "Profile frame" decorative design (pfxApplyProfileFrame in
     profile-view.js) — a PNG ring drawn bigger than the avatar so its own
     art (wings, gems...) reaches past the circle. Sized off the avatar so it
     scales with the 84px hero avatar here and the 96px one in style.css. */
  .pf-avatar-wrap { z-index: 0; }
  .pfx-frame-overlay { position: absolute; top: 50%; left: 50%; width: 155%; height: 155%; transform: translate(-50%, -50%); pointer-events: none; z-index: 1; }
  .pf-camera-btn { z-index: 2; }
  .pfx .pf-passport-cover-btn { width: 62px; height: 84px; }
  .pfx .pf-passport-cover-count { font-size: 9px; padding: 3px 2px; }
  .pfx-hero-info { min-width: 0; }
  .pfx-name { font-size: 24px; font-weight: 800; color: var(--pfx-ink); margin: 0 0 6px; line-height: 1.15; overflow-wrap: anywhere; }
  .pfx .pf-role-badge { margin-bottom: 8px; padding: 3px 10px 3px 8px; font-size: 11.5px; }
  .pfx-hero-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: #55557A; margin-bottom: 12px; }
  .pfx-hero-meta:empty { display: none; }
  .pfx-hero-meta-item { display: inline-flex; align-items: center; gap: 6px; }
  .pfx-hero-meta-item svg { color: var(--pf-purple); }
  .pfx-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  .pfx-hero-actions:empty { display: none; }
  /* member.php, pending incoming friend request: Message + Block on the first row,
     Accept / Decline on a row of their own. */
  .pfx-hero-actions.pfx-has-request > .mem-block-btn { order: 2; }
  .pfx-hero-actions.pfx-has-request > #mem_friend_btn_wrap { order: 3; flex-basis: 100%; }
  .pfx-cp-btn { padding: 9px 20px; align-items: center; }
  .pfx-cp-btn [data-pfx-icon] { margin-right: 7px; vertical-align: -3px; }

  .pfx-hero-stats { position: relative; display: flex; align-items: stretch; margin-left: auto; }
  .pfx-hero-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2px; padding: 4px 24px; min-width: 96px; border-left: 1px solid #D6CEF0; }
  .pfx-hero-stat-link { color: inherit; text-decoration: none; cursor: pointer; }
  .pfx-hero-stat-link:hover .pfx-hero-stat-num { color: var(--pf-purple); }
  .pfx-hero-stat-icon { color: var(--pf-purple); margin-bottom: 4px; }
  .pfx-hero-stat-icon.pfx-flame { color: var(--pfx-orange); }
  /* Level progress in the hero, standing in for an icon: same 20px slot as the other stats' icons, a slim bar inside it. */
  .pfx-hero-bar { display: flex; align-items: center; width: 64px; height: 20px; margin-bottom: 4px; }
  .pfx-hero-bar::before { content: ""; display: block; flex: 0 0 64px; width: 64px; height: 7px; border-radius: 999px; background: #DDD6F4; }
  .pfx-hero-bar-fill { position: relative; display: block; align-self: center; height: 7px; margin-left: -64px; width: 0; max-width: 64px; border-radius: 999px; background: linear-gradient(90deg, #6A55F0, #3B2FB8); transition: width .5s ease; }
  .pfx-hero-stat-num { font-size: 19px; font-weight: 800; color: var(--pfx-ink); line-height: 1.15; white-space: nowrap; }
  .pfx-hero-stat-label { font-size: 12px; color: var(--pf-purple); font-weight: 600; }
  .pfx-hero-stat:first-child .pfx-hero-stat-label { color: var(--muted); font-weight: 400; }
  .pfx-hero-stat:last-child .pfx-hero-stat-label { color: var(--muted); font-weight: 400; }

  .pfx-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--pfx-line); margin: 0 0 18px; overflow-x: auto; scrollbar-width: none; }
  .pfx-tabs::-webkit-scrollbar { display: none; }
  .pfx-tab { display: inline-flex; align-items: center; gap: 7px; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 10px 14px; font-family: inherit; font-size: 13px; font-weight: 600; color: #4A4A6A; cursor: pointer; white-space: nowrap; }
  .pfx-tab:hover { color: var(--pf-purple); }
  .pfx-tab.active { color: var(--pf-purple); border-bottom-color: var(--pf-purple); }

  .pfx-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }
  .pfx-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
  .pfx-grid.pfx-single { grid-template-columns: minmax(0, 1fr); }
  .pfx-grid.pfx-single .pfx-col { display: contents; }
  .pfx-grid [data-tabs][hidden] { display: none; }

  .pfx .pf-card { border: 1px solid var(--pfx-line); border-radius: 14px; padding: 18px 20px; box-shadow: 0 1px 3px rgba(40,30,90,0.05); }
  .pfx .pf-card-head { margin-bottom: 14px; gap: 9px; }
  .pfx .pf-card-icon { width: 20px; height: 20px; border-radius: 0; background: none; color: var(--pf-purple); }
  .pfx .pf-card-icon.pfx-flame { color: var(--pfx-orange); }
  .pfx .pf-card-title { font-size: 15px; }
  .pfx .pf-card-link { font-size: 12px; }
  .pfx-soon { color: var(--muted); cursor: default; }
  .pfx-soon:hover { text-decoration: none; }

  /* XP history popup — appended to <body>, so it can't lean on the .pfx variables */
  .pfx-modal-back { position: fixed; inset: 0; z-index: 1000; background: rgba(20,15,60,.45); display: flex; align-items: center; justify-content: center; padding: 16px; }
  .pfx-modal { background: #fff; border-radius: 16px; width: 100%; max-width: 480px; max-height: min(80vh, 640px); display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(20,15,60,.3); }
  .pfx-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 22px 12px; }
  .pfx-modal-head h2 { margin: 0; font-size: 18px; color: var(--dark); }
  .pfx-modal-sub { margin-top: 3px; font-size: 13px; color: var(--muted); }
  .pfx-modal-x { background: none; border: none; font-size: 28px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 4px; }
  .pfx-modal-x:hover { color: var(--dark); }
  .pfx-modal-body { overflow-y: auto; padding: 0 22px 8px; flex: 1; min-height: 80px; }
  .pfx-modal-foot { justify-content: center; padding: 8px 22px 18px; }
  .pfx-modal-more { border: 1.5px solid var(--pf-purple); background: #fff; color: var(--pf-purple); border-radius: 10px; padding: 8px 18px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
  .pfx-modal-more:hover:not(:disabled) { background: var(--pf-purple-bg); }
  .pfx-modal-more:disabled { opacity: .6; cursor: default; }
  .pfx-modal .pfx-empty-box { padding: 24px 8px; }
  .pfx-xph-month { position: sticky; top: 0; background: #fff; z-index: 1; padding: 12px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--pf-purple); }
  .pfx-xph-row { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid #F0EDF7; }
  .pfx-xph-month + .pfx-xph-row { border-top: none; }
  .pfx-xph-date { width: 42px; text-align: center; flex-shrink: 0; background: var(--pf-purple-bg); color: var(--pf-purple); border-radius: 10px; padding: 5px 0; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
  .pfx-xph-date b { display: block; font-size: 17px; line-height: 1.15; letter-spacing: 0; }
  .pfx-xph-what { flex: 1; min-width: 0; }
  .pfx-xph-label { font-size: 14px; font-weight: 600; color: var(--dark); }
  .pfx-xph-detail { font-size: 12.5px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pfx-xph-xp { font-size: 14px; font-weight: 700; color: #1E8449; white-space: nowrap; }

  /* About */
  .pfx-about-rows { display: flex; flex-direction: column; gap: 9px; border-top: 1px solid #F0EDF7; margin-top: 14px; padding-top: 12px; font-size: 13px; }
  .pfx-about-rows:empty { display: none; }
  .pfx-about-row { display: flex; align-items: flex-start; gap: 9px; }
  .pfx-about-row svg { color: #6A6A8A; margin-top: 2px; }
  .pfx-about-row-label { color: #55557A; flex-shrink: 0; }
  .pfx-about-row-value { color: var(--pfx-ink); font-weight: 600; min-width: 0; overflow-wrap: anywhere; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .pfx-about-row-link { color: var(--pf-purple); text-decoration: none; }
  .pfx-about-row-link:hover { text-decoration: underline; }

  /* Friends */
  .pfx-friends-count { font-size: 12px; color: #55557A; white-space: nowrap; }
  .pfx-friends-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px 8px; }
  .pfx-friend { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; }
  .pfx-friend img, .pfx-friend > div:first-child { border: 2px solid #E4DEF7; }
  .pfx-friend-name { font-size: 11.5px; font-weight: 600; color: var(--pfx-ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Posts preview (under About) — feed-style cards, drawn by loadPosts() in profile-view.js */
  .pfx-posts-sub { font-size: 12.5px; color: var(--muted); margin: -8px 0 14px 29px; }
  .pfx-post-badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--pf-purple); background: var(--pf-purple-bg); border-radius: 999px; padding: 1px 8px; }
  .pfx-post-title { font-size: 15px; font-weight: 700; color: var(--pfx-ink); margin-top: 10px; overflow-wrap: anywhere; }
  .pfx-post-title + .pfx-post-body { margin-top: 4px; }
  .pfx-post-name a:hover { text-decoration: underline; }
  .pfx-post-embed { display: block; border: 1px solid var(--pfx-line); border-radius: 10px; padding: 10px 12px; margin-top: 10px; color: inherit; }
  a.pfx-post-embed:hover { background: var(--pfx-soft); }
  .pfx-post-embed-gone { font-size: 13px; color: var(--muted); }
  .pfx-post-embed .pfx-post-head { margin-bottom: 2px; }
  .pfx-post-embed .pfx-post-body { font-size: 13px; margin-top: 6px; }
  .pfx-post-embed img.pfx-post-cover { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: 8px; margin-top: 8px; }
  /* Compact teaser in "From your feed": 3 lines of text, one small media block */
  .pfx-post-compact .pfx-post-body.clamped { -webkit-line-clamp: 3; }
  .pfx-post-compact .pfx-post-body { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .pfx-post-compact .pfx-post-video { max-height: 200px; }
  .pfx-post-compact .pfx-post-photos img, .pfx-post-compact .pfx-post-embed img.pfx-post-cover { max-height: 200px; }
  .pfx-post-compact .pfx-post-photos-2 img, .pfx-post-compact .pfx-post-photos-3 > img, .pfx-post-compact .pfx-post-photos-4 img { height: 120px; }
  .pfx-post-compact .pfx-post-photos-side img { height: 58px; }
  .pfx-post-compact .pfx-post-actions { border-top: none; }
  .pfx-feed-cta { display: flex; justify-content: center; margin-top: 4px; }
  .pfx-post-composer { border: 1px solid var(--pfx-line); border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; }
  .pfx-post-composer-top { display: flex; align-items: center; gap: 10px; color: inherit; }
  .pfx-post-composer-input { flex: 1; min-width: 0; background: var(--pfx-soft); border-radius: 999px; padding: 10px 16px; font-size: 13.5px; color: var(--muted); }
  .pfx-post-composer-top:hover .pfx-post-composer-input { background: #ECE7FB; }
  .pfx-post-composer-tools { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #F0EDF7; font-size: 12.5px; font-weight: 600; color: #55557A; }
  .pfx-post-composer-tools a { display: inline-flex; align-items: center; gap: 6px; color: inherit; }
  .pfx-post-composer-tools a svg { color: var(--pf-purple); }
  .pfx-post-composer-tools a:hover { color: var(--pf-purple); }

  .pfx-post { border: 1px solid var(--pfx-line); border-radius: 12px; padding: 14px 14px 12px; margin-bottom: 12px; }
  .pfx-post-avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #E4DEF7; display: block; }
  .pfx-post-avatar-fallback { display: flex; align-items: center; justify-content: center; font-weight: 700; color: #6A6A8A; }
  .pfx-post-head { display: flex; align-items: center; gap: 10px; }
  .pfx-post-who { min-width: 0; }
  .pfx-post-name { font-size: 14px; font-weight: 700; color: var(--pfx-ink); overflow-wrap: anywhere; }
  .pfx-post-meta { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
  .pfx-post-meta a:hover { text-decoration: underline; }
  .pfx-post-aud { display: inline-flex; align-items: center; }
  .pfx-post-tagline { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
  .pfx-post-tagline a { color: var(--pf-purple); }
  .pfx-post-body { font-size: 14px; line-height: 1.5; color: var(--pfx-ink); margin-top: 10px; white-space: pre-line; overflow-wrap: anywhere; }
  .pfx-post-body.clamped { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
  .pfx-post-more { display: inline-block; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--pf-purple); }
  .pfx-post-more:hover { text-decoration: underline; }
  .pfx-post-video { display: block; width: 100%; max-height: 360px; border-radius: 10px; margin-top: 10px; background: #000; }

  .pfx-post-photos { display: block; margin-top: 10px; border-radius: 10px; overflow: hidden; }
  .pfx-post-photos img { display: block; width: 100%; object-fit: cover; }
  .pfx-post-photos-1 img { max-height: 380px; }
  .pfx-post-photos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
  .pfx-post-photos-2 img { height: 220px; }
  .pfx-post-photos-3 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 3px; }
  .pfx-post-photos-3 > img { height: 223px; }
  .pfx-post-photos-side { display: grid; grid-template-rows: 1fr 1fr; gap: 3px; }
  .pfx-post-photos-side img { height: 110px; }
  .pfx-post-photos-4 { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
  .pfx-post-photos-4 img { height: 130px; }
  .pfx-post-photo-more { position: relative; }
  .pfx-post-photo-more span { position: absolute; inset: 0; background: rgba(0,0,0,.5); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; }

  .pfx-post-stats { display: flex; flex-wrap: wrap; gap: 4px; font-size: 12px; color: #55557A; margin-top: 10px; }
  .pfx-post-stats:empty { display: none; }
  .pfx-post-stats a:hover { text-decoration: underline; }
  .pfx-post-actions { display: flex; gap: 4px; margin-top: 8px; padding-top: 6px; border-top: 1px solid #F0EDF7; }
  .pfx-post-actions-out { font-size: 12.5px; }
  .pfx-post-actions-out a { color: var(--pf-purple); font-weight: 600; }
  .pfx-post-action { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; border-radius: 8px; padding: 7px 12px; font: inherit; font-size: 12.5px; font-weight: 600; color: #55557A; cursor: pointer; }
  .pfx-post-action:hover:not(:disabled) { background: var(--pfx-soft); color: var(--pf-purple); }
  .pfx-post-action.active { color: var(--pf-purple); }
  .pfx-post-action:disabled { opacity: .6; cursor: default; }
  .pfx-post-comments:empty { display: none; }
  .pfx-post-viewall { display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
  .pfx-post-viewall:hover { text-decoration: underline; }
  .pfx-post-comment { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; }
  .pfx-post-comment-main { min-width: 0; }
  .pfx-post-comment-bubble { display: inline-block; background: var(--pfx-soft); border-radius: 14px; padding: 7px 12px; font-size: 13px; line-height: 1.4; color: var(--pfx-ink); overflow-wrap: anywhere; }
  .pfx-post-comment-bubble a { font-weight: 700; margin-right: 4px; }
  .pfx-post-comment-bubble a:hover { text-decoration: underline; }
  .pfx-post-comment-time { font-size: 11.5px; color: var(--muted); margin: 2px 0 0 12px; }
  .pfx-post-write { margin-top: 10px; }
  .pfx-post-input { width: 100%; box-sizing: border-box; border: 1px solid var(--pfx-line); border-radius: 999px; padding: 9px 16px; font: inherit; font-size: 13px; }
  .pfx-post-input:focus { outline: none; border-color: var(--pf-purple); }

  /* Community contributions */
  .pfx-contrib { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  /* Sits in the narrow right column on Overview, so 2 x 2 there; the Contributions tab has room for a row of four. */
  .pfx-grid:not(.pfx-single) .pfx-contrib { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pfx-contrib-tile { display: flex; align-items: center; gap: 10px; background: var(--pfx-soft); border-radius: 12px; padding: 14px 12px; min-width: 0; }
  .pfx-contrib-icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .pfx-contrib-num { font-size: 19px; font-weight: 800; color: var(--pfx-ink); line-height: 1.1; }
  .pfx-contrib-label { font-size: 12px; color: #55557A; }

  /* Recent activity */
  .pfx-act-row { display: grid; grid-template-columns: 36px 150px minmax(0, 1fr) 84px; grid-template-areas: "icon meta content thumb"; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid #F0EDF7; color: inherit; }
  .pfx-act-row:first-child { border-top: none; padding-top: 0; }
  .pfx-act-row:last-child { padding-bottom: 0; }
  a.pfx-act-row:hover .pfx-act-title { text-decoration: underline; }
  .pfx-act-icon { grid-area: icon; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
  .pfx-act-icon img { width: 100%; height: 100%; object-fit: cover; }
  .pfx-act-meta { grid-area: meta; font-size: 12.5px; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
  .pfx-act-meta b { color: var(--pf-purple); font-weight: 700; }
  .pfx-act-time { color: var(--muted); font-size: 11.5px; margin-top: 2px; }
  .pfx-act-content { grid-area: content; min-width: 0; font-size: 12.5px; }
  .pfx-act-title { font-weight: 700; color: var(--pfx-ink); overflow-wrap: anywhere; }
  .pfx-act-stars { color: #F2A516; letter-spacing: 1px; margin-left: 4px; }
  .pfx-act-text { color: #55557A; margin-top: 2px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .pfx-act-thumb { grid-area: thumb; width: 84px; height: 56px; border-radius: 8px; object-fit: cover; }
  .pfx-empty { font-size: 13px; color: var(--muted); margin: 0; }

  /* Level progression */
  .pfx-level-top { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
  .pfx-hex { width: 62px; height: 68px; flex-shrink: 0; }
  .pfx-level-name { font-size: 20px; font-weight: 800; color: var(--pfx-ink); line-height: 1.15; }
  .pfx-level-title { font-size: 13px; color: var(--pf-purple); font-weight: 600; margin-top: 2px; }
  .pfx-level-next { margin-left: auto; text-align: right; font-size: 11.5px; color: var(--muted); }
  .pfx-level-next b { display: block; font-size: 13px; color: var(--pf-purple); margin-top: 2px; }
  .pfx-bar { height: 8px; border-radius: 999px; background: #E9E5F7; overflow: hidden; }
  .pfx-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #5B45E0, #4B3FD1); }
  .pfx-bar-labels { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: #55557A; margin-top: 7px; flex-wrap: wrap; }
  .pfx-bar-labels span:last-child { color: var(--pf-purple); font-weight: 600; }
  .pfx-nodes { position: relative; display: flex; justify-content: space-between; margin: 20px 4px 0; }
  .pfx-nodes::before { content: ""; position: absolute; left: 14px; right: 14px; top: 13px; height: 2px; background: #E4E0F4; }
  .pfx-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .pfx-node-dot { width: 28px; height: 28px; border-radius: 50%; background: #E4E0F4; border: 3px solid var(--white); display: flex; align-items: center; justify-content: center; color: #fff; box-sizing: content-box; margin: -3px; }
  .pfx-node.done .pfx-node-dot { background: var(--pf-purple); }
  .pfx-node-num { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
  .pfx-node.done .pfx-node-num { color: var(--pfx-ink); font-weight: 600; }
  .pfx-level-foot { margin-top: 14px; font-size: 12px; }

  /* Activity streak */
  .pfx-streak-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
  .pfx-streak-big { font-size: 28px; font-weight: 800; font-style: italic; color: var(--pfx-ink); line-height: 1.1; }
  .pfx-streak-sub { font-size: 12px; color: #55557A; margin-top: 4px; }
  .pfx-streak-quote { flex: 0 0 46%; background: var(--pfx-soft); border-radius: 12px; padding: 10px 12px; font-size: 12px; font-style: italic; line-height: 1.35; color: var(--pf-purple); text-align: center; }
  .pfx-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
  .pfx-week-day { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: #55557A; }
  .pfx-week-dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #E4E0F4; display: flex; align-items: center; justify-content: center; color: #fff; }
  .pfx-week-day.visited .pfx-week-dot { background: var(--pfx-orange); border-color: var(--pfx-orange); }
  .pfx-week-day.frozen .pfx-week-dot { background: #DDF0FB; border-color: #8CC8EA; color: #2D7FB0; }
  .pfx-week-day.today .pfx-week-dot { border-color: var(--pf-purple); }
  .pfx-week-day.today.visited .pfx-week-dot { border-color: var(--pfx-orange); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pf-purple); }
  .pfx-freeze { display: flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 12px; color: #2D7FB0; }
  .pfx-freeze svg { flex: none; }
  .pfx-freeze.used { color: var(--muted); }
  .pfx-week-today { font-size: 10.5px; color: var(--muted); font-weight: 400; margin-top: -2px; }

  /* Achievements (empty until they're defined) */
  .pfx-empty-box { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 18px 8px 8px; color: var(--muted); font-size: 13px; }
  .pfx-empty-box svg { color: #CFC8EC; }

  @media (max-width: 860px) {
    .pfx-grid { grid-template-columns: minmax(0, 1fr); }
    .pfx-col { display: contents; }
    .pfx-hero-stats { margin-left: 0; width: 100%; border-top: 1px solid #D6CEF0; padding-top: 14px; }
    .pfx-hero-stat { flex: 1; padding: 4px 8px; min-width: 0; }
    .pfx-hero-stat:first-child { border-left: none; }
  }
  @media (max-width: 640px) {
    .pfx-hero { padding: 18px; }
    .pfx-contrib { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pfx-friends-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pfx-act-row { grid-template-columns: 36px minmax(0, 1fr) 64px; grid-template-areas: "icon meta thumb" "content content content"; gap: 8px 12px; }
    .pfx-act-thumb { width: 64px; height: 44px; }
  }
  @media (max-width: 480px) {
    .pfx-hero-main { flex-wrap: wrap; }
    .pfx-hero-stat-num { font-size: 16px; }
    .pfx-streak-top { flex-direction: column; align-items: flex-start; }
    .pfx-streak-quote { flex: none; width: 100%; }
  }

  /* member.php: click the hero photo to see it full size */
  .pfx-avatar-zoomable { cursor: zoom-in; border-radius: 50%; }
  .pfx-avatar-zoomable:focus-visible { outline: 3px solid var(--pf-purple); outline-offset: 2px; }
  .pfx-photo-lightbox { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: rgba(20,14,40,0.85); padding: 24px; cursor: zoom-out; }
  .pfx-photo-lightbox img { max-width: min(92vw, 720px); max-height: 88vh; object-fit: contain; border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); background: #fff; }
  .pfx-photo-lightbox-close { position: absolute; top: 14px; right: 18px; background: none; border: 0; color: #fff; font-size: 36px; line-height: 1; cursor: pointer; }

  /* Achievement badges — a compact icon grid (Recent achievements card);
     name/tier/description/progress live in the detail popup a tile opens
     (.pfx-ach-modal below), not in the card itself. renderAchievementsCard()
     caps this card at 4 tiles, but the card's own width varies (full width
     on phone, a narrower right-hand column on desktop — often well under
     the ~480px that 4 tiles at a fixed 104px would need). Flexbox with a
     shrinking basis instead of a fixed grid column: each tile is 104px when
     there's room, but all of them shrink together to whatever width actually
     fits — always a complete row of however many tiles there are, never a
     tile sliced in half. */
  .pfx-ach-grid { display: flex; gap: 14px; padding-top: 4px; }
  .pfx-ach-tile { position: relative; flex: 0 1 104px; min-width: 0; aspect-ratio: 1; border: none; border-radius: 50%; background: var(--pf-purple-bg); color: var(--pf-purple); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: transform .12s ease; }
  .pfx-ach-tile:hover, .pfx-ach-tile:focus-visible { transform: translateY(-2px); outline: none; }
  .pfx-ach-tile-image { background: none; }
  .pfx-ach-tile-image img { width: 100%; height: 100%; object-fit: contain; }
  .pfx-ach-pct { position: absolute; bottom: -6px; right: -6px; min-width: 34px; height: 28px; padding: 0 6px; border-radius: 999px; background: var(--pf-purple); color: #fff; font-size: 14px; font-weight: 800; letter-spacing: .2px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px #fff; }
  .pfx-ach-pct.maxed { background: #1E8449; }

  /* Achievement detail popup — opened by clicking a badge tile above. */
  .pfx-ach-modal-body { text-align: center; padding-bottom: 22px; }
  .pfx-ach-modal-icon { width: 220px; height: 220px; margin: 4px auto 14px; border-radius: 50%; background: var(--pf-purple-bg); color: var(--pf-purple); display: flex; align-items: center; justify-content: center; }
  .pfx-ach-modal-icon.pfx-ach-tile-image { background: none; }
  .pfx-ach-modal-icon.pfx-ach-tile-image img { width: 100%; height: 100%; object-fit: contain; }
  .pfx-ach-modal-desc { font-size: 13.5px; color: var(--muted); margin: 0 0 16px; }
  .pfx-ach-modal .pfx-bar-labels { text-align: left; }

  /* Full achievements list (Achievements tab, GeoGuessr-style): a large badge
     icon spans the full height of the card on the left — including the "go
     for it" strip at the bottom, not just the name/description row — with
     name, description, tier chip and a progress ring to its right. Two per
     row on desktop, one per row on phone. Not-yet-earned families are
     included too (greyed out, .pfx-ach-row-locked) rather than omitted, each
     previewing its first tier as the goal. A row is a div, not a button, so
     its optional "go for it" link (a real <a>, needs its own click target)
     can sit inside it without nesting an anchor inside a button. */
  .pfx-ach-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 4px; }
  .pfx-ach-row { display: flex; align-items: stretch; text-align: left; border: 1.5px solid var(--pfx-line); border-radius: 12px; background: var(--white); min-width: 0; overflow: hidden; }
  .pfx-ach-row-icon { flex: none; width: 84px; align-self: stretch; background: var(--pf-purple-bg); color: var(--pf-purple); display: flex; align-items: center; justify-content: center; padding: 8px; cursor: pointer; }
  .pfx-ach-row-icon:hover { background: #E3DEF9; }
  .pfx-ach-row-icon.pfx-ach-tile-image img { width: 100%; height: 100%; object-fit: contain; }
  .pfx-ach-row-right { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .pfx-ach-row-main { flex: 1; display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; }
  .pfx-ach-row-main:hover, .pfx-ach-row-main:focus-visible { background: var(--pf-purple-bg); outline: none; }
  .pfx-ach-row-locked .pfx-ach-row-icon { filter: grayscale(1); opacity: .55; }
  .pfx-ach-row-locked .pfx-ach-row-text strong,
  .pfx-ach-row-locked .pfx-ach-row-text span { color: var(--muted); }
  .pfx-ach-row-locked .pfx-ach-ring { background: conic-gradient(#B9B4CE calc(var(--pct) * 1%), #EDEAF5 0); }
  .pfx-ach-row-locked .pfx-ach-ring span { color: #8B87A0; }
  .pfx-ach-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .pfx-ach-row-text strong { font-size: 13.5px; color: var(--dark); }
  .pfx-ach-row-text span { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pfx-ach-row-meta { flex: none; display: flex; flex-direction: column; align-items: center; gap: 5px; }
  .pfx-ach-row-tier { font-size: 9px; font-weight: 800; letter-spacing: .3px; color: var(--pf-purple); }
  .pfx-ach-ring { position: relative; flex: none; border-radius: 50%; background: conic-gradient(var(--pf-purple) calc(var(--pct) * 1%), #E9E5F7 0); display: flex; align-items: center; justify-content: center; }
  .pfx-ach-ring.maxed { background: conic-gradient(#1E8449 calc(var(--pct) * 1%), #E9E5F7 0); }
  .pfx-ach-ring::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--white); }
  .pfx-ach-ring span { position: relative; z-index: 1; font-weight: 800; color: var(--pf-purple); }
  .pfx-ach-ring.maxed span { color: #1E8449; }
  /* "Go for it" — a real link (not a button-in-a-button) to where the member
     can actually work toward this badge; own profile only. */
  .pfx-ach-row-action { display: block; padding: 8px 12px; border-top: 1px solid var(--pfx-line); background: var(--pf-purple-bg); color: var(--pf-purple); font-size: 12px; font-weight: 700; text-decoration: none; text-align: right; }
  .pfx-ach-row-action:hover { background: var(--pf-purple); color: #fff; }
  .pfx-ach-modal-action { border-radius: 999px; border: none; text-align: center; margin-top: 16px; padding: 10px 18px; }
  .pfx-ach-locked-icon { filter: grayscale(1); opacity: .55; }
  @media (max-width: 640px) {
    .pfx-ach-list { grid-template-columns: 1fr; }
  }

  /* Invite friends card (profile.html, referral.js) */
  .rf-lead { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
  .rf-code-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .rf-code { flex: 1 1 140px; text-align: center; font: 700 22px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 4px; padding: 12px 10px; border: 1.5px dashed var(--pf-purple); border-radius: 12px; background: var(--pf-purple-bg); color: var(--pfx-ink); user-select: all; }
  .rf-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
  .rf-stats { display: flex; align-items: baseline; gap: 6px; margin-top: 16px; font-size: 13px; color: var(--muted); }
  .rf-stats strong { font-size: 22px; color: var(--pfx-ink); }
  .rf-next { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
  .rf-redeem { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--pfx-line); }
  .rf-redeem label { display: block; font-size: 13px; font-weight: 600; color: var(--dark); margin-bottom: 8px; }
  .rf-redeem-row { display: flex; gap: 8px; }
  .rf-redeem-row input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 2px; font: inherit; padding: 9px 12px; border: 1.5px solid var(--pfx-line); border-radius: 10px; }
  .rf-msg { margin-top: 8px; font-size: 12.5px; min-height: 1em; }
  .rf-msg.ok { color: #2E7D32; }
  .rf-msg.err { color: #C0392B; }
  .rf-referred { margin-top: 12px; font-size: 12.5px; color: var(--muted); }