/* ======================================================
   FACEBOOK-EXACT PROFILE PAGE
   Loaded LAST on profile.html + user-profile.html.
   Replicates Facebook's fonts, colors, spacing, shadows,
   structure and animations on the profile pages.
   ====================================================== */

/* ---------- 1. FONTS + COLORS ---------- */

body {
    font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;

    background: #f0f2f5;

    color: #050505;

    transition: background 0.2s;
}/* ---------- 2. TOPBAR (Facebook) ---------- */

.topbar {
    height: 56px;

    padding: 0 16px;

    gap: 8px;

    background: #ffffff;

    border-bottom: 1px solid #ced0d4;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.topbar .logo {
    width: 40px;

    height: 40px;

    border-radius: 8px;

    background: #0866ff;

    box-shadow: none;

    display: flex;

    align-items: center;

    justify-content: center;
}

.topbar .logo::after {
    content: "f";

    font-size: 28px;

    font-weight: 800;

    font-family: "Segoe UI", Arial, Helvetica, sans-serif;

    color: #ffffff;

    letter-spacing: 0;

    transform: none;
}

.topbar .search-box {
    width: 240px;

    height: 40px;

    border-radius: 999px;

    background: #f0f2f5;

    padding: 0 12px;
}

.topbar .search-box span {
    color: #65676b;

    font-size: 15px;
}

.topbar .search-box input {
    font-size: 15px;

    color: #050505;
}

.topbar .search-box input::placeholder {
    color: #65676b;
}

.fb-center-nav .fb-nav-btn {
    width: 48px;

    height: 48px;

    border-radius: 12px;

    color: #65676b;

    font-size: 20px;

    transition: background 0.2s;
}

.fb-center-nav .fb-nav-btn:hover {
    background: #f0f2f5;
}

.top-icons button {
    width: 40px;

    height: 40px;

    border-radius: 50%;

    background: #e4e6eb;

    font-size: 17px;

    transition: background 0.2s;
}

.top-icons button:hover {
    background: #d8dadf;
}

/* ---------- 3. COVER + HEADER (Facebook) ---------- */

.fb-header {
    background: transparent;
}

.fb-header .cover-photo {
    position: relative;
}

.fb-header .cover-photo::after {
    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.35),
        transparent 55%
    );

    border-radius: 0 0 8px 8px;

    pointer-events: none;
}

.fb-cover-name {
    left: 212px;

    bottom: 22px;
}

.fb-cover-name-h {
    font-size: 28px;

    font-weight: 800;

    letter-spacing: -0.2px;

    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.fb-cover-username {
    font-size: 15px;

    font-weight: 400;

    color: rgba(255, 255, 255, 0.95);

    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Avatar: white ring like Facebook */

.fb-avatar-wrap .profile-photo {
    background: #ffffff;

    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.2);
}

.fb-avatar-wrap .profile-photo > * {
    border: 4px solid #ffffff;
}

/* Cover buttons (gray pills) */

.fb-cover-btn {
    background: #e4e6eb;

    color: #050505;

    font-weight: 700;

    transition: background 0.2s;
}

.fb-cover-btn:hover {
    background: #d8dadf;
}

.fb-more-btn {
    background: #e4e6eb;

    transition: background 0.2s;
}

.fb-more-btn:hover {
    background: #d8dadf;
}

.fb-more-menu {
    background: #ffffff;

    border-radius: 8px;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.2),
        0 2px 4px rgba(0, 0, 0, 0.1);

    animation: fbMenuIn 0.15s ease-out;

    transform-origin: top right;
}

@keyframes fbMenuIn {
    from {
        opacity: 0;

        transform: scale(0.96);
    }
    to {
        opacity: 1;

        transform: scale(1);
    }
}

.fb-more-menu button {
    border-radius: 6px;

    transition: background 0.15s;
}

/* ---------- 4. TABS (Facebook) ---------- */

.fb-tabs-bar {
    background: #ffffff;

    border-radius: 8px;

    padding: 0 16px;

    display: flex;

    align-items: flex-end;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);

    position: relative;
}

.fb-tabs-bar button {
    position: relative;

    background: transparent;

    border: none;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 16px 10px;

    font-size: 15px;

    font-weight: 600;

    color: #65676b;

    border-radius: 8px 8px 0 0;

    transition: background 0.15s;

    cursor: pointer;
}

.fb-tabs-bar button i {
    font-size: 17px;

    color: #65676b;

    transition: color 0.15s;
}

.fb-tabs-bar button:hover {
    background: #f0f2f5;
}

.fb-tabs-bar button.active {
    color: #050505;
}

.fb-tabs-bar button.active i {
    color: #1877f2;
}

.fb-tabs-bar button.active::after {
    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    height: 3px;

    background: #1877f2;

    border-radius: 3px 3px 0 0;
}

.fb-tab-more {
    margin-left: auto;
}

/* ---------- 5. LAYOUT (Facebook columns) ---------- */

.fb-body {
    max-width: 1100px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 360px 1fr;

    gap: 16px;

    align-items: start;

    padding: 16px 16px 40px;
}

.fb-left {
    position: sticky;

    top: 72px;

    display: flex;

    flex-direction: column;

    gap: 16px;
}

.fb-main {
    display: flex;

    flex-direction: column;

    gap: 16px;

    min-width: 0;
}

/* ---------- 6. CARDS (Facebook) ---------- */

.profile-card {
    background: #ffffff;

    border-radius: 8px;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);

    border: none;

    padding: 16px;
}

.card-title {
    margin-bottom: 12px;
}

.card-title h2 {
    font-size: 17px;

    font-weight: 700;

    color: #050505;
}

.card-title p {
    font-size: 13px;

    color: #65676b;
}

.card-title a {
    font-size: 13px;

    font-weight: 600;

    color: #050505;

    padding: 6px 8px;

    border-radius: 6px;

    transition: background 0.15s;
}

.card-title a:hover {
    background: #f0f2f5;

    text-decoration: none;
}

/* Intro card */

.fb-intro-card {
    padding-top: 20px;
}

.fb-intro-top {
    justify-content: flex-start;
}

.fb-intro-avatar {
    width: 44px;

    height: 44px;

    background: #f0f2f5;
}

.fb-intro-id strong {
    font-size: 17px;

    color: #050505;
}

.fb-intro-id .profile-username {
    color: #65676b;

    font-size: 14px;
}

.fb-intro-bio {
    color: #65676b;

    font-size: 15px;
}

/* FB hides the intro action buttons (they live on the cover) */

.fb-intro-buttons {
    display: none;
}

.fb-intro-divider {
    border-top: 1px solid #e4e6eb;
}

.fb-intro-details .about-row {
    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 14px;

    color: #050505;

    padding: 6px 8px;

    margin: 0;

    border-radius: 8px;

    transition: background 0.15s;
}

.fb-intro-details .about-row:hover {
    background: #f0f2f5;
}

.fb-intro-details .about-row i {
    width: 22px;

    text-align: center;

    color: #65676b;

    font-size: 16px;
}

.fb-intro-details .about-row a {
    color: #1877f2;
}

.fb-friend-summary {
    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 14px;

    font-weight: 600;

    color: #050505;

    padding: 8px;

    border-radius: 8px;

    cursor: pointer;

    transition: background 0.15s;
}

.fb-friend-summary:hover {
    background: #f0f2f5;
}

.fb-friend-summary i {
    color: #65676b;

    font-size: 16px;
}

/* Highlights card */

.fb-highlights-card {
    display: block;
}

.fb-highlights-bar {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 8px;

    justify-items: center;

    padding-top: 4px;
}

.fb-highlights-bar .highlight-tile {
    width: 100%;
}

.fb-highlights-bar .highlight-ring {
    width: 64px;

    height: 64px;
}

.fb-highlights-bar .highlight-tile span {
    font-size: 12px;

    font-weight: 600;

    color: #e4e6eb;
}

body:not(.dark-mode) .fb-highlights-bar .highlight-tile span {
    color: #050505;
}

.fb-card-title {
    font-size: 17px;

    font-weight: 700;
}

/* Photos mini card */

.fb-mini-photos {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 3px;
}

.fb-mini-photos .profile-photo-item {
    aspect-ratio: 1;

    border-radius: 8px;

    overflow: hidden;

    background: #f0f2f5;
}

.fb-mini-photos .profile-photo-item img,
.fb-mini-photos .profile-photo-item video {
    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 8px;
}

/* Friends mini card */

.fb-mini-friends {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 6px;
}

.fb-mini-friends .friend-mini {
    display: flex;

    flex-direction: column;

    gap: 4px;

    cursor: pointer;

    border-radius: 8px;

    padding: 4px;

    transition: background 0.15s;
}

.fb-mini-friends .friend-mini:hover {
    background: #f0f2f5;
}

.fb-mini-friends .friend-mini .avatar {
    width: 100%;

    aspect-ratio: 1;

    height: auto;

    border-radius: 8px;

    font-size: 28px;
}

.fb-mini-friends .friend-mini img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 8px;
}

.fb-mini-friends .friend-mini span {
    font-size: 13px;

    font-weight: 600;

    color: #050505;

    text-align: left;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}

/* ---------- 7. COMPOSER (Facebook) ---------- */

.fb-profile-composer {
    flex-direction: column;

    align-items: stretch;

    gap: 0;

    padding: 16px;

}

.fb-profile-composer .avatar {
    width: 40px;

    height: 40px;

    font-size: 20px;

    flex-shrink: 0;
}

.fb-composer-open {
    background: #f0f2f5;

    color: #65676b;

    font-size: 17px;

    font-weight: 400;

    transition: background 0.2s;
}

.fb-composer-open:hover {
    background: #e4e6eb;
}

.fb-composer-top-row {
    display: flex;

    align-items: center;

    gap: 8px;

    width: 100%;
}

.fb-composer-actions {
    display: flex;

    align-items: center;

    border-top: 1px solid #e4e6eb;

    margin-top: 12px;

    padding-top: 8px;
}

.fb-composer-actions button {
    flex: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    padding: 8px;

    background: transparent;

    border: none;

    border-radius: 8px;

    font-size: 13px;

    font-weight: 600;

    color: #65676b;

    cursor: pointer;

    transition: background 0.15s;
}

.fb-composer-actions button:hover {
    background: #f0f2f5;
}

.fb-composer-actions button i {
    font-size: 20px;
}

/* ---------- 8. POSTS (Facebook) ---------- */

#profilePosts,
#upPosts {
    display: block;
}

#profilePosts .post,
#upPosts .post {
    background: #ffffff;

    border-radius: 8px;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);

    padding: 12px 16px 10px;

    margin-bottom: 16px;

    transition: box-shadow 0.2s;
}

#profilePosts .post:hover,
#upPosts .post:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.post-header {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 10px;
}

.post-header .avatar {
    width: 40px;

    height: 40px;

    border-radius: 50%;

    flex-shrink: 0;
}

.post-header .post-user-name {
    font-size: 15px;

    font-weight: 600;

    color: #050505;

    margin: 0;
}

.post-header small {
    font-size: 13px;

    color: #65676b;
}

.post-text {
    font-size: 15px;

    line-height: 1.45;

    color: #050505;
}

.socialhub-post-image {
    border-radius: 8px !important;
}

.post-stats {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 8px 0;

    font-size: 13px;

    color: #65676b;

    border-top: none;
}

.post-stats .fb-reaction-emoji {
    font-size: 16px;
}

/* Actions */

.post-actions {
    display: flex;

    align-items: center;

    border-top: 1px solid #e4e6eb;

    padding: 2px 0;
}

.post-actions .fb-action-btn {
    flex: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    height: 40px;

    border-radius: 8px;

    background: transparent;

    border: none;

    font-size: 14px;

    font-weight: 600;

    color: #65676b;

    cursor: pointer;

    position: relative;

    transition: background 0.15s, color 0.15s;
}

.post-actions .fb-action-btn:hover {
    background: #f0f2f5;
}

.post-actions .fb-action-btn i {
    font-size: 18px;

    color: #65676b;
}

.post-actions .fb-action-btn .socialhub-reaction-emoji {
    font-size: 18px;
}

.post-actions .fb-action-btn.liked,
.post-actions .fb-action-btn.socialhub-like-btn.liked,
.post-actions .fb-action-btn.socialhub-like-btn.liked i,
.post-actions .fb-action-btn.liked .fb-action-label {
    color: #1877f2;
}

/* Comment box */

.comment-box {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 4px;
}

.comment-box .comment-input {
    flex: 1;

    height: 40px;

    border-radius: 999px;

    background: #f0f2f5;

    border: none;

    outline: none;

    padding: 0 14px;

    font-size: 14px;

    color: #050505;
}

.comment-box .comment-input::placeholder {
    color: #65676b;
}

.comment-box button {
    width: 36px;

    height: 36px;

    border: none;

    border-radius: 50%;

    background: #e4e6eb;

    color: #050505;

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;

    transition: background 0.15s;
}

.comment-box button:hover {
    background: #d8dadf;
}

/* Comments */

.comments .comment {
    display: flex;

    gap: 8px;

    margin-top: 10px;
}

.comments .comment > .avatar {
    width: 32px;

    height: 32px;

    flex-shrink: 0;

    font-size: 15px;
}

.comments .comment-content {
    background: #f0f2f5;

    border-radius: 18px;

    padding: 8px 12px;

    max-width: calc(100% - 40px);
}

.comments .comment-content strong {
    font-size: 13px;

    font-weight: 600;

    color: #050505;

    display: block;
}

.comments .comment-content p {
    margin: 2px 0 0;

    font-size: 14px;

    color: #050505;
}

.comments .comment-actions {
    display: flex;

    gap: 8px;

    margin-top: 2px;
}

.comments .comment-actions button {
    background: transparent;

    border: none;

    padding: 0;

    font-size: 12px;

    font-weight: 600;

    color: #65676b;

    cursor: pointer;
}

.comments .comment-actions button:hover {
    text-decoration: underline;
}

.comment-reply-row {
    display: flex;

    gap: 6px;

    margin-top: 6px;
}

.comment-reply-row input {
    flex: 1;

    height: 32px;

    border-radius: 999px;

    border: none;

    outline: none;

    background: #f0f2f5;

    padding: 0 12px;

    font-size: 13px;
}

.comment-reply-row button {
    background: transparent;

    border: none;

    color: #1877f2;

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;
}

/* ---------- 9. REACTION PICKER (Facebook popup) ---------- */

.post-actions .socialhub-reactions {
    position: absolute;

    bottom: calc(100% + 8px);

    left: 0;

    display: flex;

    gap: 4px;

    background: #ffffff;

    border-radius: 999px;

    padding: 6px 10px;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.25),
        0 2px 4px rgba(0, 0, 0, 0.1);

    opacity: 0;

    visibility: hidden;

    transform: scale(0.3);

    transform-origin: bottom left;

    transition:
        opacity 0.15s ease-out,
        transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
        visibility 0.15s;

    z-index: 60;
}

.post-actions .fb-action-btn:hover .socialhub-reactions,
.post-actions .fb-action-btn:focus-within .socialhub-reactions {
    opacity: 1;

    visibility: visible;

    transform: scale(1);
}

.post-actions .socialhub-reactions button {
    background: transparent;

    border: none;

    font-size: 34px;

    padding: 0 2px;

    cursor: pointer;

    transition: transform 0.15s;

    position: relative;
}

.post-actions .socialhub-reactions button:hover {
    transform: scale(1.35) translateY(-4px);
}

