/* ============================================================
   fyreprofile.css — FindFyre Creator Profile Page
   Dark cinematic theme, desktop + mobile responsive
   ============================================================ */

/* Design tokens, base reset, and global utilities live in fyreglobalstyle.css */

/* Ensure carousel arrows center vertically regardless of device height */
.fp-mobile-banner-wrap .fp-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
    background: none; /* keep original look */
    border: none;
    padding: 0;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fp-mobile-banner-wrap .fp-carousel-arrow.fp-banner-arrow-prev { left: 12px; }
.fp-mobile-banner-wrap .fp-carousel-arrow.fp-banner-arrow-next { right: 12px; }
.fp-mobile-banner-wrap .fp-carousel-arrow svg { width: 18px; height: 36px; stroke-width: 2.5; }

/* Mobile bio list with icons and show-more behaviour */
.fp-mobile-panel .fp-info-list { list-style:none; margin:0; padding:0; }
.fp-mobile-panel .fp-info-item {
    display:flex; align-items:center; justify-content:space-between;
    padding:8px 12px; border-bottom:1px solid rgba(255,255,255,0.03);
}
.fp-mobile-panel .fp-info-left { display:flex; align-items:center; gap:10px; }
.fp-mobile-panel .fp-info-icon { color:var(--fyre-pink-500); display:inline-grid; place-items:center; width:22px; height:22px; }
.fp-mobile-panel .fp-info-label { color:var(--text-muted); font-size:13px; }
.fp-mobile-panel .fp-info-value { color:var(--text-primary); font-weight:600; min-width:48px; text-align:right; font-size:13px; }

/* Initially show only first 6 rows on mobile; collapsed rows get class .fp-collapsed-row */
.fp-mobile-panel .fp-info-item.fp-collapsed-row { display:none; }

.fp-mobile-panel .fp-info-item.fp-collapsed-row .fp-info-icon { opacity:0.6; }

.fp-show-more-info-link {
    display:inline-block; color:var(--fyre-pink-500); font-weight:600; font-size:14px; text-decoration:none;
    padding:6px 12px; border-radius:6px; background:linear-gradient(180deg, rgba(224,84,141,0.06), transparent);
}
.fp-show-more-info-link[aria-expanded='true'] { color:var(--fyre-pink-500); }

/* Filter dropdown option visuals: active states for desktop and mobile */
.fp-filter-opt {
    display:block; padding:10px 12px; cursor:pointer; color:var(--text-secondary);
}
.fp-filter-opt.fp-filter-opt-active, .fp-filter-opt.fp-order-active {
    background: linear-gradient(90deg, rgba(224,84,141,0.06), rgba(155,92,255,0.03));
    color: var(--fyre-pink-500);
    font-weight: var(--weight-semibold);
    border-left: 3px solid var(--fyre-pink-500);
}
.fp-mob-filter-opt { display:block; padding:10px 12px; cursor:pointer; color:var(--text-secondary); }
.fp-mob-filter-opt.fp-mob-filter-active { background: linear-gradient(90deg, rgba(224,84,141,0.06), rgba(155,92,255,0.03)); color:var(--fyre-pink-500); font-weight:var(--weight-semibold); border-left:3px solid var(--fyre-pink-500); }
.fp-mob-filter-opt.fp-mob-order-active { background: linear-gradient(90deg, rgba(224,84,141,0.06), rgba(155,92,255,0.03)); color:var(--fyre-pink-500); font-weight:var(--weight-semibold); border-left:3px solid var(--fyre-pink-500); }



/* ── App Shell ──────────────────────────────────────────────── */
.fp-app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    min-height: 100vh;
    transition: grid-template-columns 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Topbar ─────────────────────────────────────────────────── */
.fp-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    display: grid;
    grid-template-columns: max(var(--sidebar-w), 190px) minmax(0, 1fr);
    align-items: center;
    padding: 0;
    background: var(--bg-card);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    z-index: 101;
    transition: grid-template-columns 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.fp-topbar-logo {
    display: flex;
    align-items: center;
    padding: 0 0 0 20px;
    overflow: hidden;
}

.fp-topbar-logo img,
.fp-logo-img {
    height: 46px;
    width: auto;
    display: block;
    max-width: 200px;
    object-fit: contain;
}

/* Pink logo swap in light mode — smaller than white logo */
body.fp-light .fp-logo-img {
    content: url('/assets/images/FindFyreLogo-Pink.png');
    height: 38px;
    max-width: 200px;
}

.fp-topbar-search {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    padding: 0 var(--space-4);
    height: 44px;
    gap: var(--space-2);
    width: 100%;
    max-width: 520px;
}

.fp-topbar-search input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: var(--font-md);
}

.fp-topbar-search input::placeholder { color: var(--text-muted); }

.fp-topbar-search svg {
    color: var(--text-muted);
    flex-shrink: 0;
}
body.fp-light .fp-topbar-search svg { color: #0a3049; }

.fp-topbar-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
    padding: 0 16px 0 8px;
    min-width: 0;
}

.fp-topbar-nav-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    color: rgba(255,255,255,0.55);
    background: none;
    border: none;
    border-radius: 50%;
    padding: 0;
    transition: color 0.18s, background 0.18s;
    text-decoration: none;
    flex-shrink: 0;
}

.fp-topbar-nav-icon svg {
    stroke: rgba(255,255,255,0.55);
    fill: none;
    transition: stroke 0.18s;
}

.fp-topbar-nav-icon:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
}

.fp-topbar-nav-icon:hover svg {
    stroke: #fff;
}

/* Light mode: dark oval on hover */
body.fp-light .fp-topbar-nav-icon:hover {
    color: var(--text-primary);
    background: rgba(10, 48, 73, 0.10);
}

body.fp-light .fp-topbar-nav-icon:hover svg {
    stroke: var(--text-primary);
}

/* Light mode: topbar badges need light background border */
body.fp-light .fp-topbar-nav-icon .fp-nav-badge {
    border-color: #f5f7fb;
}

/* Topbar notification / message count badge.
   Pin absolutely so it overlays the icon instead of taking a grid row.
   Hidden while empty; flex-centred for "1" through "99+". */
.fp-topbar-nav-icon .fp-nav-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin: 0;
    padding: 1px 4px 0;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    text-align: center;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    border-radius: 999px;
    background: #ec3f8f;
    border: 2px solid var(--ff-bg, #0d111a);
    box-sizing: border-box;
    pointer-events: none;
    opacity: 1 !important;
    transform: scale(1) !important;
    color: #fff;
}

.fp-topbar-nav-icon .fp-nav-badge:not(:empty) {
    display: flex !important;
}

/* Profile trigger — avatar photo when signed in, glyph when anonymous */
.fp-topbar-profile {
    background: none;
    border: none;
    cursor: pointer;
    width: 38px;
    height: 38px;
    padding: 0;
}

.fp-topbar-profile:hover { background: none; }

.fp-topbar-profile svg {
    stroke: rgba(255, 47, 134, 0.9);
    fill: none;
}

.fp-topbar-profile:hover svg {
    stroke: #ff2f86;
}

.fp-topbar-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    box-sizing: border-box;
    border: 2px solid #e0336b;
    background: #12131f;
    transition: box-shadow 0.18s ease;
}

.fp-topbar-profile:hover .fp-topbar-avatar {
    box-shadow: 0 0 0 3px rgba(224, 51, 107, 0.22);
}

#fp-user-menu-btn {
    border-radius: 50%;
}

#fp-user-menu-btn .fp-topbar-avatar {
    animation: ff-user-menu-pulse 5.5s ease-in-out infinite;
}

#fp-user-menu-btn:hover .fp-topbar-avatar,
#fp-user-menu-btn:focus-visible .fp-topbar-avatar {
    animation: none;
}

@keyframes ff-user-menu-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(224, 51, 107, 0);
    }
    50% {
        box-shadow: 0 0 0 2px rgba(224, 51, 107, 0.14);
    }
}

@media (prefers-reduced-motion: reduce) {
    #fp-user-menu-btn .fp-topbar-avatar {
        animation: none;
    }
}


/* ── Sidebar width tokens ───────────────────────────────────── */
:root {
    --sidebar-collapsed: 56px;
    --sidebar-expanded:  220px;
    --sidebar-w: var(--sidebar-collapsed); /* toggled by JS via body class */
}
body.fp-sidebar-open { --sidebar-w: var(--sidebar-expanded); }

/* ── Sidebar shell ─────────────────────────────────────────── */
.fp-sidebar {
    position: fixed;
    top: 56px;
    left: 0;
    bottom: 0;
    width: var(--sidebar-w);
    background: #0d111a;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    padding: 10px 0 16px;
    z-index: 90;
    overflow: hidden;
    overflow-y: hidden;
    scrollbar-width: none;
    transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: width;
    font-family: "Poppins", sans-serif;
}
/* ── Collapsed state: whole sidebar is a click target to expand ───────── */
/* Apply expand cursor to the sidebar itself when collapsed */
body:not(.fp-sidebar-open) .fp-sidebar {
    cursor: e-resize;
}
/* But real interactive children keep their own cursors */
body:not(.fp-sidebar-open) .fp-sidebar a,
body:not(.fp-sidebar-open) .fp-sidebar button,
body:not(.fp-sidebar-open) .fp-sidebar [role="button"],
body:not(.fp-sidebar-open) .fp-sidebar input,
body:not(.fp-sidebar-open) .fp-sidebar textarea,
body:not(.fp-sidebar-open) .fp-sidebar select {
    cursor: pointer;
}

/* ── Expanded state: right-edge hit zone ────────────────────────────────── */
/* Thin strip at the right edge of the sidebar — collapse cursor + click */
.fp-sidebar-edge-zone {
    display: none; /* hidden when collapsed */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 16px;
    cursor: w-resize;
    z-index: 2; /* above scroll content, below toggle */
}
body.fp-sidebar-open .fp-sidebar-edge-zone {
    display: block;
}


.fp-sidebar-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.fp-sidebar-scroll::-webkit-scrollbar { display: none; }

/* ── Toggle button ─────────────────────────────────────────── */
.fp-sidebar-toggle {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(230, 91, 147, 0.10);
    border: 1px solid rgba(230, 91, 147, 0.25);
    color: #e65b93;
    display: grid;
    place-items: center;
    cursor: pointer;
    margin: 0 auto 14px;
    transition: background 0.18s, border-color 0.18s;
}
.fp-sidebar-toggle:hover {
    background: rgba(230, 91, 147, 0.20);
    border-color: rgba(230, 91, 147, 0.45);
}

/* show/hide expand vs collapse arrows */
.fp-toggle-collapse { display: none; }
.fp-toggle-expand   { display: block; }
body.fp-sidebar-open .fp-toggle-collapse { display: block; }
body.fp-sidebar-open .fp-toggle-expand   { display: none; }

/* ── Section group ─────────────────────────────────────────── */
.fp-nav-section {
    display: flex;
    flex-direction: column;
    padding: 0 8px;
    margin-bottom: 6px;
}

.fp-nav-section-label {
    font-size: 10px;
    font-weight: var(--weight-bold);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 10px 8px 6px;
    white-space: nowrap;
    overflow: hidden;
    opacity: 0;
    max-height: 0;
    transition: opacity 0.2s 0.05s, max-height 0.2s;
}
body.fp-sidebar-open .fp-nav-section-label {
    opacity: 1;
    max-height: 32px;
}

/* ── Nav item ──────────────────────────────────────────────── */
.fp-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 45px;
    border-radius: 13px;
    padding: 0 11px 0 16px;
    color: #f5f7fb;
    font-size: 13px;
    font-weight: 400;
    font-family: "Poppins", sans-serif;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    transition: background 0.18s, color 0.18s, transform 0.18s;
    position: relative;
}
.fp-nav-item:hover {
    background: #0d1826;
    color: #ec3f9b;
    transform: translateX(2px);
}
.fp-nav-item.active {
    background: linear-gradient(90deg, rgba(236,63,155,0.22) 0%, rgba(200,78,234,0.12) 100%);
    color: #f5f7fb;
    font-weight: 500;
    transform: none;
}
/* Left pink bar for active item */
.fp-nav-item.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, #ec3f9b, #c84eea);
}

.fp-nav-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    color: #fff;
}
/* Force SVG fill regardless of cascade */
.fp-nav-icon svg {
    fill: #fff;
    display: block;
}
.fp-nav-item.active .fp-nav-icon svg {
    fill: #fff;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.35));
}

.fp-nav-label {
    font-size: 13px;
    font-weight: 400;
    font-family: "Poppins", sans-serif;
    color: inherit;
    display: none;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
    white-space: nowrap;
}
body.fp-sidebar-open .fp-nav-label {
    display: block;
    opacity: 1;
    transform: translateX(0);
}
body.fp-sidebar-open .fp-nav-footer-actions {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* ── Badge (Live Now count etc.) ───────────────────────────── */
.fp-nav-badge {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: var(--radius-pill);
    background: var(--accent-primary);
    color: #fff;
    font-size: 10px;
    font-weight: var(--weight-bold);
    display: grid;
    place-items: center;
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.18s, transform 0.18s;
}
body.fp-sidebar-open .fp-nav-badge {
    opacity: 1;
    transform: scale(1);
}

/* ── Footer nav ──────────────────────────────────────────────────────────── */
.fp-nav-footer {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 6px 8px 4px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.fp-nav-footer-actions {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}

/* ── Collapsed-mode overrides ───────────────────────────────── */
body:not(.fp-sidebar-open) .fp-nav-section,
body:not(.fp-sidebar-open) .fp-nav-footer {
    padding: 0;
    align-items: center;
}

/* Kill label layout space entirely — opacity:0 still occupies width.
   Scope to the sidebar so topbar / bottom-nav count badges stay visible. */
body:not(.fp-sidebar-open) .fp-nav-label,
body:not(.fp-sidebar-open) .fp-sidebar .fp-nav-badge,
body:not(.fp-sidebar-open) .fp-nav-section-label {
    display: none;
}

/* In collapsed mode show footer actions as icon strip — keep column, strip border */
body:not(.fp-sidebar-open) .fp-nav-footer-actions {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

body:not(.fp-sidebar-open) .fp-nav-item {
    /* Become a simple 42×42 centred icon button */
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    margin: 2px auto;
    border-radius: 13px;
    overflow: hidden;
    gap: 0;
    transform: none !important;
}

body:not(.fp-sidebar-open) .fp-nav-icon {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
}

body:not(.fp-sidebar-open) .fp-nav-icon svg {
    fill: #fff;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

body:not(.fp-sidebar-open) .fp-nav-item.active .fp-nav-icon svg {
    fill: #fff;
}

body:not(.fp-sidebar-open) .fp-sidebar-toggle {
    display: grid;
    place-items: center;
    margin: 0 auto 14px;
    border-color: rgba(230, 91, 147, 0.25);
    box-shadow: none;
}

body:not(.fp-sidebar-open) .fp-sidebar-toggle svg {
    fill: #e65b93;
}


/* ── Main Content Area ──────────────────────────────────────── */
.fp-main {
    grid-column: 2;
    padding-top: 56px;
    display: flex;
    justify-content: center;
}

.fp-profile-page {
    width: 100%;
    max-width: 1280px;
    padding: 0;
    margin: 0 auto;
}

/* ── Banner Carousel ────────────────────────────────────────── */
.fp-banner-wrap {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: visible;
    margin-bottom: 0;
}

.fp-banner-wrap > .fp-banner-carousel {
    overflow: hidden;
    border-radius: var(--radius-xl);
    /* Allow child images to scale out of their own box but stay clipped by carousel bounds */
    isolation: isolate;
}

.fp-banner-carousel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc(100% / 4);
    height: 380px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: var(--radius-xl);
    background: var(--bg-elevated);
    cursor: grab;
    user-select: none;
}

.fp-banner-carousel::-webkit-scrollbar { display: none; }

.fp-banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    scroll-snap-align: start;
    border-right: 2px solid var(--bg-page);
    cursor: grab;
    display: block;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                filter 0.35s ease,
                box-shadow 0.35s ease;
    transform-origin: center center;
    filter: brightness(0.92);
}

.fp-banner-carousel a {
    display: contents;
}

/* ── Post image / media click cursors ─────────────────────── */
.individual-post,
.video-block,
.video-block a,
.lightbox {
    cursor: pointer;
}

/* ── Banner placeholder (no images) ───────────────────────── */
.fp-banner-placeholder {
    background: var(--bg-elevated);
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-right: 2px solid var(--bg-page);
    scroll-snap-align: start;
    flex-shrink: 0;
    width: 25%;
    cursor: default;
}

.fp-banner-ph-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
    user-select: none;
}

.fp-banner-ph-inner svg {
    opacity: 0.45;
}

.fp-banner-ph-inner span {
    font-size: var(--font-xs);
    color: var(--text-muted);
    opacity: 0.5;
    letter-spacing: 0.04em;
}

.fp-banner-carousel a:hover .fp-banner-image,
.fp-banner-image:hover {
    transform: scale(1.06);
    filter: brightness(1.08);
    box-shadow: 0 8px 32px rgba(0,0,0,0.45);
}

/* ── Banner counter (bottom-right of carousel) ─────────────── */
.fp-banner-counter {
    position: absolute;
    bottom: 10px;
    right: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
    pointer-events: none;
    z-index: 10;
}

.fp-banner-dots-track {
    display: flex;
    align-items: center;
    gap: 4px;
}

.fp-bcounter-dot {
    display: inline-block;
    width: 18px;
    height: 3px;
    border-radius: 0;
    background: rgba(255,255,255,0.25);
    transition: background 0.2s, transfo
}

.fp-bcounter-dot.active {
    background: var(--accent-pink, #ff2d78);
    width: 28px;
}

.fp-banner-count-label {
    display: none;
}



.fp-banner-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--surface-glass-strong);
    border: 1px solid var(--border-soft);
    color: var(--text-primary);
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 2;
    transition: background 0.18s;
    backdrop-filter: blur(8px);
    padding: 0;
    line-height: 1;
    font-size: 16px;
}

.fp-banner-arrow:hover { background: rgba(255, 47, 134, 0.3); }
.fp-banner-arrow-prev { left: 14px; }
.fp-banner-arrow-next { right: 14px; }

/* ── Profile Identity Overlay (over banner) ─────────────────── */
.fp-profile-overlay {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 80px 28px 0 28px;
    background: linear-gradient(to top, rgba(5,7,11,0.82) 0%, transparent 100%);
    display: flex;
    align-items: flex-end;
    gap: var(--space-5);
    pointer-events: none;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    overflow: visible;
}

@keyframes fpPulseRing {
    0%   { box-shadow: 0 0 40px rgba(224, 51, 107, 0.35), 0 0 0 0    rgba(224, 51, 107, 0.45); }
    70%  { box-shadow: 0 0 40px rgba(224, 51, 107, 0.35), 0 0 0 14px rgba(224, 51, 107, 0);    }
    100% { box-shadow: 0 0 40px rgba(224, 51, 107, 0.35), 0 0 0 0    rgba(224, 51, 107, 0);    }
}

.fp-avatar-wrap {
    flex-shrink: 0;
    position: relative;
    pointer-events: auto;
    transform: translateY(50%);
    z-index: 5;
    background: linear-gradient(145deg, #7c3aed, #e0336b, #f472b6);
    padding: 4px;
    border-radius: 50%;
    animation: fpPulseRing 2.8s ease-out infinite;
    cursor: pointer;
    transition: transform 0.25s ease;
}

.fp-avatar-wrap:hover {
    box-shadow: 0 0 0 5px rgba(224, 51, 107, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35) !important;
    animation-play-state: paused;
    transform: translateY(50%) scale(1.05);
}

/* Avatar online dot retired — status shown as tag pill beside attribute tags */
.fp-avatar-wrap .fp-online-dot,
.fp-mobile-avatar-wrap .fp-online-dot {
    display: none !important;
}

.fp-avatar {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    border: none;
    outline: none;
    box-shadow: none;
    background-color: #12101e;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='38' r='18' fill='%23ff2f8628'/%3E%3Cellipse cx='50' cy='80' rx='28' ry='18' fill='%23ff2f8628'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
    display: block;
    position: relative;
    z-index: 1;
}

.fp-display-name {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.fp-display-name-text {
    line-height: 1.1;
}

.fp-verified-badge {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: center;
    width: 1em;
    height: 1em;
    line-height: 0;
    position: relative;
    cursor: default;
    pointer-events: auto;
}

.fp-verified-badge.fp-is-visible {
    display: inline-flex !important;
}

.fp-verified-badge svg {
    width: 1em;
    height: 1em;
    display: block;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.35));
}

