/* Mobile ProfileV2's cover, identity, actions and six sections, adapted for web. */
#profilePage { max-width:1180px; margin:0 auto; }
#profilePage [hidden] { display:none!important; }
#profilePage .profile-banner { height:auto; aspect-ratio:4 / 1; margin-bottom:0; border-radius:20px 20px 0 0; }
#profilePage .profile-banner-edit { z-index:2; }
#profilePage .profile-head { border-top:0; border-radius:0 0 20px 20px; padding:22px 28px 20px; gap:24px; }
#profilePage .profile-avatar-wrap { margin-top:-65px; }
#profilePage .profile-avatar { width:140px; height:140px; border:5px solid var(--bg2); border-radius:28px; background:var(--accent-soft); color:var(--purple); box-shadow:0 4px 16px #0002; }
#profilePage .profile-name-row { gap:9px; margin-bottom:4px; }
#profilePage .profile-name { font-size:clamp(24px,2.5vw,34px); line-height:1.2; overflow-wrap:anywhere; }
#profilePage .profile-handle { font-size:14px; margin:4px 0 10px; }
#profilePage .profile-stats { gap:12px 22px; margin-bottom:10px; align-items:center; }
#profilePage .profile-stat { font-size:14px; }
#profilePage #statFollowers { order:0; }
#profilePage #statFollowing { order:1; }
#profilePage .profile-stat[data-profile-extra] { order:2; }
#profilePage #statPosts { display:none; }
#profilePage .profile-joined { order:3; font-size:12px; }
#profilePage .profile-bio { font-size:14px; margin:8px 0; }
#profilePage .pm-bio-clamped { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.pm-bio-toggle { background:none; border:0; color:var(--text3); padding:2px 0 8px; cursor:pointer; font:inherit; font-size:13px; }
#profilePage .profile-actions { flex-wrap:wrap; justify-content:flex-end; gap:7px; margin:0; min-width:0; }
#profilePage .profile-actions .btn { min-height:38px; border-radius:10px; font-size:12px; padding:8px 11px; gap:6px; white-space:nowrap; box-shadow:none; }
#profilePage .profile-tabs { display:flex; justify-content:space-between; gap:12px; margin:10px 0 16px; padding:0 8px; scrollbar-width:thin; }
#profilePage .profile-tab { padding:14px 8px 12px; font-size:14px; font-weight:600; flex:1 0 auto; justify-content:center; border-radius:0; min-height:44px; }
#profilePage .profile-tab .tab-count { display:none; }
#profilePage .profile-tab.active { color:var(--purple); border-bottom:3px solid var(--purple); }
#profilePage .profile-tab.active::before,#profilePage .profile-tab.active::after { display:none; }
#profilePage .profile-tab-content { min-height:230px; }
#profilePage #profilePosts { max-width:780px; margin:auto; }
#profilePage .profile-empty { padding:40px 20px; border:0; background:var(--accent-softer); border-radius:18px; }
.pm-toolbar { display:flex; gap:8px; align-items:center; margin-bottom:14px; flex-wrap:wrap; }
.pm-toolbar h2 { font-size:18px; flex:1; margin:0; }
.pm-toolbar .btn { font-size:12px; min-height:36px; padding:7px 12px; }
.pm-media-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
.pm-tile { position:relative; min-width:0; overflow:hidden; border-radius:9px; background:var(--bg3); }
.pm-tile-open { position:relative; width:100%; display:block; border:0; padding:0; background:transparent; cursor:pointer; color:var(--text); aspect-ratio:1; }
.pm-books .pm-tile-open { aspect-ratio:2/3; }
.pm-videos .pm-tile-open { aspect-ratio:9/16; }
.pm-tile-open img { width:100%; height:100%; object-fit:cover; display:block; }
.pm-photo-fallback { display:grid; place-items:center; height:100%; min-height:90px; background:var(--accent-soft); color:var(--purple); font-size:24px; }
.pm-pin-mark,.pm-view-count { position:absolute; padding:5px 8px; border-radius:7px; background:#171322b3; color:#fff; font-size:12px; }
.pm-pin-mark { top:8px; left:8px; }
.pm-view-count { bottom:8px; left:8px; }
.pm-pin-control { position:absolute; right:6px; top:6px; border:1px solid #ffffff60; border-radius:18px; padding:6px 9px; color:#fff; background:#171322b3; cursor:pointer; font:inherit; font-size:12px; }
.pm-order-controls { display:flex; justify-content:space-between; padding:6px; gap:6px; }
.pm-order-controls button { flex:1; min-height:36px; border:1px solid var(--border2); border-radius:8px; background:var(--bg2); color:var(--text); cursor:pointer; }
.pm-status { min-height:24px; text-align:center; margin:12px 0; font-size:13px; color:var(--text3); }
.pm-status:empty { margin:0; }
.pm-grid-skeleton { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
.pm-grid-skeleton i { aspect-ratio:2/3; border-radius:10px; background:var(--bg3); }
.pm-reading-row { display:flex; align-items:center; gap:16px; border-bottom:1px solid var(--border); padding:16px 0; }
.pm-reading-row h3 { font-size:16px; margin:0 0 6px; }
.pm-reading-row p { font-size:13px; color:var(--text3); margin:0; }
.pm-cover-stack { display:flex; gap:4px; flex-shrink:0; }
.pm-cover-stack img,.pm-cover-stack .pm-photo-fallback { width:40px; height:60px; min-height:0; object-fit:cover; border-radius:4px; font-size:12px; }
.pm-space-link { display:flex; justify-content:space-between; padding:16px; gap:12px; background:var(--bg2); border:1px solid var(--border); border-radius:12px; color:var(--text); margin-bottom:14px; text-decoration:none; }
.pm-space-link span { color:var(--purple); }
.pm-space-post { max-width:780px; margin:0 auto 14px; padding:18px; border-radius:16px; border:1px solid var(--border); background:var(--bg2); }
.pm-space-post header { display:flex; align-items:center; gap:10px; }
.pm-space-post header img { width:36px; height:36px; border-radius:50%; }
.pm-space-post p { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.5; }
.pm-space-post a { font-size:13px; color:var(--purple); }
.pm-space-photos { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; margin:10px 0; }
.pm-space-photos img { aspect-ratio:1; width:100%; object-fit:contain; border-radius:8px; }
@media(max-width:600px){
 #profilePage .profile-banner { border-radius:16px 16px 0 0; }
 #profilePage .profile-head { display:block; padding:0 16px 18px; }
 #profilePage .profile-avatar-wrap { margin-top:-44px; display:inline-block; margin-left:2px; }
 #profilePage .profile-avatar { width:96px; height:96px; border-radius:22px; border-width:4px; }
 #profilePage .profile-avatar-edit { width:30px; height:30px; }
 #profilePage .profile-info { margin-top:12px; }
 #profilePage .profile-name { font-size:25px; }
 #profilePage .profile-banner-edit { top:10px; right:10px; padding:7px 10px; font-size:11px; }
 #profilePage .profile-actions .btn { flex:1 1 auto; padding:9px 12px; }
 #profilePage .profile-tabs { gap:14px; padding:0 4px; justify-content:start; }
 #profilePage .profile-tab { flex:0 0 auto; padding:12px 3px; font-size:13px; }
 .pm-media-grid { gap:3px; }
 .pm-pin-control,.pm-pin-mark,.pm-view-count { font-size:10px; padding:4px 6px; }
 .pm-cover-stack img:nth-child(n+4) { display:none; }
 .pm-reading-row { gap:10px; }
 .pm-reading-row h3 { font-size:14px; }
}

#profilePage.pm-unavailable > :not(.pm-unavailable-notice) { display:none!important; }
#profilePage .profile-tabs { overflow-x:auto; }

/* Keep account actions and the menu together beside the identity. */
#profilePage .profile-topline { display:flex; align-items:flex-start; flex-wrap:wrap; gap:12px 16px; margin-bottom:8px; }
#profilePage .profile-topline .profile-name-row { flex:1 1 180px; min-width:0; margin:0; }
#profilePage .profile-toolbar { display:flex; align-items:flex-start; gap:8px; max-width:100%; margin-left:auto; }
#profilePage .profile-actions .btn svg { width:16px; height:16px; flex-shrink:0; margin:0!important; }
#profilePage .profile-actions .btn-ghost { background:var(--bg2); border-color:var(--border2); }
#profilePage .profile-actions .btn:hover { transform:none; background:var(--bg3); }
#profilePage .profile-actions .btn-purple:hover { background:var(--purple-grad); filter:brightness(1.08); }
#profilePage .profile-toolbar .profile-menu-btn { position:static; width:38px; height:38px; flex:0 0 38px; border-radius:10px; background:var(--bg2); border-color:var(--border2); color:var(--text2); backdrop-filter:none; }
#profilePage .profile-toolbar .profile-menu-btn:hover { background:var(--bg3); color:var(--text); transform:none; }
#profilePage .profile-toolbar button:focus-visible { outline:2px solid var(--accent-primary); outline-offset:3px; }
@media(max-width:600px) {
 #profilePage .profile-toolbar { width:100%; }
 #profilePage .profile-actions { flex:1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
 #profilePage .profile-actions .btn { min-height:42px; flex:1 1 auto; padding:9px 8px; white-space:normal; }
 #profilePage .profile-toolbar .profile-menu-btn { height:42px; width:42px; flex-basis:42px; }
}

/* Stable loading and persistent feedback. */
#profilePage .profile-banner { overflow:visible; min-height:0; }
#profilePage .profile-banner > img { border-radius:inherit; }
.pm-cover-menu { position:absolute; right:16px; top:58px; z-index:8; width:210px; padding:6px; border:1px solid var(--border2); border-radius:12px; background:var(--bg2); box-shadow:0 12px 32px #0003; }
.pm-cover-menu button { display:block; width:100%; min-height:40px; padding:10px 12px; border:0; border-radius:8px; background:none; color:var(--text); font:inherit; font-size:13px; text-align:left; cursor:pointer; }
.pm-cover-menu button:hover { background:var(--bg3); }
.pm-cover-menu button:disabled { opacity:.5; cursor:default; }
.pm-action-status { font-size:13px; line-height:1.5; color:var(--text2); margin-top:10px; }
.pm-action-status:empty { display:none; }
.pm-action-status button { margin-left:8px; padding:5px 8px; background:var(--bg3); border:1px solid var(--border2); border-radius:7px; color:var(--text); cursor:pointer; font:inherit; }
#profilePage .profile-empty .btn { margin-top:18px; }
#profilePage .profile-handle { min-height:20px; }
#profilePage.pm-loading .profile-toolbar { visibility:hidden; min-width:min(420px,100%); min-height:38px; }
#profilePage.pm-loading .profile-name { min-width:180px; height:41px; }
#profilePage.pm-loading .profile-stats { min-height:20px; }
#profilePage .pm-loading-toolbar { min-height:36px; }
.pm-post-skeleton { display:grid; gap:16px; padding-top:8px; }
.pm-post-skeleton i { display:block; height:150px; border-radius:16px; background:var(--bg3); }
.pm-grid-skeleton.pm-skeleton-pictures i { aspect-ratio:1; }
.pm-grid-skeleton.pm-skeleton-videos i { aspect-ratio:9/16; }
.pm-grid-skeleton.pm-skeleton-reading,.pm-grid-skeleton.pm-skeleton-space { grid-template-columns:1fr; }
.pm-grid-skeleton.pm-skeleton-reading i,.pm-grid-skeleton.pm-skeleton-space i { aspect-ratio:auto; height:110px; }
.crop-description { font-size:13px; color:var(--text2); margin:0 0 12px; }
#cropStatus { margin:0 0 12px; color:var(--red); }
#cropZoomIn,#cropZoomOut { min-width:40px; min-height:40px; }
#cropCancel { margin-left:auto; }
@media(prefers-reduced-motion:reduce) {
 #profilePage .skeleton-banner,#profilePage .skeleton-avatar,#profilePage .skeleton-text { animation:none; }
 #profilePage * { scroll-behavior:auto; }
}
/* Cached tabs and existing posts should not fade out and slide on every visit. */
#profilePage .profile-tab-content,#profilePage .post-card { animation:none; }

/* Compact account menu beside the primary profile action. */
#profilePage .profile-actions:has(#profileActionBtn):not(:has([data-profile-extra])) { display:flex; flex:0 1 auto; }
#profilePage .profile-toolbar:has(.profile-actions:not(:has([data-profile-extra]))) { width:auto; }
.pm-account-menu { position:fixed; z-index:1100; width:220px; max-width:calc(100vw - 24px); padding:6px; background:var(--bg2); color:var(--text); border:1px solid var(--border2); border-radius:14px; box-shadow:0 10px 32px #0002; }
.pm-account-menu button { display:flex; align-items:center; gap:12px; width:100%; min-height:44px; padding:10px 12px; border:0; border-radius:9px; background:none; color:inherit; font:inherit; font-size:14px; font-weight:600; text-align:left; cursor:pointer; }
.pm-account-menu svg { width:19px; height:19px; flex-shrink:0; color:var(--text3); }
.pm-account-menu button:hover,.pm-account-menu button:focus-visible { background:var(--bg3); outline:none; }
[data-modal="share-profile"] .share-modal { width:min(420px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow-y:auto; padding:24px; border-radius:20px; background:var(--bg2); color:var(--text); }
[data-modal="share-profile"] .share-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
[data-modal="share-profile"] h2 { margin:0; font-size:22px; }
[data-modal="share-profile"] .modal-sub { margin:10px 0 20px; font-size:14px; line-height:1.5; color:var(--text3); }
[data-modal="share-profile"] .share-close { display:grid; place-items:center; flex:0 0 32px; width:32px; height:32px; padding:0; border:0; border-radius:50%; background:var(--bg3); color:var(--text2); cursor:pointer; }
[data-modal="share-profile"] .share-close svg { width:18px; height:18px; }
[data-modal="share-profile"] .share-link-row { margin:0 0 12px; gap:8px; }
[data-modal="share-profile"] .share-link-input { background:var(--bg3); color:var(--text2); border-color:var(--border2); font-size:13px; padding:10px 12px; }
[data-modal="share-profile"] .share-copy-btn { min-height:42px; border-radius:10px; padding:10px 14px; font-size:13px; white-space:nowrap; }
[data-modal="share-profile"] .share-options { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
[data-modal="share-profile"] .share-option { flex-direction:row; justify-content:flex-start; gap:10px; min-height:48px; padding:12px; background:var(--bg2); border-color:var(--border2); color:var(--text2); font-size:13px; }
[data-modal="share-profile"] .share-option-icon { display:grid; place-items:center; width:22px; font-size:20px; color:var(--purple); }
[data-modal="share-profile"] .pm-action-status:empty { display:none; }
[data-modal="share-profile"] :is(button,a,input):focus-visible { outline:2px solid var(--accent-primary); outline-offset:3px; }

.pp-details { display:flex; flex-wrap:wrap; align-items:center; gap:9px 18px; margin:12px 0 4px; font-size:13px; line-height:1.5; }
.pp-category,.pp-details a { display:inline-flex; align-items:center; gap:7px; min-width:0; max-width:100%; }
.pp-category svg,.pp-details svg { width:17px; height:17px; flex:0 0 17px; }
.pp-details a { color:var(--purple); text-decoration:none; }
.pp-details a span { overflow-wrap:anywhere; min-width:0; }
.pp-details a:hover { text-decoration:underline; }
.pp-details a:focus-visible,.ep-social-remove:focus-visible { outline:2px solid var(--accent-primary); outline-offset:3px; border-radius:4px; }

.pm-account-menu button:disabled { opacity:.45; cursor:default; }
.pm-account-menu button.is-danger { color:var(--red); }
.pm-account-menu button.is-danger svg { color:inherit; }

/* ProfileV2 identity: centered seal and compact role pill. */
#profilePage .profile-name { display:inline-flex; align-items:center; gap:6px; min-width:0; max-width:100%; margin:0; }
#profilePage .profile-name-text { min-width:0; overflow-wrap:anywhere; }
#profilePage .profile-name > svg { display:block; flex:0 0 20px; width:20px; height:20px; margin:0!important; vertical-align:middle!important; }
#profilePage .profile-badges-extra { align-self:center; }
#profilePage .profile-role-pill { display:inline-flex; align-items:center; justify-content:center; padding:3px 10px; border:1px solid transparent; border-radius:999px; font-size:12px; font-weight:600; line-height:18px; white-space:nowrap; color:#fff; }
#profilePage .profile-role-pill.badge-admin { background:#6d28d9; }
#profilePage .profile-role-pill.badge-moderator { background:#9f1239; }
#profilePage .profile-role-pill.badge-creator { background:#D4A017; }
#profilePage .profile-role-pill.badge-writer { background:#1d4ed8; }
#profilePage .profile-role-pill.badge-pioneer { color:var(--purple); background:var(--accent-soft); border-color:var(--border2); }
@media(max-width:600px) {
 #profilePage .profile-name > svg { width:18px; height:18px; flex-basis:18px; }
}

/* Keep the visitor's four actions in a compact, stable row. */
#profilePage .profile-actions:has(#profileSpaceBtn) { display:flex; flex:0 1 auto; flex-wrap:nowrap; }
#profilePage .profile-toolbar:has(#profileSpaceBtn) { width:auto; }
#profilePage #profileMessageBtn { display:inline-flex; align-items:center; justify-content:center; flex:0 0 38px; width:38px; height:38px; padding:0; }
#profilePage #profileMessageBtn svg { width:18px; height:18px; margin:0; }
#profilePage #profileSpaceBtn[aria-busy="true"] { cursor:progress; opacity:.6; }
@media(max-width:600px) {
 #profilePage #profileMessageBtn { flex-basis:42px; width:42px; height:42px; }
}

/* Photo-post metadata leaves pin actions at the top of each tile. */
.pm-photo-count,.pm-audience-lock { position:absolute; padding:5px 8px; border-radius:7px; background:#171322d9; color:#fff; font-size:12px; pointer-events:none; }
.pm-photo-count { bottom:8px; right:8px; }
.pm-audience-lock { bottom:8px; left:8px; max-width:calc(100% - 16px); }
.pm-tile-open:has(.pm-audience-lock) .pm-photo-count { bottom:38px; }
@media(max-width:600px) { .pm-photo-count,.pm-audience-lock { font-size:10px; padding:4px 6px; } }