.post-actions .socialhub-reactions .socialhub-reaction-label {
    position: absolute;

    bottom: calc(100% + 8px);

    left: 50%;

    transform: translateX(-50%);

    background: rgba(0, 0, 0, 0.8);

    color: #ffffff;

    font-size: 12px;

    font-weight: 600;

    padding: 4px 8px;

    border-radius: 6px;

    opacity: 0;

    visibility: hidden;

    transition: opacity 0.15s;

    white-space: nowrap;
}

.post-actions .socialhub-reactions button:hover .socialhub-reaction-label {
    opacity: 1;

    visibility: visible;
}

/* Like press animation */

.post-actions .fb-action-btn.socialhub-like-btn.liked i {
    animation: fbLikePop 0.3s ease-out;
}

@keyframes fbLikePop {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.4);
    }
    100% {
        transform: scale(1);
    }
}

/* ---------- 10. OTHER-PROFILE (user-profile.html) ---------- */

.fb-user-cover .fb-cover-name {
    left: 20px;

    bottom: 16px;
}

.up-posts-tabs {
    display: flex;

    background: #ffffff;

    border-radius: 8px;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);

    overflow: hidden;
}

.up-posts-tab {
    position: relative;

    flex: 1;

    background: transparent;

    border: none;

    padding: 14px 10px;

    font-size: 15px;

    font-weight: 600;

    color: #65676b;

    cursor: pointer;

    transition: background 0.15s;
}

.up-posts-tab:hover {
    background: #f0f2f5;
}

.up-posts-tab.active {
    color: #050505;
}

.up-posts-tab.active::after {
    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    height: 3px;

    background: #1877f2;
}

body.dark-mode .up-posts-tabs {
    background: #242526;
}

body.dark-mode .up-posts-tab {
    color: #b0b3b8;
}

body.dark-mode .up-posts-tab:hover {
    background: #3a3b3c;
}

body.dark-mode .up-posts-tab.active {
    color: #e4e6eb;
}

/* ---------- 11. DARK MODE (Facebook dark) ---------- */

body.dark-mode {
    background: #18191a;
}body.dark-mode .topbar {
    background: #242526;

    border-bottom-color: #393a3b;
}

body.dark-mode .topbar .search-box {
    background: #3a3b3c;
}

body.dark-mode .topbar .search-box input {
    color: #e4e6eb;
}

body.dark-mode .fb-center-nav .fb-nav-btn,
body.dark-mode .top-icons button {
    color: #e4e6eb;
}

body.dark-mode .fb-center-nav .fb-nav-btn:hover {
    background: #3a3b3c;
}

body.dark-mode .top-icons button,
body.dark-mode .fb-more-btn,
body.dark-mode .fb-cover-btn,
body.dark-mode .fb-composer-audience-btn,
body.dark-mode .fb-friends-btn {
    background: #3a3b3c;

    color: #e4e6eb;
}

body.dark-mode .top-icons button:hover,
body.dark-mode .fb-more-btn:hover,
body.dark-mode .fb-cover-btn:hover {
    background: #4e4f50;
}

body.dark-mode .fb-more-menu {
    background: #242526;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.4);
}

body.dark-mode .fb-more-menu button {
    color: #e4e6eb;
}

body.dark-mode .fb-more-menu button:hover {
    background: #3a3b3c;
}

body.dark-mode .fb-more-menu button:last-child {
    color: #f02849;
}

body.dark-mode .fb-tabs-bar,
body.dark-mode .profile-card,
body.dark-mode #profilePosts .post,
body.dark-mode #upPosts .post {
    background: #242526;
}

body.dark-mode .fb-tabs-bar button {
    color: #b0b3b8;
}

body.dark-mode .fb-tabs-bar button:hover {
    background: #3a3b3c;
}

body.dark-mode .fb-tabs-bar button.active {
    color: #e4e6eb;
}

body.dark-mode .fb-tabs-bar button.active i {
    color: #4599ff;
}

body.dark-mode .card-title h2,
body.dark-mode .fb-intro-id strong,
body.dark-mode .fb-intro-details .about-row,
body.dark-mode .fb-friend-summary,
body.dark-mode .fb-mini-friends .friend-mini span,
body.dark-mode .post-header .post-user-name,
body.dark-mode .post-text,
body.dark-mode .comments .comment-content strong,
body.dark-mode .comments .comment-content p {
    color: #e4e6eb;
}

body.dark-mode .fb-intro-details .about-row:hover,
body.dark-mode .fb-friend-summary:hover,
body.dark-mode .fb-mini-friends .friend-mini:hover,
body.dark-mode .post-actions .fb-action-btn:hover {
    background: #3a3b3c;
}

body.dark-mode .fb-intro-bio,
body.dark-mode .card-title p,
body.dark-mode .post-header small,
body.dark-mode .post-stats {
    color: #b0b3b8;
}

body.dark-mode .fb-composer-open {
    background: #3a3b3c;

    color: #b0b3b8;
}

body.dark-mode .fb-composer-open:hover {
    background: #4e4f50;
}

body.dark-mode .fb-composer-actions {
    border-top-color: #3a3b3c;
}

body.dark-mode .fb-composer-actions button {
    color: #b0b3b8;
}

body.dark-mode .fb-composer-actions button:hover {
    background: #3a3b3c;
}

body.dark-mode .comment-box .comment-input,
body.dark-mode .comment-reply-row input {
    background: #3a3b3c;

    color: #e4e6eb;
}

body.dark-mode .comments .comment-content {
    background: #3a3b3c;
}

body.dark-mode .post-actions {
    border-top-color: #3a3b3c;
}

body.dark-mode .post-actions .fb-action-btn {
    color: #b0b3b8;
}

body.dark-mode .post-actions .fb-action-btn i {
    color: #b0b3b8;
}

body.dark-mode .post-actions .socialhub-reactions {
    background: #242526;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.6),
        0 2px 4px rgba(0, 0, 0, 0.5);
}

body.dark-mode .card-title a {
    color: #e4e6eb;
}

body.dark-mode .card-title a:hover {
    background: #3a3b3c;
}

/* =========================================================
   PROFILE PAGE — DARK REFERENCE LAYOUT (final)
   Dark theme is the default on this page (body.dark-mode).
   ========================================================= */

.profile-container {
    max-width: 1300px;

    margin: 0 auto;

    padding: 0 16px;
}

/* ---------- TOPBAR (dark reference) ---------- */

.topbar .logo {
    width: 40px;

    height: 40px;

    border-radius: 50%;
}

.topbar .logo::after {
    content: "S";

    font-size: 22px;

    font-weight: 800;

    color: #ffffff;

    line-height: 1;

    letter-spacing: 0;
}

/* ---------- HEADER CARD ---------- */

.fb-header {
    position: relative;

    height: auto;

    background: #242526;

    border-radius: 8px;

    overflow: visible;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);

    padding-bottom: 16px;

    margin-bottom: 0;
}

.fb-header .cover-photo {
    height: 348px;

    background-color: #3a3b3c;

    background-size: cover;

    background-position: center;

    border-radius: 8px 8px 0 0;
}

/* Edit cover photo (top-right, like the sketch) */

.fb-header .socialhub-cover-overlay {
    top: 16px;

    bottom: auto;

    right: 16px;

    background: #ffffff;

    color: #050505;

    font-size: 15px;

    font-weight: 700;

    padding: 9px 16px;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.fb-header .socialhub-cover-overlay:hover {
    background: #f0f2f5;
}

/* Share a thought (floating pill) */

.fb-share-thought {
    position: absolute;

    left: 232px;

    top: 252px;

    z-index: 6;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    background: #3a3b3c;

    color: #b0b3b8;

    border: none;

    border-radius: 999px;

    padding: 9px 18px;

    font-size: 14px;

    font-weight: 600;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);

    cursor: pointer;

    transition: background 0.15s;
}

.fb-share-thought:hover {
    background: #4e4f50;
}

/* ---------- HEADER ROW (avatar + info + actions) ---------- */

.fb-header-row {
    position: relative;

    z-index: 4;

    display: flex;

    align-items: flex-start;

    gap: 16px;

    margin-top: -84px;

    padding: 0 24px;
}

.fb-header {
    margin-bottom: 0;
}

.fb-header .fb-avatar-wrap {
    position: static;

    left: auto;

    bottom: auto;

    z-index: auto;
}

.fb-avatar-wrap .profile-photo {
    width: 168px;

    height: 168px;

    margin-top: 0;

    border-radius: 50%;

    background: #3a3b3c;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);

    overflow: hidden;
}

.fb-avatar-wrap .profile-photo > * {
    border: 4px solid #ffffff;

    box-sizing: border-box;
}

.fb-avatar-wrap .socialhub-avatar-overlay {
    background: #3a3b3c;

    color: #e4e6eb;
}

.fb-avatar-wrap .socialhub-avatar-overlay:hover {
    background: #4e4f50;
}

.fb-header-info {
    flex: 1;

    min-width: 0;

    padding-top: 100px;
}

.fb-header-name {
    margin: 0;

    font-size: 34px;

    font-weight: 800;

    line-height: 1.1;

    color: #f0f2f5;

    letter-spacing: -0.3px;
}

.fb-name-nick {
    margin-left: 8px;

    font-size: 22px;

    font-weight: 600;

    color: #b0b3b8;
}

.fb-friends-line {
    margin: 6px 0 0;

    font-size: 15px;

    color: #b0b3b8;
}

.fb-header-bio {
    margin: 10px 0 0;

    font-size: 15px;

    line-height: 1.4;

    color: #e4e6eb;
}

.fb-info-row {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 8px 22px;

    margin-top: 12px;

    font-size: 15px;

    color: #b0b3b8;
}

.fb-info-item {
    display: inline-flex;

    align-items: center;

    gap: 6px;
}

.fb-info-item i {
    font-size: 17px;
}

.fb-header-actions {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-left: auto;

    padding-top: 100px;
}

.fb-primary-btn {
    min-width: 145px;

    height: 40px;

    padding: 0 20px;

    background: #1877f2;

    color: #ffffff;

    border: none;

    border-radius: 8px;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

    transition: background 0.15s;
}

.fb-primary-btn:hover {
    background: #166fe5;
}

.fb-ghost-btn {
    height: 40px;

    padding: 0 18px;

    background: #3a3b3c;

    color: #e4e6eb;

    border: none;

    border-radius: 8px;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition: background 0.15s;
}

.fb-ghost-btn:hover {
    background: #4e4f50;
}

.fb-square-btn {
    width: 40px;

    height: 40px;

    background: #3a3b3c;

    color: #b0b3b8;

    border: none;

    border-radius: 8px;

    font-size: 16px;

    cursor: pointer;

    transition: background 0.15s;
}

.fb-square-btn:hover {
    background: #4e4f50;
}

/* ---------- DIVIDER ---------- */

.fb-header-divider {
    height: 1px;

    margin: 20px 24px 0;

    background: #3e4042;
}

/* ---------- TABS (65px, blue underline) ---------- */

.fb-tabs-bar {
    background: transparent;

    box-shadow: none;

    border-radius: 0;

    padding: 0 8px;

    display: flex;

    align-items: center;

    height: 65px;

    position: relative;
}

.fb-tabs-bar button {
    position: relative;

    background: transparent;

    border: none;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    height: 65px;

    padding: 0 18px;

    font-size: 16px;

    font-weight: 600;

    color: #b0b3b8;

    border-radius: 8px;

    transition: background 0.15s, color 0.15s;

    cursor: pointer;

    white-space: nowrap;
}

.fb-tabs-bar button i {
    font-size: 17px;

    color: #b0b3b8;

    transition: color 0.15s;
}

.fb-tabs-bar button:hover {
    background: #3a3b3c;
}

.fb-tabs-bar button.active {
    color: #1877f2;
}

.fb-tabs-bar button.active i {
    color: #1877f2;
}

.fb-tabs-bar button.active::after {
    content: "";

    position: absolute;

    left: 8px;

    right: 8px;

    bottom: 0;

    height: 3px;

    background: #1877f2;

    border-radius: 3px 3px 0 0;
}

.fb-tab-more {
    margin-left: 0;
}

.fb-tabs-dots {
    width: 40px;

    height: 40px;

    background: #3a3b3c;

    color: #b0b3b8;

    border: none;

    border-radius: 8px;

    font-size: 16px;

    letter-spacing: 1px;

    cursor: pointer;

    transition: background 0.15s;
}

.fb-tabs-dots:hover {
    background: #4e4f50;
}

.fb-tabs-dots-wrap {
    margin-left: auto;
}

.fb-tabs-more-wrap,
.fb-tabs-dots-wrap {
    display: flex;

    align-items: center;

    position: relative;
}

/* More menus (dark) */

.fb-more-wrap .fb-more-menu {
    position: absolute;

    top: calc(100% + 6px);

    right: 0;

    left: auto;

    min-width: 220px;

    background: #242526;

    border: 1px solid #3e4042;

    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6);

    animation: fbMenuIn 0.15s ease-out;

    transform-origin: top right;

    z-index: 20;
}

.fb-more-wrap .fb-more-menu button {
    color: #e4e6eb;
}

.fb-more-wrap .fb-more-menu button:hover {
    background: #3a3b3c;
}

/* ---------- CONTENT LAYOUT (2 columns desktop / 1 column mobile) ---------- */

.fb-body {
    display: block;

    max-width: 1300px;

    margin: 0 auto;

    padding: 16px 16px 48px;
}

@media (min-width: 901px) {

    .fb-body {
        display: grid;

        grid-template-columns: 360px 1fr;

        gap: 16px;

        align-items: start;
    }

    .fb-main {
        width: auto;
    }

    .fb-timeline-photos-card {
        display: none;
    }
}

@media (max-width: 900px) {

    .fb-left {
        display: none;
    }
}

/* ---------- LEFT COLUMN CARDS (desktop) ---------- */

.fb-left .profile-card {
    padding: 16px;

    background: #242526;

    border-radius: 8px;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.fb-left .fb-side-title {
    display: flex;

    align-items: baseline;

    justify-content: space-between;

    margin-bottom: 12px;
}

.fb-left .fb-side-title h2 {
    margin: 0;

    font-size: 20px;

    color: #e4e6eb;
}

.fb-left .fb-side-title a {
    color: #1877f2;

    font-size: 15px;

    text-decoration: none;

    cursor: pointer;
}

.fb-left .fb-side-title a:hover {
    text-decoration: underline;
}

body:not(.dark-mode) .fb-left .profile-card {
    background: #ffffff;
}

body:not(.dark-mode) .fb-left .fb-side-title h2 {
    color: #050505;
}

.fb-intro-avatar img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 8px;
}

.fb-main {
    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 16px;
}

.fb-area .profile-card {
    padding: 16px;
}

/* ---------- LIGHT OVERRIDES (when the toggle is switched off) ---------- */

body:not(.dark-mode) .topbar {
    background: #ffffff;

    border-bottom-color: #ced0d4;
}