/* Tooltip — CSS only for verified badge (JS engine excluded via no data-tooltip) */
.fp-verified-badge::after {
    content: 'Verified User';
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(20,20,20,0.92);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    padding: 5px 10px;
    border-radius: 5px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease 0.5s, transform 0.2s ease 0.5s;
    z-index: 999;
}

.fp-verified-badge:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.fp-identity {
    flex: 1;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0,0,0,0.65);
    padding-bottom: 8px;
    pointer-events: none;
}

.fp-display-name {
    font-size: 40px;
    font-weight: var(--weight-bold);
    letter-spacing: -0.5px;
    line-height: 1.1;
    margin-bottom: 4px;
}

.fp-username-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.fp-username {
    font-size: 15px !important;
}

.fp-username-row .fp-username,
.fp-username-row .fp-username-handle {
    margin-bottom: 0;
}

.fp-location {
    font-size: 16px !important;
    display: flex;
    align-items: center;
    gap: 4px;
}

.fp-location svg {
    fill: var(--accent-primary);
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}
body.fp-light .fp-location svg {
    fill: #e0548d;
}

.fp-touring-badge {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: rgba(255, 47, 134, 0.2);
    border: 1px solid var(--border-active);
    font-size: var(--font-xs);
    font-weight: var(--weight-semibold);
    color: var(--accent-primary);
}

/* ── Stats & Actions Row ────────────────────────────────────── */
.fp-stats-actions-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 0 0 var(--space-2) 205px;
    min-height: 0;
    margin-top: -4px;
}

.fp-profile-head-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
}

.fp-profile-head-row .fp-actions {
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
}

.fp-profile-head-row .fp-action-btn.follow-btn,
.fp-profile-head-row a.fp-action-btn.fp-edit-profile-btn {
    height: 44px;
    padding: 0 14px;
}

.fp-profile-head-row .fp-actions .fp-action-btn.fp-copy-link,
.fp-profile-head-row .fp-actions .fp-action-btn.fp-rep-btn,
.fp-profile-head-row .fp-actions .fp-action-btn.fp-info-toggle-btn {
    width: 40px;
    min-width: 40px;
    height: 40px;
}

.fp-stats {
    display: flex;
    gap: var(--space-6);
}

.fp-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.fp-stat-value {
    font-size: 22px;
    font-weight: var(--weight-bold);
    color: var(--text-primary);
    line-height: 1;
}

.fp-stat-label {
    font-size: var(--font-sm);
    color: var(--text-muted);
    white-space: nowrap;
}

/* ── Profile Attribute Tags (Gender / Nationality / Ethnicity) ─── */
.fp-profile-attr-tags {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

.fp-profile-attr-tags .fp-attr-tag {
    flex-shrink: 0;
    padding: 0 12px;
}

.fp-attr-tag {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.fp-attr-tag--gender {
    background: rgba(236, 72, 153, 0.12);
    color: #f472b6;
    border-color: rgba(236, 72, 153, 0.3);
}

.fp-attr-tag--nationality {
    background: rgba(37, 99, 235, 0.12);
    color: #60A5FA;
    border-color: rgba(37, 99, 235, 0.3);
}

.fp-attr-tag--ethnicity {
    background: rgba(124, 58, 237, 0.12);
    color: #A78BFA;
    border-color: rgba(124, 58, 237, 0.3);
}

.fp-profile-flavour-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    width: 100%;
}

.fp-profile-flavour-tags:empty {
    display: none;
}

a.fp-attr-tag,
a.fp-attr-tag:link,
a.fp-attr-tag:visited,
a.fp-attr-tag:hover {
    text-decoration: none;
    cursor: pointer;
    background: transparent;
}

a.fp-attr-tag:hover {
    filter: brightness(1.18);
}

.fp-attr-tag--vibe,
a.fp-attr-tag--vibe:visited {
    background: transparent;
    color: #ff00a0;
    border-color: rgba(255, 0, 160, 0.85);
}

.fp-attr-tag--scene,
a.fp-attr-tag--scene:visited {
    background: transparent;
    color: #9d00ff;
    border-color: rgba(157, 0, 255, 0.85);
}

.fp-attr-tag--look,
a.fp-attr-tag--look:visited {
    background: transparent;
    color: #00ffc6;
    border-color: rgba(0, 255, 198, 0.85);
}

.fp-attr-tag--energy,
a.fp-attr-tag--energy:visited {
    background: transparent;
    color: #fff700;
    border-color: rgba(255, 247, 0, 0.85);
}

.fp-attr-tag.is-clipped {
    display: none !important;
}

button.fp-attr-more {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.78);
    border-color: rgba(255, 255, 255, 0.22);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

button.fp-attr-more:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.fp-flavour-more[hidden] {
    display: none !important;
}

.fp-flavour-more {
    flex-shrink: 0;
}

@keyframes fpOnlineTagGlow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.35);
        border-color: rgba(34, 197, 94, 0.35);
    }
    50% {
        box-shadow: 0 0 14px 1px rgba(34, 197, 94, 0.28);
        border-color: rgba(74, 222, 128, 0.55);
    }
}

@keyframes fpOnlineTagDotPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 6px rgba(34, 197, 94, 0.75);
    }
    50% {
        opacity: 0.7;
        transform: scale(0.88);
        box-shadow: 0 0 10px rgba(34, 197, 94, 0.95);
    }
}

.fp-attr-tag--online {
    gap: 7px;
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
    border-color: rgba(34, 197, 94, 0.35);
    animation: fpOnlineTagGlow 2.2s ease-in-out infinite;
}

.fp-attr-tag--online .fp-attr-tag-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
    animation: fpOnlineTagDotPulse 2.2s ease-in-out infinite;
}

body.fp-light .fp-attr-tag--gender     { background: rgba(236,72,153,0.1);  color: #db2777; border-color: rgba(236,72,153,0.28); }
body.fp-light .fp-attr-tag--nationality { background: rgba(37,99,235,0.1);   color: #1d4ed8; border-color: rgba(37,99,235,0.28);  }
body.fp-light .fp-attr-tag--ethnicity  { background: rgba(124,58,237,0.1);  color: #7c3aed; border-color: rgba(124,58,237,0.28); }
body.fp-light .fp-attr-tag--vibe   { background: transparent; color: #c4007c; border-color: rgba(196,0,124,0.58); }
body.fp-light .fp-attr-tag--scene  { background: transparent; color: #7a00c8; border-color: rgba(157,0,255,0.55); }
body.fp-light .fp-attr-tag--look   { background: transparent; color: #00856c; border-color: rgba(0,133,108,0.55); }
body.fp-light .fp-attr-tag--energy { background: transparent; color: #8a8000; border-color: rgba(138,128,0,0.55); }
body.fp-light button.fp-attr-more {
    background: rgba(10, 48, 73, 0.06);
    color: #0a3049;
    border-color: rgba(10, 48, 73, 0.18);
}
body.fp-light .fp-attr-tag--online {
    background: rgba(34, 197, 94, 0.1);
    color: #15803d;
    border-color: rgba(34, 197, 94, 0.32);
}

body.fp-light .fp-attr-tag--online .fp-attr-tag-dot {
    background: #16a34a;
    box-shadow: 0 0 6px rgba(22, 163, 74, 0.65);
}

/* Mobile attribute tags */
.fp-mobile-attr-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 0 8px;
    justify-content: flex-start;
    overflow: visible;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.fp-mobile-attr-tags::-webkit-scrollbar {
    display: none;
}

.fp-mobile-attr-tags .fp-attr-tag {
    flex-shrink: 0;
    max-width: 100%;
}

.fp-mobile-flavour-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0 4px;
    justify-content: flex-start;
    overflow: visible;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.fp-mobile-flavour-tags:empty {
    display: none !important;
}

.fp-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-left: auto;
    flex-shrink: 0;
}

/* ── Two-column Profile Layout ──────────────────────────────── */
.fp-profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--space-5);
    align-items: start;
    width: 100%;
    max-width: 1280px;
    padding: var(--space-4) var(--space-5) 64px;
    margin: 0 auto;
    transition: grid-template-columns 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Left column: stacks banner + stats + feed vertically */
.fp-left-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

/* ── Feed card wrapper (tabs + panels united) ───────────────── */
.fp-feed-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

/* ── Content Tabs (Posts / Media / Private) ──────────────────── */
.fp-content-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-subtle);
}

.fp-content-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: var(--space-4) var(--space-3);
    font-size: 15px;
    font-weight: var(--weight-semibold);
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.18s, border-color 0.18s;
    user-select: none;
    white-space: nowrap;
    background: none;
    border-left: none;
    border-top: none;
    border-right: none;
}

.fp-content-tab span { color: inherit; }

.fp-content-tab svg { flex-shrink: 0; fill: var(--text-muted); }

.fp-content-tab:hover { color: var(--text-primary); }

.fp-content-tab.fp-tab-active {
    color: var(--text-primary);
    border-bottom-color: var(--accent-primary);
}

.fp-content-tab.fp-tab-active span {
    color: var(--text-primary);
}

.fp-content-tab.fp-tab-active svg {
    fill: var(--accent-primary);
}

/* Tab panels — hidden by default, shown when active */
.fp-tab-panel { display: none; }
.fp-tab-panel.fp-panel-active { display: block; padding: var(--space-5); }

/* ── Media grid: 3 square columns ──────────────────────────── */
.fp-media-only-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.fp-media-only-container .no-posts {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--space-6) 0;
    color: var(--text-muted);
    font-size: var(--font-md);
}

/* Feed filter bar */
.fp-feed-controls {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}

.fp-search-wrap {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    padding: 0 var(--space-4);
    height: 40px;
    gap: var(--space-2);
    flex: 1;
    max-width: 340px;
}

.fp-search-wrap input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: var(--font-md);
}

.fp-search-wrap input::placeholder { color: var(--text-muted); }

.fp-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 var(--space-4);
    height: 38px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: rgba(255, 255, 255, 0.035);
    color: var(--text-muted);
    font-size: var(--font-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: all 0.18s;
}

.fp-filter-btn:hover,
.fp-filter-btn.active-post-filter,
.fp-filter-btn.active-post-order-filter {
    color: var(--accent-primary);
    border-color: var(--border-active);
    background: rgba(255, 47, 134, 0.08);
}

/* ── Tab Content Panels ─────────────────────────────────────── */
.fp-tab-panel { display: none; }
.fp-tab-panel.fp-panel-active { display: block; padding: var(--space-5); }

/* Posts panel has its own top-level structure — no default padding */
#fp-panel-posts.fp-panel-active {
    padding: 0;
}
#fp-panel-posts .fp-post-container,
#fp-panel-posts .overlay-posts,
#fp-panel-posts #fp-posts {
    padding: 0;
}

/* Breathing room is now on each post card */
#fp-panel-posts #fp-posts {
    padding-top: 0;
}

/* ── Slide-down search bar ──────────────────────────────────── */
/* ── Inline search (slides left from search button) ──────────── */
.fp-feed-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    position: relative;
}
.fp-inline-search {
    display: flex;
    align-items: center;
    overflow: hidden;
    max-width: 0;
    opacity: 0;
    transition: max-width 0.32s cubic-bezier(0.4,0,0.2,1), opacity 0.22s ease;
    background: rgba(255,255,255,0.05);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    height: 34px;
}
.fp-inline-search.fp-search-open {
    max-width: 220px;
    opacity: 1;
    border-color: var(--border-subtle);
}
.fp-inline-search input {
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: var(--font-sm);
    padding: 0 var(--space-3);
    width: 180px;
    height: 100%;
}
.fp-inline-search input::placeholder { color: var(--text-muted); }
.fp-inline-search-clear {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 var(--space-2);
    font-size: 16px;
    line-height: 1;
    display: none;
}
.fp-inline-search-clear:hover { color: var(--text-primary); }

/* ── Filter wrap (positions the floating card) ───────────────── */
.fp-filter-wrap {
    position: relative;
}

/* ── Filter floating popup card ──────────────────────────────── */
.fp-filter-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 900;
    background: #1a1a2e;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.3);
    padding: 6px 0;
    min-width: 150px;
    opacity: 0;
    transform: scale(0.93) translateY(-6px);
    transform-origin: top right;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.4,0,0.2,1);
}
.fp-filter-dropdown.fp-filter-open {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: all;
}
.fp-filter-opt {
    display: block;
    width: 100%;
    padding: 10px 18px;
    color: var(--text-muted);
    font-size: var(--font-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: background 0.14s, color 0.14s;
    user-select: none;
    white-space: nowrap;
    box-sizing: border-box;
}
.fp-filter-opt:hover {
    background: rgba(255,255,255,0.06);
    color: var(--text-primary);
}
.fp-filter-opt.fp-filter-opt-active {
    color: var(--accent-primary);
    background: rgba(255, 47, 134, 0.07);
}

/* active state on the header icon buttons */
.fp-feed-header-btn.fp-btn-active {
    color: var(--accent-primary);
    background: rgba(255, 47, 134, 0.10);
}


/* ── Post Cards ─────────────────────────────────────────────── */
.fp-post-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.fp-profile-page #fp-posts .following-content,
.fp-profile-page #fp-posts-private-sub .following-content,
.fp-profile-page #fp-posts-private-pre .following-content {
    position: relative;
    background: transparent;
    border: none;
    border-radius: 10px;
    padding: 20px 16px 24px;
    margin-bottom: 0;
    transition: background 0.2s ease;
    cursor: pointer;
    box-shadow: none;
    box-sizing: border-box;
    overflow: visible;
}

.fp-profile-page #fp-posts .following-content + .following-content::before,
.fp-profile-page #fp-posts-private-sub .following-content + .following-content::before,
.fp-profile-page #fp-posts-private-pre .following-content + .following-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background: rgba(255, 255, 255, 0.055);
    pointer-events: none;
}

.fp-profile-page #fp-posts .following-content:last-child,
.fp-profile-page #fp-posts-private-sub .following-content:last-child,
.fp-profile-page #fp-posts-private-pre .following-content:last-child {
    border-bottom: none;
}

.fp-profile-page #fp-posts .following-content:hover,
.fp-profile-page #fp-posts-private-sub .following-content:hover,
.fp-profile-page #fp-posts-private-pre .following-content:hover {
    background: rgba(255, 255, 255, 0.035);
}

body.fp-light .fp-profile-page #fp-posts .following-content,
body.fp-light .fp-profile-page #fp-posts-private-sub .following-content,
body.fp-light .fp-profile-page #fp-posts-private-pre .following-content {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

.following-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    overflow: visible;
}

.following-details {
    display: flex;
    align-items: center;
    gap: 4px;
}

.following-details > a {
    display: flex;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    line-height: 0;
}

.following-image {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.following-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.following-details .following-detail {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-left: 0 !important;
}

.following-details .following-detail > a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.following-head .following-name,
.following-detail .following-name {
    font-size: var(--font-base);
    font-weight: var(--weight-semibold);
    color: var(--accent-primary);
    display: flex !important;
    align-items: center;
    gap: 5px;
    margin-top: 0;
    line-height: 1.2;
}

.following-head .fp-post-verified-badge,
.following-name .fp-post-verified-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex-shrink: 0;
    line-height: 0;
    width: 14px;
    height: 14px;
    position: relative;
    top: 0;
    transform: translateY(2px);
}

.following-head .fp-post-verified-badge svg,
.following-name .fp-post-verified-badge svg {
    display: block;
    width: 14px;
    height: 14px;
}

.following-detail .following-u-name {
    font-size: var(--font-sm);
    color: var(--text-muted);
    display: block;
}

.following-time {
    font-size: var(--font-xs);
    color: var(--text-disabled);
}

.pending-text {
    font-size: var(--font-xs);
    color: var(--warning);
    font-weight: var(--weight-medium);
}

.tab-para {
    font-size: var(--font-base);
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0 0 8px;
    padding: 0;
    white-space: pre-wrap;
}

.tab-para:empty {
    display: none;
}

.following-post {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 0;
    display: block;
}

.following-post img,
.following-post video {
    display: block;
    border-radius: 12px;
    object-fit: cover;
    width: 100%;
    height: auto;
}

.fp-main .following-post img,
.fp-main .following-post video,
.fp-mobile-shell .following-post img,
.fp-mobile-shell .following-post video {
    max-height: min(70vh, 680px);
    object-position: center 18%;
}

/* Locked premium / subscriber panels on the profile feed */
.fp-main .following-post:has(+ .premium-btn),
.fp-main .following-post:has(> img[src*="prempurchase"]),
.fp-mobile-shell .following-post:has(+ .premium-btn),
.fp-mobile-shell .following-post:has(> img[src*="prempurchase"]) {
    background: #0d0d14;
    cursor: pointer;
}

.fp-main .following-post:has(+ .premium-btn) > img,
.fp-main .following-post:has(> img[src*="prempurchase"]) > img,
.fp-mobile-shell .following-post:has(+ .premium-btn) > img,
.fp-mobile-shell .following-post:has(> img[src*="prempurchase"]) > img {
    opacity: 0 !important;
    animation: none !important;
}

.fp-main .following-post:has(+ .premium-btn)::before,
.fp-main .following-post:has(> img[src*="prempurchase"])::before,
.fp-mobile-shell .following-post:has(+ .premium-btn)::before,
.fp-mobile-shell .following-post:has(> img[src*="prempurchase"])::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 152px;
    height: 140px;
    transform: translate(-50%, calc(-50% - 28px));
    background: url("/assets/images/locked-premium-mark.svg") center / contain no-repeat;
    pointer-events: none;
    z-index: 1;
}

.fp-main .following-post:has(+ .premium-btn)::after,
.fp-main .following-post:has(> img[src*="prempurchase"])::after,
.fp-mobile-shell .following-post:has(+ .premium-btn)::after,
.fp-mobile-shell .following-post:has(> img[src*="prempurchase"])::after {
    content: "Unlocked with premium purchase";
    position: absolute;
    left: 12px;
    right: 12px;
    top: 50%;
    transform: translateY(54px);
    color: #fff;
    font-family: "Poppins", var(--font-family-base);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.01em;
    line-height: 1.15;
    text-align: center;
    pointer-events: none;
    z-index: 1;
}

.fp-main .following-post:has(+ .subscribe-btn),
.fp-main .following-post:has(> img[src*="SubOnly"]),
.fp-main .following-post:has(> img[src*="subonly"]),
.fp-mobile-shell .following-post:has(+ .subscribe-btn),
.fp-mobile-shell .following-post:has(> img[src*="SubOnly"]),
.fp-mobile-shell .following-post:has(> img[src*="subonly"]) {
    background: #0d0d14;
    cursor: pointer;
}

.fp-main .following-post:has(+ .subscribe-btn) > img,
.fp-main .following-post:has(> img[src*="SubOnly"]) > img,
.fp-main .following-post:has(> img[src*="subonly"]) > img,
.fp-mobile-shell .following-post:has(+ .subscribe-btn) > img,
.fp-mobile-shell .following-post:has(> img[src*="SubOnly"]) > img,
.fp-mobile-shell .following-post:has(> img[src*="subonly"]) > img {
    opacity: 0 !important;
    animation: none !important;
}

.fp-main .following-post:has(+ .subscribe-btn)::before,
.fp-main .following-post:has(> img[src*="SubOnly"])::before,
.fp-main .following-post:has(> img[src*="subonly"])::before,
.fp-mobile-shell .following-post:has(+ .subscribe-btn)::before,
.fp-mobile-shell .following-post:has(> img[src*="SubOnly"])::before,
.fp-mobile-shell .following-post:has(> img[src*="subonly"])::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 152px;
    height: 140px;
    transform: translate(-50%, calc(-50% - 28px));
    background: url("/assets/images/locked-subscriber-mark.svg?v=2") center / contain no-repeat;
    pointer-events: none;
    z-index: 1;
}

.fp-main .following-post:has(+ .subscribe-btn)::after,
.fp-main .following-post:has(> img[src*="SubOnly"])::after,
.fp-main .following-post:has(> img[src*="subonly"])::after,
.fp-mobile-shell .following-post:has(+ .subscribe-btn)::after,
.fp-mobile-shell .following-post:has(> img[src*="SubOnly"])::after,
.fp-mobile-shell .following-post:has(> img[src*="subonly"])::after {
    content: "Subscriber only post";
    position: absolute;
    left: 12px;
    right: 12px;
    top: 50%;
    transform: translateY(54px);
    color: #fff;
    font-family: "Poppins", var(--font-family-base);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.01em;
    line-height: 1.15;
    text-align: center;
    pointer-events: none;
    z-index: 1;
}

/* Post actions — same inline row as globalfeed / my/feed / gallery.
   Scoped to .fp-main / .fp-mobile-shell so these beat the legacy
   .post-btns / .icon-* rules in style.css (loaded after this file). */
