/* ── profile.css · profile page ── */
    /* =========================================================
       PROFILE PAGE (#profilePage)
       Same sliding full-page panel language as #subPage —
       .subPgHdr / .subPgX / .subPgTitle reused
       as-is, everything below is page-specific.
       ========================================================= */
    #profilePage{
      position:fixed;inset:0;z-index:500;background:var(--bg);
      overflow-y:auto;transform:translateX(100%);
      transition:transform .45s cubic-bezier(.22,1,.36,1);
    }
    #profilePage.open{transform:translateX(0);}
    /* Dark, banner-led theme — scoped to the profile page only,
       the rest of the site stays on the white theme. */
    /* Albums are a profile feature reached from the profile page and
       from Settings, so they inherit the same dark palette
       rather than the plain page tokens used by Bookmarks / Friends. */
    #profilePage,#profilePage *,#setPage,#setPage *,
    #albPage,#albPage *,#albViewPage,#albViewPage *{
      --bg:var(--vbg);--sur:var(--vsur);--sur2:var(--vsur2);
      --tx:var(--vtx);--txd:var(--vtxd);
      --tc:var(--vtc);--pg:var(--vpg);--pb:var(--vpb);--ps:var(--vps);
      --bdr:color-mix(in srgb,var(--tc) 18%,transparent);
      --bdrh:color-mix(in srgb,var(--tc) 45%,transparent);
    }
    #profilePage .subPgHdr{background:color-mix(in srgb,var(--bg) 92%,transparent)!important;border-bottom:1px solid rgba(var(--pg-rgb),.08);}
    #profilePage .subPgTitle{color:var(--tx);}
    #profilePage .awCard{background:var(--sur);}
    /* ── Page header — same fixed, all-caps title bar as the Community
       page: sticky, frosted-blur, centered gradient title (reuses the
       global .cmHdrTitle text treatment for a pixel-identical look).
       Fixed 3.4rem height so the sticky .pfTabs below can stack. ── */
    .pfPageHdr{
      position:sticky;top:0;z-index:12;
      height:3.4rem;
      padding:0 1.5rem;
      display:flex;align-items:center;justify-content:center;gap:.8rem;
      border-bottom:1px solid var(--bdr);
      isolation:isolate;
    }
    .pfPageHdr::before{content:'';position:absolute;inset:0;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:-1;}
    /* Tabs now stick just below the fixed page header (base .pfTabs
       keeps top:0 — admPage / pfMyWorkPage override it to static). */
    #profilePage .pfTabs{top:3.4rem;}
    .pfBdy{max-width:1100px;margin:0 auto;padding:0 0 6rem;background:var(--bg);}

    /* ── Banner ── */
    .pfBanner{
      position:relative;width:100%;
      height:clamp(150px,26vw,240px);
      background:
        radial-gradient(ellipse at 25% 20%,rgba(59,130,246,.28),transparent 60%),
        linear-gradient(160deg,#0b1220 0%,#111827 45%,#1e293b 80%,#0b1220 100%);
      overflow:visible;
    }
    /* ── Profile menu: right-side slide-in drawer ──
       Lives at body level (NOT inside #profilePage) because that
       page has transform + its own scroll — a fixed drawer inside
       it would scroll away with the content. */
    /* Scrollable item list — on short screens everything (including the
       Log Out button anchored at the bottom) can be reached by scrolling,
       instead of being clipped below the fold. */
    /* ── Settings: full-page sliding shell (replaces the ⋮ drawer).
       Same pattern as #xpPage / #bmPage. z-index sits above #profilePage
       so it slides over the profile it was opened from. ── */
    #setPage{
      position:fixed;inset:0;z-index:546;background:var(--bg);color:var(--tx);
      overflow-y:auto;transform:translateX(100%);
      transition:transform .45s cubic-bezier(.22,1,.36,1);
    }
    #setPage.open{transform:translateX(0);}
    .setList{
      display:flex;flex-direction:column;gap:.15rem;
      max-width:640px;margin:0 auto;padding:.4rem 0 2rem;
    }
    .setList .pfMenuItem{font-size:.95rem;padding:1rem .9rem;}
    @media(prefers-reduced-motion:reduce){ #setPage{transition:none;} }

    .pfMenuItem{
      font-family:var(--fb);font-size:.88rem;font-weight:500;letter-spacing:.02em;text-align:left;
      padding:.85rem .8rem;border-radius:8px;border:none;background:none;
      color:var(--ps);cursor:pointer;transition:background .18s,color .18s;
      display:flex;align-items:center;justify-content:space-between;gap:.75rem;
    }
    .pfMenuCount{
      font-family:var(--fm);font-size:.68rem;letter-spacing:.05em;
      color:var(--txd);min-width:1.2em;text-align:right;
    }
    .pfMenuCount:empty{display:none;}
    .pfMenuItem:hover{background:var(--pdim);color:var(--tx);}
    /* Destructive action (Log Out) — sits last in the settings list */
    .pfMenuItem--danger{margin-top:auto;}
    .pfMenuItem--danger:hover{background:rgba(220,38,38,.18);color:#fca5a5;}
    /* ── Share Profile sheet ── */
    .pfShareBox{max-width:340px;align-items:center;padding:1.6rem 1.4rem 1.5rem;position:relative;}
    .pfShareTitle{
      font-family:var(--fd);font-size:.92rem;font-weight:800;letter-spacing:.18em;
      color:var(--tx);margin:0 0 1.1rem;text-align:center;
    }
    .pfShareTitle .s{color:var(--pb);font-size:.75em;}
    /* QR stays dark-on-white in every theme — scanners need contrast */
    .pfShareQrCard{
      background:#FFFFFF;border-radius:14px;padding:10px;
      width:min(210px,62vw);aspect-ratio:1;
      box-shadow:0 6px 24px rgba(0,0,0,.35);
    }
    .pfShareQrCard svg{display:block;width:100%;height:100%;}
    .pfShareUser{
      margin-top:.85rem;font-family:var(--fd);font-weight:800;
      font-size:.95rem;color:var(--tx);letter-spacing:.04em;text-align:center;
    }
    .pfShareLink{
      margin-top:.25rem;font-family:var(--fm);font-size:.62rem;
      letter-spacing:.06em;color:var(--txd);text-align:center;
      overflow-wrap:anywhere;padding:0 .5rem;
    }
    .pfShareBtns{display:flex;gap:2rem;margin-top:1.25rem;justify-content:center;}
    .pfShareAct{display:flex;flex-direction:column;align-items:center;gap:.45rem;}
    .pfShareAct > span{font-family:var(--fm);font-size:.58rem;letter-spacing:.16em;color:var(--txd);}
    .pfShareCirc{
      width:54px;height:54px;border-radius:50%;cursor:pointer;
      display:flex;align-items:center;justify-content:center;
      background:transparent;border:1px solid var(--bdrh);color:var(--tx);
      transition:border-color .2s,background .2s,transform .15s,filter .2s;
    }
    .pfShareCirc svg{width:22px;height:22px;}
    .pfShareCirc:hover{border-color:var(--pg);background:var(--pdim);}
    .pfShareCirc:active{transform:scale(.92);}
    .pfShareCirc--pri{background:var(--pg);border-color:var(--pg);color:var(--text-on-accent);box-shadow:0 3px 14px rgba(var(--pg-rgb),.35);}
    .pfShareCirc--pri:hover{filter:brightness(1.08);background:var(--pg);}
    @media (prefers-reduced-motion:reduce){
    }
    #smAdmBtn{display:none;}
    #smAdmBtn.devOnly{display:block;}
    .pfAvatarWrap{
      position:absolute;left:50%;transform:translateX(-50%);bottom:-42px;z-index:2;
    }
    .pfAvatar{
      width:84px;height:84px;border-radius:50%;flex-shrink:0;
      display:flex;align-items:center;justify-content:center;
      background:linear-gradient(135deg,#3b82f6,#1e293b);
      color:#fff;font-family:var(--fd);font-size:2rem;font-weight:700;
      border:4px solid var(--bg);
      box-shadow:0 4px 16px rgba(0,0,0,.4);
      position:relative;overflow:hidden;
    }
    .pfAvatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:none;}
    .pfBanner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;z-index:0;}
    /* Owner-only edit affordances for avatar/banner — hidden by
       default; a trigger (e.g. a small pencil button) can be wired
       up wherever it's needed and just needs to call
       openPfAvatarPicker() / openPfBannerPicker(). Both enforce the
       7-day re-upload cooldown and swap out the previous Supabase
       Storage file automatically. */
    .pfAvBEditBtn{
      position:absolute;z-index:3;width:30px;height:30px;border-radius:50%;border:none;cursor:pointer;
      display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);color:#fff;
      backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .2s;
    }
    .pfAvBEditBtn:hover{background:rgba(0,0,0,.75);}
    .pfAvBEditBtn svg{width:14px;height:14px;}

    /* ── Header block ── */
    /* ── Centered profile header stack ──
       Avatar (centered over banner edge) → Display name → @handle →
       bio teaser → stats row (❤ · 👁 · LV) → joined date. */
    .pfHead{
      display:flex;flex-direction:column;align-items:center;text-align:center;
      padding:3.4rem 1.5rem 1.4rem;
    }
    .pfHeadInfo{display:flex;flex-direction:column;align-items:center;max-width:36rem;}
    .pfUsername{font-family:var(--fd);font-size:1.5rem;font-weight:700;color:var(--tx);}
    .pfHandle{font-family:var(--fm);font-size:.72rem;letter-spacing:.08em;color:var(--txd);margin-top:.15rem;}
    /* Low-merit warning mark (merit <= 20) shown beside the display name */
    .pfWarnMark{
      display:none;margin-left:.45rem;color:var(--danger-strong);font-weight:900;
      cursor:help;vertical-align:middle;
    }
    .pfWarnMark.on{display:inline;}

    /* ══ MILESTONE COMPONENTS ══════════════════════════════════════
       Two elements, one colour. Both read it from --ms-c, which the
       DZ_MS module sets per-element to var(--msN) or var(--msN-name).
       Flat fills, one hairline border, no gradient, no glow, no shadow,
       no animation — the colour is the whole signal. */

    /* The artist's display name, tinted to their tier. */
    .msName{ color:var(--ms-c, inherit); }

    /* The milestone ribbon — a solid chip in the same colour. */
    .msRibbon{
      display:inline-flex; align-items:center;
      max-width:100%;
      margin-top:.4rem;
      padding:.34rem .62rem;
      border-radius:11px;
      background:var(--ms-c, var(--sur2));
      color:var(--ms-ink);
      border:1px solid rgba(0,0,0,.10);
      font-family:var(--fm);
      font-size:.62rem;
      font-weight:700;
      letter-spacing:.09em;
      text-transform:uppercase;
      line-height:1;
      white-space:nowrap;
      overflow:hidden; text-overflow:ellipsis;
    }
    /* [hidden] must beat display:inline-flex */
    .msRibbon[hidden]{ display:none; }
    /* The level reads as a quiet prefix, not a second label. */
    .msRibbon .msRibLvl{ opacity:.62; margin-right:.42rem; }
    /* Bio teaser — truncated by JS at ~100 chars with a tappable
       "Show more" that jumps to the ABOUT tab. */
    .pfHeadBio{font-family:var(--fb);font-size:.82rem;line-height:1.5;color:var(--txd);margin-top:.55rem;max-width:34rem;}
    .pfHeadBioMore{color:var(--pg);cursor:pointer;font-family:var(--fm);font-size:.7rem;letter-spacing:.08em;}
    .pfHeadBioMore:hover{text-decoration:underline;}
    .pfStatsRow{
      display:flex;align-items:center;justify-content:center;gap:.55rem;
      margin-top:.7rem;flex-wrap:wrap;
      font-family:var(--fm);font-size:.72rem;letter-spacing:.06em;color:var(--tx);
    }
    .pfStatsRow .pfStatDot{color:var(--txd);}
    /* [ADD FRD] [CRED] action row between bio and stats */
    .pfActionRow{display:flex;gap:.6rem;margin-top:.8rem;justify-content:center;flex-wrap:wrap;}
    .pfActBtn{
      font-family:var(--fm);font-size:.7rem;letter-spacing:.12em;
      padding:.55rem 1.4rem;border:1px solid var(--bdr);border-radius:8px;
      background:none;color:var(--tx);cursor:pointer;
      transition:border-color .2s,background .2s,color .2s;
    }
    .pfActBtn:hover{border-color:var(--pg);}
    .pfActBtn.on{border-color:var(--pg);background:var(--pdim);color:var(--pg);}
    .pfActBtn:disabled{opacity:.55;cursor:default;}
    .pfJoined{font-family:var(--fm);font-size:.68rem;letter-spacing:.1em;color:var(--txd);margin-top:.55rem;}

    /* ── Upload dropdown ── */
    .pfUploadWrap{position:relative;flex-shrink:0;}
    .pfUpTrigger{
      display:flex;align-items:center;gap:.4rem;
      font-family:var(--fm);font-size:.7rem;letter-spacing:.12em;
      padding:.6rem 1.1rem;border:1px solid #3b82f6;border-radius:8px;
      background:#3b82f6;color:#fff;cursor:pointer;transition:opacity .2s,transform .15s;
    }
    .pfUpTrigger:hover{opacity:.88;}
    .pfUpTrigger:active{transform:scale(.97);}
    .pfUpCh{font-size:.85em;}
    .pfUploadMenu{
      position:absolute;top:calc(100% + .5rem);right:0;z-index:6;
      background:var(--sur);border:1px solid var(--bdrh);border-radius:10px;
      box-shadow:0 8px 28px rgba(0,0,0,.45);
      min-width:170px;padding:.4rem;
      display:flex;flex-direction:column;gap:.15rem;
      opacity:0;transform:translateY(-6px);pointer-events:none;
      transition:opacity .18s,transform .18s;
    }
    .pfUploadMenu.open{opacity:1;transform:translateY(0);pointer-events:auto;}
    .pfUploadMenu button{
      font-family:var(--fm);font-size:.68rem;letter-spacing:.06em;text-align:left;
      padding:.6rem .75rem;border-radius:6px;border:none;background:none;
      color:var(--ps);cursor:pointer;transition:background .18s,color .18s;
    }
    .pfUploadMenu button:hover{background:color-mix(in srgb,#3b82f6 16%,transparent);color:#fff;}

    /* ── Tabs ── */
    .pfTabs{
      display:flex;align-items:center;justify-content:space-between;gap:.4rem;
      padding:0 2rem;border-bottom:1px solid var(--bdr);
      position:sticky;top:0;z-index:5;isolation:isolate;
    }
    /* FIX: background + blur split onto ::before, same decoupling as #bnNav */
    .pfTabs::before{content:'';position:absolute;inset:0;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:-1;}
    .pfTabGroup{
      display:flex;gap:.4rem;flex:1;min-width:0;
      overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
      -webkit-overflow-scrolling:touch;
    }
    .pfTabGroup::-webkit-scrollbar{display:none;}
    .pfTabGroup .pfTab{white-space:nowrap;flex-shrink:0;}
    .pfTab{
      font-family:var(--fm);font-size:.72rem;letter-spacing:.12em;
      padding:.9rem 1rem;background:none;border:none;cursor:pointer;
      color:var(--txd);border-bottom:2px solid transparent;transition:color .2s,border-color .2s;
    }
    .pfTab:hover{color:var(--ps);}
    .pfTab.active{color:var(--tx);border-bottom-color:var(--tc);}
    .pfPanel{display:none;padding:1.8rem 2rem 0;}
    .pfPanel.active{display:block;}

    /* ── Gallery / Comic cards reuse .awGrid / .awCard but need an
       optional admin action row appended at the bottom of the card ── */
    .pfGrid{
      display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
      gap:1.2rem;margin-top:1.2rem;
    }
    @media(max-width:480px){.pfGrid{grid-template-columns:1fr;}}
    /* ── Gallery tab reuses the same fluid auto-fill layout as the
       main Artworks grid (.awGrid) so thumbnails fill edge-to-edge
       and look identical everywhere. ── */
    .pfGridArt{
/* ── Unified responsive columns ──
         2 columns on phones · 3 on tablets & phone "desktop site"
         mode (~700-1279px) · 4 on real desktops (1280px+). Columns
         are 1fr, so on larger/ultrawide screens the cards simply
         grow to fill — no extra columns, boxes auto-adjust. ── */
      grid-template-columns:repeat(2,1fr);
      gap:.3rem;
    }
    @media(min-width:700px){ .pfGridArt{grid-template-columns:repeat(3,1fr);gap:.35rem;} }
    @media(min-width:1280px){ .pfGridArt{grid-template-columns:repeat(4,1fr);gap:.4rem;} }
    @media(max-width:480px){
      .pfAvatarWrap{left:50%;transform:translateX(-50%);}
      .pfAvatar{width:72px;height:72px;font-size:1.7rem;}
      .pfHead{padding:2.9rem 1.2rem 1.1rem;}
      .pfTabs{padding:0 1.2rem;}
      .pfTab{padding:.8rem .6rem;font-size:.64rem;}
      .pfUpTrigger{padding:.5rem .8rem;font-size:.62rem;}
    }
    .pfCardMeta{padding:.65rem .75rem .8rem;border-top:1px solid var(--bdr);}
    .pfCardMeta{display:none;}
    .pfCardTitle{display:none;}
    .pfCardDate{display:none;}
    .pfCardTags{display:none;}
    .pfTagChip{font-family:var(--fm);font-size:.6rem;letter-spacing:.06em;padding:.1rem .4rem;background:color-mix(in srgb,var(--tc) 10%,transparent);color:var(--ps);border-radius:3px;}
    .pfEmpty{padding:3rem 1rem;text-align:center;font-family:var(--fm);font-size:.76rem;letter-spacing:.15em;color:var(--txd);}

    /* ── Edit Profile page (#pfEditPage) — same sliding full-page
       language as #profilePage, opened as a layer on top of it. ── */
    #pfEditPage{
      position:fixed;inset:0;z-index:560;
      background:var(--vbg);color:var(--vtx);
      overflow-y:auto;transform:translateX(100%);
      transition:transform .4s cubic-bezier(.22,1,.36,1);
    }
    #pfEditPage.open{transform:translateX(0);}
    #pfEditPage .subPgHdr{background:color-mix(in srgb,var(--bg) 92%,transparent)!important;border-bottom:1px solid rgba(var(--pg-rgb),.08);}
    #pfEditPage .subPgTitle{color:var(--tx);}
    .pfEditBdy{max-width:520px;margin:0 auto;padding:1.6rem 1.4rem 4rem;}
    .pfEditBannerWrap{
      position:relative;width:100%;height:140px;border-radius:12px;overflow:hidden;
      background:radial-gradient(ellipse at 25% 20%,rgba(59,130,246,.28),transparent 60%),
        linear-gradient(160deg,#0b1220 0%,#111827 45%,#1e293b 80%,#0b1220 100%);
      margin-bottom:2.6rem;
    }
    .pfEditBannerWrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;}
    .pfEditBannerBtn{position:absolute;bottom:.7rem;right:.7rem;}
    .pfEditAvatarWrap{position:absolute;left:1.4rem;top:96px;}
    .pfEditAvatar{
      width:88px;height:88px;border-radius:50%;position:relative;overflow:hidden;
      display:flex;align-items:center;justify-content:center;
      background:linear-gradient(135deg,#3b82f6,#1e293b);
      color:#fff;font-family:var(--fd);font-size:2rem;font-weight:700;
      border:4px solid var(--vbg);box-shadow:0 4px 16px rgba(0,0,0,.4);
    }
    .pfEditAvatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:none;}
    .pfEditAvatarBtn{position:absolute;bottom:-2px;right:-2px;width:28px;height:28px;}
    .pfEditAvatarBtn svg{width:13px;height:13px;}
    .pfEditField{margin-bottom:1.4rem;}
    .pfEditLbl{display:block;font-family:var(--fm);font-size:.65rem;letter-spacing:.15em;color:rgba(var(--vtx2-rgb),.6);margin-bottom:.55rem;}
    .pfEditInput,.pfEditTextarea{
      width:100%;font-family:var(--fb);font-size:.9rem;color:var(--vtx);
      background:var(--vsur2);border:1px solid rgba(var(--vtc-rgb),.28);border-radius:8px;
      padding:.7rem .85rem;outline:none;transition:border-color .2s;
    }
    .pfEditInput:focus,.pfEditTextarea:focus{border-color:var(--pg);}
    .pfEditTextarea{resize:vertical;min-height:6rem;line-height:1.6;}
    .pfEditHint{font-family:var(--fm);font-size:.62rem;letter-spacing:.06em;color:rgba(var(--vtx2-rgb),.4);margin-top:.4rem;}
    .pfEditSaveBtn{
      width:100%;font-family:var(--fm);font-size:.75rem;letter-spacing:.12em;
      padding:.85rem;border-radius:8px;border:1px solid #3b82f6;background:#3b82f6;color:#fff;
      cursor:pointer;transition:opacity .2s;margin-top:.6rem;
    }
    .pfEditSaveBtn:hover{opacity:.88;}
    .pfEditSaveBtn:disabled{opacity:.5;cursor:not-allowed;}

    /* ── About tab ── */
    .pfStats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1rem;margin-bottom:1.6rem;}
    .pfStatCard{background:var(--sur2);border:1px solid var(--bdr);border-radius:8px;padding:1rem;text-align:center;}
    .pfStatNum{font-family:var(--fd);font-size:1.5rem;font-weight:700;color:var(--tx);}
    .pfStatLbl{font-family:var(--fm);font-size:.62rem;letter-spacing:.1em;color:var(--txd);margin-top:.2rem;}
    .pfBioWrap{background:var(--sur2);border:1px solid var(--bdr);border-radius:8px;padding:1.2rem;}
    .pfBioLbl{font-family:var(--fm);font-size:.65rem;letter-spacing:.15em;color:var(--txd);margin-bottom:.6rem;}
    .pfBioText{font-family:var(--fb);font-size:.88rem;line-height:1.6;color:var(--tx);white-space:pre-wrap;}

    /* ── Connect (social links) — About tab, read-only display ── */
    .pfConnectWrap{background:var(--sur2);border:1px solid var(--bdr);border-radius:8px;padding:1.2rem;margin-top:1rem;}
    .pfConnectLbl{font-family:var(--fm);font-size:.65rem;letter-spacing:.15em;color:var(--txd);margin-bottom:.75rem;}
    /* One platform per line, stacked with clear spacing (was a single
       wrapped row that read as "Instagram Discord …" run together). */
    .pfConnectList{display:flex;flex-direction:column;align-items:flex-start;gap:.85rem;}
    .pfConnectItem{font-family:var(--fb);font-size:.84rem;font-weight:600;text-decoration:none;}
    .pfConnectItem--on{color:#3b82f6;}
    .pfConnectItem--on:hover{text-decoration:underline;}
    .pfConnectItem--off{color:var(--txd);cursor:default;}

    /* ── Connect — Edit Profile page rows ── */
    .pfConnectRow{margin-bottom:.9rem;}
    .pfConnectRow:last-child{margin-bottom:0;}
    .pfConnectRowLbl{display:block;font-family:var(--fm);font-size:.66rem;letter-spacing:.08em;color:rgba(var(--vtx2-rgb),.55);margin-bottom:.35rem;}
    .pfEditInput.err{border-color:#ef4444;}

    /* ── Skeleton loading state ── */