body:not(.dark-mode) .fb-header {
    background: #ffffff;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

body:not(.dark-mode) .fb-header-name {
    color: #050505;
}

body:not(.dark-mode) .fb-header-bio {
    color: #050505;
}

body:not(.dark-mode) .fb-friends-line,
body:not(.dark-mode) .fb-info-row {
    color: #65676b;
}

body:not(.dark-mode) .fb-share-thought {
    background: #f0f2f5;

    color: #65676b;
}

body:not(.dark-mode) .fb-share-thought:hover {
    background: #e4e6eb;
}

body:not(.dark-mode) .fb-ghost-btn,
body:not(.dark-mode) .fb-square-btn,
body:not(.dark-mode) .fb-tabs-dots {
    background: #e4e6eb;

    color: #050505;
}

body:not(.dark-mode) .fb-ghost-btn:hover,
body:not(.dark-mode) .fb-square-btn:hover,
body:not(.dark-mode) .fb-tabs-dots:hover {
    background: #d8dadf;
}

body:not(.dark-mode) .fb-header-divider {
    background: #ced0d4;
}

body:not(.dark-mode) .fb-tabs-bar button {
    color: #65676b;
}

body:not(.dark-mode) .fb-tabs-bar button i {
    color: #65676b;
}

body:not(.dark-mode) .fb-tabs-bar button:hover {
    background: #f0f2f5;
}

body:not(.dark-mode) .fb-tabs-bar button.active {
    color: #1877f2;
}

body:not(.dark-mode) .fb-tabs-bar button.active i {
    color: #1877f2;
}

body:not(.dark-mode) .fb-more-wrap .fb-more-menu {
    background: #ffffff;

    border-color: #ced0d4;
}

body:not(.dark-mode) .fb-more-wrap .fb-more-menu button {
    color: #050505;
}

body:not(.dark-mode) .fb-more-wrap .fb-more-menu button:hover {
    background: #f0f2f5;
}

body:not(.dark-mode) .fb-avatar-wrap .profile-photo {
    background: #f0f2f5;
}

/* ---------- RESPONSIVE (tablet / mobile) ---------- */

@media (max-width: 900px) {

    .fb-header .cover-photo {
        height: 260px;
    }

    .fb-avatar-wrap .profile-photo {
        width: 140px;

        height: 140px;
    }

.fb-header-row {
        margin-top: -70px;

        gap: 12px;

        padding: 0 16px;
    }

    .fb-header-info {
        padding-top: 78px;
    }

    .fb-header-actions {
        padding-top: 78px;
    }

    .fb-share-thought {
        left: 165px;

        top: 240px;
    }

    .fb-header-name {
        font-size: 28px;
    }

    .fb-name-nick {
        font-size: 18px;
    }

    .fb-header-actions {
        flex-wrap: wrap;

        gap: 8px;
    }
}

@media (max-width: 700px) {

    .profile-container {
        padding: 0;
    }

    .fb-header {
        border-radius: 0;
    }

    .fb-header .cover-photo {
        height: 140px;

        border-radius: 0;
    }

    .fb-header-row {
        flex-wrap: wrap;

        margin-top: -48px;

        gap: 10px;
    }

    .fb-avatar-wrap .profile-photo {
        width: 110px;

        height: 110px;
    }

    .fb-avatar-wrap .profile-photo > * {
        border-width: 3px;
    }

    .fb-share-thought {
        left: 128px;

        top: 112px;

        padding: 7px 14px;

        font-size: 13px;
    }

    .fb-avatar-wrap {
        flex: 0 0 auto;
    }

.fb-header-info {
        flex: 1 1 0%;

        width: auto;

        min-width: 0;

        padding-top: 64px;
    }

    .fb-header-name {
        font-size: 24px;
    }

    .fb-name-nick {
        font-size: 16px;
    }

.fb-header-actions {
        width: 100%;

        margin-left: 0;

        padding: 8px 0 0;
    }

    .fb-primary-btn {
        flex: 1;

        min-width: 0;
    }

    .fb-tabs-bar {
        height: 60px;

        overflow-x: auto;

        overflow-y: hidden;

        padding: 0 4px;
    }

    .fb-tabs-bar button {
        height: 60px;

        padding: 0 13px;

        font-size: 15px;
    }

    .fb-header-divider {
        margin: 14px 16px 0;
    }
}

/* ---------- TIMELINE PHOTOS SECTION (FB reference) ---------- */

.fb-timeline-photos-card .card-title {
    display: flex;

    align-items: center;

    justify-content: space-between;
}

.fb-timeline-photos-card .card-title h2 {
    font-size: 20px;
}

.fb-timeline-photos-card .card-title a {
    font-size: 15px;

    font-weight: 600;

    color: #1877f2;

    padding: 6px 10px;
}

.fb-timeline-photos-card .card-title a:hover {
    background: rgba(24, 119, 242, 0.12);

    text-decoration: none;
}

.fb-timeline-photos-card .fb-mini-photos {
    grid-template-columns: repeat(4, 1fr);

    gap: 4px;
}

.fb-timeline-photos-card .fb-mini-photos .profile-photo-item {
    background: #3a3b3c;

    cursor: pointer;
}

body:not(.dark-mode) .fb-timeline-photos-card .fb-mini-photos .profile-photo-item {
    background: #f0f2f5;
}

.fb-timeline-photos-card .fb-mini-photos .empty-message {
    font-size: 14px;

    color: #b0b3b8;
}

body:not(.dark-mode) .fb-timeline-photos-card .fb-mini-photos .empty-message {
    color: #65676b;
}

@media (max-width: 700px) {
    .fb-timeline-photos-card .fb-mini-photos {
        grid-template-columns: repeat(2, 1fr);

        gap: 4px;
    }
}

/* ---------- OTHER USER PROFILE (user-profile.html) ---------- */

.fb-header-actions #upFriendButton {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}

.fb-header-actions .socialhub-blocked-note {
    font-size: 14px;

    font-weight: 600;

    color: #b0b3b8;

    background: #3a3b3c;

    padding: 8px 14px;

    border-radius: 8px;
}

body:not(.dark-mode) .fb-header-actions .socialhub-blocked-note {
    color: #65676b;

    background: #f0f2f5;
}

/* ---------- POST FILTERS (Recents / Photos / Videos) ---------- */

.fb-post-filters {
    display: flex;

    align-items: center;

    gap: 4px;

    margin-bottom: 14px;

    padding-bottom: 2px;

    border-bottom: 1px solid #3e4042;
}

.fb-post-filters button {
    background: transparent;

    border: none;

    border-radius: 8px;

    padding: 8px 14px;

    font-size: 14px;

    font-weight: 600;

    color: #b0b3b8;

    cursor: pointer;

    position: relative;

    transition: background 0.15s, color 0.15s;
}

.fb-post-filters button:hover {
    background: #3a3b3c;
}

.fb-post-filters button.active {
    color: #1877f2;
}

.fb-post-filters button.active::after {
    content: "";

    position: absolute;

    left: 10px;

    right: 10px;

    bottom: -3px;

    height: 3px;

    background: #1877f2;

    border-radius: 3px 3px 0 0;
}

body:not(.dark-mode) .fb-post-filters {
    border-bottom-color: #ced0d4;
}

body:not(.dark-mode) .fb-post-filters button {
    color: #65676b;
}

body:not(.dark-mode) .fb-post-filters button:hover {
    background: #f0f2f5;
}

body:not(.dark-mode) .fb-post-filters button.active {
    color: #1877f2;
}

/* ---------- FULLSCREEN PHOTO VIEWER (avatar preview) ---------- */

.socialhub-photo-viewer {
    position: fixed;

    inset: 0;

    z-index: 20000;

    background: rgba(0, 0, 0, 0.9);

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: zoom-out;
}

.socialhub-photo-viewer img {
    max-width: 90vw;

    max-height: 90vh;

    border-radius: 8px;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

.socialhub-photo-viewer-close {
    position: absolute;

    top: 16px;

    right: 16px;

    width: 42px;

    height: 42px;

    border: none;

    border-radius: 50%;

    background: #3a3b3c;

    color: #e4e6eb;

    font-size: 18px;

    cursor: pointer;

    transition: background 0.15s;
}

.socialhub-photo-viewer-close:hover {
    background: #4e4f50;
}

/* ---------- COVER PICKER (Select from photos) ---------- */

.socialhub-cover-picker {
    position: fixed;

    inset: 0;

    z-index: 20000;

    background: rgba(0, 0, 0, 0.7);

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;
}

.socialhub-cover-picker-box {
    width: 100%;

    max-width: 560px;

    max-height: 80vh;

    overflow-y: auto;

    background: #242526;

    border-radius: 12px;

    padding: 18px;

    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

body:not(.dark-mode) .socialhub-cover-picker-box {
    background: #ffffff;
}

.socialhub-cover-picker-head {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 14px;
}

.socialhub-cover-picker-head h3 {
    margin: 0;

    font-size: 19px;

    color: #e4e6eb;
}

body:not(.dark-mode) .socialhub-cover-picker-head h3 {
    color: #050505;
}

.socialhub-cover-picker-close {
    width: 36px;

    height: 36px;

    border: none;

    border-radius: 50%;

    background: #3a3b3c;

    color: #e4e6eb;

    font-size: 15px;

    cursor: pointer;
}

.socialhub-cover-picker-close:hover {
    background: #4e4f50;
}

body:not(.dark-mode) .socialhub-cover-picker-close {
    background: #e4e6eb;

    color: #050505;
}

.socialhub-cover-picker-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 8px;
}

.socialhub-cover-picker-grid img {
    width: 100%;

    aspect-ratio: 4 / 3;

    object-fit: cover;

    border-radius: 8px;

    cursor: pointer;

    transition: transform 0.15s, box-shadow 0.15s;
}

.socialhub-cover-picker-grid img:hover {
    transform: scale(1.03);

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

/* ---------- FRIEND CARD MENU (⋯) ---------- */

.friend-mini {
    position: relative;
}

.socialhub-friend-menu-btn {
    position: absolute;

    top: 2px;

    right: 2px;

    width: 22px;

    height: 22px;

    border: none;

    border-radius: 50%;

    background: rgba(0, 0, 0, 0.35);

    color: #ffffff;

    font-size: 13px;

    line-height: 1;

    cursor: pointer;

    opacity: 0;

    transition: opacity 0.15s, background 0.15s;
}

.friend-mini:hover .socialhub-friend-menu-btn {
    opacity: 1;
}

.socialhub-friend-menu-btn:hover {
    background: rgba(0, 0, 0, 0.6);
}

/* ---------- PHOTOS TAB CHIPS ---------- */

.fb-photo-chips {
    display: flex;

    align-items: center;

    gap: 6px;

    flex-wrap: wrap;

    margin-bottom: 14px;
}

.fb-photo-chips button {
    background: transparent;

    border: 1px solid #3e4042;

    border-radius: 999px;

    padding: 7px 14px;

    font-size: 13px;

    font-weight: 600;

    color: #b0b3b8;

    cursor: pointer;

    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.fb-photo-chips button:hover {
    background: #3a3b3c;
}

.fb-photo-chips button.active {
    background: rgba(24, 119, 242, 0.15);

    border-color: #1877f2;

    color: #1877f2;
}

body:not(.dark-mode) .fb-photo-chips button {
    border-color: #ced0d4;

    color: #65676b;
}

body:not(.dark-mode) .fb-photo-chips button:hover {
    background: #f0f2f5;
}

body:not(.dark-mode) .fb-photo-chips button.active {
    background: rgba(24, 119, 242, 0.1);

    color: #1877f2;
}

/* ---------- LIGHTBOX DOWNLOAD BUTTON ---------- */

.post-lightbox-download {
    position: absolute;

    top: 10px;

    right: 52px;

    width: 34px;

    height: 34px;

    border-radius: 50%;

    background: #e4e6eb;

    color: #1c1e21;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 14px;

    text-decoration: none;

    cursor: pointer;

    z-index: 5;
}

.post-lightbox-download:hover {
    background: #d8dadf;
}

body.dark-mode .post-lightbox-download {
    background: #3a3b3c;

    color: #e4e6eb;
}

/* ============ STEP 1 � COVER REPOSITION MODAL ============ */

.socialhub-reposition-modal {
    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, 0.7);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 100000;

    padding: 20px;
}

.socialhub-reposition-box {
    background: #fff;

    width: 100%;

    max-width: 660px;

    border-radius: 10px;

    overflow: hidden;

    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

body.dark-mode .socialhub-reposition-box {
    background: #242526;
}

.socialhub-reposition-head {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 14px 18px;

    border-bottom: 1px solid #e4e6eb;
}

body.dark-mode .socialhub-reposition-head {
    border-bottom-color: #3a3b3c;
}

.socialhub-reposition-head h3 {
    font-size: 17px;

    margin: 0;
}

.socialhub-reposition-close {
    background: none;

    border: none;

    font-size: 18px;

    cursor: pointer;

    padding: 6px 10px;

    border-radius: 50%;

    color: inherit;
}

.socialhub-reposition-close:hover {
    background: rgba(0, 0, 0, 0.08);
}

.socialhub-reposition-hint {
    padding: 0 18px;

    margin: 12px 0 0;

    font-size: 13px;

    color: #65676b;
}

body.dark-mode .socialhub-reposition-hint {
    color: #b0b3b8;
}

.socialhub-reposition-stage {
    margin: 14px 18px;

    border: 2px dashed #ced0d4;

    border-radius: 8px;

    overflow: hidden;

    height: 320px;

    cursor: grab;

    touch-action: none;
}

.socialhub-reposition-stage:active {
    cursor: grabbing;
}

.socialhub-reposition-preview {
    width: 100%;

    height: 100%;

    background-repeat: no-repeat;

    background-size: cover;

    background-position: 50% 50%;

    user-select: none;
}

.socialhub-reposition-sliders {
    display: flex;

    flex-direction: column;

    gap: 12px;

    padding: 0 18px 14px;
}

.socialhub-reposition-sliders label {
    display: flex;

    flex-direction: column;

    gap: 6px;

    font-size: 13px;

    color: #65676b;
}

body.dark-mode .socialhub-reposition-sliders label {
    color: #b0b3b8;
}

.socialhub-reposition-sliders input[type="range"] {
    width: 100%;

    accent-color: #1877f2;
}

.socialhub-reposition-actions {
    display: flex;

    justify-content: flex-end;

    gap: 10px;

    padding: 14px 18px;

    border-top: 1px solid #e4e6eb;
}

body.dark-mode .socialhub-reposition-actions {
    border-top-color: #3a3b3c;
}

.socialhub-reposition-actions button {
    padding: 9px 18px;

    border-radius: 6px;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    border: none;
}

.socialhub-reposition-cancel {
    background: #e4e6eb;

    color: #050505;
}

body.dark-mode .socialhub-reposition-cancel {
    background: #3a3b3c;

    color: #e4e6eb;
}

.socialhub-reposition-save {
    background: #1877f2;

    color: #fff;
}

.socialhub-reposition-save:hover {
    background: #166fe5;
}

/* ============ STEP 5 — REELS TILE POLISH ============ */

#profileVideos .profile-photo-video-badge {
    top: 50%;

    left: 50%;

    right: auto;

    width: 46px;

    height: 46px;

    transform: translate(-50%, -50%);

    background: rgba(0, 0, 0, 0.55);

    font-size: 16px;

    border: 2px solid rgba(255, 255, 255, 0.85);
}

#profileVideos .profile-photo-video-badge i {
    margin-left: 3px;
}

#profileVideos .profile-photo-video-caption {
    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    margin: 0;

    padding: 22px 10px 8px;

    font-size: 12px;

    color: #fff;

    background: linear-gradient(
        transparent,
        rgba(0, 0, 0, 0.65)
    );

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    pointer-events: none;
}

/* ====================================================== */
/* PROFILE LAYOUT POLISH (complete layout structure)      */
/* ====================================================== */

/* ---- Intro card: highlights section inside ---- */

.fb-highlights-inside {
    margin-top: 14px;

    padding-top: 12px;

    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

body:not(.dark-mode) .fb-highlights-inside {
    border-top-color: #ced0d4;
}

/* ---- About: two-column layout ---- */

.about-layout {
    display: flex;

    gap: 28px;

    align-items: flex-start;
}

.about-sidebar {
    width: 230px;

    flex: 0 0 230px;

    display: flex;

    flex-direction: column;

    gap: 4px;

    position: sticky;

    top: 84px;
}

.about-sidebar button {
    display: flex;

    align-items: center;

    gap: 10px;

    width: 100%;

    padding: 10px 14px;

    border: 0;

    border-radius: 8px;

    background: transparent;

    color: inherit;

    font-size: 15px;

    text-align: left;

    cursor: pointer;
}

.about-sidebar button:hover {
    background: rgba(255, 255, 255, 0.08);
}

.about-sidebar button.active {
    background: #1877f2;

    color: #ffffff;

    font-weight: 600;
}

body:not(.dark-mode) .about-sidebar button:hover {
    background: #e4e6eb;
}

.about-content {
    flex: 1;

    min-width: 0;
}

.about-content .about-block {
    margin-bottom: 24px;
}

/* ---- Friends tab: search box ---- */

.fb-friends-search {
    width: 100%;

    margin: 4px 0 18px;

    padding: 10px 14px 10px 38px;

    border: 1px solid transparent;

    border-radius: 50px;

    background: rgba(255, 255, 255, 0.08);

    color: inherit;

    font-size: 14px;

    outline: none;
}

.fb-friends-search::placeholder {
    color: #a8b3bf;
}

body:not(.dark-mode) .fb-friends-search {
    background: #f0f2f5;

    color: #050505;
}

body:not(.dark-mode) .fb-friends-search::placeholder {
    color: #65676b;
}

/* ---- Reels: portrait thumbnails ---- */

#profileVideos .profile-photo-item {
    aspect-ratio: 3 / 4;
}

#profileVideos .profile-photo-item img,
#profileVideos .profile-photo-item video {
    object-fit: cover;
}