.fp-main .post-icons,
.fp-mobile-shell .post-icons {
    display: flex !important;
    align-items: center;
    gap: 0;
    border-top: none;
    padding: 10px 2px 2px !important;
    margin: 0 !important;
}

.fp-main .post-icons .icons-wrap,
.fp-main .post-icons .left-icons,
.fp-main .post-icons .icons-text,
.fp-main .post-icons .right-icons,
.fp-mobile-shell .post-icons .icons-wrap,
.fp-mobile-shell .post-icons .left-icons,
.fp-mobile-shell .post-icons .icons-text,
.fp-mobile-shell .post-icons .right-icons {
    display: contents !important;
}

.fp-main .icon-heart2,
.fp-mobile-shell .icon-heart2 {
    display: none !important;
}

.fp-main .post-icons .icon-heart,
.fp-main .post-icons .icon-heart-liked,
.fp-main .post-icons .icon-comment,
.fp-main .post-icons .icon-save,
.fp-main .post-icons .icon-save-saved,
.fp-mobile-shell .post-icons .icon-heart,
.fp-mobile-shell .post-icons .icon-heart-liked,
.fp-mobile-shell .post-icons .icon-comment,
.fp-mobile-shell .post-icons .icon-save,
.fp-mobile-shell .post-icons .icon-save-saved {
    flex-shrink: 0;
    width: 22px;
    height: 26px;
    margin: 0 !important;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s, transform 0.15s;
    opacity: 1;
}

.fp-main .post-icons .icon-heart,
.fp-main .post-icons .icon-heart-liked,
.fp-mobile-shell .post-icons .icon-heart,
.fp-mobile-shell .post-icons .icon-heart-liked {
    order: 1;
    background-size: 19px 18px;
}

.fp-main .post-icons .icon-comment,
.fp-mobile-shell .post-icons .icon-comment {
    order: 3;
    background-size: 18px 17px;
}

.fp-main .post-icons .icon-save,
.fp-main .post-icons .icon-save-saved,
.fp-mobile-shell .post-icons .icon-save,
.fp-mobile-shell .post-icons .icon-save-saved {
    order: 5;
    margin-left: auto !important;
    background-size: 16px 18px;
}

.fp-main .icon-heart,        .fp-mobile-shell .icon-heart        { background-image: url('/assets/images/post-heart-outline-grey.svg'); }
.fp-main .icon-heart-liked,  .fp-mobile-shell .icon-heart-liked  { background-image: url('/assets/images/post-heart-filled-pink-new.svg'); }
.fp-main .icon-comment,      .fp-mobile-shell .icon-comment      { background-image: url('/assets/images/post-speech-bubble-grey.svg'); }
.fp-main .icon-comment:hover,.fp-mobile-shell .icon-comment:hover{ background-image: url('/assets/images/post-speech-bubble-pink.svg'); }
.fp-main .icon-save,         .fp-mobile-shell .icon-save         { background-image: url('/assets/images/post-bookmark-pink.svg'); }
.fp-main .icon-save-saved,   .fp-mobile-shell .icon-save-saved   { background-image: url('/assets/images/post-bookmark-pink-filled.svg'); }

.fp-main .post-icons .icon-heart:hover,
.fp-main .post-icons .icon-heart-liked:hover,
.fp-main .post-icons .icon-comment:hover,
.fp-main .post-icons .icon-save:hover,
.fp-main .post-icons .icon-save-saved:hover,
.fp-mobile-shell .post-icons .icon-heart:hover,
.fp-mobile-shell .post-icons .icon-heart-liked:hover,
.fp-mobile-shell .post-icons .icon-comment:hover,
.fp-mobile-shell .post-icons .icon-save:hover,
.fp-mobile-shell .post-icons .icon-save-saved:hover {
    background-color: rgba(224, 84, 141, 0.12);
    transform: none;
    opacity: 1;
}

.fp-main .icons-text,
.fp-mobile-shell .icons-text {
    font-size: 12px;
    font-family: var(--font-family-base);
    font-weight: 600;
    color: var(--text-secondary) !important;
}

.fp-main .likes-count:not(.comment-count),
.fp-mobile-shell .likes-count:not(.comment-count) {
    display: inline-block;
    order: 2;
    width: auto !important;
    margin: 0 8px 0 4px !important;
    text-align: left;
    color: var(--text-secondary) !important;
    letter-spacing: 0;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
}

.fp-main .comment-count,
.fp-mobile-shell .comment-count {
    display: inline-block;
    order: 4;
    width: auto !important;
    margin: 0 0 0 4px !important;
    text-align: left;
    color: var(--text-secondary) !important;
    letter-spacing: 0;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
}

/* Post media count badges — same compact dark pills as the feed */
.fp-main .following-post,
.fp-mobile-shell .following-post {
    position: relative;
}

.fp-main .post-btns,
.fp-mobile-shell .post-btns {
    position: absolute;
    bottom: 10px;
    right: 10px;
    left: auto;
    top: auto;
    width: auto;
    display: flex;
    gap: 4px;
    padding: 0;
    background: none;
    background-color: transparent;
    border-radius: 0;
    pointer-events: none;
    z-index: 2;
}

.fp-main .camera-btn,
.fp-main .video-btn,
.fp-mobile-shell .camera-btn,
.fp-mobile-shell .video-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 0;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 13px;
    font-family: var(--font-family-base);
    font-weight: 700;
    line-height: 1;
    padding: 5px 9px;
    vertical-align: middle;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.fp-main .camera-btn span,
.fp-main .video-btn span,
.fp-mobile-shell .camera-btn span,
.fp-mobile-shell .video-btn span {
    display: inline-block;
    line-height: 1;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

.fp-main .btn-icon,
.fp-mobile-shell .btn-icon,
.fp-main .camera-btn .icon-cameras,
.fp-main .video-btn .icon-video,
.fp-mobile-shell .camera-btn .icon-cameras,
.fp-mobile-shell .video-btn .icon-video {
    display: block;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0 !important;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.fp-main .video-btn .icon-time,
.fp-mobile-shell .video-btn .icon-time {
    width: 12px;
    height: 12px;
    margin: 0 0 0 2px !important;
    filter: brightness(0) invert(1);
}

.fp-main .likes-count,
.fp-mobile-shell .likes-count {
    font-weight: 600;
}

/* Dot menu */
.latest-wrap { position: relative; }

.dot-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 8px;
    cursor: pointer;
    border-radius: var(--radius-xs);
    transition: background 0.15s;
}

.dot-menu:hover { background: rgba(255,255,255,0.06); }

.dot-design {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-muted);
}

/* Compact kebab. style.css loads AFTER this file and re-styles
   .dot-design (inline-block + margin-bottom:3px), which stacks with
   the flex gap and blows the menu up — these higher-specificity
   rules win it back. Sizing is gated on :has(.dot-design) because
   some .dot-menu instances hold a "reply" link instead of dots. */
.fp-main .dot-menu:has(.dot-design),
.fp-mobile-shell .dot-menu:has(.dot-design) {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 8px;
}

.fp-main .dot-design,
.fp-mobile-shell .dot-design {
    display: block;
    width: 3px;
    height: 3px;
    margin: 0;
    background-color: var(--text-muted);
}

.fp-main .dot-menu:hover .dot-design,
.fp-mobile-shell .dot-menu:hover .dot-design {
    background-color: var(--accent-primary);
}

.dot-pop-up {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 160px;
    background: var(--bg-card-soft);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: var(--space-2) 0;
    list-style: none;
    z-index: 20;
    box-shadow: var(--shadow-card);
}

.dot-pop-up.open { display: block; }

.dot-pop-up li { padding: 0; }

.menu-opt {
    display: block;
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.menu-opt:hover {
    background: rgba(255,255,255,0.05);
    color: var(--text-primary);
}

.new-overlap {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 19;
}

.new-overlap.open { display: block; }

/* Subscribe / premium unlock bars — sit flush under media like the feeds */
.fp-main .subscribe-btn,
.fp-main .premium-btn,
.fp-main .subonly-txt,
.fp-mobile-shell .subscribe-btn,
.fp-mobile-shell .premium-btn,
.fp-mobile-shell .subonly-txt {
    display: block !important;
    width: 100%;
    box-sizing: border-box;
    text-transform: uppercase;
    text-align: center;
    font-family: var(--font-family-base) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    line-height: 1.3;
    padding: 8px 16px !important;
    margin: 0 0 8px !important;
    border: none !important;
    border-radius: 0 0 12px 12px !important;
    color: #fff !important;
    background: #e0336b !important;
    background-color: #e0336b !important;
}

.fp-main .subscribe-btn,
.fp-mobile-shell .subscribe-btn {
    background: #2ec8e6 !important;
    background-color: #2ec8e6 !important;
    color: #0d0d14 !important;
    cursor: pointer;
}

.fp-main .premium-btn,
.fp-mobile-shell .premium-btn {
    cursor: pointer;
}

.fp-main .premium-btn:hover,
.fp-mobile-shell .premium-btn:hover {
    opacity: 0.92;
    background: #c92c5e !important;
    background-color: #c92c5e !important;
}

.fp-main .subscribe-btn:hover,
.fp-mobile-shell .subscribe-btn:hover {
    color: #0d0d14 !important;
    background: #1ab0ce !important;
    background-color: #1ab0ce !important;
}

/* Comments */
.comment-container { margin-top: var(--space-3); }

.comment-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--border-subtle);
}

.comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.comment-body { flex: 1; }

.comment-username {
    font-size: var(--font-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
    margin-bottom: 2px;
}

.comment-text {
    font-size: var(--font-sm);
    color: var(--text-muted);
    line-height: 1.5;
}

.add-comment { margin-top: var(--space-3); }

.add-comment textarea {
    width: 100%;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    padding: var(--space-3);
    font-size: var(--font-sm);
    resize: none;
    outline: none;
}

.add-comment textarea:focus { border-color: var(--border-active); }

.add-comments {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-2);
}

.post-comment-send {
    padding: var(--space-2) var(--space-5);
    background: linear-gradient(135deg, var(--fyre-pink-500), var(--fyre-pink-600));
    border: none;
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: var(--font-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
}

.post-comment-kicker {
    display: inline-block;
    font-size: var(--font-xs);
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    transition: background 0.15s;
    margin-top: var(--space-2);
}
.post-comment-kicker:hover { background: rgba(255,255,255,0.05); color: var(--text-secondary); }

.view-comment { margin-top: var(--space-2); }

.more-com {
    font-size: var(--font-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s;
}
.more-com:hover { color: var(--accent-primary); }

.reply-comment {
    font-size: var(--font-xs);
    color: var(--text-muted);
    cursor: pointer;
    margin-left: var(--space-4);
    transition: color 0.15s;
}
.reply-comment:hover { color: var(--accent-primary); }

.no-posts {
    color: var(--text-muted);
    font-size: var(--font-base);
    text-align: center;
    padding: var(--space-9) 0;
    font-weight: var(--weight-medium);
}

/* ── Empty state card ─────────────────────────────────────── */
.fp-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 52px var(--space-5) 48px;
    text-align: center;
    gap: 12px;
}
.fp-empty-state-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 47, 134, 0.07);
    color: rgba(255, 47, 134, 0.5);
    margin-bottom: 4px;
}
.fp-empty-state-heading {
    margin: 0;
    font-size: 16px !important;
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
}
.fp-empty-state-sub {
    margin: 0;
    font-size: 14px !important;
    color: var(--text-muted);
}

/* Media grid */
.fp-media-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
}

.video-block {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-elevated);
}

.video-block img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.22s;
}

.video-block:hover img { transform: scale(1.05); }

/* ── Right Column Cards ─────────────────────────────────────── */
.fp-right-column {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: sticky;
    top: var(--space-4);
    max-height: calc(100vh - var(--space-4) - 16px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,47,134,0.3) transparent;
    border-radius: var(--radius-xl);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    align-self: start;

}
.fp-right-column::-webkit-scrollbar { width: 3px; }
.fp-right-column::-webkit-scrollbar-track { background: transparent; }
.fp-right-column::-webkit-scrollbar-thumb { background: rgba(255,47,134,0.3); border-radius: 2px; }

/* ── Info panel toggle button ────────────────────────────────────────────── */

/* Thin vertical divider before the toggle */
.fp-actions-divider {
    display: inline-block;
    width: 1px;
    height: 22px;
    background: rgba(255,255,255,0.10);
    border-radius: 1px;
    flex-shrink: 0;
}

/* Toggle button — icon-only, same height as siblings */
.fp-info-toggle-btn {
    padding: 0;
    opacity: 1;
    transition: opacity 0.18s, background 0.18s, border-color 0.18s, color 0.18s;
}
.fp-info-toggle-btn svg {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.fp-info-toggle-btn:hover {
    opacity: 1;
}
/* Panel visible — button sits quietly */
body:not(.fp-info-collapsed) .fp-info-toggle-btn {
    opacity: 1;
}
/* Panel hidden — button gets a gentle pink tint so the user knows it's active */
body.fp-info-collapsed .fp-info-toggle-btn {
    opacity: 1;
    background: rgba(255, 47, 134, 0.10);
    border-color: rgba(255, 47, 134, 0.35);
}
body.fp-info-collapsed .fp-info-toggle-btn svg {
    fill: rgba(255, 47, 134, 0.9);
    transform: scaleX(-1);
}
body.fp-light .fp-info-toggle-btn svg { fill: #0a3049; }
body.fp-light.fp-info-collapsed .fp-info-toggle-btn {
    opacity: 1;
    background: rgba(224, 84, 141, 0.09) !important;
    border-color: rgba(224, 84, 141, 0.55) !important;
    box-shadow: 0 0 4px rgba(224, 84, 141, 0.18) !important;
}
body.fp-light.fp-info-collapsed .fp-info-toggle-btn svg { fill: #e0548d !important; }

/* ── Collapsed state ─────────────────────────────────────────────────────── */
body.fp-info-collapsed .fp-profile-layout {
    grid-template-columns: minmax(0, 860px);
    justify-content: center;
}
body.fp-info-collapsed .fp-right-column {
    display: none;
}
body:not(.fp-info-collapsed) .fp-right-column {
    visibility: visible;
    opacity: 1;
    width: auto;
    transition: opacity 0.25s;
}


.fp-acc-item {
    border-bottom: 1px solid var(--border-subtle);
}
.fp-acc-item:last-child {
    border-bottom: none;
}

.fp-acc-about .fp-acc-header {
    position: sticky;
    top: 0;
    z-index: 4;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-subtle);
}

.fp-acc-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: var(--font-base);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    gap: 14px;
    transition: background 0.15s;
}
.fp-acc-header:hover {
    background: rgba(255,255,255,0.04);
}

.fp-acc-about .fp-acc-header:hover {
    background: var(--bg-card);
}

.fp-acc-header-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--text-secondary);
    line-height: 1;
    position: relative;
    padding-bottom: 2px;
}

.fp-acc-header-inner::after {
    content: none;
}

.fp-acc-header-inner svg {
    flex-shrink: 0;
    width: 19px;
    height: 19px;
    fill: none;
    stroke: var(--accent-primary);
    color: var(--accent-primary);
}

.fp-acc-chevron {
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform 0.22s cubic-bezier(0.4,0,0.2,1);
}
.fp-acc-item.fp-acc-open .fp-acc-chevron {
    transform: rotate(180deg);
}

.fp-acc-body {
    display: none;
    padding: 4px 24px 24px;
    animation: fp-acc-in 0.2s ease;
}
.fp-acc-item.fp-acc-open .fp-acc-body {
    display: block;
}

/* ── Contact / Message section in right sidebar ─────────────── */
.fp-contact-body {
    flex-direction: column;
    gap: var(--space-3);
}
.fp-acc-item.fp-acc-open .fp-contact-body {
    display: flex;
}

.fp-contact-subheading {
    text-align: center;
    font-size: 15px;
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
    padding-bottom: 8px;
    position: relative;
    margin-bottom: 2px;
}

.fp-contact-subheading::after {
    content: '';
    display: block;
    width: 125px;
    height: 3px;
    background: var(--accent-primary);
    border-radius: 0;
    margin: 3px auto 0;
}

.fp-contact-textarea {
    width: 100%;
    min-height: 110px;
    max-height: 300px;
    padding: 12px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: var(--font-family-base);
    font-size: 14px;
    resize: vertical;
    transition: border-color 0.18s;
    box-sizing: border-box;
}

.fp-contact-textarea::placeholder {
    color: var(--text-muted);
}

.fp-contact-textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.fp-contact-send-btn {
    display: block;
    margin: 4px 0 0 auto;
    padding: 0 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--fyre-pink-500), var(--fyre-pink-600));
    border: none;
    border-radius: var(--radius-md);
    color: #fff;
    font-size: var(--font-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.18s;
}

.fp-contact-send-btn:hover { opacity: 0.88; }

@keyframes fp-acc-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}



/* Neon divider between About and Links */
.fp-neon-divider {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,47,134,0.55) 30%, rgba(255,47,134,0.55) 70%, transparent 100%);
    box-shadow: 0 0 6px 1px rgba(255,47,134,0.35);
    margin: 2px 0;
}

/* Neon divider inside sidebar between nav scroll area and footer */
.fp-sidebar-neon-divider {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.10) 30%, rgba(255,255,255,0.10) 70%, transparent 100%);
    box-shadow: none;
    margin: 6px 12px 4px;
    flex-shrink: 0;
}

/* About [DisplayName] in card heading */
.fp-about-displayname {
    color: var(--text-primary);
    font-weight: var(--weight-bold);
}

/* About card title — hidden until display name is set by JS */
.fp-about-card-title {
    display: none;
}

.fp-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: 14px 18px;
}

.fp-card-title {
    font-size: var(--font-base);
    font-weight: var(--weight-bold);
    color: var(--text-primary);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    gap: 8px;
}

.fp-card-title svg {
    fill: var(--accent-primary);
    flex-shrink: 0;
    filter: drop-shadow(0 0 3px rgba(255, 47, 134, 0.7));
}

/* About card */
#fp-about-bio {
    font-size: var(--font-md);
    color: var(--text-secondary);
    line-height: 1.7;
}

.fp-read-more-bio,
.fp-read-less-bio {
    display: inline-block;
    color: var(--accent-primary);
    font-size: var(--font-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    margin-top: var(--space-2);
}

.fp-bio-collapsed {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Quick info card */
.fp-info-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.fp-info-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-md);
}

.fp-info-label {
    color: var(--text-muted);
    min-width: 90px;
    font-size: var(--font-sm);
    flex-shrink: 0;
}

.fp-info-value {
    color: var(--text-secondary);
    font-weight: var(--weight-medium);
}

.fp-info-online {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-sm);
    font-weight: var(--weight-semibold);
    color: var(--success);
}

.fp-info-online::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    animation: fp-pulse 2s infinite;
}


/* Services tags */
.fp-services-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Links card */
.fp-links-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.fp-link-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-subtle);
    transition: background 0.18s, border-color 0.18s;
    color: var(--text-secondary);
    font-size: var(--font-sm);
    font-weight: var(--weight-medium);
    word-break: break-all;
}

.fp-link-item:hover {
    background: rgba(255,255,255,0.06);
    border-color: var(--border-soft);
    color: var(--text-primary);
}

.fp-link-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-xs);
    background: rgba(255, 47, 134, 0.12);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--accent-primary);
    transition: opacity 0.15s;
}

.fp-link-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fp-no-links {
    font-size: var(--font-sm);
    color: var(--text-disabled);
    text-align: center;
    padding: var(--space-4) 0;
}

/* Supporters card */
.fp-supporters-stub {
    font-size: var(--font-sm);
    color: var(--text-disabled);
    text-align: center;
    padding: var(--space-5) 0;
}

/* ── Loaders ────────────────────────────────────────────────── */
.overlay-posts {
    display: flex;
    justify-content: center;
    padding: var(--space-8) 0;
}

.overlay-media-posts {
    display: flex;
    justify-content: center;
    padding: var(--space-7) 0;
    grid-column: 1 / -1;
}



.fp-filter-opt {
    display: block;
    padding: 10px 12px;
    cursor: pointer;
    color: var(--text-secondary);
    box-sizing: border-box;
}
.fp-filter-opt.fp-filter-opt-active,
.fp-filter-opt.fp-order-active {
    background: linear-gradient(90deg, rgba(224,84,141,0.06), rgba(155,92,255,0.03));
    color: var(--fyre-pink-500);
    font-weight: var(--weight-semibold);
    border-left: 3px solid var(--fyre-pink-500);
}



/* Subscription popup */
.fp-sub-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--border-subtle);
}

.fp-sub-label { color: var(--text-muted); font-size: var(--font-md); }
.fp-sub-value { font-size: var(--font-lg); font-weight: var(--weight-bold); color: var(--accent-primary); }


/* Avatar lightbox */
#fp-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    z-index: 180;
    align-items: center;
    justify-content: center;
}

#fp-lightbox.active { display: flex; }

#fp-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: var(--radius-xl);
    object-fit: contain;
}

.fp-lightbox-close {
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.10);
    border: none;
    color: #fff;
    font-size: 20px;
    display: grid;
    place-items: center;
    cursor: pointer;
}

/* ── Member Profile Section ─────────────────────────────────── */
.fp-member-section {
    display: none;
    max-width: 680px;
    margin: 0 auto;
    padding-top: var(--space-6);
}

.fp-member-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--border-soft);
    margin-bottom: var(--space-4);
}

/* ── Subscription modal — premium redesign ──────────────────── */
.fp-sub-modal {
    max-width: 460px;
    width: 92%;
    padding: 28px 32px 26px;
    background: linear-gradient(160deg, rgba(14, 18, 32, 0.98) 0%, rgba(10, 12, 22, 0.99) 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 24px;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.68),
        0 0 60px rgba(255, 47, 134, 0.07);
    overflow: hidden;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 92vh;
    overflow-y: auto;
    scrollbar-width: none;
}
.fp-sub-modal::-webkit-scrollbar { display: none; }

/* Ambient glow behind content */
.fp-sub-glow {
    position: absolute;
    top: -100px;
    right: -60px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 47, 134, 0.10) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.fp-sub-modal > *:not(.fp-sub-glow):not(.fp-modal-close) { position: relative; z-index: 1; }
.fp-sub-modal .fp-modal-close { position: absolute; z-index: 2; }

/* ── Creator identity ─────────────────────────────────────── */
.fp-sub-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.fp-sub-avatar-ring {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    padding: 2px;
    background: linear-gradient(135deg, #ff2f86, #9b5cff);
    flex-shrink: 0;
    overflow: hidden;
}

.fp-sub-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #0e1220;
    display: block;
}

.fp-sub-identity-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.fp-sub-uname {
    font-size: 18px;
    font-weight: 700;
    color: #f8fafc;
    letter-spacing: -0.01em;
}

.fp-sub-subtitle {
    font-size: 13px;
    color: #8c95a8;
    font-weight: 400;
}

/* ── Heading & price pill ─────────────────────────────────── */
.fp-sub-heading-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
}

.fp-sub-heading {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
    background: linear-gradient(
        90deg,
        #f8fafc 0%,
        #f8fafc 25%,
        #ff2f86 40%,
        #ffd6ea 50%,
        #d8b4fe 60%,
        #f8fafc 74%,
        #f8fafc 100%
    );
    background-size: 250% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: fp-heading-glimmer 13s linear infinite;
}

.fp-sub-price-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 5px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 47, 134, 0.50);
    background: rgba(255, 47, 134, 0.08);
    flex-shrink: 0;
}

.fp-sub-price-pill strong {
    font-size: 15px;
    font-weight: 800;
    color: #ff2f86;
    letter-spacing: -0.01em;
}

.fp-sub-price-period {
    font-size: 13px;
    color: #c8cfdd;
    font-weight: 500;
}

/* ── Benefits ─────────────────────────────────────────────── */
.fp-sub-benefits {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 20px;
}

.fp-sub-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.fp-sub-benefit-item:last-child { border-bottom: none; }

.fp-sub-benefit-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 12px;
    background: rgba(255, 47, 134, 0.10);
    border: 1px solid rgba(255, 47, 134, 0.18);
    display: grid;
    place-items: center;
    color: #ff2f86;
}
.fp-sub-benefit-icon svg { width: 18px; height: 18px; }

.fp-sub-benefit-text h3 {
    font-size: 14px;
    font-weight: 600;
    color: #f8fafc;
    margin: 0 0 3px;
    line-height: 1.3;
}

.fp-sub-benefit-text p {
    font-size: 12px;
    color: #8c95a8;
    margin: 0;
    line-height: 1.5;
}

/* ── Payment summary ──────────────────────────────────────── */
.fp-sub-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 0 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.fp-sub-summary-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fp-sub-summary-label {
    font-size: 13px;
    color: #8c95a8;
    font-weight: 500;
}

.fp-sub-summary-amount {
    font-size: 28px;
    font-weight: 800;
    color: #ff2f86;
    letter-spacing: -0.02em;
    line-height: 1;
}

.fp-sub-summary-right {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    color: #8c95a8;
    max-width: 180px;
    line-height: 1.5;
}
.fp-sub-summary-right svg { flex-shrink: 0; color: #ff2f86; margin-top: 1px; }

/* ── CTA button ───────────────────────────────────────────── */
.fp-sub-cta-btn {
    width: 100%;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(90deg, #ff2f86 0%, #e91e73 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    font-family: var(--font-family-base);
    cursor: pointer;
    letter-spacing: 0.01em;
    transition: background 0.2s, transform 0.14s, box-shadow 0.2s;
    box-shadow: 0 6px 22px rgba(255, 47, 134, 0.28);
    margin-bottom: 14px;
}
.fp-sub-cta-btn:hover {
    background: linear-gradient(90deg, #ff4fa3 0%, #ff2f86 100%);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 47, 134, 0.40);
}
.fp-sub-cta-btn:active { transform: scale(0.98) translateY(0); }
.fp-sub-cta-btn:focus-visible { outline: 2px solid #ff2f86; outline-offset: 3px; }

.fp-sub-cta-arrow { flex-shrink: 0; transition: transform 0.18s; }
.fp-sub-cta-btn:hover .fp-sub-cta-arrow { transform: translateX(4px); }

/* ── Trust signals footer ─────────────────────────────────── */
.fp-sub-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: nowrap;
}

.fp-sub-trust span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #8c95a8;
    font-weight: 500;
    padding: 0 14px;
}
.fp-sub-trust span:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.fp-sub-trust span:first-child { padding-left: 0; }
.fp-sub-trust span:last-child  { padding-right: 0; }
.fp-sub-trust svg { flex-shrink: 0; color: #8c95a8; }

/* ── Legacy helpers kept for other modals ─────────────────── */
.fp-sub-total-row {
    display: none; /* replaced by fp-sub-summary */
}


/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 520px) {
    .fp-sub-modal {
        padding: 22px 20px 22px;
        border-radius: 20px;
        width: 95%;
    }

    .fp-sub-avatar-ring { width: 54px; height: 54px; }
    .fp-sub-uname { font-size: 16px; }
    .fp-sub-heading { font-size: 22px; }
    .fp-sub-benefit-icon { width: 36px; height: 36px; border-radius: 10px; }
    .fp-sub-benefit-item { gap: 10px; padding: 10px 0; }
    .fp-sub-benefit-text h3 { font-size: 13px; }
    .fp-sub-benefit-text p  { font-size: 11px; }
    .fp-sub-summary { flex-direction: column; align-items: flex-start; gap: 8px; }
    .fp-sub-summary-right { max-width: 100%; }
    .fp-sub-summary-amount { font-size: 24px; }
    .fp-sub-cta-btn { height: 50px; font-size: 14px; }
    .fp-sub-trust { flex-wrap: wrap; gap: 8px; }
    .fp-sub-trust span { padding: 0; border-right: none; }
}

/* ── Miscellaneous ──────────────────────────────────────────── */

.fp-fully-verified {
    display: none;
    color: var(--accent-primary);
    font-size: var(--font-sm);
    font-weight: var(--weight-semibold);
}

.fp-copy-link {
    cursor: pointer;
    color: var(--text-muted);
    font-size: var(--font-sm);
    transition: color 0.15s;
}
.fp-copy-link:hover { color: var(--accent-primary); }

/* ============================================================
   MOBILE LAYOUT  max-width: 768px
   ============================================================ */
@media (max-width: 768px) {

    .fp-topbar,
    .fp-sidebar {
        display: none;
    }

    .fp-app-shell {
        display: block;
    }

    .fp-main {
        padding-top: 0;
    }

    /* Feed on mobile */
    .fp-profile-layout {
        display: block;
        padding: 0;
    }

    .fp-left-col {
        gap: var(--space-3);
    }

    .fp-right-column { display: none; }

    .fp-feed-column {
        padding: 0 16px;
        margin-top: var(--space-4);
    }

    .fp-content-tabs { display: none; }

    .fp-banner-wrap {
        margin: 0;
        border-radius: 0;
    }

    /* ── Mobile Bottom Nav ───────────────────────────────── */
    .fp-mobile-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 76px;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        place-items: center;
        background: rgba(5, 7, 11, 0.92);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        z-index: 60;
    }

    .fp-bottom-nav-icon {
        display: grid;
        place-items: center;
        width: 48px;
        height: 48px;
        border-radius: var(--radius-md);
        color: var(--text-muted);
        position: relative;
        transition: color 0.18s;
    }

    .fp-bottom-nav-icon.active { color: var(--accent-primary); }

    .fp-bottom-nav-icon .fp-badge {
        position: absolute;
        top: 7px;
        right: 7px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--accent-primary);
        border: 2px solid var(--bg-page);
    }

    /* Media grid on mobile */
    .fp-media-grid { grid-template-columns: repeat(3, 1fr); }

    /* Banner carousel mobile fix */
    .fp-banner-carousel {
        height: 360px;
    }

    /* Modals full width on mobile */
    .fp-modal {
        width: 95%;
        padding: var(--space-5);
        border-radius: 12px;
    }

    /* Send-message popup — tighter FindFyre card, not a sparse empty box */
    #fp-message-popup.fp-msg-modal {
        width: calc(100% - 32px);
        max-width: 400px;
        padding: 22px 18px 18px;
        border-radius: 16px;
        background: #0d1017;
        border: 1px solid rgba(255, 255, 255, 0.10);
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.68);
    }

    #fp-message-popup .fp-modal-title {
        font-size: 20px;
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1.2;
        margin: 0 44px 16px 0;
    }

    #fp-message-popup .fp-modal-close {
        top: 14px;
        right: 14px;
        width: 40px;
        height: 40px;
        font-size: 22px;
        background: rgba(255, 255, 255, 0.08);
        color: #e8edf4;
    }

    #fp-message-popup .fp-modal-textarea {
        min-height: 128px;
        margin-top: 0;
        padding: 14px;
        font-size: 16px;
        line-height: 1.45;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: #fff;
        resize: none;
    }

    #fp-message-popup .fp-modal-textarea:focus {
        border-color: rgba(236, 63, 143, 0.55);
        box-shadow: 0 0 0 3px rgba(236, 63, 143, 0.16);
    }

    #fp-message-popup .fp-modal-action-btn {
        height: 48px;
        margin-top: 14px;
        padding: 0 16px;
        border-radius: 12px;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 0.01em;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body.fp-light #fp-message-popup.fp-msg-modal {
        background: #fff;
        border: 1px solid rgba(10, 48, 73, 0.10);
        box-shadow: 0 22px 50px rgba(10, 48, 73, 0.16);
    }

    body.fp-light #fp-message-popup .fp-modal-title {
        color: #0a3049 !important;
    }

    body.fp-light #fp-message-popup .fp-modal-close {
        background: rgba(10, 48, 73, 0.07);
        color: #0a3049;
    }

    body.fp-light #fp-message-popup .fp-modal-textarea {
        background: #f6f7f9;
        border-color: rgba(10, 48, 73, 0.18);
        color: #0a3049;
    }
}

/* ── Tablet tweaks (769–1024px) ─────────────────────────────── */
@media (min-width: 769px) and (max-width: 1200px) {
    .fp-profile-layout {
        grid-template-columns: minmax(0, 1fr) 260px;
        padding: 0 var(--space-4) 48px;
        gap: var(--space-4);
    }

    .fp-topbar {
        grid-template-columns: 200px minmax(0, 1fr);
    }

    .fp-banner-carousel {
        grid-auto-columns: calc(100% / 3);
    }
}


/* ── Feed column ────────────────────────────────────────────── */
.fp-feed-col {
    min-width: 0;
}

/* ── Action buttons ─────────────────────────────────────────── */
.fp-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 44px;
    padding: 0 20px;
    border-radius: 8px;
    font-size: var(--font-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: opacity 0.18s, background 0.18s;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.06);
    color: var(--text-primary);
}

.fp-action-btn:hover { background: rgba(255,255,255,0.10); }

.follow-btn {
    background: linear-gradient(135deg, var(--fyre-pink-500), var(--fyre-pink-600));
    border-color: transparent;
    color: #fff;
    transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}

.follow-btn:hover {
    background: linear-gradient(135deg, #c9457c, #b33a6b);
    box-shadow: 0 4px 18px rgba(224, 84, 141, 0.38);
    transform: translateY(-1px);
}

.fp-main-subscribe-btn {
    background: linear-gradient(135deg, var(--fyre-pink-500), var(--fyre-pink-600));
    border-color: transparent;
    color: #fff;
    transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}

.fp-main-subscribe-btn:hover {
    background: linear-gradient(135deg, #e0256a, #c41f5a);
    box-shadow: 0 4px 18px rgba(255, 47, 134, 0.38);
    transform: translateY(-1px);
}

.fp-subscribed-state {
    background: rgba(255, 47, 134, 0.12);
    border-color: var(--border-active);
    color: var(--accent-primary);
}

/* ── Subscribe CTA banner (between actions and feed) ──────── */
.fp-sub-wrap {
    padding: var(--space-3) 0 var(--space-5);
}

/* ── Keyframes ── */
@keyframes fp-sub-glow-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(255,47,134,0.3),
            0 4px 16px rgba(255,47,134,0.28),
            0 8px 32px rgba(255,47,134,0.1),
            inset 0 1px 0 rgba(255,255,255,0.12);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(255,47,134,0.48),
            0 4px 22px rgba(255,47,134,0.42),
            0 10px 40px rgba(255,47,134,0.18),
            inset 0 1px 0 rgba(255,255,255,0.16);
    }
}

@keyframes fp-sub-shimmer {
    0%   { left: -80%; opacity: 1; }
    60%  { left: 130%; opacity: 1; }
    100% { left: 130%; opacity: 0; }
}

@keyframes fp-sub-border-pulse {
    0%, 100% { opacity: 0.25; }
    50%       { opacity: 0.55; }
}

@keyframes fp-heading-glimmer {
    0%   { background-position: -250% center; }
    100% { background-position: 250% center; }
}

.fp-sub-cta-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 94%;
    max-width: 580px;
    margin: 0 auto;
    padding: 18px 24px;
    background: linear-gradient(130deg, #b8005c 0%, #e0006f 40%, #ff2f86 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: var(--font-family-base);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-align: left;
    animation: fp-sub-glow-pulse 4s ease-in-out infinite;
    transition: transform 0.15s ease, filter 0.18s ease;
    outline: none;
}

/* slow shimmer sweep — soft, infrequent */
.fp-sub-cta-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 40%;
    height: 100%;
    background: linear-gradient(105deg,
        transparent 0%,
        rgba(255,255,255,0.1) 50%,
        transparent 100%);
    transform: skewX(-18deg);
    pointer-events: none;
    animation: fp-sub-shimmer 5s ease-in-out infinite;
}

/* subtle top-edge highlight */
.fp-sub-cta-banner::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.4) 40%,
        rgba(255,255,255,0.6) 50%,
        rgba(255,255,255,0.4) 60%,
        transparent 100%);
    animation: fp-sub-border-pulse 4s ease-in-out infinite;
    pointer-events: none;
}

.fp-sub-cta-banner:hover {
    animation: none;
    box-shadow:
        0 0 0 2px rgba(255,47,134,0.85),
        0 6px 30px rgba(255,47,134,0.7),
        0 16px 55px rgba(255,47,134,0.4),
        inset 0 1px 0 rgba(255,255,255,0.25);
    transform: translateY(-2px);
    filter: brightness(1.07);
}

.fp-sub-cta-banner:active {
    transform: scale(0.985);
    filter: brightness(0.97);
    animation: none;
}

.fp-sub-banner-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.14);
    border: 1.5px solid rgba(255,255,255,0.3);
    box-shadow: 0 0 12px rgba(255,255,255,0.12);
    backdrop-filter: blur(4px);
    color: #fff;
}

.fp-sub-banner-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.fp-sub-banner-label {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #fff;
    line-height: 1.2;
    text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}

.fp-sub-banner-sub {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.28);
}

.fp-sub-banner-sub strong {
    font-weight: 700;
    color: #fff;
}

.fp-sub-banner-arrow {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.2);
    opacity: 1;
    color: #fff;
    transition: transform 0.2s ease, opacity 0.18s ease, background 0.18s ease;
}

.fp-sub-cta-banner:hover .fp-sub-banner-arrow {
    transform: translateX(3px);
    opacity: 1;
    background: rgba(255,255,255,0.25);
}

/* ── Feed toolbar ───────────────────────────────────────────── */
/* ── FEED header ─────────────────────────────────────────────── */
.fp-feed-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-subtle);
}
.fp-feed-title {
    font-size: var(--font-lg);
    font-weight: var(--weight-bold);
    color: var(--text-primary);
    letter-spacing: 0.04em;
}
.fp-feed-header-actions {
    /* layout handled in the search/filter block above */
}
.fp-feed-header-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.18s, background 0.18s, border-color 0.18s;
}
.fp-feed-header-btn:hover {
    color: var(--accent-primary);
    border-color: rgba(224, 84, 141, 0.40);
    background: rgba(224, 84, 141, 0.08);
}

/* ── No-posts / empty-state — see fp-empty-state block above ── */

.fp-feed-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.fp-filter-group,
.fp-order-group {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.fp-post-filter,
.fp-post-order-filter {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-4);
    height: 36px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: rgba(255,255,255,0.035);
    color: var(--text-muted);
    font-size: var(--font-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: all 0.18s;
}

.fp-post-filter:hover,
.fp-post-order-filter:hover,
.fp-active-post-filter,
.fp-active-post-order {
    color: var(--accent-primary);
    border-color: var(--border-active);
    background: rgba(255, 47, 134, 0.08);
}

.fp-post-media-type,
.fp-post-media-private {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-4);
    height: 36px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: rgba(255,255,255,0.035);
    color: var(--text-muted);
    font-size: var(--font-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: all 0.18s;
}

.fp-post-media-active,
.fp-post-private-active {
    color: var(--accent-primary);
    border-color: var(--border-active);
    background: rgba(255, 47, 134, 0.08);
}

/* ── Policy / links card ─────────────────────────────────────── */
.fp-policy-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.fp-policy-link {
    font-size: var(--font-sm);
    color: var(--text-muted);
    text-decoration: underline;
    transition: color 0.18s;
}

.fp-policy-link:hover { color: var(--text-secondary); }

.fp-links-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* ── Tags wrap ───────────────────────────────────────────────── */
.fp-tags-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* ── Member block ────────────────────────────────────────────── */
.fp-member-profile-block {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
}

.fp-member-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--border-soft);
}

.fp-member-display-name {
    font-size: var(--font-xl);
    font-weight: var(--weight-bold);
    color: var(--text-primary);
}

.fp-member-username,
.fp-member-country,
.fp-member-bio,
.fp-member-registered,
.fp-member-lastseen {
    font-size: var(--font-sm);
    color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════════════════
/* ══ fyre-sidebar — Right-side account drawer
   Visually consistent with fp-sidebar (left nav).
   Same shell, toggle button, section labels, nav-item grammar, pink active.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Backdrop overlay ───────────────────────────────────────────────── */
.fyre-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 199;
    opacity: 0;
    transition: opacity 0.28s ease;
}
.fyre-sidebar-overlay.fyre-sidebar--open {
    display: block;
    opacity: 1;
}

/* ── Drawer shell ───────────────────────────────────────────────────── */
.fyre-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 270px;
    background: var(--surface-nav);
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    padding: 10px 0 16px;
    z-index: 200;
    overflow: hidden;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.5);
}
.fyre-sidebar--open {
    transform: translateX(0);
}

/* ── Header — avatar + identity ─────────────────────────────────────── */
.fyre-sidebar__header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 4px;
}