/* ---- Mobile: About + Friends ---- */

@media (max-width: 700px) {

    .about-layout {
        flex-direction: column;

        gap: 16px;
    }

    .about-sidebar {
        width: 100%;

        flex: none;

        flex-direction: row;

        overflow-x: auto;

        position: static;

        padding-bottom: 6px;
    }

    .about-sidebar button {
        width: auto;

        white-space: nowrap;
    }

    .fb-friends-search {
        margin-bottom: 12px;
    }
}

/* ============================================================ */
/* PROFILE HEADER — FULL REBUILD (ID-scoped, FB-style)          */
/* Order: NAVBAR → COVER → IDENTITY (avatar overlap) → ACTIONS  */
/*        → DETAILS → TABS → MAIN CONTENT                       */
/* ============================================================ */

#fbProfileHeader {
    position: relative;

    height: auto;

    margin-bottom: 0;

    background: #242526;

    border-radius: 10px;

    overflow: visible;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);

    padding-bottom: 12px;
}

/* ---- COVER: large horizontal banner ---- */

#fbProfileHeader .cover-photo {
    height: 380px;

    background-color: #3a3b3c;

    background-size: cover;

    background-position: center;

    border-radius: 10px 10px 0 0;
}

/* Edit Cover button: bottom-right of the cover */

#fbProfileHeader .socialhub-cover-overlay {
    top: auto;

    bottom: 16px;

    right: 16px;

    background: #ffffff;

    color: #050505;

    font-size: 15px;

    font-weight: 700;

    padding: 9px 16px;

    border-radius: 8px;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

#fbProfileHeader .socialhub-cover-overlay:hover {
    background: #f0f2f5;
}

/* ---- IDENTITY ROW: avatar overlaps cover 40/60 ---- */

#fbProfileHeader .fb-header-row {
    position: relative;

    z-index: 4;

    display: flex;

    align-items: flex-start;

    gap: 20px;

    margin-top: -72px;

    padding: 0 28px;
}

#fbProfileHeader .fb-avatar-wrap {
    position: static;

    left: auto;

    bottom: auto;

    z-index: auto;

    flex: 0 0 auto;
}

#fbProfileHeader .fb-avatar-wrap .profile-photo {
    width: 180px;

    height: 180px;

    margin: 0;

    padding: 0;

    border-radius: 50%;

    background: #3a3b3c;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);

    overflow: hidden;
}

#fbProfileHeader .fb-avatar-wrap .profile-photo > * {
    border: 4px solid #ffffff;

    box-sizing: border-box;
}

/* ---- IDENTITY INFO: name / friends / bio / details ---- */

#fbProfileHeader .fb-header-info {
    flex: 1;

    min-width: 0;

    padding-top: 96px;
}

#fbProfileHeader .fb-header-name {
    margin: 0;

    font-size: 32px;

    font-weight: 800;

    line-height: 1.15;

    letter-spacing: -0.3px;

    color: #ffffff;
}

#fbProfileHeader .fb-name-nick {
    margin-left: 8px;

    font-size: 22px;

    font-weight: 500;

    color: #b0b3b8;
}

#fbProfileHeader .fb-friends-line {
    margin: 6px 0 0;

    font-size: 15px;

    color: #b0b3b8;
}

#fbProfileHeader .fb-header-bio {
    margin: 10px 0 0;

    font-size: 16px;

    line-height: 1.45;

    color: #e4e6eb;
}

#fbProfileHeader .fb-info-row {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 8px 22px;

    margin-top: 14px;

    font-size: 15px;

    color: #b0b3b8;
}

#fbProfileHeader .fb-info-item {
    display: inline-flex;

    align-items: center;

    gap: 6px;
}

#fbProfileHeader .fb-info-item i {
    font-size: 16px;

    color: #8a8f98;
}

/* ---- ACTION BUTTONS: right side, aligned with identity ---- */

#fbProfileHeader .fb-header-actions {
    display: flex;

    align-items: flex-start;

    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 10px;

    margin-left: auto;

    padding-top: 96px;
}

/* ---- DIVIDER + TABS ---- */

#fbProfileHeader .fb-header-divider {
    height: 1px;

    margin: 24px 28px 0;

    background: #3e4042;
}

#fbProfileHeader .fb-tabs-bar {
    height: 65px;

    padding: 0 12px;

    background: transparent;

    border-radius: 0;

    box-shadow: none;
}

#fbProfileHeader .fb-tabs-bar button {
    height: 65px;

    padding: 0 18px;

    font-size: 16px;

    font-weight: 600;

    color: #b0b3b8;
}

#fbProfileHeader .fb-tabs-bar button.active {
    color: #1877f2;
}

#fbProfileHeader .fb-tabs-bar button.active::after {
    content: "";

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    width: 44px;

    bottom: 0;

    height: 3px;

    background: #1877f2;

    border-radius: 3px 3px 0 0;
}

/* ---- MAIN CONTENT gap ---- */

#fbProfileHeader + .fb-body {
    margin-top: 24px;
}

/* ---- TABLET ---- */

@media (max-width: 900px) {

    #fbProfileHeader .cover-photo {
        height: 300px;
    }

    #fbProfileHeader .fb-header-row {
        margin-top: -60px;

        gap: 14px;

        padding: 0 16px;
    }

    #fbProfileHeader .fb-avatar-wrap .profile-photo {
        width: 150px;

        height: 150px;
    }

    #fbProfileHeader .fb-header-info,
    #fbProfileHeader .fb-header-actions {
        padding-top: 82px;
    }

    #fbProfileHeader .fb-header-name {
        font-size: 28px;
    }

    #fbProfileHeader .fb-name-nick {
        font-size: 18px;
    }
}

/* ---- MOBILE ---- */

@media (max-width: 700px) {

    #fbProfileHeader {
        border-radius: 0;

        padding-bottom: 0;
    }

    #fbProfileHeader .cover-photo {
        height: 150px;

        border-radius: 0;
    }

    #fbProfileHeader .fb-header-row {
        flex-wrap: wrap;

        margin-top: -48px;

        gap: 10px;

        padding: 0 14px;
    }

    #fbProfileHeader .fb-avatar-wrap .profile-photo {
        width: 120px;

        height: 120px;
    }

    #fbProfileHeader .fb-avatar-wrap .profile-photo > * {
        border-width: 3px;
    }

    #fbProfileHeader .fb-header-info {
        flex: 1 1 0%;

        width: auto;

        min-width: 0;

        padding-top: 60px;
    }

    #fbProfileHeader .fb-header-name {
        font-size: 24px;
    }

    #fbProfileHeader .fb-name-nick {
        font-size: 16px;
    }

    #fbProfileHeader .fb-header-actions {
        width: 100%;

        justify-content: flex-start;

        margin-left: 0;

        padding: 10px 0 0;
    }

    #fbProfileHeader .fb-primary-btn {
        flex: 1;

        min-width: 0;
    }

    #fbProfileHeader .fb-header-divider {
        margin: 18px 14px 0;
    }

    #fbProfileHeader .fb-tabs-bar {
        height: 60px;

        overflow-x: auto;

        overflow-y: hidden;

        padding: 0 4px;
    }

    #fbProfileHeader .fb-tabs-bar button {
        height: 60px;

        padding: 0 13px;

        font-size: 15px;
    }

    #fbProfileHeader + .fb-body {
        margin-top: 16px;
    }
}

/* ---------- LUCIDE ICON SYSTEM (profile-icons.js) ---------- */

.socialhub-lucide {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    vertical-align: middle;
}

.lucide {
    width: 18px;

    height: 18px;

    stroke-width: 2;
}

.top-icons button .lucide {
    width: 17px;

    height: 17px;
}

.fb-center-nav .fb-nav-btn .lucide {
    width: 20px;

    height: 20px;
}

.topbar .search-box span .lucide {
    width: 15px;

    height: 15px;
}

#fbProfileHeader .fb-header-actions .lucide {
    width: 16px;

    height: 16px;
}

#fbProfileHeader .fb-tabs button .lucide {
    width: 18px;

    height: 18px;
}

.fb-detail .lucide,
.fb-card-row .lucide {
    width: 16px;

    height: 16px;
}

.fb-composer-actions .lucide,
.fb-composer-tools .lucide {
    width: 18px;

    height: 18px;
}

.fb-post-actions .lucide,
.post-actions .lucide {
    width: 20px;

    height: 20px;
}

.socialhub-menu-icon .lucide {
    width: 17px;

    height: 17px;
}

.fb-primary-btn .lucide,
.fb-ghost-btn .lucide,
.fb-square-btn .lucide {
    width: 16px;

    height: 16px;
}

body.dark-mode .lucide {
    color: #b0b3b8;
}

/* ============================================================ */
/* PROFILE STACK LAYOUT — About master design                   */
/* Order: ABOUT → FRIENDS → PHOTOS → REELS → EVENTS → GROUPS    */
/* ============================================================ */

.fb-stack-body {
    display: block;

    max-width: 1150px;

    margin: 0 auto;

    padding: 16px 16px 40px;
}

.fb-stack-body > .profile-card {
    margin-bottom: 16px;
}

#aboutSection,
#friendsCard,
#photosCard,
#videosCard,
#eventsCard,
#groupsCard,
#fbPostsStack {
    scroll-margin-top: 76px;
}

/* ---------- ABOUT CARD ---------- */

.fb-about-card {
    background: #242526;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 10px;

    padding: 24px 0;
}

.fb-about-layout {
    display: flex;

    align-items: flex-start;

    gap: 0;
}

.fb-about-side {
    flex: 0 0 25%;

    max-width: 280px;

    min-width: 210px;

    padding: 0 20px 0 24px;

    border-right: 1px solid rgba(255, 255, 255, 0.12);

    position: sticky;

    top: 76px;
}

.fb-about-title {
    margin: 0 0 14px;

    font-size: 22px;

    font-weight: 800;

    color: #ffffff;
}

.fb-about-side button {
    display: block;

    width: 100%;

    padding: 10px 12px;

    margin-bottom: 2px;

    border: 0;

    border-radius: 8px;

    background: transparent;

    color: #b0b3b8;

    font-size: 15px;

    font-weight: 500;

    text-align: left;

    cursor: pointer;
}

.fb-about-side button:hover {
    background: rgba(255, 255, 255, 0.08);
}

.fb-about-side button.active {
    background: #2d88ff;

    color: #ffffff;

    font-weight: 700;
}

.fb-about-content {
    flex: 1;

    min-width: 0;

    padding: 4px 28px 4px 28px;
}

.fb-about-block {
    display: none;
}

.fb-about-block.active {
    display: block;
}

.fb-about-section-head {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 10px;
}

.fb-about-section-head h3 {
    margin: 0;

    font-size: 20px;

    font-weight: 700;

    color: #ffffff;
}

.fb-about-edit {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 30px;

    height: 30px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.08);

    color: #b0b3b8;

    font-size: 14px;

    cursor: pointer;
}

.fb-about-edit:hover {
    background: rgba(255, 255, 255, 0.15);
}

.fb-about-bio {
    margin: 0 0 4px;

    font-size: 15px;

    line-height: 1.5;

    color: #b0b3b8;
}

.fb-about-divider {
    height: 1px;

    margin: 18px 0;

    background: rgba(255, 255, 255, 0.12);
}

.fb-about-card .about-row {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 7px 0;

    font-size: 15px;

    color: #e4e6eb;
}

.fb-about-card .about-row i {
    width: 20px;

    text-align: center;

    color: #b0b3b8;

    font-size: 16px;

    flex: 0 0 20px;
}

.fb-about-card .about-row .about-label {
    color: #b0b3b8;

    min-width: 132px;

    font-size: 14px;
}

.fb-about-card .about-row a {
    color: #2d88ff;

    text-decoration: none;
}

.fb-about-group-label {
    margin: 4px 0 8px;

    font-size: 15px;

    font-weight: 700;

    color: #e4e6eb;
}

.fb-about-add {
    margin-top: 14px;

    padding: 9px 14px;

    border: 0;

    border-radius: 8px;

    background: rgba(255, 255, 255, 0.08);

    color: #e4e6eb;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;
}

.fb-about-add:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* ---------- HIGHLIGHTS inside About Intro ---------- */

.fb-about-highlights .fb-side-title {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 10px;
}

.fb-about-highlights .fb-side-title h2 {
    margin: 0;

    font-size: 15px;

    font-weight: 700;

    color: #e4e6eb;
}

.fb-about-highlights .fb-side-title a {
    color: #2d88ff;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;
}

/* ---------- STACK CARDS (Friends / Photos / Reels / Events / Groups) ---------- */

.fb-stack-card {
    background: #242526;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 10px;

    padding: 20px;
}

.fb-stack-head {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    margin-bottom: 6px;
}

.fb-stack-title h2 {
    margin: 0;

    font-size: 20px;

    font-weight: 700;

    color: #ffffff;
}

.fb-stack-title p {
    margin: 2px 0 0;

    font-size: 14px;

    color: #b0b3b8;
}

.fb-stack-actions {
    display: flex;

    align-items: center;

    gap: 8px;
}

.fb-stack-link {
    border: 0;

    border-radius: 6px;

    padding: 8px 12px;

    background: rgba(255, 255, 255, 0.08);

    color: #e4e6eb;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;
}

.fb-stack-link:hover {
    background: rgba(255, 255, 255, 0.15);
}

.fb-stack-tabs {
    display: flex;

    align-items: center;

    gap: 4px;

    margin: 10px 0 16px;

    padding-bottom: 10px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.12);

    overflow-x: auto;
}

.fb-stack-tabs button {
    position: relative;

    border: 0;

    background: transparent;

    color: #b0b3b8;

    font-size: 15px;

    font-weight: 600;

    padding: 8px 12px;

    border-radius: 8px;

    white-space: nowrap;

    cursor: pointer;
}

.fb-stack-tabs button:hover {
    background: rgba(255, 255, 255, 0.08);
}

.fb-stack-tabs button.active {
    color: #2d88ff;
}

.fb-stack-tabs button.active::after {
    content: "";

    position: absolute;

    left: 12px;

    right: 12px;

    bottom: -11px;

    height: 3px;

    border-radius: 3px;

    background: #2d88ff;
}

.fb-tab-spacer {
    flex: 1;
}

.fb-tab-search {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 36px;

    height: 36px;

    padding: 0 !important;

    border-radius: 50% !important;
}

.fb-see-all {
    display: block;

    width: 100%;

    margin-top: 18px;

    padding: 9px 0;

    border: 0;

    border-radius: 8px;

    background: rgba(255, 255, 255, 0.08);

    color: #e4e6eb;

    font-size: 14px;

    font-weight: 600;

    text-align: center;

    text-decoration: none;

    cursor: pointer;
}

.fb-see-all:hover {
    background: rgba(255, 255, 255, 0.15);
}

.fb-stack-empty {
    padding: 28px 0;

    text-align: center;

    color: #b0b3b8;

    font-size: 15px;
}

/* ---------- grids: Friends 2-col / Photos 6-col / Reels 7-col ---------- */

.fb-stack-card .friends-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 14px;
}

.fb-stack-card .photo-grid {
    display: grid;

    grid-template-columns: repeat(6, 1fr);

    gap: 6px;
}

#videosCard .photo-grid {
    grid-template-columns: repeat(7, 1fr);
}

.fb-stack-card .photo-grid .profile-photo-item {
    aspect-ratio: 1 / 1;

    border-radius: 8px;

    overflow: hidden;
}

#videosCard .photo-grid .profile-photo-item {
    aspect-ratio: 3 / 4;
}

/* ---------- chips (Hobbies / Interests) ---------- */

.fb-chip-wrap {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 6px;
}

.fb-chip {
    display: inline-flex;

    align-items: center;

    padding: 7px 14px;

    border-radius: 50px;

    background: rgba(255, 255, 255, 0.08);

    color: #e4e6eb;

    font-size: 14px;

    font-weight: 500;
}

/* ---------- posts stack ---------- */

.fb-posts-stack {
    display: flex;

    flex-direction: column;

    gap: 16px;
}

/* ---------- LIGHT THEME ---------- */

body:not(.dark-mode) .fb-about-card,
body:not(.dark-mode) .fb-stack-card {
    background: #ffffff;

    border: none;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

body:not(.dark-mode) .fb-about-title,
body:not(.dark-mode) .fb-about-section-head h3,
body:not(.dark-mode) .fb-stack-title h2,
body:not(.dark-mode) .fb-about-group-label {
    color: #050505;
}

body:not(.dark-mode) .fb-about-side {
    border-right-color: #ced0d4;
}

body:not(.dark-mode) .fb-about-side button {
    color: #65676b;
}

body:not(.dark-mode) .fb-about-side button:hover {
    background: #e4e6eb;
}

body:not(.dark-mode) .fb-about-card .about-row {
    color: #050505;
}

body:not(.dark-mode) .fb-about-card .about-row i,
body:not(.dark-mode) .fb-about-card .about-row .about-label,
body:not(.dark-mode) .fb-about-bio,
body:not(.dark-mode) .fb-about-edit,
body:not(.dark-mode) .fb-stack-title p,
body:not(.dark-mode) .fb-stack-tabs button,
body:not(.dark-mode) .fb-stack-empty {
    color: #65676b;
}

body:not(.dark-mode) .fb-about-edit {
    background: #e4e6eb;
}

body:not(.dark-mode) .fb-about-divider,
body:not(.dark-mode) .fb-stack-tabs {
    border-color: #ced0d4;
}

body:not(.dark-mode) .fb-about-divider {
    background: #ced0d4;
}

body:not(.dark-mode) .fb-stack-link,
body:not(.dark-mode) .fb-see-all,
body:not(.dark-mode) .fb-about-add,
body:not(.dark-mode) .fb-chip {
    background: #e4e6eb;

    color: #050505;
}

body:not(.dark-mode) .fb-stack-tabs button.active {
    color: #1877f2;
}

body:not(.dark-mode) .fb-stack-tabs button.active::after {
    background: #1877f2;
}

body:not(.dark-mode) .fb-about-highlights .fb-side-title h2 {
    color: #050505;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 900px) {

    .fb-stack-card .photo-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    #videosCard .photo-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 700px) {

    .fb-about-layout {
        flex-direction: column;
    }

    .fb-about-side {
        flex: none;

        width: 100%;

        max-width: none;

        min-width: 0;

        position: static;

        border-right: 0;

        border-bottom: 1px solid rgba(255, 255, 255, 0.12);

        display: flex;

        overflow-x: auto;

        gap: 4px;

        padding: 0 16px 12px;
    }

    body:not(.dark-mode) .fb-about-side {
        border-bottom-color: #ced0d4;
    }

    .fb-about-title {
        display: none;
    }

    .fb-about-side button {
        width: auto;

        white-space: nowrap;
    }

    .fb-about-content {
        padding: 16px;
    }

    .fb-stack-card .photo-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    #videosCard .photo-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .fb-stack-head {
        flex-wrap: wrap;
    }

    .fb-stack-actions {
        width: 100%;

        flex-wrap: wrap;
    }
}

/* ======================================================
   PERSONAL DETAILS EDIT SYSTEM
   ====================================================== */

.pd-heading {
    color: #e4e6eb;

    font-size: 16px;
    font-weight: 700;

    margin: 22px 0 8px 0;
}

.fb-about-block .pd-heading:first-child {
    margin-top: 4px;
}

.pd-row {
    position: relative;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 9px 10px;

    border-radius: 8px;
}

.pd-row:hover {
    background: #3a3b3c;
}

.pd-row-icon {
    color: #b0b3b8;

    font-size: 17px;
    font-style: normal;

    width: 18px;

    text-align: center;

    flex-shrink: 0;
}

.pd-info {
    display: flex;
    flex-direction: column;
    gap: 1px;

    min-width: 0;

    flex: 1;
}

.pd-value {
    color: #e4e6eb;

    font-size: 15px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pd-sub {
    color: #b0b3b8;

    font-size: 12px;
}

.pd-add {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #2d88ff;

    font-size: 15px;
    font-weight: 600;

    cursor: pointer;
}

.pd-add i {
    color: #2d88ff;

    font-size: 14px;
    font-style: normal;
}

.pd-add:hover {
    text-decoration: underline;
}

.pd-vis,
.pd-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    border: none;

    background: transparent;

    border-radius: 50%;

    cursor: pointer;

    flex-shrink: 0;
}

.pd-vis i,
.pd-edit i {
    color: #b0b3b8;

    font-size: 17px;
    font-style: normal;
}

.pd-vis:hover,
.pd-edit:hover {
    background: #4e4f50;
}

.pd-vis:hover i,
.pd-edit:hover i {
    color: #e4e6eb;
}

.pd-vis-menu {
    position: absolute;
    top: 44px;
    right: 8px;
    z-index: 40;

    display: flex;
    flex-direction: column;

    min-width: 190px;

    padding: 6px;

    background: #242526;

    border: 1px solid #3e4042;

    border-radius: 10px;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

.pd-vis-menu button {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 9px 10px;

    border: none;

    background: transparent;

    color: #e4e6eb;

    font-size: 14px;

    text-align: left;

    border-radius: 6px;

    cursor: pointer;
}

.pd-vis-menu button:hover {
    background: #3a3b3c;
}

.pd-vis-menu button i {
    color: #b0b3b8;

    font-size: 16px;
    font-style: normal;
}

/* ---------------- EDIT MODAL ---------------- */

.pd-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.65);

    padding: 16px;
}

.pd-modal-box {
    width: 100%;
    max-width: 500px;

    max-height: 88vh;

    overflow-y: auto;

    background: #242526;

    border-radius: 12px;

    padding: 18px 20px 14px 20px;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}

.pd-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pd-modal-head h3 {
    color: #e4e6eb;

    font-size: 18px;
    font-weight: 700;

    margin: 0;
}

.pd-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    border: none;

    background: #3a3b3c;

    border-radius: 50%;

    cursor: pointer;
}

.pd-modal-close i {
    color: #b0b3b8;

    font-size: 16px;
    font-style: normal;
}

.pd-modal-close:hover {
    background: #4e4f50;
}

.pd-modal-body {
    margin-top: 16px;
}

.pd-field-label {
    display: block;

    color: #e4e6eb;

    font-size: 13px;
    font-weight: 600;

    margin: 16px 0 6px 0;
}

.pd-input {
    width: 100%;

    padding: 10px 12px;

    border: none;

    background: #3a3b3c;

    border-radius: 6px;

    color: #e4e6eb;

    font-size: 14px;

    outline: none;

    box-sizing: border-box;
}

.pd-input:focus {
    border: 1px solid #2d88ff;

    padding: 9px 11px;
}

select.pd-input {
    appearance: none;

    -webkit-appearance: none;

    cursor: pointer;
}

.pd-help {
    color: #b0b3b8;

    font-size: 12px;

    margin: 14px 0 0 0;
}

.pd-modal-divider {
    border-top: 1px solid #3e4042;

    margin: 14px 0 10px 0;
}

.pd-modal-foot {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pd-foot-spacer {
    flex: 1;
}

.pd-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 8px 14px;

    border: none;

    border-radius: 6px;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
}

.pd-btn i {
    font-size: 14px;
    font-style: normal;
}

.pd-btn-save {
    background: #2d88ff;

    color: #fff;
}

.pd-btn-save:disabled {
    opacity: 0.5;

    cursor: not-allowed;
}

.pd-btn-cancel {
    background: #3a3b3c;

    color: #e4e6eb;
}

.pd-btn-cancel:hover {
    background: #4e4f50;
}

.pd-btn-remove {
    background: transparent;

    color: #f02849;
}

.pd-btn-remove:hover {
    background: #3a2b30;
}

.pd-btn-remove-cancel {
    color: #e4e6eb;
}

.pd-btn-ghost {
    background: #3a3b3c;

    color: #e4e6eb;

    padding: 10px 12px;

    white-space: nowrap;
}

.pd-btn-ghost:hover {
    background: #4e4f50;
}

/* ---------------- VISIBILITY CONTROL ---------------- */

.pd-vis-wrap {
    position: relative;

    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 6px;
}

.pd-vis-label {
    color: #b0b3b8;

    font-size: 13px;
}

.pd-vis-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 7px 11px;

    border: none;

    background: #3a3b3c;

    border-radius: 6px;

    color: #e4e6eb;

    font-size: 13px;

    cursor: pointer;
}

.pd-vis-btn i {
    color: #b0b3b8;

    font-size: 14px;
    font-style: normal;
}

.pd-vis-btn:hover {
    background: #4e4f50;
}

.pd-vis-menu-modal {
    top: 42px;
    right: auto;
    left: 76px;
}

/* ---------------- BIRTHDAY ---------------- */

.pd-birthday-row {
    display: flex;
    gap: 8px;
}

.pd-birthday-row .pd-input {
    flex: 1;
}

/* ---------------- RADIO / CHECKBOX LISTS ---------------- */

.pd-opt-list {
    max-height: 220px;

    overflow-y: auto;

    margin-top: 8px;

    border: 1px solid #3e4042;

    border-radius: 8px;

    padding: 4px;
}

.pd-opt-row {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 8px 10px;

    border-radius: 6px;

    color: #e4e6eb;

    font-size: 14px;

    cursor: pointer;
}

.pd-opt-row:hover {
    background: #3a3b3c;
}

.pd-opt-row input {
    accent-color: #2d88ff;

    width: 16px;
    height: 16px;

    cursor: pointer;
}

.pd-radio-row {
    margin: 4px 0;
}

/* ---------------- LANGUAGE SEARCH ---------------- */

.pd-search-box {
    position: relative;

    margin-top: 8px;
}

.pd-search-box i {
    position: absolute;
    top: 50%;
    left: 12px;

    transform: translateY(-50%);

    color: #b0b3b8;

    font-size: 14px;
    font-style: normal;
}

.pd-search-box .pd-input {
    padding-left: 34px;
}

.pd-search-box .pd-input:focus {
    padding-left: 33px;
}

/* ---------------- FAMILY ---------------- */

.pd-family-list {
    display: flex;
    flex-direction: column;
    gap: 6px;

    margin: 10px 0;
}

.pd-family-empty {
    color: #b0b3b8;

    font-size: 13px;

    margin: 0;
}

.pd-family-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    padding: 8px 10px;

    background: #3a3b3c;

    border-radius: 6px;

    color: #e4e6eb;

    font-size: 14px;
}

.pd-family-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 26px;
    height: 26px;

    border: none;

    background: transparent;

    border-radius: 50%;

    color: #b0b3b8;

    cursor: pointer;

    flex-shrink: 0;
}

.pd-family-remove:hover {
    background: #4e4f50;

    color: #e4e6eb;
}

.pd-family-remove i {
    font-size: 13px;
    font-style: normal;
}

.pd-family-add {
    display: flex;
    gap: 8px;
}

.pd-family-add .pd-family-relation {
    width: 38%;
    flex-shrink: 0;
}

.pd-family-add .pd-family-person {
    flex: 1;
}

/* ---------------- REMOVE CONFIRM ---------------- */

.pd-remove-confirm h4 {
    color: #e4e6eb;

    font-size: 16px;
    font-weight: 700;

    margin: 6px 0 4px 0;
}

.pd-remove-confirm p {
    color: #b0b3b8;

    font-size: 13px;

    margin: 0 0 8px 0;
}

/* ---------------- LIGHT THEME ---------------- */

body:not(.dark-mode) .pd-heading {
    color: #050505;
}

body:not(.dark-mode) .pd-row:hover {
    background: #f0f2f5;
}

body:not(.dark-mode) .pd-row-icon,
body:not(.dark-mode) .pd-sub,
body:not(.dark-mode) .pd-help {
    color: #65676b;
}

body:not(.dark-mode) .pd-value {
    color: #050505;
}

body:not(.dark-mode) .pd-add {
    color: #0866ff;
}

body:not(.dark-mode) .pd-add i {
    color: #0866ff;
}

body:not(.dark-mode) .pd-vis i,
body:not(.dark-mode) .pd-edit i {
    color: #65676b;
}

body:not(.dark-mode) .pd-vis:hover,
body:not(.dark-mode) .pd-edit:hover {
    background: #e4e6eb;
}

body:not(.dark-mode) .pd-vis:hover i,
body:not(.dark-mode) .pd-edit:hover i {
    color: #050505;
}

body:not(.dark-mode) .pd-vis-menu,
body:not(.dark-mode) .pd-modal-box {
    background: #ffffff;

    border-color: #ced0d4;
}

body:not(.dark-mode) .pd-vis-menu button,
body:not(.dark-mode) .pd-vis-menu button i {
    color: #050505;
}

body:not(.dark-mode) .pd-vis-menu button:hover,
body:not(.dark-mode) .pd-modal-close:hover,
body:not(.dark-mode) .pd-btn-cancel:hover,
body:not(.dark-mode) .pd-btn-ghost:hover,
body:not(.dark-mode) .pd-opt-row:hover,
body:not(.dark-mode) .pd-family-remove:hover {
    background: #f0f2f5;
}

body:not(.dark-mode) .pd-modal-head h3,
body:not(.dark-mode) .pd-field-label,
body:not(.dark-mode) .pd-opt-row,
body:not(.dark-mode) .pd-family-row,
body:not(.dark-mode) .pd-remove-confirm h4,
body:not(.dark-mode) .pd-vis-btn,
body:not(.dark-mode) .pd-remove-confirm h4 {
    color: #050505;
}

body:not(.dark-mode) .pd-input,
body:not(.dark-mode) .pd-btn-cancel,
body:not(.dark-mode) .pd-btn-ghost,
body:not(.dark-mode) .pd-modal-close,
body:not(.dark-mode) .pd-family-row,
body:not(.dark-mode) .pd-vis-btn {
    background: #f0f2f5;
}