.fyre-sidebar__identity {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

/* Avatar */
.fyre-sidebar__avatar-wrap {
    position: relative;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
}
.fyre-sidebar__avatar {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid rgba(255, 47, 134, 0.55);
    box-shadow: 0 0 0 3px rgba(255, 47, 134, 0.1);
    background: var(--bg-elevated);
    display: block;
}
.fyre-sidebar__crown {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd166 0%, #f4a623 100%);
    border: 2px solid var(--surface-nav);
    color: #5a3000;
}

/* Creator meta text */
.fyre-sidebar__creator-meta {
    flex: 1;
    min-width: 0;
}
.fyre-sidebar__creator-meta h2 {
    font-size: var(--font-md);
    font-weight: var(--weight-bold);
    color: var(--text-primary);
    line-height: 1.25;
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fyre-sidebar__creator-meta p {
    font-size: var(--font-sm);
    color: var(--text-muted);
    margin: 0 0 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fyre-sidebar__creator-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 18px;
    padding: 0 7px;
    border-radius: var(--radius-pill);
    background: rgba(255, 47, 134, 0.12);
    border: 1px solid rgba(255, 47, 134, 0.35);
    font-size: 10px;
    font-weight: var(--weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent-primary);
}
.fyre-sidebar__creator-status::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent-primary);
    box-shadow: 0 0 5px var(--accent-primary);
    flex-shrink: 0;
}

/* Close button — same style as fp-sidebar-toggle */
.fyre-sidebar__close {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    background: rgba(255, 47, 134, 0.07);
    border: 1px solid rgba(255, 47, 134, 0.45);
    box-shadow: 0 0 6px rgba(255, 47, 134, 0.25), inset 0 0 4px rgba(255, 47, 134, 0.06);
    color: rgba(255, 47, 134, 0.9);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.18s, box-shadow 0.18s, transform 0.22s;
}
.fyre-sidebar__close:hover {
    background: rgba(255, 47, 134, 0.16);
    box-shadow: 0 0 10px rgba(255, 47, 134, 0.45), inset 0 0 6px rgba(255, 47, 134, 0.1);
    transform: rotate(90deg);
}

/* ── Scrollable body ────────────────────────────────────────────────── */
.fyre-sidebar__scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.fyre-sidebar__scroll::-webkit-scrollbar { display: none; }

/* ── Navigation ─────────────────────────────────────────────────────── */
.fyre-sidebar__nav {
    padding: 6px 8px 0;
    flex: 1;
}

/* Section group — identical to fp-nav-section */
.fyre-sidebar__section {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-bottom: 6px;
}

.fyre-sidebar__section-label {
    font-size: 10px;
    font-weight: var(--weight-bold);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 10px 10px 6px;
    margin: 0;
    white-space: nowrap;
}

/* Nav links — identical grammar to fp-nav-item */
.fyre-sidebar__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 44px;
    border-radius: var(--radius-md);
    padding: 0 10px;
    color: rgba(255, 255, 255, 0.70);
    text-decoration: none;
    font-size: var(--font-md);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
    overflow: hidden;
    transition: background 0.18s, color 0.18s;
    margin-bottom: 2px;
}
.fyre-sidebar__link:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}

/* Active — identical to fp-nav-item.active */
.fyre-sidebar__link--active {
    background: rgba(255, 47, 134, 0.18);
    color: var(--accent-primary);
}

/* Icon — identical to fp-nav-icon */
.fyre-sidebar__icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    color: #fff;
}
.fyre-sidebar__icon svg {
    fill: #fff;
    display: block;
}
.fyre-sidebar__link--active .fyre-sidebar__icon svg,
.fyre-sidebar__link--active .fyre-sidebar__icon {
    color: var(--accent-primary);
    fill: var(--accent-primary);
}
.fyre-sidebar__link--active .fyre-sidebar__icon svg {
    fill: var(--accent-primary);
}

/* Badge pill */
.fyre-sidebar__badge {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--accent-primary);
    color: #fff;
    font-size: 11px;
    font-weight: var(--weight-bold);
    display: grid;
    place-items: center;
    line-height: 1;
}

/* ── Bottom (pinned outside scroll) ────────────────────────────────── */
.fyre-sidebar__bottom {
    flex-shrink: 0;
    padding: 0 8px 4px;
    border-top: 1px solid rgba(255, 47, 134, 0.2);
    margin-top: 6px;
    padding-top: 8px;
}

/* Referral / boost card — matches .card-dark grammar */
.fyre-sidebar__boost-card {
    background: rgba(255, 47, 134, 0.07);
    border: 1px solid rgba(255, 47, 134, 0.2);
    border-radius: var(--radius-lg);
    padding: 12px 14px;
    margin-bottom: 10px;
}
.fyre-sidebar__boost-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.fyre-sidebar__boost-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: rgba(255, 47, 134, 0.2);
    display: grid;
    place-items: center;
    color: var(--accent-primary);
    flex-shrink: 0;
}
.fyre-sidebar__boost-title {
    font-size: var(--font-sm);
    font-weight: var(--weight-bold);
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
}
.fyre-sidebar__boost-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin: 0 0 10px;
    line-height: 1.4;
}

/* Referral code row */
.fyre-sidebar__referral-row {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    padding: 5px 8px;
}
.fyre-sidebar__ref-code {
    flex: 1;
    font-size: 12px;
    font-family: monospace;
    font-weight: var(--weight-bold);
    color: var(--accent-primary);
    letter-spacing: 0.05em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fyre-sidebar__ref-copy {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: rgba(255, 47, 134, 0.15);
    border: 1px solid rgba(255, 47, 134, 0.35);
    color: var(--accent-primary);
    transition: background 0.18s;
}
.fyre-sidebar__ref-copy:hover {
    background: rgba(255, 47, 134, 0.28);
}

/* Theme toggle row */
.fyre-sidebar__theme-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px;
    border-radius: var(--radius-md);
    padding: 0 10px;
    margin-bottom: 2px;
    color: rgba(255, 255, 255, 0.70);
}
.fyre-sidebar__theme-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--font-md);
    font-weight: var(--weight-semibold);
}
.fyre-sidebar__moon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.fyre-sidebar__moon svg { fill: #fff; display: block; }
.fyre-sidebar__theme-toggle {
    width: 42px;
    height: 24px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.12);
    position: relative;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    flex-shrink: 0;
}
.fyre-sidebar__theme-toggle span {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    transition: transform 0.2s, background 0.2s;
}
.fyre-sidebar__theme-toggle--active {
    background: rgba(255, 47, 134, 0.5);
    border-color: rgba(255, 47, 134, 0.6);
}
.fyre-sidebar__theme-toggle--active span {
    transform: translateX(18px);
    background: var(--accent-primary);
}

/* Logout link — separated at very bottom, same fp-nav-item look */
.fyre-sidebar__logout {
    color: rgba(255, 255, 255, 0.55);
    margin-top: 2px;
}
.fyre-sidebar__logout:hover {
    background: rgba(255, 80, 80, 0.1);
    color: #ff6b6b;
}
.fyre-sidebar__logout .fyre-sidebar__icon svg {
    fill: rgba(255, 255, 255, 0.55);
}
.fyre-sidebar__logout:hover .fyre-sidebar__icon svg {
    fill: #ff6b6b;
}

/* Focus-visible ring */
.fyre-sidebar__link:focus-visible,
.fyre-sidebar__close:focus-visible,
.fyre-sidebar__ref-copy:focus-visible,
.fyre-sidebar__theme-toggle:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* ── Mobile: full-height from top-0 below topbar ────────────────────── */
@media (max-width: 768px) {
    .fyre-sidebar {
        top: 60px;
        width: min(82vw, 300px);
    }
    .fyre-sidebar-overlay { display: none; }
    .fyre-sidebar-overlay.fyre-sidebar--open { display: block; }
}

/* ── Print / reduce-motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .fyre-sidebar,
    .fyre-sidebar__close,
    .fyre-sidebar__theme-toggle span { transition: none; }
}
@media print {
    .fyre-sidebar,
    .fyre-sidebar-overlay { display: none !important; }
}

/* ══ fp-accsidebar — Right-side account drawer ══════════════════════ */

/* Drawer sits below the fixed topbar, which is 56px on desktop and mobile. */
:root { --fp-accsidebar-top: 56px; }

/* Backdrop */
.fp-accsidebar-backdrop {
    position: fixed;
    top: var(--fp-accsidebar-top);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.3s;
    z-index: 199;
}
.fp-accsidebar-backdrop.fp-accsidebar-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Drawer shell */
.fp-accsidebar {
    position: fixed;
    top: var(--fp-accsidebar-top);
    right: 0;
    bottom: 0;
    width: 340px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 26px;
    background: #0b0c16;
    border-left: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    z-index: 200;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(24px) scale(0.96);
    transform-origin: 100% 0;
    transition: transform 0.34s cubic-bezier(0.25, 1, 0.5, 1),
                opacity   0.34s cubic-bezier(0.25, 1, 0.5, 1),
                visibility 0.34s;
    will-change: transform, opacity;
    font-family: "Poppins", sans-serif;
}
.fp-accsidebar::-webkit-scrollbar { display: none; }
.fp-accsidebar.fp-accsidebar-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0) scale(1);
}

/* ── Header ───────────────────────────────────────────────── */
.fp-accsidebar-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0;
    margin-bottom: 22px;
    border-bottom: none;
}

/* Avatar + text stack */
.fp-accsidebar-profile-mini {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* Avatar photo */
.fp-accsidebar-avatar {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    overflow: hidden;
    display: block;
    background: rgba(255, 255, 255, 0.06);
}
.fp-accsidebar-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fp-accsidebar-idblock { min-width: 0; }

/* Username */
.fp-accsidebar-uname {
    display: block;
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #f8f6f8;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    line-height: 1.2;
}

/* Status row */
.fp-accsidebar-status {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
    color: rgba(248, 246, 248, 0.5);
    font-size: 12.5px;
    font-weight: 400;
}
@keyframes fp-status-pulse {
    0%, 100% { opacity: 1;    box-shadow: 0 0 0 0   rgba(63, 207, 127, 0.55); }
    50%      { opacity: 0.55; box-shadow: 0 0 0 5px rgba(63, 207, 127, 0);    }
}
.fp-accsidebar-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #3fcf7f;
    animation: fp-status-pulse 2s ease infinite;
}

/* Close button */
.fp-accsidebar-close {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    background: transparent;
    border: none;
    color: rgba(248, 246, 248, 0.5);
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
}
.fp-accsidebar-close svg { display: block; }
.fp-accsidebar-close:hover { background: rgba(255, 255, 255, 0.06); color: #f8f6f8; }

/* ── Scrollable body ───────────────────────────────────────── */
.fp-accsidebar-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
    scrollbar-gutter: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
    box-sizing: border-box;
}
.fp-accsidebar-scroll::-webkit-scrollbar { width: 3px; }
.fp-accsidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.fp-accsidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
.fp-accsidebar-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.26); }

/* ── Nav list ─────────────────────────────────────────────── */
.fp-accsidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 0;
    flex: 0 0 auto;
}