body:not(.dark-mode) .pd-btn-save {
    background: #0866ff;

    color: #fff;
}

body:not(.dark-mode) .pd-family-empty {
    color: #65676b;
}

body:not(.dark-mode) .pd-btn-remove-cancel {
    color: #050505;
}

body:not(.dark-mode) .pd-modal-divider {
    border-color: #ced0d4;
}

body:not(.dark-mode) .pd-vis-menu button i,
body:not(.dark-mode) .pd-btn i,
body:not(.dark-mode) .pd-btn-remove-cancel i {
    color: #65676b;
}

body:not(.dark-mode) .pd-btn-remove {
    color: #f02849;
}

@media (max-width: 700px) {

    .pd-family-add {
        flex-wrap: wrap;
    }

    .pd-family-add .pd-family-relation {
        width: 100%;
    }

    .pd-birthday-row {
        flex-wrap: wrap;
    }
}

/* ---------------- LUCIDE SIZING (post-conversion svg) ---------------- */

.pd-row > svg.lucide {
    width: 18px;
    height: 18px;

    color: #b0b3b8;

    flex-shrink: 0;
}

.pd-vis svg.lucide,
.pd-edit svg.lucide,
.pd-modal-close svg.lucide,
.pd-vis-menu button svg.lucide {
    width: 16px;
    height: 16px;

    color: #b0b3b8;
}

.pd-add svg.lucide {
    width: 14px;
    height: 14px;

    color: #2d88ff;
}

.pd-btn svg.lucide,
.pd-vis-btn svg.lucide {
    width: 14px;
    height: 14px;
}

.pd-family-remove svg.lucide {
    width: 13px;
    height: 13px;
}

.pd-search-box svg.lucide {
    position: absolute;
    top: 50%;
    left: 12px;

    transform: translateY(-50%);

    color: #b0b3b8;
}

.pd-vis:hover svg.lucide,
.pd-edit:hover svg.lucide {
    color: #e4e6eb;
}

body:not(.dark-mode) .pd-row > svg.lucide,
body:not(.dark-mode) .pd-vis svg.lucide,
body:not(.dark-mode) .pd-edit svg.lucide,
body:not(.dark-mode) .pd-modal-close svg.lucide {
    color: #65676b;
}

body:not(.dark-mode) .pd-add svg.lucide {
    color: #0866ff;
}

/* ======================================================
   PROFILE MORE MENU — VIEW AS / SEARCH / HIGHLIGHTS / STATUS
   ====================================================== */

.fb-more-wrap .fb-more-menu {
    width: 340px;

    min-width: 340px;

    padding: 8px;

    border-radius: 12px;
}

.fb-more-wrap .fb-more-menu button {
    display: flex;
    align-items: center;
    gap: 14px;

    width: 100%;

    min-height: 48px;

    padding: 12px 14px;

    font-size: 15px;

    border: none;

    background: transparent;

    text-align: left;

    cursor: pointer;

    transition: background 0.15s;
}

.fb-more-wrap .fb-more-menu button i {
    color: #b0b3b8;

    font-size: 18px;
    font-style: normal;
}

.fb-more-wrap .fb-more-menu button:hover {
    background: #3a3b3c;
}

.fb-more-wrap .fb-more-menu button:hover i {
    color: #e4e6eb;
}

body:not(.dark-mode) .fb-more-wrap .fb-more-menu {
    background: #ffffff;

    border-color: #ced0d4;
}

body:not(.dark-mode) .fb-more-wrap .fb-more-menu button {
    color: #050505;
}

body:not(.dark-mode) .fb-more-wrap .fb-more-menu button i {
    color: #65676b;
}

body:not(.dark-mode) .fb-more-wrap .fb-more-menu button:hover {
    background: #f0f2f5;
}

body:not(.dark-mode) .fb-more-wrap .fb-more-menu button:hover i {
    color: #050505;
}

@media (max-width: 700px) {

    .fb-more-wrap .fb-more-menu {
        width: calc(100vw - 32px);

        min-width: 0;
    }
}

/* ---------------- VIEW AS ---------------- */

.fb-viewas-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;

    display: flex;
    align-items: center;
    gap: 12px;

    height: 56px;

    padding: 0 16px;

    background: #18191a;

    border-bottom: 1px solid #3e4042;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

body.fb-viewing-as .topbar {
    top: 56px;
}

.fb-viewas-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 12px;

    border: none;

    background: transparent;

    border-radius: 6px;

    color: #e4e6eb;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
}

.fb-viewas-back i {
    color: #b0b3b8;

    font-size: 16px;
    font-style: normal;
}

.fb-viewas-back:hover {
    background: #3a3b3c;
}

.fb-viewas-mid {
    display: flex;
    flex-direction: column;

    flex: 1;

    min-width: 0;
}

.fb-viewas-mid strong {
    color: #e4e6eb;

    font-size: 15px;
    font-weight: 700;
}

.fb-viewas-mid span {
    color: #b0b3b8;

    font-size: 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fb-viewas-exit {
    padding: 8px 14px;

    border: none;

    background: #2d88ff;

    border-radius: 6px;

    color: #ffffff;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    white-space: nowrap;
}

.fb-viewas-exit:hover {
    background: #1f76e0;
}

/* Hide owner-only controls in View-as mode */

body.fb-viewing-as .fb-header-actions,
body.fb-viewing-as .fb-about-edit,
body.fb-viewing-as .fb-about-add,
body.fb-viewing-as .pd-edit,
body.fb-viewing-as .pd-add,
body.fb-viewing-as #profileComposerBox,
body.fb-viewing-as .highlight-tile.new,
body.fb-viewing-as .socialhub-avatar-overlay,
body.fb-viewing-as .socialhub-cover-overlay,
body.fb-viewing-as .fb-stack-link[onclick*="PickPhoto"] {
    display: none !important;
}

body.fb-viewing-as .fb-about-highlights .fb-side-title a {
    display: none;
}

body:not(.dark-mode) .fb-viewas-bar {
    background: #f0f2f5;

    border-color: #ced0d4;
}

body:not(.dark-mode) .fb-viewas-back {
    color: #050505;
}

body:not(.dark-mode) .fb-viewas-mid strong {
    color: #050505;
}

/* ---------------- PROFILE MODALS (search / highlights / status) ---------------- */

.fb-profile-modal {
    position: fixed;
    inset: 0;
    z-index: 9990;

    display: flex;
    align-items: flex-start;
    justify-content: center;

    background: rgba(0, 0, 0, 0.65);

    padding: 48px 16px 16px 16px;

    overflow-y: auto;
}

.fb-profile-modal-box {
    width: 100%;
    max-width: 560px;

    background: #242526;

    border-radius: 12px;

    padding: 16px 18px 18px 18px;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}

.fb-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.fb-modal-head h3 {
    color: #e4e6eb;

    font-size: 18px;
    font-weight: 700;

    margin: 0;
}

.fb-modal-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    border: none;

    background: #3a3b3c;

    border-radius: 50%;

    color: #b0b3b8;

    cursor: pointer;
}

.fb-modal-x:hover {
    background: #4e4f50;

    color: #e4e6eb;
}

.fb-modal-x i {
    font-size: 15px;
    font-style: normal;
}

.fb-modal-divider {
    border-top: 1px solid #3e4042;

    margin: 14px 0 12px 0;
}

.fb-modal-foot {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fb-foot-spacer {
    flex: 1;
}

.fb-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 9px 16px;

    border: none;

    border-radius: 6px;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
}

.fb-btn-cancel {
    background: #3a3b3c;

    color: #e4e6eb;
}

.fb-btn-cancel:hover {
    background: #4e4f50;
}

.fb-btn-primary {
    background: #2d88ff;

    color: #ffffff;
}

.fb-btn-primary:hover {
    background: #1f76e0;
}

/* ---------------- SEARCH ---------------- */

.fb-search-modal-box {
    max-width: 560px;
}

.fb-search-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fb-search-head h3 {
    color: #e4e6eb;

    font-size: 18px;
    font-weight: 700;

    margin: 0;

    flex: 1;
}

.fb-search-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    border: none;

    background: transparent;

    border-radius: 50%;

    color: #b0b3b8;

    cursor: pointer;
}

.fb-search-back:hover {
    background: #3a3b3c;
}

.fb-search-back i {
    font-size: 17px;
    font-style: normal;
}

.fb-search-input-wrap {
    position: relative;

    margin-top: 14px;
}

.fb-search-input-wrap > i {
    position: absolute;
    top: 50%;
    left: 14px;

    transform: translateY(-50%);

    color: #b0b3b8;

    font-size: 15px;
    font-style: normal;
}

.fb-search-input-wrap input {
    width: 100%;

    padding: 11px 42px 11px 38px;

    border: none;

    background: #3a3b3c;

    border-radius: 8px;

    color: #e4e6eb;

    font-size: 14px;

    outline: none;

    box-sizing: border-box;
}

.fb-search-input-wrap input:focus {
    border: 1px solid #2d88ff;

    padding: 10px 41px 10px 37px;
}

.fb-search-clear {
    position: absolute;
    top: 50%;
    right: 8px;

    transform: translateY(-50%);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    border: none;

    background: transparent;

    border-radius: 50%;

    color: #b0b3b8;

    cursor: pointer;
}

.fb-search-clear:hover {
    background: #4e4f50;

    color: #e4e6eb;
}

.fb-search-clear i {
    font-size: 13px;
    font-style: normal;
}

.fb-search-body {
    margin-top: 14px;

    max-height: 52vh;

    overflow-y: auto;
}

.fb-search-section-title {
    color: #b0b3b8;

    font-size: 13px;
    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.4px;

    margin: 4px 0 10px 0;
}

.fb-search-empty,
.fb-search-loading {
    color: #b0b3b8;

    font-size: 14px;

    margin: 10px 0;
}

.fb-search-recent-row {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 9px 10px;

    border-radius: 8px;
}

.fb-search-recent-row:hover {
    background: #3a3b3c;
}

.fb-search-recent-row > i {
    color: #b0b3b8;

    font-size: 16px;
    font-style: normal;
}

.fb-search-recent-term {
    flex: 1;

    border: none;

    background: transparent;

    color: #e4e6eb;

    font-size: 14px;

    text-align: left;

    cursor: pointer;

    min-width: 0;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fb-search-recent-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 26px;
    height: 26px;

    border: none;

    background: transparent;

    border-radius: 50%;

    color: #b0b3b8;

    cursor: pointer;
}

.fb-search-recent-x:hover {
    background: #4e4f50;

    color: #e4e6eb;
}

.fb-search-recent-x i {
    font-size: 12px;
    font-style: normal;
}

.fb-search-result {
    display: flex;
    align-items: center;
    gap: 14px;

    width: 100%;

    padding: 10px 10px;

    border: none;

    background: transparent;

    border-radius: 8px;

    cursor: pointer;

    text-align: left;
}

.fb-search-result:hover {
    background: #3a3b3c;
}

.fb-search-result > i {
    color: #b0b3b8;

    font-size: 18px;
    font-style: normal;

    width: 20px;

    text-align: center;

    flex-shrink: 0;
}

.fb-search-result > span {
    display: flex;
    flex-direction: column;
    gap: 1px;

    min-width: 0;
}

.fb-search-result strong {
    color: #e4e6eb;

    font-size: 14px;
    font-weight: 600;
}

.fb-search-result em {
    color: #b0b3b8;

    font-size: 13px;

    font-style: normal;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    max-width: 380px;
}

/* ---------------- EDIT HIGHLIGHTS ---------------- */

.fb-hl-edit-title {
    color: #b0b3b8;

    font-size: 13px;
    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.4px;

    margin: 12px 0 10px 0;
}

.fb-hl-edit-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;

    min-height: 60px;
}

.fb-hl-edit-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;

    width: 92px;

    border: none;

    background: transparent;

    cursor: pointer;

    padding: 4px;
}

.fb-hl-edit-cover {
    width: 76px;
    height: 76px;

    border-radius: 50%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(135deg, #f09433, #dc2743, #7c3aed);

    color: #ffffff;

    font-size: 24px;
    font-weight: 700;

    border: 3px solid #4e4f50;
}

.fb-hl-edit-cover img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.fb-hl-edit-tile:hover .fb-hl-edit-cover {
    border-color: #2d88ff;
}

.fb-hl-edit-name {
    color: #e4e6eb;

    font-size: 13px;

    max-width: 92px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fb-hl-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-top: 18px;

    padding: 10px 16px;

    border: none;

    background: #3a3b3c;

    border-radius: 8px;

    color: #e4e6eb;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
}

.fb-hl-new-btn:hover {
    background: #4e4f50;
}

.fb-hl-new-btn i {
    font-size: 14px;
    font-style: normal;
}

/* ---------------- PROFILE STATUS ---------------- */

.fb-status-ok-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin-top: 16px;

    padding: 14px;

    background: #17332b;

    border: 1px solid #1f4d3f;

    border-radius: 10px;
}

.fb-status-ok-card > i {
    color: #31a24c;

    font-size: 22px;
    font-style: normal;

    margin-top: 1px;
}

.fb-status-ok-card div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fb-status-ok-card strong {
    color: #e4e6eb;

    font-size: 15px;
    font-weight: 700;
}

.fb-status-ok-card span {
    color: #b0b3b8;

    font-size: 13px;
}

.fb-status-features-title {
    color: #b0b3b8;

    font-size: 13px;
    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.4px;

    margin: 18px 0 8px 0;
}

.fb-status-feature {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 8px 4px;
}

.fb-status-feature i {
    color: #31a24c;

    font-size: 16px;
    font-style: normal;
}

.fb-status-feature span {
    color: #e4e6eb;

    font-size: 14px;
}

.fb-status-note {
    color: #b0b3b8;

    font-size: 13px;

    margin: 16px 0 4px 0;

    padding-top: 12px;

    border-top: 1px solid #3e4042;
}

.fb-status-warn-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin-top: 16px;

    padding: 14px;

    background: #3a2f1d;

    border: 1px solid #57431f;

    border-radius: 10px;
}

.fb-status-warn-card > i {
    color: #f7b928;

    font-size: 22px;
    font-style: normal;

    margin-top: 1px;
}

.fb-status-warn-card div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fb-status-warn-card strong {
    color: #e4e6eb;

    font-size: 15px;
    font-weight: 700;
}

.fb-status-warn-card span {
    color: #b0b3b8;

    font-size: 13px;
}

.fb-status-warn-actions {
    display: flex;
    justify-content: flex-end;

    margin-top: 16px;
}

/* ---------------- LIGHT THEME ---------------- */

body:not(.dark-mode) .fb-profile-modal-box {
    background: #ffffff;
}

body:not(.dark-mode) .fb-modal-head h3,
body:not(.dark-mode) .fb-search-head h3 {
    color: #050505;
}

body:not(.dark-mode) .fb-modal-x,
body:not(.dark-mode) .fb-btn-cancel,
body:not(.dark-mode) .fb-hl-new-btn,
body:not(.dark-mode) .fb-search-input-wrap input {
    background: #f0f2f5;
}

body:not(.dark-mode) .fb-modal-x,
body:not(.dark-mode) .fb-search-back,
body:not(.dark-mode) .fb-search-clear,
body:not(.dark-mode) .fb-search-recent-x,
body:not(.dark-mode) .fb-search-input-wrap > i,
body:not(.dark-mode) .fb-search-result > i,
body:not(.dark-mode) .fb-search-recent-row > i {
    color: #65676b;
}

body:not(.dark-mode) .fb-modal-x:hover,
body:not(.dark-mode) .fb-search-back:hover,
body:not(.dark-mode) .fb-search-clear:hover,
body:not(.dark-mode) .fb-search-recent-x:hover {
    background: #e4e6eb;

    color: #050505;
}

body:not(.dark-mode) .fb-search-input-wrap input {
    color: #050505;
}

body:not(.dark-mode) .fb-search-input-wrap input:focus {
    border-color: #0866ff;
}

body:not(.dark-mode) .fb-btn-primary {
    background: #0866ff;
}

body:not(.dark-mode) .fb-btn-primary:hover {
    background: #055fd0;
}

body:not(.dark-mode) .fb-btn-cancel {
    color: #050505;
}

body:not(.dark-mode) .fb-search-section-title,
body:not(.dark-mode) .fb-hl-edit-title,
body:not(.dark-mode) .fb-status-features-title {
    color: #65676b;
}

body:not(.dark-mode) .fb-search-empty,
body:not(.dark-mode) .fb-search-loading,
body:not(.dark-mode) .fb-status-note {
    color: #65676b;
}

body:not(.dark-mode) .fb-search-recent-row:hover,
body:not(.dark-mode) .fb-search-result:hover {
    background: #f0f2f5;
}

body:not(.dark-mode) .fb-search-recent-term,
body:not(.dark-mode) .fb-search-result strong,
body:not(.dark-mode) .fb-hl-edit-name,
body:not(.dark-mode) .fb-status-feature span,
body:not(.dark-mode) .fb-status-ok-card strong,
body:not(.dark-mode) .fb-status-warn-card strong {
    color: #050505;
}

body:not(.dark-mode) .fb-search-result em,
body:not(.dark-mode) .fb-status-ok-card span,
body:not(.dark-mode) .fb-status-warn-card span {
    color: #65676b;
}

body:not(.dark-mode) .fb-modal-divider,
body:not(.dark-mode) .fb-status-note {
    border-color: #ced0d4;
}

body:not(.dark-mode) .fb-hl-new-btn {
    color: #050505;
}

body:not(.dark-mode) .fb-status-ok-card {
    background: #e7f3ec;

    border-color: #c3e6d1;
}

body:not(.dark-mode) .fb-status-warn-card {
    background: #fdf3dd;

    border-color: #f0d9a8;
}

/* ---------------- LUCIDE SIZING ---------------- */

.fb-more-wrap .fb-more-menu button svg.lucide,
.fb-viewas-back svg.lucide,
.fb-search-back svg.lucide,
.fb-search-input-wrap > svg.lucide,
.fb-search-clear svg.lucide,
.fb-search-recent-row > svg.lucide,
.fb-search-recent-x svg.lucide,
.fb-search-result > svg.lucide,
.fb-hl-new-btn svg.lucide,
.fb-modal-x svg.lucide,
.fb-status-ok-card > svg.lucide,
.fb-status-warn-card > svg.lucide,
.fb-status-feature svg.lucide {
    width: 17px;
    height: 17px;
}

.fb-more-wrap .fb-more-menu button svg.lucide,
.fb-status-ok-card > svg.lucide,
.fb-status-warn-card > svg.lucide,
.fb-status-feature svg.lucide {
    width: 18px;
    height: 18px;
}

.fb-search-input-wrap > svg.lucide {
    position: absolute;
    top: 50%;
    left: 14px;

    transform: translateY(-50%);

    color: #b0b3b8;
}

.fb-status-ok-card > svg.lucide,
.fb-status-feature svg.lucide {
    color: #31a24c;
}

.fb-status-warn-card > svg.lucide {
    color: #f7b928;
}

/* ---------------- ACTIVITY LOG + TAGGING SETTINGS ---------------- */

.fb-activity-modal-box {
    max-width: 600px;
}

.fb-activity-filters {
    display: flex;
    gap: 10px;

    margin-top: 14px;
}

.fb-activity-select {
    padding: 9px 12px;

    border: none;

    background: #3a3b3c;

    border-radius: 8px;

    color: #e4e6eb;

    font-size: 14px;

    cursor: pointer;

    outline: none;

    flex: 1;
}

.fb-activity-select:focus {
    border: 1px solid #2d88ff;

    padding: 8px 11px;
}

.fb-tagging-body {
    margin-top: 6px;
}

.fb-tagging-section-title {
    color: #b0b3b8;

    font-size: 13px;
    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.4px;

    margin: 16px 0 6px 0;
}

.fb-tagging-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding: 10px 4px;

    border-bottom: 1px solid #3e4042;
}

.fb-tagging-row:last-child {
    border-bottom: none;
}

.fb-tagging-text {
    display: flex;
    flex-direction: column;
    gap: 3px;

    min-width: 0;

    flex: 1;
}

.fb-tagging-text strong {
    color: #e4e6eb;

    font-size: 14px;
    font-weight: 600;
}

.fb-tagging-text span {
    color: #b0b3b8;

    font-size: 12px;
}

.fb-tagging-select {
    flex: 0 0 auto;

    min-width: 110px;
}

.fb-toggle {
    position: relative;

    display: inline-block;

    width: 52px;
    height: 30px;

    flex-shrink: 0;

    cursor: pointer;
}

.fb-toggle input {
    position: absolute;

    opacity: 0;

    width: 100%;
    height: 100%;

    margin: 0;

    cursor: pointer;

    z-index: 2;
}

.fb-toggle-track {
    position: absolute;
    inset: 0;

    background: #3a3b3c;

    border-radius: 999px;

    transition: background 0.2s;
}

.fb-toggle-track::after {
    content: "";

    position: absolute;
    top: 3px;
    left: 3px;

    width: 24px;
    height: 24px;

    background: #b0b3b8;

    border-radius: 50%;

    transition: transform 0.2s, background 0.2s;
}

.fb-toggle input:checked + .fb-toggle-track {
    background: #2d88ff;
}

.fb-toggle input:checked + .fb-toggle-track::after {
    transform: translateX(22px);

    background: #ffffff;
}

body:not(.dark-mode) .fb-activity-select,
body:not(.dark-mode) .fb-toggle-track {
    background: #f0f2f5;
}

body:not(.dark-mode) .fb-activity-select {
    color: #050505;
}

body:not(.dark-mode) .fb-activity-select:focus {
    border-color: #0866ff;
}

body:not(.dark-mode) .fb-tagging-row {
    border-color: #ced0d4;
}

body:not(.dark-mode) .fb-tagging-text strong {
    color: #050505;
}

body:not(.dark-mode) .fb-tagging-text span,
body:not(.dark-mode) .fb-tagging-section-title {
    color: #65676b;
}

body:not(.dark-mode) .fb-toggle-track::after {
    background: #b0b3b8;
}

body:not(.dark-mode) .fb-toggle input:checked + .fb-toggle-track {
    background: #0866ff;
}

.fb-activity-item em {
    max-width: 420px;
}

/* ======================================================
   STEP 3: LOCK PROFILE / PRO MODE / VERIFIED BADGE
   ====================================================== */

.fb-feature-box {
    max-width: 460px;
    width: 100%;
    padding: 28px;
}

.fb-feature-body {
    text-align: center;
    width: 100%;
}

.fb-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 4px auto 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0866ff, #0aa2ff);
    color: #fff;
}

.fb-feature-icon svg.lucide {
    width: 32px;
    height: 32px;
    stroke-width: 2;
}

.fb-feature-title {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 700;
    color: #1c1e21;
}

.fb-feature-text {
    margin: 0 auto 14px;
    max-width: 380px;
    font-size: 14px;
    line-height: 1.5;
    color: #65676b;
}

.fb-feature-status {
    margin: -4px 0 16px;
    font-size: 13px;
    font-weight: 600;
    color: #65676b;
}

.fb-feature-status-active {
    color: #0da55e;
}

.fb-feature-items {
    margin: 0 0 20px;
    padding: 14px 18px;
    list-style: none;
    text-align: left;
    border-top: 1px solid #e4e6eb;
    border-bottom: 1px solid #e4e6eb;
}

.fb-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    font-size: 14px;
    line-height: 1.4;
    color: #1c1e21;
}

.fb-feature-item svg.lucide {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    color: #0da55e;
    stroke-width: 2.5;
}

.fb-feature-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}

.fb-feature-btn {
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s;
}

.fb-feature-ghost {
    background: #e4e6eb;
    color: #1c1e21;
}

.fb-feature-ghost:hover {
    background: #d8dadf;
}

.fb-feature-primary {
    background: #0866ff;
    color: #fff;
}

.fb-feature-primary:hover {
    background: #0661f0;
}

body.dark-mode .fb-feature-title {
    color: #f5f6f7;
}

body.dark-mode .fb-feature-text,
body.dark-mode .fb-feature-status {
    color: #b0b3b8;
}

body.dark-mode .fb-feature-items {
    border-color: #3e4042;
}

body.dark-mode .fb-feature-item {
    color: #f5f6f7;
}

body.dark-mode .fb-feature-ghost {
    background: #3e4042;
    color: #f5f6f7;
}

body.dark-mode .fb-feature-ghost:hover {
    background: #4e4f52;
}

/* PRO DASHBOARD */

.fb-dash-box {
    max-width: 560px;
    width: 100%;
    padding: 24px;
}

.fb-dash-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.fb-dash-head h3 {
    margin: 0 0 4px;
    font-size: 19px;
    font-weight: 700;
    color: #1c1e21;
}

.fb-dash-head p {
    margin: 0;
    font-size: 13px;
    color: #65676b;
}

.fb-dash-section-title {
    margin: 18px 0 10px;
    font-size: 15px;
    font-weight: 700;
    color: #1c1e21;
}

.fb-dash-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.fb-dash-stat {
    padding: 16px 10px;
    text-align: center;
    border-radius: 12px;
    background: #f0f2f5;
}

.fb-dash-stat strong {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: #0866ff;
}

.fb-dash-stat span {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: #65676b;
}

.fb-dash-loading {
    padding: 40px 0;
    text-align: center;
    font-size: 14px;
    color: #65676b;
}

.fb-dash-empty {
    margin: 0;
    padding: 20px 0;
    text-align: center;
    font-size: 14px;
    color: #65676b;
}

.fb-dash-insight-btn {
    margin-top: 6px;
}

.fb-dash-insights {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fb-dash-insight-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 10px;
    background: #f0f2f5;
}

.fb-dash-insight-row img {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
}

.fb-dash-insight-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #e4e6eb;
    color: #65676b;
}

.fb-dash-insight-ph svg.lucide {
    width: 18px;
    height: 18px;
}

.fb-dash-insight-meta {
    flex: 1;
    min-width: 0;
}

.fb-dash-insight-meta strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    color: #1c1e21;
}

.fb-dash-insight-meta span {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: #65676b;
}

.fb-dash-open {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #0866ff;
    cursor: pointer;
}

.fb-dash-open:hover {
    background: #e4e6eb;
}

.fb-dash-open svg.lucide {
    width: 16px;
    height: 16px;
}

body.dark-mode .fb-dash-head h3,
body.dark-mode .fb-dash-section-title,
body.dark-mode .fb-dash-insight-meta strong {
    color: #f5f6f7;
}

body.dark-mode .fb-dash-head p,
body.dark-mode .fb-dash-stat span,
body.dark-mode .fb-dash-loading,
body.dark-mode .fb-dash-empty,
body.dark-mode .fb-dash-insight-meta span,
body.dark-mode .fb-dash-insight-ph {
    color: #b0b3b8;
}

body.dark-mode .fb-dash-stat,
body.dark-mode .fb-dash-insight-row {
    background: #242526;
}

body.dark-mode .fb-dash-insight-ph {
    background: #3e4042;
}

body.dark-mode .fb-dash-open:hover {
    background: #3e4042;
}

/* VERIFIED NAME BADGE */

.fb-name-badge {
    display: inline-block;
    margin-left: 6px;
    font-size: 18px;
    vertical-align: middle;
    color: #0866ff;
}

.fb-name-badge svg.lucide {
    width: 18px;
    height: 18px;
    stroke-width: 2.4;
}

body.dark-mode .fb-name-badge {
    color: #2e89ff;
}

/* MOBILE BOTTOM SHEET FOR HEADER MORE MENU */

.fb-more-cancel {
    display: none;
}

@media (max-width: 700px) {

    .fb-header-actions .fb-more-wrap .fb-more-menu {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-height: 75vh;
        overflow-y: auto;
        margin: 0;
        padding: 14px 10px calc(14px + env(safe-area-inset-bottom));
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
        z-index: 1300;
        animation: fbSheetUp 0.22s ease;
    }

    .fb-more-cancel {
        display: block;
        width: 100%;
        margin-top: 6px;
        padding: 12px 0;
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        border: none;
        border-radius: 10px;
        background: #e4e6eb;
        color: #1c1e21;
        cursor: pointer;
    }

    .fb-more-cancel:hover {
        background: #d8dadf;
    }
}

@keyframes fbSheetUp {

    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

body.dark-mode .fb-more-cancel {
    background: #3e4042;
    color: #f5f6f7;
}

body.dark-mode .fb-more-cancel:hover {
    background: #4e4f52;
}

/* ===================================================== */
/* MASTER TAB PANES (profile.html + user-profile.html)   */
/* ===================================================== */

.fb-pane {
    display: none;
}

.fb-pane.active {
    display: block;
}

.fb-pane > .profile-card {
    margin-bottom: 16px;
}

#profileLikes,
#upLikesGrid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 6px;
}

/* ---------- Posts pane: two-column master layout ---------- */

.fb-posts-layout {
    display: block;

    max-width: 1150px;

    margin: 0 auto;
}

@media (min-width: 901px) {

    .fb-posts-layout {
        display: grid;

        grid-template-columns: 360px 1fr;

        gap: 16px;

        align-items: start;
    }
}

@media (max-width: 900px) {

    .fb-posts-layout .fb-left {
        display: none;
    }
}

.fb-posts-layout .fb-left {
    position: sticky;

    top: 76px;

    display: grid;

    gap: 16px;
}

/* ---------- Left panel cards ---------- */

.fb-left-card {
    padding: 16px;
}

.fb-left-card-head {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 12px;
}

.fb-left-card-head h2 {
    margin: 0;

    font-size: 20px;

    font-weight: 700;
}

.fb-left-seeall {
    background: none;

    border: none;

    color: #1877f2;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    padding: 4px 8px;

    border-radius: 6px;

    transition: background 0.15s;
}

.fb-left-seeall:hover {
    background: rgba(24, 119, 242, 0.15);
}

.fb-left-bio {
    margin: 0;

    font-size: 15px;

    line-height: 1.5;
}

.fb-left-divider {
    height: 1px;

    background: rgba(255, 255, 255, 0.12);

    margin: 14px 0;
}

.fb-left-card .about-row {
    display: flex;

    align-items: center;

    gap: 10px;

    padding: 6px 0;

    font-size: 15px;

    line-height: 1.4;
}

.fb-left-card .about-row i {
    width: 18px;

    text-align: center;

    flex-shrink: 0;
}

.fb-left-card .about-row .about-label {
    margin-left: auto;

    flex-shrink: 0;
}

.fb-left-empty {
    font-size: 14px;

    color: #65676b;

    margin: 4px 0;

    line-height: 1.4;
}

/* ---------- Left panel: photos ---------- */

.fb-left-photo-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 4px;
}

.fb-left-photo-tile {
    aspect-ratio: 1 / 1;

    border-radius: 8px;

    overflow: hidden;

    cursor: pointer;

    background: rgba(255, 255, 255, 0.08);

    transition: filter 0.15s;
}

.fb-left-photo-tile:hover {
    filter: brightness(1.15);
}

.fb-left-photo-tile img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}

/* ---------- Left panel: friends ---------- */

.fb-left-friends-count {
    margin: 0 0 12px;

    font-size: 15px;

    font-weight: 600;

    color: #1877f2;
}