/* Nav item — editorial row: no chip, no hover fill, just dimming */
.fp-accsidebar-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    box-sizing: border-box;
    padding: 11px 6px 11px 2px;
    border-radius: 0;
    color: #f8f6f8;
    text-decoration: none;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: opacity 0.18s ease;
}
.fp-accsidebar-item:hover { opacity: 0.7; }
.fp-accsidebar-item.active { color: #e0336b; }
.fp-accsidebar-item.active .fp-accsidebar-icon { color: #e0336b; }

/* Icon — brand pink, single colour, 20px */
.fp-accsidebar-icon {
    position: relative;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
    color: #e0336b;
}
.fp-accsidebar-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* Row label + trailing chevron / toggle */
.fp-accsidebar-label {
    flex: 1 1 0%;
    min-width: 0;
}
.fp-accsidebar-chev {
    flex-shrink: 0;
    margin-left: auto;
    margin-right: 8px;
    color: rgba(248, 246, 248, 0.3);
    font-size: 17px;
    line-height: 1;
}

/* Count badge — pinned to the icon's top-right corner */
.fp-accsidebar-badge {
    position: absolute;
    top: -5px;
    right: -6px;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 1px 4px 0;
    box-sizing: border-box;
    border-radius: 999px;
    border: 2px solid #0b0c16;
    background: #e0336b;
    color: #fff;
    font-family: inherit;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    text-align: center;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.fp-accsidebar-badge:not(:empty) {
    display: flex !important;
}

/* Destructive row (Logout) */
.fp-accsidebar-item--danger,
.fp-accsidebar-item--danger .fp-accsidebar-icon { color: #ff5d73; }

/* Group divider */
.fp-accsidebar-divider {
    flex-shrink: 0;
    height: 1px;
    border: none;
    margin: 10px 0;
    background: rgba(255, 255, 255, 0.08);
}

/* Dark mode toggle pill */
.fp-accsidebar-toggle {
    margin-left: auto;
    margin-right: 0;
    flex-shrink: 0;
    width: 34px;
    height: 20px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.14);
    border: none;
    position: relative;
    display: block;
    pointer-events: none;
    transition: background 0.2s ease;
}
.fp-accsidebar-toggle span {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: left 0.2s ease;
}
.fp-accsidebar-toggle--on {
    background: linear-gradient(135deg, #e0336b, #a3154a);
}
.fp-accsidebar-toggle--on span { left: 16px; }

@keyframes fp-earn-gradient {
    0%   { background-position: 0%   center; }
    100% { background-position: 600% center; }
}

/* "Want to earn more?" */
.fp-accsidebar-earn {
    margin: 18px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.1px;
    flex-shrink: 0;
    position: relative;
    /* wide multi-colour gradient with a travelling shine stop */
    background: linear-gradient(
        90deg,
        #ec3f9b  0%,
        #c84eea 12%,
        #7b6cf6 24%,
        #5db8fe 35%,
        #d4f0ff 43%,
        #5db8fe 51%,
        #7b6cf6 62%,
        #c84eea 74%,
        #e456d6 86%,
        #ec3f9b 100%
    );
    background-size: 600% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    animation: fp-earn-gradient 22s linear infinite;
}
.fp-accsidebar-earn::before {
    content: '\26A1';
    font-size: 16px;
    background: linear-gradient(
        90deg,
        #ec3f9b  0%,
        #c84eea 12%,
        #7b6cf6 24%,
        #5db8fe 35%,
        #d4f0ff 43%,
        #5db8fe 51%,
        #7b6cf6 62%,
        #c84eea 74%,
        #e456d6 86%,
        #ec3f9b 100%
    );
    background-size: 600% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    animation: fp-earn-gradient 22s linear infinite;
    display: inline-block;
}

/* Referral card */
.fp-accsidebar-referral {
    flex-shrink: 0;
    margin: 11px 0 0;
    padding: 14px 15px 15px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 11px;
    background: #12131f;
    box-shadow: none;
}
.fp-accsidebar-ref-label {
    font-weight: 700;
    color: #f8f6f8;
    font-size: 15px;
    text-transform: none;
    letter-spacing: 0;
    margin: 0 0 10px;
}

/* Code + Copy row */
.fp-accsidebar-ref-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    margin-bottom: 10px;
}
.fp-accsidebar-ref-code {
    height: 31px;
    min-width: 69px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 5px;
    background: #0b0c16;
    color: #f8f6f8;
    font-size: 13px;
    font-family: monospace;
    font-weight: 400;
    padding: 0 10px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    flex: 0 1 auto;
}
.fp-accsidebar-ref-copy {
    flex-shrink: 0;
    height: 31px;
    padding: 0 13px;
    background: rgba(255, 255, 255, 0.06);
    border: none;
    border-radius: 8px;
    color: #f8f6f8;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}
.fp-accsidebar-ref-copy:hover { background: rgba(255, 255, 255, 0.11); }

@keyframes fp-share-glimmer {
    0%        { left: -75%; opacity: 1; }
    45%, 100% { left: 130%; opacity: 1; }
}

/* Share button */
.fp-accsidebar-ref-share {
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
    height: 35px;
    border-radius: 8px;
    background: linear-gradient(135deg, #e0336b, #a3154a);
    border: none;
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1px;
    text-align: center;
    cursor: pointer;
    margin-bottom: 11px;
    box-shadow: 0 8px 18px rgba(224, 51, 107, 0.22);
    transition: filter 0.18s, transform 0.18s;
}
.fp-accsidebar-ref-share::after {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 35%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
    transform: skewX(-18deg);
    animation: fp-share-glimmer 3.4s ease-in-out infinite;
    pointer-events: none;
    border-radius: inherit;
}
.fp-accsidebar-ref-share:hover { filter: brightness(0.98); transform: translateY(-1px); }

/* Description */
.fp-accsidebar-ref-desc {
    font-size: 13.5px;
    line-height: 1.34;
    letter-spacing: 0.1px;
    color: rgba(248, 246, 248, 0.5);
    margin: 0;
}
.fp-accsidebar-ref-desc strong {
    color: rgba(248, 246, 248, 0.8);
    font-weight: 700;
}

/* Focus-visible */
.fp-accsidebar-item:focus-visible,
.fp-accsidebar-close:focus-visible,
.fp-accsidebar-ref-copy:focus-visible,
.fp-accsidebar-ref-share:focus-visible {
    outline: 2px solid #e0336b;
    outline-offset: 2px;
}

/* Desktop: keep screenshot-1 row size (16px type, 11px padding, 44px
   avatar). Shave shell + referral gaps so 1080p does not scroll. */
@media (min-width: 769px) and (min-height: 740px) {
    .fp-accsidebar {
        padding: 22px 24px 18px;
    }
    .fp-accsidebar-header {
        margin-bottom: 16px;
    }
    .fp-accsidebar-item {
        padding: 11px 6px 11px 2px;
        font-size: 16px;
    }
    .fp-accsidebar-divider {
        margin: 8px 0;
    }
    .fp-accsidebar-earn {
        margin-top: 12px;
    }
    .fp-accsidebar-referral {
        margin-top: 8px;
        padding: 12px 14px 12px;
    }
    .fp-accsidebar-ref-label {
        margin-bottom: 8px;
    }
    .fp-accsidebar-ref-row {
        margin-bottom: 8px;
    }
    .fp-accsidebar-ref-share {
        margin-bottom: 8px;
    }
    .fp-accsidebar-ref-desc {
        font-size: 13px;
        line-height: 1.3;
    }
}

/* Only hide the bar when the drawer is tall enough that content fits. */
@media (min-width: 769px) and (min-height: 920px) {
    .fp-accsidebar-scroll {
        overflow-y: auto;
        scrollbar-width: none;
    }
    .fp-accsidebar-scroll::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
}

@media (max-height: 739px), (max-width: 768px) {
    .fp-accsidebar-scroll {
        overflow-y: auto;
    }
}

@media (max-width: 768px) {
    .fp-accsidebar-scroll {
        padding: 0;
    }
    .fp-accsidebar-item {
        padding: 11px 6px 11px 2px;
    }
    .fp-accsidebar-chev {
        margin-right: 8px;
    }
}

/* Mobile */
@media (max-width: 420px) {
    .fp-accsidebar { width: 100%; max-width: 340px; padding: 22px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .fp-accsidebar,
    .fp-accsidebar-backdrop { transition: opacity 0.01ms linear, visibility 0.01ms linear; }
    .fp-accsidebar { transform: none; }
    .fp-accsidebar-status-dot { animation: none; }
}

/* Print */
@media print {
    .fp-accsidebar, .fp-accsidebar-backdrop { display: none !important; }
}



/* ══════════════════════════════════════════════════════════════════════════
   LIGHT MODE — applied via body.fp-light (toggled from the right sidebar)
   CSS variable overrides live in fyreglobalstyle.css; profile overrides below.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Left nav sidebar ── */
body.fp-light .fp-sidebar {
    background: #ffffff;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
}

/* ── Right account sidebar (fyre-sidebar) ── */
body.fp-light .fyre-sidebar {
    background: #ffffff;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
}

/* ── fyre-sidebar light mode: links, icons, dividers, referral ── */
body.fp-light .fyre-sidebar__link {
    color: #0a3049;
}
body.fp-light .fyre-sidebar__link:hover {
    background: rgba(10, 48, 73, 0.06);
    color: #0a3049;
}
body.fp-light .fyre-sidebar__icon,
body.fp-light .fyre-sidebar__icon svg {
    color: #0a3049;
    fill: #0a3049;
}
body.fp-light .fyre-sidebar__link--active .fyre-sidebar__icon,
body.fp-light .fyre-sidebar__link--active .fyre-sidebar__icon svg {
    color: var(--accent-primary);
    fill: var(--accent-primary);
}
body.fp-light .fyre-sidebar__theme-row {
    color: #0a3049;
}
body.fp-light .fyre-sidebar__moon svg { fill: #0a3049; }
body.fp-light .fyre-sidebar__logout {
    color: #0a3049;
}
body.fp-light .fyre-sidebar__logout:hover { color: #cc3333; }
body.fp-light .fyre-sidebar__logout .fyre-sidebar__icon svg { fill: #0a3049; }
body.fp-light .fyre-sidebar__logout:hover .fyre-sidebar__icon svg { fill: #cc3333; }
body.fp-light .fyre-sidebar__theme-label { color: #0a3049; }

/* ── fyre-sidebar light mode: bottom divider + referral ── */
body.fp-light .fyre-sidebar__bottom {
    border-top: 1px solid rgba(0, 0, 0, 0.10);
}
body.fp-light .fyre-sidebar__section-label {
    color: #3a6b82;
}
body.fp-light .fyre-sidebar__boost-card {
    background: rgba(224, 84, 141, 0.06);
    border: 1px solid rgba(224, 84, 141, 0.20);
}
body.fp-light .fyre-sidebar__boost-title { color: #0a3049; }
body.fp-light .fyre-sidebar__boost-sub   { color: #3a6b82; }
body.fp-light .fyre-sidebar__referral-row {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.12);
}
body.fp-light .fyre-sidebar__ref-code { color: var(--accent-primary); }

/* ── Card-dark utility ── */
body.fp-light .card-dark {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(0, 0, 0, 0.08);
}

/* ── Topbar ── */
body.fp-light .fp-topbar {
    background: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
/* ── All icons dark in light mode ── */
/* Left nav sidebar icons */
    body.fp-light .fp-nav-icon {
        color: #0a3049;
    }
        body.fp-light .fp-nav-icon svg {
            fill: #0a3049;
        }
/* Collapsed state — sidebar icons are dark blue */
    body.fp-light:not(.fp-sidebar-open) .fp-nav-icon svg {
        fill: #0a3049;
    }
body.fp-light .fp-nav-item.active .fp-nav-icon svg { fill: #e0548d; filter: none; }
body.fp-light:not(.fp-sidebar-open) .fp-nav-item.active .fp-nav-icon svg { fill: #0a3049; }
body.fp-light .fp-nav-label { color: #0a3049; }
body.fp-light .fp-nav-item { color: #0a3049; }
body.fp-light .fp-nav-item:hover { background: rgba(224, 84, 141, 0.06); color: #e0548d; }
body.fp-light .fp-nav-item.active {
    background: linear-gradient(90deg, rgba(224,84,141,0.12) 0%, rgba(200,78,234,0.07) 100%);
    color: #0a3049;
}
body.fp-light .fp-nav-item.active::before {
    background: linear-gradient(180deg, #e0548d, #c84eea);
}

/* Nav toggle (expand/collapse) button */
body.fp-light .fp-sidebar-toggle,
body.fp-light:not(.fp-sidebar-open) .fp-sidebar-toggle {
    color: #e0548d;
    background: rgba(224, 84, 141, 0.08);
    border-color: rgba(224, 84, 141, 0.30);
    box-shadow: none;
}
body.fp-light .fp-sidebar-toggle svg,
body.fp-light:not(.fp-sidebar-open) .fp-sidebar-toggle svg { fill: #e0548d; }

/* Topbar right-side nav icons */
body.fp-light .fp-topbar-nav-icon {
    color: #0a3049;
}
body.fp-light .fp-topbar-nav-icon svg {
    stroke: #0a3049;
}
body.fp-light .fp-topbar-nav-icon:hover {
    color: var(--accent-primary);
}
body.fp-light .fp-topbar-nav-icon:hover svg {
    stroke: var(--accent-primary);
}
/* Profile icon always pink in light mode */
body.fp-light .fp-topbar-profile svg {
    stroke: var(--accent-primary);
}
body.fp-light .fp-topbar-profile:hover svg {
    stroke: var(--fyre-pink-600);
}

/* Feed header action buttons (search / filter icons) */
body.fp-light .fp-feed-header-btn {
    color: var(--text-secondary);
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.10);
}
body.fp-light .fp-feed-header-btn svg { stroke: var(--text-secondary); fill: none; }
body.fp-light .fp-feed-header-btn:hover { color: var(--accent-primary); }
body.fp-light .fp-feed-header-btn:hover svg { stroke: var(--accent-primary); }

/* Action buttons on profile (copy, report, etc.) — not the pink Follow CTA */
body.fp-light .fp-action-btn:not(.follow-btn) svg { fill: #0a3049; }
body.fp-light .fp-action-btn:not(.follow-btn):hover svg { fill: var(--accent-primary); }

/* Right account sidebar icons inherit currentColor from .fp-accsidebar-icon
   (mixed fill/stroke glyphs) — see the fp-accsidebar light overrides below. */

/* Content tab icons */
body.fp-light .fp-content-tab svg { fill: var(--text-muted); }
body.fp-light .fp-content-tab.fp-tab-active svg { fill: #e0548d; }

/* ── Nav items ── */
body.fp-light .fp-nav-item {
    color: var(--text-secondary);
}
body.fp-light .fp-nav-item:hover,
body.fp-light .fp-nav-item.active {
    background: rgba(255, 47, 134, 0.08);
    color: var(--accent-primary);
}
body.fp-light .fp-nav-section-label { color: var(--text-muted); }

/* ── Feed card ── */
body.fp-light .fp-feed-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.06);
}

/* ── Content tabs ── */
body.fp-light .fp-content-tabs {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.fp-light .fp-content-tab {
    color: #245870;
}
body.fp-light .fp-content-tab svg { fill: #245870; }
body.fp-light .fp-content-tab span { color: inherit; }
body.fp-light .fp-content-tab.fp-tab-active {
    color: #0a3049;
    border-bottom-color: #e0548d;
}
body.fp-light .fp-content-tab.fp-tab-active span {
    color: #0a3049;
}
body.fp-light .fp-content-tab.fp-tab-active svg { fill: #e0548d; }

/* ── Post cards ── */
body.fp-light .fp-post-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}
body.fp-light .fp-post-actions-bar {
    border-top-color: rgba(0, 0, 0, 0.07);
}
body.fp-light .fp-post-body { color: var(--text-primary); }
body.fp-light .fp-post-meta { color: var(--text-muted); }

/* ── Right column sidebar cards ── */
body.fp-light .fp-right-column,
body.fp-light .fp-right-column .fp-esc-section,
body.fp-light .fp-right-column > * {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--text-primary);
}

/* ── Subscribe banner — keep dark gradient same as dark mode ── */
body.fp-light .fp-sub-wrap {
    background: transparent;
}
body.fp-light .fp-sub-cta-banner,
body.fp-light .fp-main-subscribe-btn {
    background: linear-gradient(130deg, #b8005c 0%, #e0006f 40%, #ff2f86 100%) !important;
    color: #fff !important;
    border-color: transparent !important;
}

/* ── Profile banner gradient overlay ── */
body.fp-light .fp-banner-gradient {
    background: linear-gradient(to top, rgba(255, 255, 255, 0.80) 0%, transparent 100%);
}

/* ── Stat labels / values ── */
body.fp-light .fp-stat-value { color: #0a3049; }
body.fp-light .fp-stat-label { color: var(--text-muted); }

/* ── Headers & subheaders ── */
/* Display name sits over the banner — always white in BOTH themes.
   flat-surfaces.css paints body.fp-light h1 navy with !important; the
   overlay selector must beat that so the name stays readable on the photo. */
body.ff-dark .fp-display-name,
.fp-profile-page .fp-display-name,
.fp-mobile-shell .fp-display-name      { color: #ffffff; }
.fp-identity .fp-display-name,
.fp-identity .fp-display-name-text,
body.fp-light .fp-identity .fp-display-name,
body.fp-light .fp-identity .fp-display-name-text {
    color: #ffffff !important;
}
body.fp-light .fp-username             { color: rgba(255,255,255,0.80); }
body.fp-light .fp-location             { color: rgba(255, 255, 255, 0.90); }
body.fp-light .fp-feed-title           { color: #0a3049; }
body.fp-light .fp-card-title           { color: #0a3049; }
body.fp-light .fp-card-title svg       { fill: #0a3049; }
body.fp-light .fp-about-card-title     { color: #0a3049; }
body.fp-light .fp-acc-header           { color: #0a3049; }
body.fp-light .fp-acc-header-inner     { color: #0a3049; }
body.fp-light .fp-acc-header-inner svg { fill: none; stroke: #0a3049; }
body.fp-light .fp-acc-about .fp-acc-header,
body.fp-light .fp-acc-about .fp-acc-header:hover {
    background: #ffffff;
}
body.fp-light .fp-empty-state-heading  { color: #0a3049; }
body.fp-light .fp-mobile-panel-title   { color: #0a3049; }
body.fp-light .fyre-sidebar__creator-meta h2 { color: #0a3049; }
body.fp-light h1, body.fp-light h2,
body.fp-light h3, body.fp-light h4,
body.fp-light h5, body.fp-light h6    { color: #0a3049; }

/* ── Buttons ── */
body.fp-light .follow-btn,
body.fp-light .fp-action-btn.follow-btn,
body.fp-light .fp-main-subscribe-btn {
    background: linear-gradient(135deg, var(--fyre-pink-500), var(--fyre-pink-600)) !important;
    border-color: transparent !important;
    color: #fff !important;
}
body.fp-light .follow-btn:hover,
body.fp-light .fp-action-btn.follow-btn:hover,
body.fp-light .fp-main-subscribe-btn:hover {
    background: linear-gradient(135deg, #c9457c, #b33a6b) !important;
}
/* Follow button - white text */
.fp-action-btn.follow-btn {
    color: #ffffff;
}

body.fp-light .fp-action-btn {
    background: transparent;
    color: #0a3049;
    border-color: rgba(10, 48, 73, 0.25);
}
body.fp-light .fp-action-btn.follow-btn {
    color: #ffffff !important;
    border-color: transparent !important;
}
body.fp-light .fp-action-btn:hover {
    background: rgba(10, 48, 73, 0.06);
    border-color: rgba(10, 48, 73, 0.40);
}
body.fp-light .fp-action-btn.follow-btn:hover {
    border-color: transparent !important;
}

/* Light mode: Action icons */
body.fp-light .fp-icon-action {
    background: rgba(10, 48, 73, 0.08);
    border-color: rgba(10, 48, 73, 0.15);
    color: #0a3049;
}
body.fp-light .fp-icon-action:hover {
    background: rgba(10, 48, 73, 0.12);
    border-color: rgba(10, 48, 73, 0.25);
    color: var(--accent-primary);
}

body.fp-light .fp-action-btn:not(.follow-btn) svg {
    fill: #0a3049;
    stroke: #0a3049;
}
body.fp-light .fp-action-btn:not(.follow-btn):hover svg {
    fill: var(--accent-primary);
    stroke: var(--accent-primary);
}
/* Follow/Following sits on the pink fill — icon must match the white label */
body.fp-light .fp-action-btn.follow-btn svg,
body.fp-light .fp-action-btn.follow-btn:hover svg {
    fill: #ffffff !important;
    stroke: none !important;
    color: #ffffff;
}
body.fp-light .fp-contact-textarea {
    color: #0a3049;
    background: #ffffff;
    border-color: rgba(10, 48, 73, 0.18);
}
body.fp-light .fp-contact-textarea::placeholder { color: #3a6b82 !important; opacity: 1; }

/* ── Feed toolbar / filters ── */
body.fp-light .fp-feed-toolbar {
    background: #f7f8fa;
    border-bottom-color: rgba(0, 0, 0, 0.07);
}
body.fp-light .fp-post-filter,
body.fp-light .fp-post-order-filter {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-secondary);
    border-color: rgba(0, 0, 0, 0.10);
}
body.fp-light .fp-post-filter:hover,
body.fp-light .fp-post-order-filter:hover {
    background: rgba(255, 47, 134, 0.08);
    color: var(--accent-primary);
}

/* ── Search input ── */
body.fp-light .fp-search-input,
body.fp-light #fp-search-posts-input {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.10);
    color: var(--text-primary);
}
body.fp-light .fp-search-input::placeholder,
body.fp-light #fp-search-posts-input::placeholder { color: var(--text-muted); }

/* Beat theme.css `body.ff-dark h2 { color: #258fd3 }` on modal headings */
body.ff-dark .fp-modal-title {
    color: #fff !important;
}

/* ── Modal overlays ── */
body.fp-light .fp-modal-overlay { background: rgba(0, 0, 0, 0.45); }
body.fp-light .fp-modal {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.10);
    color: var(--text-primary);
}
body.fp-light .fp-modal-title  { color: var(--text-primary); }
body.fp-light .fp-modal-note   { color: var(--text-muted); }
body.fp-light .fp-modal-close  { color: var(--text-muted); }
body.fp-light .fp-modal-textarea {
    background: #ffffff;
    border-color: rgba(10, 48, 73, 0.18);
    color: var(--text-primary);
}
body.fp-light .fp-modal-textarea:focus {
    border-color: rgba(10, 48, 73, 0.40);
}
body.fp-light .fp-modal-textarea::placeholder {
    color: #3a6b82 !important;
    opacity: 1;
}
body.fp-light .fp-modal-action-btn {
    background: linear-gradient(135deg, var(--fyre-pink-500), var(--fyre-pink-600)) !important;
    color: #fff !important;
}

/* ── Overlays / unlock screens ── */
body.fp-light .overlay-posts,
body.fp-light .overlay-media-posts {
    background: rgba(255, 255, 255, 0.90);
}

/* ── Camera / video overlay buttons ── */
body.fp-light .camera-btn,
body.fp-light .video-btn {
    background: rgba(0, 0, 0, 0.45);
}

/* ── Mobile bottom nav ── */
body.fp-light .fp-mobile-bottom-nav {
    background: rgba(255, 255, 255, 0.97);
    border-top-color: rgba(0, 0, 0, 0.08);
}
body.fp-light .fp-bottom-nav-icon { color: var(--text-muted); }
body.fp-light .fp-bottom-nav-icon.active { color: var(--accent-primary); }

/* ══ fp-accsidebar — light mode overrides ══════════════════════════════ */

/* Shell */
body.fp-light .fp-accsidebar {
    background: #ffffff;
    border-left-color: rgba(10, 22, 40, 0.08);
    box-shadow: -24px 0 60px rgba(10, 22, 40, 0.10);
}
body.fp-light .fp-accsidebar-backdrop { background: rgba(10, 22, 40, 0.32); }

/* Header */
body.fp-light .fp-accsidebar-avatar  { background: rgba(10, 22, 40, 0.06); }
body.fp-light .fp-accsidebar-uname   { color: #0a3049; }
body.fp-light .fp-accsidebar-status  { color: #3a6b82; }
body.fp-light .fp-accsidebar-close   { color: #245870; background: transparent; }
body.fp-light .fp-accsidebar-close:hover { background: rgba(10, 48, 73, 0.06); color: #0a3049; }

/* Scrollbar */
body.fp-light .fp-accsidebar-scroll {
    scrollbar-color: #e2e5ea transparent;
}
body.fp-light .fp-accsidebar-scroll::-webkit-scrollbar-thumb { background: #e2e5ea; }
body.fp-light .fp-accsidebar-scroll::-webkit-scrollbar-thumb:hover { background: #c8ccd4; }

/* Nav items — same dim-on-hover treatment, dark ink */
body.fp-light .fp-accsidebar-item        { color: #0a3049; }
body.fp-light .fp-accsidebar-item:hover  { opacity: 0.7; }
body.fp-light .fp-accsidebar-item.active { color: #e0336b; }
body.fp-light .fp-accsidebar-chev        { color: rgba(5, 36, 58, 0.3); }
body.fp-light .fp-accsidebar-divider     { background: rgba(10, 22, 40, 0.10); }
body.fp-light .fp-accsidebar-badge       { border-color: #ffffff; }

/* Icons — pink in both themes, no override needed, but kept explicit */
body.fp-light .fp-accsidebar-icon { color: #e0336b; }
body.fp-light .fp-accsidebar-item--danger,
body.fp-light .fp-accsidebar-item--danger .fp-accsidebar-icon { color: #e2344f; }

/* Mode label */
body.fp-light .fp-accsidebar-mode-label { color: #0a3049; }

/* Toggle pill — light grey when off */
body.fp-light .fp-accsidebar-toggle { background: #e2e6ee; }

/* Referral card */
body.fp-light .fp-accsidebar-referral {
    background: #ffffff;
    border: 1px solid #e8ebf1;
    box-shadow: 0 3px 12px rgba(10, 22, 40, 0.035);
}
body.fp-light .fp-accsidebar-ref-label { color: #0a3049; }
body.fp-light .fp-accsidebar-ref-code {
    background: #fafbfc;
    border-color: #edf0f5;
    color: #0a3049;
}
body.fp-light .fp-accsidebar-ref-copy           { background: #f4f6fa; color: #0a3049; }
body.fp-light .fp-accsidebar-ref-copy:hover     { background: #edf0f7; color: #0a3049; }
body.fp-light .fp-accsidebar-ref-desc           { color: #3a6b82; }
body.fp-light .fp-accsidebar-ref-desc strong    { color: #0a3049; }

/* ── Lightbox ── */
body.fp-light #fp-lightbox { background: rgba(255, 255, 255, 0.96); }

/* ── JS tooltip ── */
body.fp-light #fp-tooltip {
    background: rgba(15, 17, 23, 0.92);
    color: #ffffff;
}

/* ── Scrollbar — global page (body) ── */
/* Dark mode */
html { scrollbar-width: thin; scrollbar-color: rgba(224, 84, 141, 0.4) rgba(255,255,255,0.04); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.03); }
::-webkit-scrollbar-thumb { background: rgba(224, 84, 141, 0.40); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(224, 84, 141, 0.65); }
/* Light mode */
body.fp-light { scrollbar-width: thin; scrollbar-color: rgba(10, 48, 73, 0.25) rgba(0,0,0,0.05); }
body.fp-light ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.04); }
body.fp-light ::-webkit-scrollbar-thumb { background: rgba(10, 48, 73, 0.25); border-radius: 3px; }
body.fp-light ::-webkit-scrollbar-thumb:hover { background: rgba(10, 48, 73, 0.45); }

/* ════════════════════════════════════════════════════════════
   FANCYBOX POST VIEWER OVERLAY (Fansly-style)
   ════════════════════════════════════════════════════════════ */

/* Darker fancybox background */
.fancybox-bg { background: #000 !important; }
.fancybox-is-open .fancybox-bg { opacity: 0.97 !important; }

.fp-viewer-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 18px 18px 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.22) 65%, transparent 100%);
    pointer-events: none;
    gap: 12px;
    text-align: left;
}

/* Left — creator identity + description */
.fp-viewer-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
    pointer-events: none;
}
.fp-viewer-identity {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: nowrap;
    overflow: hidden;
}
.fp-viewer-dispname {
    font-size: 0.88rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
    flex-shrink: 1;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.fp-viewer-verified {
    display: inline-flex;
    align-items: center;
    color: var(--accent-primary, #ff2f86);
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
.fp-viewer-username {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.72);
    white-space: nowrap;
    flex-shrink: 0;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.fp-viewer-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.85);
    line-height: 1.35;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    white-space: normal;
    word-break: break-word;
    margin-top: 2px;
    max-width: 300px;
}

/* Right — action buttons */
.fp-viewer-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    pointer-events: all;
}
.fp-viewer-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: none;
    border: none;
    cursor: pointer;
    color: #fff;
    padding: 0;
    transition: transform 0.15s ease, color 0.15s ease;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
}
.fp-viewer-btn:hover { transform: scale(1.15); }
.fp-viewer-btn svg { display: block; }
.fp-viewer-like-count {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.85);
    line-height: 1;
}
.fp-viewer-heart.fp-viewer-liked { color: #ff2f86; }
.fp-viewer-heart.fp-viewer-liked svg { fill: currentColor; }
.fp-viewer-fav.fp-viewer-faved  { color: #ffcc00; }
.fp-viewer-fav.fp-viewer-faved svg { fill: currentColor; }

/* Ensure fancybox slide is positioned so overlay can anchor to bottom */
.fancybox-slide { position: relative; }

/* Lightbox prev/next: no button chrome or hairline through the chevrons */
.fancybox-navigation .fancybox-button {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}
.fancybox-navigation .fancybox-button div {
    background: rgba(20, 22, 28, 0.72);
    border: none;
    border-radius: 50%;
    box-shadow: none;
}
.fancybox-button svg {
    overflow: hidden;
}
.fancybox-button svg path {
    stroke: none !important;
    fill: currentColor;
}

/* ============================================================
   MOBILE SHELL — fp-mobile-only
   Matches reference design: dark cinematic creator profile.
   All fp-mobile-* class names retained for JS compatibility.
   Only visible on screens ≤ 768px via .fp-mobile-only rule.
   ============================================================ */

/* ── Shell container ───────────────────────────────────────── */
.fp-mobile-shell {
    display: none;
    flex-direction: column;
    min-height: 100vh;
    background: var(--ff-bg, #0d111a);
    overflow-x: clip;
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
}
.fp-mobile-only { display: flex; }

*, .fp-mobile-shell * { box-sizing: border-box; }

/* ── Mobile Top Navigation Bar (Fixed) ─────────────────────── */
.fp-mobile-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: #0a0d13;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 16px;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    z-index: 100;
    box-sizing: border-box;
}

.fp-mobile-topbar-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.fp-mobile-topbar-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-mobile-topbar-logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-mobile-topbar-logo {
    height: 32px;
    width: auto;
    display: block;
}

.fp-mobile-topbar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.fp-mobile-topbar .fp-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.18s;
}

.fp-mobile-topbar .fp-icon-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

body.fp-light .fp-mobile-topbar {
    background: #ffffff;
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

body.fp-light .fp-mobile-topbar .fp-icon-btn {
    background: rgba(0, 0, 0, 0.06);
    color: #0a3049;
}

body.fp-light .fp-mobile-topbar .fp-icon-btn:hover {
    background: rgba(0, 0, 0, 0.12);
}

body.fp-light .fp-mobile-topbar-logo {
    content: url('/assets/images/FindFyreLogo-Pink.png');
    height: 26px;
}

/* ── Mobile shell padding to account for fixed navbar ────── */
.fp-mobile-shell {
    margin-top: 56px;
}

/* ── Hero / Banner ─────────────────────────────────────────── */
.fp-mobile-banner-wrap {
    position: relative;
    width: 100%;
    height: 280px;
    background: #0d1017;
    overflow: hidden;
    flex-shrink: 0;
}

.fp-mobile-banner-wrap .fp-banner-carousel {
    width: 100%;
    height: 100%;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.fp-mobile-banner-wrap .fp-banner-carousel::-webkit-scrollbar { display: none; }

.fp-mobile-banner-wrap .fp-banner-carousel .fp-carousel-slide,
.fp-mobile-banner-wrap .fp-banner-carousel > img,
.fp-mobile-banner-wrap .fp-banner-carousel .fp-banner-image,
.fp-mobile-banner-wrap .fp-banner-carousel a {
    width: 33.333%;
    height: 100%;
    flex-shrink: 0;
    scroll-snap-align: start;
}
.fp-mobile-banner-wrap .fp-banner-carousel .fp-banner-image {
    object-fit: cover;
    object-position: center top;
    display: block;
}
.fp-mobile-banner-wrap .fp-banner-carousel a {
    display: block;
    overflow: hidden;
}
.fp-mobile-banner-wrap .fp-banner-carousel a img.fp-banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* Dark gradient top + bottom so buttons and info stay readable */
.fp-mobile-banner-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, transparent 35%),
        linear-gradient(to top,    rgba(5,7,11,0.85) 0%, transparent 50%);
    z-index: 2;
    pointer-events: none;
}

/* ── Topbar overlaid on hero ──────────────────────────────── */
.fp-topbar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 12px;
}

/* Mobile nav-style topbar (3-column: left / center logo / right) */
.fp-topbar-overlay.fp-mobile-topbar-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px 10px;
}
.fp-mobile-topbar-left  { display: flex; align-items: center; justify-content: flex-start; }
.fp-mobile-topbar-center { display: flex; align-items: center; justify-content: center; }
.fp-mobile-topbar-right { display: flex; align-items: center; justify-content: flex-end; }
.fp-mobile-topbar-logo  { height: 32px; width: auto; display: block; }
body.fp-light .fp-mobile-topbar-logo { content: url('/assets/images/FindFyreLogo-Pink.png'); height: 26px; }

.fp-mobile-topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Glass icon buttons (back, bell, share, more) */
.fp-icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(10, 12, 20, 0.65);
    border: 1px solid rgba(255,255,255,0.10);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    position: relative;
    transition: background 0.18s;
    -webkit-tap-highlight-color: transparent;
}
.fp-icon-btn:hover { background: rgba(20,24,36,0.85); }
.fp-icon-btn svg { display: block; fill: currentColor; }

/* Notification badge */
.fp-icon-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #ec3f8f;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    padding: 0 3px;
    border: 1.5px solid var(--ff-bg, #0d111a);
}

/* ── Side carousel chevrons ───────────────────────────────── */
.fp-carousel-arrow {
    position: absolute;
    top: 140px;           /* vertically centred on the 280px image area */
    transform: translateY(-50%);
    z-index: 11;
    width: 32px;
    height: 48px;
    border-radius: 6px;
    background: none;
    border: none;
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: color 0.18s;
    -webkit-tap-highlight-color: transparent;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.85));
}
.fp-carousel-arrow:hover { color: #e0548d; }
.fp-banner-arrow-prev { left: 8px; }
.fp-banner-arrow-next { right: 8px; }
.fp-carousel-arrow svg { display: block; }

/* ── Carousel overlay icons (copy + report) ─────────────────── */
.fp-carousel-overlay-icons {
    position: absolute;
    bottom: 14px;
    right: 12px;
    z-index: 12;
    display: flex;
    gap: 10px;
    align-items: center;
}

.fp-carousel-icon-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #fff;
    -webkit-tap-highlight-color: transparent;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.80));
    transition: color 0.18s, filter 0.18s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.fp-carousel-icon-btn:hover {
    color: #e0548d;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.95));
}

.fp-carousel-icon-btn svg { display: block; fill: currentColor; }

/* ── Carousel progress dots ───────────────────────────────── */
.fp-mobile-banner-dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 5px;
    align-items: center;
}

/* Image counter (bottom-right, e.g. "2 / 5") */
.fp-mobile-img-counter {
    position: absolute;
    bottom: 14px;
    right: 14px;
    z-index: 10;
    background: rgba(0,0,0,0.50);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.15);
    letter-spacing: 0.04em;
    display: none;
}
.fp-mobile-banner-dots .fp-dot {
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,0.30);
    transition: width 0.25s, background 0.25s;
    width: 22px;
}
.fp-mobile-banner-dots .fp-dot.fp-dot-active {
    background: #ec3f8f;
    width: 28px;
}

/* ── Profile info card (overlaps bottom of hero) ──────────── */
.fp-mobile-profile-card {
    position: relative;
    z-index: 10;
    margin-top: -40px;
    background: #0d1017;
    border-radius: 24px 24px 0 0;
    padding: 20px 16px 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
    min-width: 0;
    overflow: visible;
}

/* ── Avatar + identity row ────────────────────────────────── */
.fp-mobile-avatar-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}

.fp-mobile-avatar-wrap {
    position: relative;
    width: 155px;
    height: 155px;
    flex-shrink: 0;
    border-radius: 50%;
    border: none;
    background: linear-gradient(145deg, #7c3aed, #e0336b, #f472b6);
    padding: 4px;
    margin-top: -78px;
    box-shadow: 0 0 30px rgba(224, 51, 107, 0.35), 0 8px 24px rgba(0,0,0,0.5);
    z-index: 15;
    animation: fpPulseRing 2.8s ease-out infinite;
}

.fp-mobile-avatar-wrap .fp-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    display: block;
    border: none;
    box-shadow: none;
    outline: none;
    background-color: #12101e;
}

.fp-mobile-identity {
    flex: 1;
    min-width: 0;
    padding-top: 0;
    margin-top: -6px;
}

.fp-mobile-identity .fp-display-name {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 4px;
    line-height: 1.1;
}

.fp-mobile-identity .fp-username-handle {
    display: block;
    font-size: 14px;
    color: #8892a0;
    margin-bottom: 0;
}

.fp-mobile-identity .fp-username-row {
    margin-bottom: 6px;
}

.fp-mobile-identity .fp-location {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: #b0bac8;
}

.fp-mobile-identity .fp-location svg {
    fill: #ec3f8f;
    flex-shrink: 0;
}

/* ── Interest / tag chips ─────────────────────────────────── */
.fp-mobile-interest-chips {
    display: none;
    margin-bottom: 16px;
}

.fp-interest-chips-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fp-interest-chip {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    color: #d0d8e4;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Touring badges ───────────────────────────────────────── */
.fp-mobile-touring-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.fp-touring-badge {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(236,63,143,0.12);
    border: 1px solid rgba(236,63,143,0.30);
    color: #ec3f8f;
    font-size: 12px;
    font-weight: 700;
}

/* ── Stats row (hidden visually, kept for JS data) ────────── */
.fp-mobile-stats-row { display: none !important; }

/* ── Action buttons: Follow + Message ────────────────────── */
.fp-mobile-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    margin-top: 14px;
    margin-bottom: 12px;
    width: 100%;
}

/* Beat global .follow-btn (style.css): auto margins shrink the grid item */
.fp-mobile-actions > .fp-action-btn,
.fp-mobile-actions > .fp-action-btn.follow-btn,
.fp-mobile-actions > a.fp-action-btn {
    width: 100%;
    min-width: 0;
    margin: 0;
    height: 48px;
    padding: 0 12px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.02em;
    border-radius: 10px;
}

.fp-mobile-actions .fp-msg-btn svg {
    fill: none;
    stroke: currentColor;
}

.fp-mobile-actions .fp-action-btn.follow-btn {
    box-shadow: 0 2px 10px rgba(236, 63, 143, 0.28);
}

/* Subscribed button takes full row */
.fp-mobile-actions .fp-subscribed-state {
    grid-column: 1 / -1;
}

/* Action icons (Copy + Report) — small icon buttons */
.fp-mobile-action-icons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 0 4px;
}

.fp-icon-action {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-secondary);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
    -webkit-tap-highlight-color: transparent;
}

.fp-icon-action:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.20);
    color: var(--accent-primary);
}

.fp-icon-action svg {
    fill: currentColor;
    width: 16px;
    height: 16px;
    display: block;
}

/* ── Profile card copy/report icon row ────────────────────── */
.fp-profile-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.fp-profile-card-icon-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    color: #c0c8d4;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: color 0.18s, background 0.18s;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
}
.fp-profile-card-icon-btn:hover { color: #fff; background: rgba(255,255,255,0.12); }
.fp-profile-card-icon-btn svg { display: block; stroke: currentColor; fill: none; }

body.fp-light .fp-profile-card-icon-btn {
    background: rgba(10,48,73,0.07);
    border-color: rgba(10,48,73,0.18);
    color: #0a3049;
}
body.fp-light .fp-profile-card-icon-btn:hover {
    background: rgba(10,48,73,0.13);
    color: #0a3049;
}

.fp-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.18s, transform 0.12s;
    border: none;
    -webkit-tap-highlight-color: transparent;
}
.fp-action-btn:active { transform: scale(0.97); }
.fp-action-btn svg { fill: currentColor; flex-shrink: 0; }

/* Follow — pink filled gradient */
.fp-follow-filled,
.fp-action-btn.follow-btn {
    background: linear-gradient(135deg, #ec3f8f, #ff2f8f);
    color: #fff;
    box-shadow: 0 4px 18px rgba(236,63,143,0.35);
    border: none;
}
.fp-action-btn.follow-btn svg,
.fp-action-btn.follow-btn svg path {
    fill: #fff !important;
    stroke: none !important;
    color: #fff;
}

/* Message — dark with border */
.fp-msg-outline,
.fp-action-btn.fp-msg-btn {
    background: transparent;
    color: #e0e8f0;
    border: 1.5px solid rgba(255,255,255,0.20) !important;
}

/* Subscribe banner */
.fp-sub-wrap { margin-top: 12px; }

.fp-sub-cta-banner {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(236,63,143,0.28), rgba(18,12,16,0.96));
    border: 1.5px solid rgba(236,63,143,0.55);
    border-radius: 14px;
    cursor: pointer;
    color: #fff;
    box-shadow: 0 8px 28px rgba(236,63,143,0.22);
    transition: border-color 0.18s, box-shadow 0.18s;
}
.fp-sub-cta-banner:hover {
    border-color: rgba(255,47,134,0.85);
    box-shadow: 0 10px 34px rgba(236,63,143,0.32);
}
.fp-sub-banner-icon,
.fp-sub-banner-arrow {
    color: #fff;
    flex-shrink: 0;
}
.fp-sub-banner-icon svg,
.fp-sub-banner-arrow svg {
    fill: #fff;
    color: #fff;
}
.fp-sub-banner-text { flex: 1; text-align: left; }
.fp-sub-banner-label {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
}
.fp-sub-banner-sub {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
}
.fp-sub-banner-sub strong { color: #fff; font-weight: 700; }

/* Light mode: filled pink CTA — keep every inner element white */
body.fp-light .fp-sub-cta-banner .fp-sub-banner-icon,
body.fp-light .fp-sub-cta-banner .fp-sub-banner-arrow {
    color: #fff;
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.45);
}
body.fp-light .fp-sub-cta-banner .fp-sub-banner-icon svg,
body.fp-light .fp-sub-cta-banner .fp-sub-banner-arrow svg {
    fill: #fff;
    color: #fff;
}
body.fp-light .fp-sub-cta-banner .fp-sub-banner-label,
body.fp-light .fp-sub-cta-banner .fp-sub-banner-sub strong {
    color: #fff;
}
body.fp-light .fp-sub-cta-banner .fp-sub-banner-sub {
    color: #ffffff;
}

/* ── About card: tabs + content panels ───────────────────── */
.fp-mobile-about-card {
    margin: 14px 16px 0;
    background: #0d1017;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 18px;
    overflow: visible;
}

/* Tab row — stays pinned while the About text scrolls */
.fp-mobile-section-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    position: sticky;
    top: 0;
    z-index: 5;
    background: #0d1017;
    border-radius: 18px 18px 0 0;
}

.fp-section-tab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    font-size: 14px;
    font-weight: 700;
    color: #6b7480;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    transition: color 0.18s;
    -webkit-tap-highlight-color: transparent;
}

.fp-section-tab-btn.fp-section-active {
    color: #ec3f8f;
}

.fp-section-tab-btn.fp-section-active::after {
    content: '';
    position: absolute;
    left: 20%;
    right: 20%;
    bottom: 0;
    height: 2.5px;
    border-radius: 999px 999px 0 0;
    background: #ec3f8f;
}

/* Panels inside about card */
.fp-mobile-panel { display: none; padding: 18px 18px 16px; }
.fp-mobile-panel#fp-mobile-panel-about { display: block; }

/* About quote layout */
.fp-about-quote-layout {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.fp-about-quote-mark {
    font-size: 72px;
    line-height: 0.7;
    font-family: Georgia, serif;
    color: #ec3f8f;
    font-weight: 900;
    flex-shrink: 0;
    margin-top: 8px;
    user-select: none;
}

.fp-about-quote-content { flex: 1; min-width: 0; }

.fp-bio-text {
    font-size: 14px;
    line-height: 1.7;
    color: #c8d0da;
    margin: 0 0 8px;
}

.fp-bio-collapsed {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fp-read-more-bio, .fp-read-less-bio {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 700;
    color: #ec3f8f;
    text-decoration: none;
    margin-top: 4px;
}
.fp-read-more-bio:hover, .fp-read-less-bio:hover { text-decoration: underline; }

.fp-about-policy-links {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.07);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Hide policy links (Complaints/CCBill) on mobile view */
.fp-mobile-only .fp-about-policy-links {
    display: none;
}

.fp-policy-link {
    font-size: 12px;
    color: #596070;
    text-decoration: none;
}
.fp-policy-link:hover { color: #ec3f8f; text-decoration: underline; }

/* Bio (info list) panel */
.fp-info-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fp-info-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.fp-info-item:last-child { border-bottom: none; padding-bottom: 0; }

.fp-info-label { color: #6b7480; font-weight: 600; }
.fp-info-value { color: #d0d8e4; font-weight: 500; text-align: right; }

/* Enjoys (tags) panel */
.fp-tags-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px 0 10px;
    border-radius: 999px;
    background: rgba(236,63,143,0.10);
    border: 1px solid rgba(236,63,143,0.25);
    color: #ec3f8f;
    font-size: 13px;
    font-weight: 600;
}

.tag-chip-emoji {
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
    font-style: normal;
    font-variant-emoji: emoji;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", emoji, sans-serif;
    color: initial;
    -webkit-text-fill-color: initial;
}

.tag-chip-label {
    min-width: 0;
    line-height: 1;
}

/* Links panel */
.fp-links-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Content category tabs: Posts / Media / Private ───────── */
.fp-mobile-count-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 14px 16px 0;
    background: #0d1017;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 14px;
    overflow: hidden;
}

.fp-mobile-count-tab {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 48px;
    font-size: 13px;
    font-weight: 700;
    color: #6b7480;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    transition: color 0.18s;
    -webkit-tap-highlight-color: transparent;
    border-right: 1px solid rgba(255,255,255,0.07);
    padding: 0 4px;
}
.fp-mobile-count-tab:last-child { border-right: none; }

.fp-mobile-count-tab svg { fill: currentColor; flex-shrink: 0; }

.fp-mobile-count-tab .fp-count-num { font-size: 14px; font-weight: 800; }
.fp-mobile-count-tab .fp-count-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; }

.fp-mobile-count-tab.fp-tab-active {
    color: #ec3f8f;
}

.fp-mobile-count-tab.fp-tab-active::after {
    content: '';
    position: absolute;
    left: 15%;
    right: 15%;
    bottom: 0;
    height: 2.5px;
    border-radius: 999px 999px 0 0;
    background: #ec3f8f;
}

/* ── FEED heading ─────────────────────────────────────────── */
.fp-mobile-feed-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 18px 14px 8px;
}

.fp-mobile-feed-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 0.6px;
    color: #fff;
    text-transform: uppercase;
}

/* Beat theme.css `body.ff-dark h2 { color: #258fd3 }` */
body.ff-dark .fp-mobile-feed-header,
body.ff-dark .fp-mobile-feed-header h2 {
    color: #fff;
}

body.ff-dark .fp-mobile-feed-header .fp-feed-action-btn {
    color: #fff;
}

.fp-feed-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fp-feed-action-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    color: #8892a0;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: color 0.18s, background 0.18s;
    -webkit-tap-highlight-color: transparent;
}
.fp-feed-action-btn:hover { color: #fff; background: rgba(255,255,255,0.10); }
.fp-feed-action-btn svg { display: block; }

/* ── Mobile feed search bar ───────────────────────────────── */
.fp-mobile-feed-search-bar {
    padding: 0 0 10px;
}

/* ── Mobile feed filter dropdown ─────────────────────────── */
.fp-mobile-filter-dropdown {
    display: flex;
    flex-direction: column;
    background: #0d1017;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 10px;
}

.fp-mob-filter-opt {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 600;
    color: #8892a0;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: background 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.fp-mob-filter-opt:last-child { border-bottom: none; }

.fp-mob-filter-opt:hover {
    background: rgba(255,255,255,0.04);
    color: #fff;
}

.fp-mob-filter-opt.fp-mob-filter-active {
    color: #e0548d;
    background: rgba(224,84,141,0.07);
}
#fp-mobile-panel-feed {
    display: none;
    padding: 0 14px 8px;
}
#fp-mobile-panel-feed.fp-panel-active { display: block; }

/* Search toolbar inside feed */
.fp-mobile-toolbar {
    padding: 0 0 12px;
}

.fp-search-wrap {
    display: flex;
    align-items: center;
    height: 42px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 999px;
    padding: 0 14px;
    gap: 8px;
    margin-bottom: 10px;
}

.fp-search-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: #e0e8f0;
    font-size: 14px;
}
.fp-search-input::placeholder { color: #596070; }

.fp-search-clear {
    background: none;
    border: none;
    color: #596070;
    cursor: pointer;
    font-size: 18px;
    padding: 0;
    line-height: 1;
    display: none;
}

.fp-filter-group {
    display: flex;
    gap: 8px;
}

.fp-post-filter {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.03);
    color: #6b7480;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s;
    -webkit-tap-highlight-color: transparent;
}

.fp-post-filter.fp-active-post-filter {
    color: #ec3f8f;
    border-color: rgba(236,63,143,0.40);
    background: rgba(236,63,143,0.08);
}

/* Post loader spinner */
.fp-mobile-post-loader {
    display: flex;
    justify-content: center;
    padding: 24px 0;
}

/* Media sub-panel */
.fp-mobile-media-wrap, .fp-mobile-private-wrap {
    padding-top: 4px;
}

.fp-media-only-container-mob {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    border-radius: 10px;
    overflow: hidden;
}

.fp-feed-toolbar {
    display: flex;
    gap: 8px;
    padding: 8px 0;
    flex-wrap: wrap;
}

.fp-post-media-type, .fp-post-media-private {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.03);
    color: #6b7480;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s;
}

.fp-post-media-active, .fp-post-private-active {
    color: #ec3f8f;
    border-color: rgba(236,63,143,0.40);
    background: rgba(236,63,143,0.08);
}

/* ── Member panel ─────────────────────────────────────────── */
.fp-member-section { padding: 0 14px 8px; }

.fp-member-profile-block {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
}

.fp-member-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.fp-member-display-name { font-size: 16px; font-weight: 800; color: #fff; margin: 0 0 4px; }
.fp-member-username, .fp-member-country { font-size: 13px; color: #8892a0; margin: 0 0 2px; }
.fp-member-bio { font-size: 13px; color: #c0c8d4; margin: 6px 0 0; }

/* ── Bottom navigation ────────────────────────────────────── */
.fp-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    box-sizing: border-box;
    height: var(--fp-bottom-nav-height, calc(52px + env(safe-area-inset-bottom, 0px)));
    background: rgba(8,10,18,0.96);
    border-top: 1px solid rgba(255,255,255,0.07);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 0 6px env(safe-area-inset-bottom, 0px);
    padding-left: max(6px, env(safe-area-inset-left, 0px));
    padding-right: max(6px, env(safe-area-inset-right, 0px));
}

.fp-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    color: #8a93a8;
    text-decoration: none;
    font-size: 0;
    font-weight: 400;
    letter-spacing: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
    transition: color 0.18s;
    -webkit-tap-highlight-color: transparent;
    height: 100%;
    min-height: 44px;
    position: relative;
    touch-action: manipulation;
}

/* Outline icon: visible by default */
.fp-bottom-nav-item .fp-nav-outline {
    display: block !important;
    stroke: currentColor;
    fill: none !important;
}

/* Filled icon: hidden by default */
.fp-bottom-nav-item .fp-nav-filled {
    display: none !important;
    fill: currentColor;
    stroke: none;
}

/* Active state: swap to filled icon */
.fp-bottom-nav-item:hover,
.fp-bottom-nav-item.active,
.fp-bottom-nav-item--active {
    color: #ec3f8f;
}
.fp-bottom-nav-item.active .fp-nav-outline,
.fp-bottom-nav-item--active .fp-nav-outline {
    display: none !important;
}
.fp-bottom-nav-item.active .fp-nav-filled,
.fp-bottom-nav-item--active .fp-nav-filled {
    display: block !important;
}

.fp-bottom-nav-glyph {
    position: relative;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.fp-bottom-nav-glyph .fp-nav-icon {
    grid-area: 1 / 1;
}

.fp-bottom-nav-item[data-nav="create"] .fp-bottom-nav-glyph {
    width: 30px;
    height: 30px;
}

.fp-bottom-nav-item .fp-nav-icon {
    width: 24px;
    height: 24px;
}

.fp-bottom-nav-item[data-nav="create"] .fp-nav-icon {
    width: 26px;
    height: 26px;
}

/* Icon labels stay in the DOM for screen readers, never shown */
.fp-bottom-nav-label,
.fp-bottom-nav-item span:not(.fp-nav-badge):not(.fp-bottom-nav-glyph) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Badge on bottom nav — overlaid on the glyph */
.fp-bottom-nav-item--badge {
    position: relative;
}

.fp-bottom-nav-item--badge .fp-nav-badge {
    position: absolute;
    top: -5px;
    right: -9px;
    margin-right: 0;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #ec3f8f;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    font-family: inherit;
    line-height: 1;
    letter-spacing: -0.02em;
    text-align: center;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    padding: 1px 4px 0;
    box-sizing: border-box;
    border: 2px solid var(--ff-bg, #0d111a);
    pointer-events: none;
    opacity: 1 !important;
    transform: scale(1) !important;
}

.fp-bottom-nav-item--badge .fp-nav-badge:not(:empty) {
    display: flex !important;
}

/* Light mode border override */
body.fp-light .fp-bottom-nav-item--badge .fp-nav-badge {
    border-color: #f5f7fb;
}

/* ── Show/hide logic: mobile only on ≤ 768px ──────────────── */
@media (min-width: 769px) {
    .fp-mobile-shell { display: none !important; }
    .fp-bottom-nav   { display: none !important; }
}

/* Desktop layout hides on mobile — the mobile shell replaces it */
@media (max-width: 768px) {
    main.fp-main { display: none !important; }
}

/* ── Hide scroll-to-top on mobile (replaced by bottom nav) ─── */
@media (max-width: 768px) {
    #fp-scroll-top { display: none !important; }
}

@media (max-width: 768px) {
    .fp-mobile-only { display: flex; }
}

/* ── Small phones ≤ 390px ──────────────────────────────────── */
@media (max-width: 390px) {
    .fp-mobile-banner-wrap { height: 240px; }
    .fp-mobile-profile-card { padding: 16px 16px 14px; margin-top: -36px; }
    .fp-mobile-avatar-wrap { width: 105px; height: 105px; margin-top: -50px; }
    .fp-mobile-identity .fp-display-name { font-size: 20px; }
    .fp-mobile-about-card, .fp-mobile-count-tabs { margin-left: 16px; margin-right: 16px; }
    .fp-mobile-feed-header { margin-left: 16px; margin-right: 16px; }
    #fp-mobile-panel-feed { padding-left: 16px; padding-right: 16px; }
    .fp-section-tab-btn { font-size: 12px; }
    .fp-about-quote-mark { font-size: 56px; }
}

/* ── Large phones ≥ 430px ──────────────────────────────────── */
@media (min-width: 430px) and (max-width: 768px) {
    .fp-mobile-banner-wrap { height: 300px; }
    .fp-mobile-avatar-wrap { width: 140px; height: 140px; margin-top: -68px; }
    .fp-mobile-profile-card { margin-top: -44px; }
    .fp-mobile-identity .fp-display-name { font-size: 26px; }
}

/* ── Light mode overrides ─────────────────────────────────── */
body.fp-light .fp-mobile-shell { background: #ffffff; }
body.fp-light .fp-mobile-profile-card { background: #fff; }
body.fp-light .fp-mobile-about-card { background: #fff; }
body.fp-light .fp-mobile-section-tabs { background: #fff; }
body.fp-light .fp-mobile-count-tabs { background: #fff; }
body.fp-light .fp-bottom-nav { background: rgba(255,255,255,0.97); border-color: #e8ecf2; }
body.fp-light .fp-bottom-nav-item { color: #0a3049; }
body.fp-light .fp-bottom-nav-item .fp-nav-outline { stroke: currentColor; fill: none !important; }
body.fp-light .fp-bottom-nav-item .fp-nav-filled { fill: currentColor; }
body.fp-light .fp-bottom-nav-item:hover,
body.fp-light .fp-bottom-nav-item.active,
body.fp-light .fp-bottom-nav-item--active { color: #e0548d; }
body.fp-light .fp-mobile-identity .fp-display-name { color: #0a3049; }
body.fp-light .fp-section-tab-btn { color: #0a3049; }
body.fp-light .fp-section-tab-btn.active,
body.fp-light .fp-section-tab-btn--active { color: #e0548d; }
body.fp-light .fp-bio-text { color: #0a3049; }
body.fp-light .fp-info-label { color: #3a6b82; }
body.fp-light .fp-info-value { color: #0a3049; }
body.fp-light .fp-mobile-about-card { color: #0a3049; }
body.fp-light .fp-mobile-count-tabs { color: #0a3049; }
body.fp-light .fp-count-num { color: #0a3049; }
body.fp-light .fp-count-label { color: #0a3049; }
body.fp-light .fp-mobile-identity .fp-username { color: #0a3049; }
body.fp-light .fp-mobile-identity .fp-location-text { color: #0a3049; }
body.fp-light .fp-about-section-title { color: #0a3049; }
body.fp-light .fp-about-quote-text { color: #0a3049; }
body.fp-light .fp-service-chip { color: #0a3049; border-color: rgba(10,48,73,0.25); background: rgba(10,48,73,0.06); }
body.fp-light .fp-mobile-feed-header { color: #0a3049; }
body.fp-light .fp-feed-label { color: #0a3049; }
body.fp-light .fp-icon-btn { color: #0a3049; }
/* Keep topbar glass buttons white since they sit on the dark carousel */
body.fp-light .fp-topbar-overlay .fp-icon-btn { color: #fff; }
/* Message button: use #0a3049 border in light mode */
body.fp-light .fp-action-btn.fp-msg-btn {
    border-color: #0a3049 !important;
    color: #0a3049 !important;
}
body.fp-light .fp-action-btn.fp-msg-btn svg {
    stroke: #0a3049 !important;
    fill: none !important;
}
/* Feed header action buttons (search / filter icons) in light mode */
body.fp-light .fp-feed-action-btn {
    background: rgba(10,48,73,0.06);
    border-color: rgba(10,48,73,0.18);
    color: #0a3049;
}
body.fp-light .fp-feed-action-btn:hover {
    background: rgba(10,48,73,0.12);
    color: #0a3049;
}
body.fp-light .fp-mobile-feed-header h2 { color: #0a3049; }
/* Username handle and location in light mode */
body.fp-light .fp-username-handle { color: #0a3049 !important; }
body.fp-light .fp-location {
    color: #ffffff !important;
}
body.fp-light .fp-text-muted { color: #3a6b82 !important; }

/* ── AI Help Chat Popup ──────────────────────────────────────── */
.fp-help-chat-popup {
    position: fixed;
    bottom: 76px;
    left: 12px;
    right: 12px;
    z-index: 200;
    background: #0d1017;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.60);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 460px;
    transform: translateY(20px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.fp-help-chat-popup.fp-help-chat-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

.fp-help-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    flex-shrink: 0;
}

.fp-help-chat-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fp-help-chat-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e0548d, #ff2f8f);
    display: grid;
    place-items: center;
    color: #fff;
    flex-shrink: 0;
}

.fp-help-chat-avatar svg { stroke: #fff; fill: none; display: block; }

.fp-help-chat-title {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
}

.fp-help-chat-status {
    font-size: 11px;
    color: #6b7480;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 1px;
}

.fp-help-online-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2dce74;
    display: inline-block;
    flex-shrink: 0;
}

.fp-help-chat-close {
    background: none;
    border: none;
    color: #596070;
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    padding: 0 2px;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.fp-help-chat-close:hover { color: #fff; }

.fp-help-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 14px 14px 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scrollbar-width: none;
}
.fp-help-chat-messages::-webkit-scrollbar { display: none; }

.fp-help-msg { display: flex; }

.fp-help-msg-bot { justify-content: flex-start; }
.fp-help-msg-user { justify-content: flex-end; }

.fp-help-msg-bubble {
    max-width: 82%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 13px;
    line-height: 1.55;
}

.fp-help-msg-bot .fp-help-msg-bubble {
    background: rgba(255,255,255,0.07);
    color: #d0d8e4;
    border-bottom-left-radius: 4px;
}

.fp-help-msg-user .fp-help-msg-bubble {
    background: linear-gradient(135deg, #e0548d, #ff2f8f);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.fp-help-quick-replies {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.fp-help-quick-reply {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(224,84,141,0.10);
    border: 1px solid rgba(224,84,141,0.28);
    color: #e0548d;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
}
.fp-help-quick-reply:hover { background: rgba(224,84,141,0.20); }

.fp-help-chat-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
}

.fp-help-chat-input {
    flex: 1;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 999px;
    padding: 0 14px;
    height: 38px;
    color: #e0e8f0;
    font-size: 13px;
    outline: none;
    font-family: inherit;
}
.fp-help-chat-input::placeholder { color: #596070; }
.fp-help-chat-input:focus { border-color: rgba(224,84,141,0.40); }

.fp-help-chat-send {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e0548d, #ff2f8f);
    border: none;
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.fp-help-chat-send:hover { transform: scale(1.07); }
.fp-help-chat-send svg { stroke: #fff; fill: none; display: block; }
body.fp-light .fp-info-value { color: #0a3049; }

/* ── JS Tooltip (appended to body by SiteMaster.js) ── */
#fp-tooltip {
    position: fixed;
    z-index: 9999;
    padding: 5px 10px;
    background: rgba(15, 17, 23, 0.92);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
#fp-tooltip.fp-tooltip-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Profile feed posts: match globalfeed / my/feed / gallery ── */
.fp-main .following-post:empty,
.fp-mobile-shell .following-post:empty {
    display: none;
}

.fp-main .following-post:has(+ .subonly-txt),
.fp-main .following-post:has(+ .subscribe-btn),
.fp-main .following-post:has(+ .premium-btn),
.fp-mobile-shell .following-post:has(+ .subonly-txt),
.fp-mobile-shell .following-post:has(+ .subscribe-btn),
.fp-mobile-shell .following-post:has(+ .premium-btn) {
    border-radius: 12px 12px 0 0 !important;
    margin-bottom: 0 !important;
    overflow: hidden;
}

.fp-main .following-post:has(+ .subonly-txt) > img,
.fp-main .following-post:has(+ .subscribe-btn) > img,
.fp-main .following-post:has(+ .premium-btn) > img,
.fp-mobile-shell .following-post:has(+ .subonly-txt) > img,
.fp-mobile-shell .following-post:has(+ .subscribe-btn) > img,
.fp-mobile-shell .following-post:has(+ .premium-btn) > img {
    border-radius: 12px 12px 0 0 !important;
}

body.fp-light .fp-profile-page #fp-posts .following-content:hover,
body.fp-light .fp-profile-page #fp-posts-private-sub .following-content:hover,
body.fp-light .fp-profile-page #fp-posts-private-pre .following-content:hover {
    background: rgba(0, 0, 0, 0.03);
}

body.fp-light .fp-profile-page #fp-posts .following-content + .following-content::before,
body.fp-light .fp-profile-page #fp-posts-private-sub .following-content + .following-content::before,
body.fp-light .fp-profile-page #fp-posts-private-pre .following-content + .following-content::before {
    background: rgba(0, 0, 0, 0.08);
}

.fp-mobile-shell .following-content {
    position: relative;
    background: transparent;
    border: none;
    border-radius: 10px;
    padding: 20px 16px 24px;
    margin: 0;
    box-sizing: border-box;
    overflow: visible;
    transition: background 0.2s ease;
}

.fp-mobile-shell .following-content + .following-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background: rgba(255, 255, 255, 0.055);
    pointer-events: none;
}

.fp-mobile-shell .following-content:hover {
    background: rgba(255, 255, 255, 0.035);
}

.fp-main .post-comment-kicker,
.fp-mobile-shell .post-comment-kicker {
    display: inline-block;
    margin: 6px 0 0 2px !important;
    padding: 0;
    border: none;
    background: none;
    border-radius: 0;
    color: var(--accent-primary);
    font-family: var(--font-family-base);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
}

.fp-main .post-comment-kicker:hover,
.fp-mobile-shell .post-comment-kicker:hover {
    color: var(--fyre-pink-600);
    background: none;
}

.fp-main .add-comment,
.fp-mobile-shell .add-comment {
    position: relative;
    margin-top: 8px;
}

.fp-main .add-comment form,
.fp-mobile-shell .add-comment form {
    position: relative;
    margin: 0;
    padding: 0;
}

.fp-main .add-comment textarea,
.fp-mobile-shell .add-comment textarea {
    display: block;
    width: 100%;
    min-height: 42px;
    line-height: 20px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.035) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 10px !important;
    color: var(--text-primary) !important;
    outline: none;
    padding: 11px 44px 11px 12px !important;
    resize: none;
    font-size: 14px;
    font-family: var(--font-family-base);
}

.fp-main .add-comment textarea:focus,
.fp-mobile-shell .add-comment textarea:focus {
    border-color: rgba(224, 84, 141, 0.48) !important;
}

.fp-main .add-comment textarea::placeholder,
.fp-mobile-shell .add-comment textarea::placeholder {
    color: var(--text-muted) !important;
}

.fp-main .add-comments,
.fp-mobile-shell .add-comments {
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    bottom: auto !important;
    left: auto !important;
    height: 22px !important;
    width: 22px !important;
    margin: 0 !important;
    transform: translateY(-50%);
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.fp-main .add-comments input[type='button'],
.fp-mobile-shell .add-comments input[type='button'] {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 18px !important;
    height: 18px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background-color: transparent !important;
    background-size: 16px 14px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    line-height: 0;
    font-size: 0;
    cursor: pointer;
    filter: brightness(0) invert(0.85);
}

.fp-main .add-comments input[type='button']:hover,
.fp-mobile-shell .add-comments input[type='button']:hover {
    filter: brightness(0) invert(0.6);
}

.fp-main .comment,
.fp-mobile-shell .comment {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    margin: 8px 0 0;
}

.fp-main .comment-text,
.fp-mobile-shell .comment-text {
    width: auto;
    flex: 1;
    min-width: 0;
    padding: 0;
}

.fp-main .comment-text p,
.fp-mobile-shell .comment-text p {
    color: var(--text-secondary) !important;
    font-size: 14px;
    line-height: 1.45;
}

.fp-main .comment-name,
.fp-mobile-shell .comment-name {
    color: var(--accent-primary);
}

.fp-main .more-com,
.fp-mobile-shell .more-com {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 600;
    margin: 4px 0 2px;
    color: var(--accent-primary);
}

.fp-main .post-icons:not(:has(.icon-heart)),
.fp-mobile-shell .post-icons:not(:has(.icon-heart)) {
    display: none;
}

/* ── Own-profile actions (logged-in creator viewing themselves) ── */
.fp-owner-only { display: none !important; }

body.fp-own-profile .fp-owner-only {
    display: inline-flex !important;
}

body.fp-own-profile .fp-visitor-only { display: none !important; }

body.fp-own-profile .fp-mobile-actions {
    grid-template-columns: 1fr;
}

a.fp-action-btn.fp-edit-profile-btn {
    background: linear-gradient(135deg, #ec3f8f, #ff2f8f);
    color: #fff;
    box-shadow: 0 4px 18px rgba(236, 63, 143, 0.35);
    border: none;
    text-decoration: none;
}

a.fp-action-btn.fp-edit-profile-btn:hover {
    background: linear-gradient(135deg, #c9457c, #b33a6b);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 18px rgba(224, 84, 141, 0.38);
    transform: translateY(-1px);
}

body.fp-light a.fp-action-btn.fp-edit-profile-btn {
    background: linear-gradient(135deg, var(--fyre-pink-500), var(--fyre-pink-600)) !important;
    border-color: transparent !important;
    color: #fff !important;
}

/* Icon-only profile actions (copy link, report, info panel) need a hairline
   like the feed search/filter buttons — a later .fp-action-btn { border: none }
   was wiping it, which showed up most clearly in light mode. */
.fp-actions .fp-action-btn.fp-copy-link,
.fp-actions .fp-action-btn.fp-rep-btn,
.fp-actions .fp-action-btn.fp-info-toggle-btn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    color: var(--text-secondary);
    opacity: 1;
}

.fp-actions .fp-action-btn.fp-copy-link:hover,
.fp-actions .fp-action-btn.fp-rep-btn:hover,
.fp-actions .fp-action-btn.fp-info-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.28);
    color: var(--accent-primary);
}

body.fp-light .fp-actions .fp-action-btn.fp-copy-link,
body.fp-light .fp-actions .fp-action-btn.fp-rep-btn,
body.fp-light .fp-actions .fp-action-btn.fp-info-toggle-btn {
    border: 1px solid rgba(10, 48, 73, 0.18);
    background: rgba(10, 48, 73, 0.03);
    color: #0a3049;
}

body.fp-light .fp-actions .fp-action-btn.fp-copy-link:hover,
body.fp-light .fp-actions .fp-action-btn.fp-rep-btn:hover,
body.fp-light .fp-actions .fp-action-btn.fp-info-toggle-btn:hover {
    background: rgba(10, 48, 73, 0.07);
    border-color: rgba(10, 48, 73, 0.32);
    color: var(--accent-primary);
}

body.fp-light .fp-actions-divider {
    background: rgba(10, 48, 73, 0.16);
}

body.fp-info-collapsed .fp-actions .fp-action-btn.fp-info-toggle-btn {
    background: rgba(255, 47, 134, 0.10);
    border-color: rgba(255, 47, 134, 0.35);
}

body.fp-light.fp-info-collapsed .fp-actions .fp-action-btn.fp-info-toggle-btn {
    background: rgba(224, 84, 141, 0.09);
    border-color: rgba(224, 84, 141, 0.55);
}

body.fp-light .fp-mobile-identity .fp-display-name,
body.fp-light .fp-mobile-identity .fp-display-name-text {
    color: #0a3049 !important;
}

.fp-edit-cover-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 8;
    display: none;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    font-family: inherit;
    transition: border-color 0.15s;
}

.fp-edit-cover-btn:hover {
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
    text-decoration: none;
}

.fp-mobile-banner-wrap .fp-edit-cover-btn {
    z-index: 32;
    top: 12px;
    right: 12px;
}