.fb-left-friends-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 10px;
}

.fb-left-friend {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 6px;

    background: none;

    border: none;

    cursor: pointer;

    padding: 6px;

    border-radius: 10px;

    transition: background 0.15s;
}

.fb-left-friend:hover {
    background: rgba(255, 255, 255, 0.07);
}

.fb-left-friend-avatar {
    width: 68px;

    height: 68px;

    border-radius: 50%;

    overflow: hidden;
}

.fb-left-friend-avatar img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}

.fb-left-friend-name {
    font-size: 13px;

    line-height: 1.3;

    text-align: center;
}

/* ---------- Pinned chip ---------- */

.fb-pinned-chip {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin: 10px 0 8px;

    padding: 5px 12px;

    border-radius: 50px;

    background: rgba(24, 119, 242, 0.16);

    color: #1877f2;

    font-size: 13px;

    font-weight: 700;
}

.fb-pinned-chip i {
    font-size: 12px;
}

/* ---------- Hero + post skeletons ---------- */

.fb-skeleton {
    position: relative;

    overflow: hidden;

    background: rgba(255, 255, 255, 0.09);

    border-radius: 8px;
}

.fb-skeleton::after {
    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );

    transform: translateX(-100%);

    animation: fbSkeletonShimmer 1.4s infinite;
}

@keyframes fbSkeletonShimmer {

    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.fb-cover-skeleton {
    position: absolute;

    inset: 0;

    border-radius: 0;

    background: rgba(255, 255, 255, 0.06);
}

.fb-avatar-skeleton {
    width: 168px;

    height: 168px;

    border-radius: 50%;

    margin-top: 0;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.fb-name-skeleton {
    width: 220px;

    height: 30px;

    border-radius: 6px;

    margin-bottom: 8px;
}

#fbProfileHeader .fb-avatar-skeleton {
    width: 180px;

    height: 180px;
}

.fb-post-skeleton {
    height: 240px;

    border-radius: 12px;

    margin-bottom: 16px;
}

/* ---------- More pane: likes + check-ins cards ---------- */

#likesCard {
    margin-top: 16px;
}

#checkinsCard {
    margin-top: 16px;
}

#upReelsGrid .profile-photo-item {
    aspect-ratio: 3 / 4;
}

.fb-stack-empty {
    padding: 24px 0;
}

/* ---------- Light mode overrides ---------- */

body:not(.dark-mode) .fb-left-divider {
    background: #e4e6eb;
}

body:not(.dark-mode) .fb-left-card .about-row {
    color: #050505;
}

body:not(.dark-mode) .fb-left-card .about-row i {
    color: #65676b;
}

body:not(.dark-mode) .fb-left-friend:hover {
    background: #e7f3ff;
}

body:not(.dark-mode) .fb-skeleton {
    background: #e4e6eb;
}

body:not(.dark-mode) .fb-skeleton::after {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.7),
        transparent
    );
}

body:not(.dark-mode) .fb-cover-skeleton {
    background: #d8dade;
}

body:not(.dark-mode) .fb-left-photo-tile {
    background: rgba(0, 0, 0, 0.06);
}

body:not(.dark-mode) .fb-left-friend:hover {
    background: rgba(0, 0, 0, 0.06);
}

/* ======================================================
   INLINE PROFILE COMPOSER (home-feed style quick post)
   ====================================================== */

.fb-composer-inline {
    flex-direction: column;

    gap: 10px;

    margin-top: 12px;

    border-top: 1px solid #e4e6eb;

    padding-top: 12px;
}

.fb-composer-inline textarea {
    width: 100%;

    box-sizing: border-box;

    min-height: 84px;

    padding: 12px 14px;

    border: 1px solid #ccd0d5;

    border-radius: 10px;

    background: #ffffff;

    color: #1c1e21;

    font-size: 15px;

    font-family: inherit;

    line-height: 1.5;

    resize: vertical;

    outline: none;
}

.fb-composer-inline textarea:focus {
    border-color: #1877f2;

    box-shadow: 0 0 0 2px rgba(24, 119, 242, 0.15);
}

.fb-composer-inline textarea::placeholder {
    color: #65676b;
}

.fb-composer-inline .fb-composer-actions {
    margin-top: 0;

    border-top: none;

    padding-top: 0;
}

.fb-composer-inline .fb-composer-post {
    flex: 0 0 auto;

    min-width: 96px;

    height: 38px;

    padding: 0 20px;

    border: none;

    border-radius: 8px;

    background: #1877f2;

    color: #ffffff;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    transition: background 0.15s;
}

.fb-composer-inline .fb-composer-post:hover {
    background: #166fe5;
}

.fb-composer-inline .fb-composer-post:disabled {
    opacity: 0.6;

    cursor: default;
}

body.dark-mode .fb-composer-inline {
    border-top-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode .fb-composer-inline textarea {
    background: #3a3b3c;

    border-color: #4e4f52;

    color: #e4e6eb;
}

body.dark-mode .fb-composer-inline textarea::placeholder {
    color: #b0b3b8;
}

body.dark-mode .fb-composer-inline .fb-composer-post {
    background: #1877f2;

    color: #ffffff;
}

/* ======================================================
   FORCED TEXT COLORS — Intro card (both modes)
   ====================================================== */

.fb-left-card .fb-left-bio,
.fb-left-card .about-row {
    color: #050505;
}

.fb-left-card .about-row i {
    color: #65676b;
}

body.dark-mode .fb-left-card .fb-left-bio,
body.dark-mode .fb-left-card .about-row {
    color: #e4e6eb;
}

body.dark-mode .fb-left-card .about-row i {
    color: #b0b3b8;
}

body.dark-mode .fb-left-friend-name {
    color: #e4e6eb;
}

body:not(.dark-mode) .fb-left-friend-name {
    color: #050505;
}

body.dark-mode .fb-left-empty {
    color: #b0b3b8;
}

/* ======================================================
   FORCED TEXT COLORS — Edit profile modal (both modes)
   ====================================================== */

.edit-profile-header h2,
.edit-profile-panel label {
    color: #050505;
}

body.dark-mode .edit-profile-header h2,
body.dark-mode .edit-profile-panel label {
    color: #e4e6eb;
}

.edit-profile-field input,
.edit-profile-field textarea,
.edit-profile-field select {
    background: #ffffff;

    color: #1c1e21;
}

body.dark-mode .edit-profile-field input,
body.dark-mode .edit-profile-field textarea,
body.dark-mode .edit-profile-field select {
    background: #3a3b3c;

    border-color: #4e4f52;

    color: #e4e6eb;
}

.edit-profile-actions button {
    background: #e4e6eb;

    color: #050505;
}

body.dark-mode .edit-profile-actions button {
    background: #3a3b3c;

    color: #e4e6eb;
}

/* ======================================================
   FORCED TEXT COLORS — Photos / Reels areas (both modes)
   ====================================================== */

body.dark-mode .fb-stack-card .photo-grid .empty-message,
body.dark-mode .fb-stack-card .fb-mini-photos .empty-message {
    color: #b0b3b8;
}

body:not(.dark-mode) .fb-stack-card .photo-grid .empty-message,
body:not(.dark-mode) .fb-stack-card .fb-mini-photos .empty-message {
    color: #65676b;
}

body.dark-mode .fb-stack-card .photo-grid .profile-photo-item {
    background: #3a3b3c;
}

body:not(.dark-mode) .fb-stack-card .photo-grid .profile-photo-item {
    background: #f0f2f5;
}

body.dark-mode .profile-photo-video-caption {
    color: #ffffff;

    background: linear-gradient(
        transparent,
        rgba(0, 0, 0, 0.75)
    );
}

body:not(.dark-mode) .profile-photo-video-caption {
    color: #ffffff;

    background: linear-gradient(
        transparent,
        rgba(0, 0, 0, 0.75)
    );
}

body.dark-mode .fb-stack-title h2,
body.dark-mode .fb-stack-head .fb-stack-link {
    color: #e4e6eb;
}

body:not(.dark-mode) .fb-stack-title h2 {
    color: #050505;
}

/* ======================================================
   INTRO CARD — EDIT BUTTON (Facebook style)
   ====================================================== */

.fb-left-edit-btn {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    width: 100%;

    margin-top: 14px;

    padding: 9px 0;

    border: none;

    border-radius: 8px;

    background: #e4e6eb;

    color: #050505;

    font-size: 14px;

    font-weight: 600;

    font-family: inherit;

    cursor: pointer;

    transition: background 0.15s;
}

.fb-left-edit-btn:hover {
    background: #d8dadf;
}

.fb-left-edit-btn i {
    font-size: 13px;
}

body.dark-mode .fb-left-edit-btn {
    background: #3a3b3c;

    color: #e4e6eb;
}

body.dark-mode .fb-left-edit-btn:hover {
    background: #4e4f52;
}

/* ======================================================
   CHANGE PROFILE PICTURE — MODAL MENU (Facebook style)
   ====================================================== */

.socialhub-avatar-modal {
    position: fixed;

    inset: 0;

    z-index: 450;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(0, 0, 0, 0.6);

    padding: 20px;
}

.socialhub-avatar-modal-box {
    width: 100%;

    max-width: 440px;

    max-height: 90vh;

    display: flex;

    flex-direction: column;

    background: #ffffff;

    border-radius: 14px;

    overflow: hidden;

    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.socialhub-avatar-modal-head {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 16px 20px;

    border-bottom: 1px solid #e4e6eb;
}

.socialhub-avatar-modal-head strong {
    font-size: 18px;

    font-weight: 700;

    color: #050505;
}

.socialhub-avatar-modal-close {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 34px;

    height: 34px;

    border: none;

    border-radius: 50%;

    background: #e4e6eb;

    color: #050505;

    cursor: pointer;

    transition: background 0.15s;
}

.socialhub-avatar-modal-close:hover {
    background: #d8dadf;
}

.socialhub-avatar-modal-close i {
    width: 16px;

    height: 16px;
}

.socialhub-avatar-modal-body {
    padding: 20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 18px;

    overflow-y: auto;
}

.socialhub-avatar-modal-preview {
    width: 128px;

    height: 128px;

    border-radius: 50%;

    overflow: hidden;

    flex-shrink: 0;

    background: #f0f2f5;

    display: flex;

    align-items: center;

    justify-content: center;
}

.socialhub-avatar-modal-preview img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}

.socialhub-avatar-modal-placeholder {
    display: flex;

    color: #b0b3b8;
}

.socialhub-avatar-modal-placeholder i {
    width: 64px;

    height: 64px;
}

.socialhub-avatar-modal-rows {
    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 6px;
}

.socialhub-avatar-modal-row {
    display: flex;

    align-items: center;

    gap: 12px;

    width: 100%;

    padding: 10px 12px;

    border: none;

    border-radius: 10px;

    background: transparent;

    text-align: left;

    cursor: pointer;

    transition: background 0.15s;
}

.socialhub-avatar-modal-row:hover {
    background: #f0f2f5;
}

.socialhub-avatar-modal-row-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background: #e4e6eb;

    color: #050505;

    flex-shrink: 0;
}

.socialhub-avatar-modal-row-icon i {
    width: 18px;

    height: 18px;
}

.socialhub-avatar-modal-row-text {
    display: flex;

    flex-direction: column;

    gap: 2px;

    min-width: 0;
}

.socialhub-avatar-modal-row-text strong {
    font-size: 14.5px;

    font-weight: 600;

    color: #050505;
}

.socialhub-avatar-modal-row-text small {
    font-size: 12.5px;

    color: #65676b;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}

.socialhub-avatar-modal-foot {
    padding: 12px 20px;

    border-top: 1px solid #e4e6eb;

    display: flex;

    justify-content: flex-end;
}

.socialhub-avatar-modal-cancel {
    height: 36px;

    padding: 0 22px;

    border: none;

    border-radius: 8px;

    background: #e4e6eb;

    color: #050505;

    font-size: 14px;

    font-weight: 600;

    font-family: inherit;

    cursor: pointer;

    transition: background 0.15s;
}

.socialhub-avatar-modal-cancel:hover {
    background: #d8dadf;
}

body.dark-mode .socialhub-avatar-modal-box {
    background: #242526;
}

body.dark-mode .socialhub-avatar-modal-head {
    border-bottom-color: #3a3b3c;
}

body.dark-mode .socialhub-avatar-modal-head strong {
    color: #e4e6eb;
}

body.dark-mode .socialhub-avatar-modal-close {
    background: #3a3b3c;

    color: #e4e6eb;
}

body.dark-mode .socialhub-avatar-modal-close:hover {
    background: #4e4f52;
}

body.dark-mode .socialhub-avatar-modal-preview {
    background: #3a3b3c;
}

body.dark-mode .socialhub-avatar-modal-placeholder {
    color: #65676b;
}

body.dark-mode .socialhub-avatar-modal-row:hover {
    background: rgba(255, 255, 255, 0.06);
}

body.dark-mode .socialhub-avatar-modal-row-icon {
    background: #3a3b3c;

    color: #e4e6eb;
}

body.dark-mode .socialhub-avatar-modal-row-text strong {
    color: #e4e6eb;
}

body.dark-mode .socialhub-avatar-modal-row-text small {
    color: #b0b3b8;
}

body.dark-mode .socialhub-avatar-modal-foot {
    border-top-color: #3a3b3c;
}

body.dark-mode .socialhub-avatar-modal-cancel {
    background: #3a3b3c;

    color: #e4e6eb;
}

body.dark-mode .socialhub-avatar-modal-cancel:hover {
    background: #4e4f52;
}

/* ======================================================
   AVATAR CROP EDITOR — ROTATE BUTTONS
   ====================================================== */

.socialhub-crop-close i {
    width: 16px;

    height: 16px;
}

.socialhub-crop-rotates {
    display: flex;

    justify-content: center;

    gap: 10px;

    margin: 10px 0 2px;
}

.socialhub-crop-rotates button {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 42px;

    height: 42px;

    border: none;

    border-radius: 50%;

    background: #e4e6eb;

    color: #050505;

    cursor: pointer;

    transition: background 0.15s;
}

.socialhub-crop-rotates button:hover {
    background: #d8dadf;
}

.socialhub-crop-rotates button i {
    width: 18px;

    height: 18px;
}

body.dark-mode .socialhub-crop-rotates button {
    background: #3a3b3c;

    color: #e4e6eb;
}

body.dark-mode .socialhub-crop-rotates button:hover {
    background: #4e4f52;
}

/* ======================================================
   LIGHT MODE FIXES — unstyled dark parts that stayed
   dark even in light mode (header, cover, avatar, etc.)
   ====================================================== */

body:not(.dark-mode) #fbProfileHeader {
    background: #ffffff;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

body:not(.dark-mode) #fbProfileHeader .cover-photo {
    background-color: #e4e6eb;
}

body:not(.dark-mode) .fb-header .cover-photo {
    background-color: #e4e6eb;
}

body:not(.dark-mode) #fbProfileHeader .fb-avatar-wrap .profile-photo {
    background: #e4e6eb;
}

body:not(.dark-mode) #fbProfileHeader .fb-header-divider {
    background: #e4e6eb;
}

body:not(.dark-mode) .fb-avatar-wrap .socialhub-avatar-overlay {
    background: #e4e6eb;

    color: #050505;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

body:not(.dark-mode) .fb-avatar-wrap .socialhub-avatar-overlay:hover {
    background: #d8dadf;
}

body:not(.dark-mode) .socialhub-photo-viewer-close {
    background: #e4e6eb;

    color: #050505;
}

body:not(.dark-mode) .socialhub-photo-viewer-close:hover {
    background: #d8dadf;

    color: #050505;
}