* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: #fff;
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    margin: 0;
    transition: background-color 0.3s;
}

@media (prefers-color-scheme: dark) {
    body {
        /* Set body background to #000 for full page dark mode */
        background-color: #000;
    }
}

/* Desktop centering */
@media (min-width: 768px) {
    body {
        /* make sure the post on desktop display correctly center */
        max-width: 600px;
        margin: 0 auto;
        position: relative;
        border-left: 1px solid #dbdbdb;
        border-right: 1px solid #dbdbdb;
    }
    
    @media (prefers-color-scheme: dark) {
        body {
            border-left: 1px solid #333;
            border-right: 1px solid #333;
        }
    }
    
    .header {
        max-width: 600px;
        margin: 0 auto;
        left: 0;
        right: 0;
    }
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    z-index: 100;
}

@media (prefers-color-scheme: dark) {
    .header {
        background: rgba(0, 0, 0, 0.9); /* Adjusted to match body color */
    }
}

.header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.back-button {
    color: #2d3748;
}

@media (prefers-color-scheme: dark) {
    .back-button {
        color: #ffffff;
    }
}

.header-icons {
    display: flex;
    align-items: center;
    gap: 20px;
    color: #2d3748;
}

@media (prefers-color-scheme: dark) {
    .header-icons {
        color: #ffffff;
    }
}

.edit-button i {
    color: white;
    font-size: 10px;
}

.profile-page {
    min-height: 100vh; /* Ensure full page height */
    /* Add padding to the bottom of the profile page to prevent the last post from being covered by a fixed navigation bar */
    padding-bottom: 80px; /* Increased to ensure clearance */
}

.profile-info {
    position: absolute; /* Restored to place under avatar */
    top: 190px;
    left: 20px;
    width: calc(100% - 40px);
    /* Make sure this section is visible against the background */
    z-index: 5;
}

/* On profile information section the background on darkmode is not #000 */
@media (prefers-color-scheme: dark) {
    .profile-info {
        /* If profile-info is contained within the body, this is usually unnecessary, but adding it for robustness. */
        /* If profile-info's parent is the element that needs the background, use that element instead. 
           Since it's absolutely positioned, its parent's (body/profile-page) background should show through.
           If there is another container element around it that has a light background, that container needs to be targeted.
           Assuming the issue is that the text is hard to read because the element behind it is not dark enough, 
           or if profile-info is a container itself, setting its background explicitly: */
        background-color: transparent; /* Relying on body background */
    }
    
    /* If there is a light-colored overlay/background within the profile section above profile-info, 
       you might need to target a different element, but based on the provided CSS, 
       the body background is the main control. Let's make sure the content displays correctly against the body. */
}

.profile-info > .name {
    /* increase the size of name for 3 times (16px * 1.5 = 24px) */
    font-size: 24px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 5px;
}

@media (prefers-color-scheme: dark) {
    .profile-info > .name {
        color: #ffffff;
    }
}

.profile-info > .category {
    font-size: 14px;
    color: #718096;
    margin-bottom: 4px; /* small gap */
    font-weight: 500;
}

@media (prefers-color-scheme: dark) {
    .profile-info > .category {
        color: #a0aec0;
    }
}

.profile-info > .location {
    /* make location, date, bio, link have the same weight and font size and small gap */
    display: flex;
    align-items: center;
    font-size: 16px; 
    font-weight: 400;
    color: #000; /* Light Mode */
    text-decoration: none;
    margin-bottom: 4px; /* small gap */
}

.profile-info > .location svg {
    margin-right: 6px;
    width: 16px; /* Increased to match new font size */
    height: 16px; /* Increased to match new font size */
    fill: #718096; /* Kept original icon color for context */
}

@media (prefers-color-scheme: dark) {
    .profile-info > .location {
        color: #fff; /* Dark Mode */
    }
    
    .profile-info > .location svg {
        fill: #a0aec0; /* Kept original icon color for context */
    }
}

.profile-info > .bio {
    /* make location, date, bio, link have the same weight and font size and small gap */
    font-size: 16px;
    font-weight: 400;
    color: #4a5568;
    margin-bottom: 4px; /* small gap */
    line-height: 1.4;
}

@media (prefers-color-scheme: dark) {
    .profile-info > .bio {
        color: #e2e8f0;
    }
}

.location-website-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 4px; /* small gap */
    gap: 15px;
}

.website-link {
    /* make location, date, bio, link have the same weight and font size and small gap */
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #1877F2;
    text-decoration: none;
    font-weight: 400;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.website-link i {
    margin-right: 6px;
    font-size: 16px; /* Increased to match new font size */
}

.location-website-row .location {
    display: none; /* Hide original location in the row */
}

/* Join date styling */
.join-date {
    /* make location, date, bio, link have the same weight and font size and small gap */
    display: inline-block;
    font-size: 16px;
    font-weight: 400;
    color: #000; /* Light Mode */
    margin-bottom: 4px; /* small gap */
}

.join-date .fa-calendar {
    margin-right: 6px;
    font-size: 16px; /* Increased to match new font size */
    vertical-align: middle;
}

.join-date-text {
    vertical-align: middle;
}

@media (prefers-color-scheme: dark) {
    .join-date {
        color: #fff; /* Dark Mode */
    }
}

.button-row {
    display: flex;
    width: 100%;
    gap: 8px;
    margin-bottom: 20px;
}

.share-profile-btn, .edit-profile-btn, .follow-profile-btn {
    flex: 1;
    padding: 8px 12px;
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
    text-align: center;
    border: none;
    white-space: nowrap;
}

.share-profile-btn {
    background-color: #EFEFEF;
    color: #000000;
}

.edit-profile-btn {
    background-color: #EFEFEF;
    color: #000000;
}

/* Follow button styles */
.follow-profile-btn {
    background-color: #1877F2;
    color: white;
}

.follow-profile-btn.following {
    background-color: #EFEFEF;
    color: #000000;
}

@media (prefers-color-scheme: dark) {
    .share-profile-btn,
    .edit-profile-btn,
    .follow-profile-btn.following {
        background-color: #333;
        color: #ffffff;
    }
}

.stats {
    position: absolute;
    top: 70px;
    right: 20px;
    display: flex;
    gap: 30px;
    margin-top: 30px;
}

.stat {
    text-align: center;
}

.stat-value {
    font-size: 20px;
    font-weight: 700;
    color: #2d3748;
}

.stat-label {
    /* make like, followers and following text #fff on darkmode and #000 on right mode */
    font-size: 14px;
    color: #000; /* Light mode */
    margin-top: 5px;
}

@media (prefers-color-scheme: dark) {
    .stat-value {
        color: #ffffff;
    }
    
    .stat-label {
        color: #fff; /* Dark mode */
    }
}

/* Tabs styling */
.tabs {
    /* Ensure tabs are full width of the viewable area */
    display: flex;
    justify-content: space-around; /* Distribute tabs evenly */
    border-top: 1px solid #dbdbdb;
    margin-top: 10px;
    position: sticky;
    top: 50px;
    background: white;
    z-index: 90;
    /* make the tabs full width example 100% -20 like post section do */
    width: calc(100% - 40px); /* 100% of the parent minus 20px left and 20px right margin/padding */
    left: 20px; /* Offset to align with content */
    padding: 0; /* Remove internal padding to use space efficiently */
    box-sizing: border-box;
    height: 48px; 
    line-height: 48px; 
    border-bottom: 1px solid #dbdbdb; 
}

@media (prefers-color-scheme: dark) {
    .tabs {
        background: #000; /* Match body background */
        border-top: 1px solid #333;
        border-bottom: 1px solid #333;
    }
}

.tab {
    flex: 1;
    text-align: center;
    font-size: 15px; 
    font-weight: 600; 
    color: #8e8e8e;
    position: relative;
    cursor: pointer;
    line-height: inherit; 
    height: 100%; 
    transition: color 0.3s;
}

.tab.active {
    color: #262626;
}

@media (prefers-color-scheme: dark) {
    .tab {
        color: #a0aec0;
    }
    
    .tab.active {
        color: #ffffff;
    }
}

.tab.active::after {
    content: '';
    position: absolute;
    bottom: 0; 
    left: 50%; 
    transform: translateX(-50%);
    width: 60%; 
    height: 3px;
    background-color: #1877F2;
    border-radius: 2px;
}

/* Avatar Styles */
.js-profile-avatar.avatar {
    position: relative;
    top: 58px;
    left: 20px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid white;
    background-color: #e2e8f0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #a0aec0;
    font-size: 48px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 10;
    overflow: visible !important;
}

@media (prefers-color-scheme: dark) {
    .js-profile-avatar.avatar {
        border: 4px solid #000; /* Match new body background */
        background-color: #333;
        color: #a0aec0;
    }
}

#js-avatar-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 48px;
    color: #a0aec0;
}

#js-avatar-edit-button {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #1877F2;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    z-index: 20;
}

#js-avatar-edit-button i {
    color: white;
    font-size: 10px;
}

/* Verification Badge Styles */
.profile-page-verified-badge, .profile-page-red-verified-badge {
    margin-left: 4px;
    vertical-align: middle;
    color: transparent;
}

.profile-page-verified-badge svg {
    fill: #1DA1F2 !important;
}

.profile-page-red-verified-badge svg {
    fill: #FE2C55 !important;
}

.header-left .username .profile-page-verified-badge,
.header-left .username .profile-page-red-verified-badge {
    color: transparent;
}

/* More Button Styles */
.profile-page-more-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    cursor: pointer;
}

.profile-page-more-button i {
    font-size: 20px;
    color: #666;
}

@media (prefers-color-scheme: dark) {
    .profile-page-more-button i {
        color: #ccc;
    }
}

/* Skeleton Preloader Styles */
.skeleton-preloader {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: white;
    padding-bottom: 20px;
}

@media (prefers-color-scheme: dark) {
    .skeleton-preloader {
        background: #000; /* Match new body background */
    }
}

.skeleton {
    background: #e2e8f0;
    border-radius: 4px;
    animation: shimmer 1.5s infinite linear;
    background-image: linear-gradient(
        to right,
        #e2e8f0 0%,
        #f1f5f9 20%,
        #e2e8f0 40%,
        #e2e8f0 100%
    );
    background-size: 200% 100%;
}

@media (prefers-color-scheme: dark) {
    .skeleton {
        background: #333;
        background-image: linear-gradient(
            to right,
            #333 0%,
            #444 20%,
            #333 40%,
            #333 100%
        );
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.skeleton-username {
    width: 150px;
    height: 20px;
    margin-left: 8px;
    border-radius: 4px;
}

.skeleton-verified-badge {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-left: 4px;
    vertical-align: middle;
}

.skeleton-more-button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.skeleton-avatar {
    position: absolute;
    top: 58px;
    left: 20px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    background: #e2e8f0;
    animation: shimmer 1.5s infinite linear;
    background-image: linear-gradient(
        to right,
        #e2e8f0 0%,
        #f1f5f9 20%,
        #e2e8f0 40%,
        #e2e8f0 100%
    );
    background-size: 200% 100%;
}

@media (prefers-color-scheme: dark) {
    .skeleton-avatar {
        border: 4px solid #000; /* Match new body background */
        background: #333;
        background-image: linear-gradient(
            to right,
            #333 0%,
            #444 20%,
            #333 40%,
            #333 100%
        );
    }
}

.skeleton-text {
    height: 16px;
    margin-bottom: 8px;
    border-radius: 4px;
}

.skeleton-name {
    width: 150px;
    height: 16px;
    margin-bottom: 5px;
}

.skeleton-category {
    width: 100px;
    height: 14px;
    margin-bottom: 8px;
}

.skeleton-location {
    width: 120px;
    height: 14px;
    margin-bottom: 8px;
}

.skeleton-bio {
    width: 90%;
    height: 16px;
    margin-bottom: 8px;
}

.skeleton-website {
    width: 140px;
    height: 16px;
    margin-bottom: 8px;
}

.skeleton-join-date {
    width: 140px;
    height: 16px;
    margin-bottom: 8px;
}

.skeleton-button {
    flex: 1;
    height: 32px;
    border-radius: 20px;
    background: #e2e8f0;
    animation: shimmer 1.5s infinite linear;
    background-image: linear-gradient(
        to right,
        #e2e8f0 0%,
        #f1f5f9 20%,
        #e2e8f0 40%,
        #e2e8f0 100%
    );
    background-size: 200% 100%;
}

@media (prefers-color-scheme: dark) {
    .skeleton-button {
        background: #333;
        background-image: linear-gradient(
            to right,
            #333 0%,
            #444 20%,
            #333 40%,
            #333 100%
        );
    }
}

.skeleton-follow-button {
    flex: 1;
    height: 32px;
    border-radius: 20px;
    background: #e2e8f0;
    animation: shimmer 1.5s infinite linear;
    background-image: linear-gradient(
        to right,
        #e2e8f0 0%,
        #f1f5f9 20%,
        #e2e8f0 40%,
        #e2e8f0 100%
    );
    background-size: 200% 100%;
}

@media (prefers-color-scheme: dark) {
    .skeleton-follow-button {
        background: #333;
        background-image: linear-gradient(
            to right,
            #333 0%,
            #444 20%,
            #333 40%,
            #333 100%
        );
    }
}

.skeleton-tab {
    flex: 1;
    height: 40px;
    border-radius: 4px;
    margin: 10px 5px 0;
}

.skeleton-stat-value {
    width: 40px;
    height: 20px;
    margin: 0 auto 5px;
}

.skeleton-stat-label {
    width: 60px;
    height: 14px;
    margin: 0 auto;
}

/* Skeleton post styles */
.skeleton-post {
    width: 100%;
    padding: 16px 20px;
    border-bottom: 1px solid #dbdbdb;
    background: white;
    box-sizing: border-box;
    position: relative;
}

@media (prefers-color-scheme: dark) {
    .skeleton-post {
        border-bottom: 1px solid #333;
        background: #000; /* Match new body background */
    }
}

.skeleton-post-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.skeleton-post-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e2e8f0;
    animation: shimmer 1.5s infinite linear;
    background-image: linear-gradient(
        to right,
        #e2e8f0 0%,
        #f1f5f9 20%,
        #e2e8f0 40%,
        #e2e8f0 100%
    );
    background-size: 200% 100%;
    margin-right: 12px;
}

@media (prefers-color-scheme: dark) {
    .skeleton-post-avatar {
        background: #333;
        background-image: linear-gradient(
            to right,
            #333 0%,
            #444 20%,
            #333 40%,
            #333 100%
        );
    }
}

.skeleton-post-username {
    width: 120px;
    height: 16px;
    margin-bottom: 4px;
}

.skeleton-post-content {
    width: 80%;
    height: 16px;
    margin-bottom: 8px;
}

.skeleton-post-media {
    width: 100%;
    height: 200px;
    border-radius: 12px;
    margin: 12px 0;
    background: #e2e8f0;
    animation: shimmer 1.5s infinite linear;
    background-image: linear-gradient(
        to right,
        #e2e8f0 0%,
        #f1f5f9 20%,
        #e2e8f0 40%,
        #e2e8f0 100%
    );
    background-size: 200% 100%;
}

@media (prefers-color-scheme: dark) {
    .skeleton-post-media {
        background: #333;
        background-image: linear-gradient(
            to right,
            #333 0%,
            #444 20%,
            #333 40%,
            #333 100%
        );
    }
}

.skeleton-post-actions {
    display: flex;
    gap: 20px;
    margin-top: 12px;
}

.skeleton-post-action {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e2e8f0;
    animation: shimmer 1.5s infinite linear;
    background-image: linear-gradient(
        to right,
        #e2e8f0 0%,
        #f1f5f9 20%,
        #e2e8f0 40%,
        #e2e8f0 100%
    );
    background-size: 200% 100%;
}

@media (prefers-color-scheme: dark) {
    .skeleton-post-action {
        background: #333;
        background-image: linear-gradient(
            to right,
            #333 0%,
            #444 20%,
            #333 40%,
            #333 100%
        );
    }
}

/* Restored original content styles */
#profile-content-container {
    position: relative;
    width: 100vw;
    left: -20px;
    box-sizing: border-box;
}

.empty-state {
    text-align: center;
    color: #718096;
    font-size: 16px;
    margin-top: 20px;
}

@media (prefers-color-scheme: dark) {
    .empty-state {
        color: #a0aec0;
    }
}

/* Increased header username size and weight */
.header-left .username {
    font-size: 20px;
    font-weight: 700;
}

/* Dark mode adjustments for header username */
@media (prefers-color-scheme: dark) {
    .header-left .username {
        color: #ffffff;
    }
}


/* Completely hide any post skeleton elements that might remain */
.skeleton-post,
.skeleton-post-grid,
.skeleton-post-item,
.skeleton-post-image,
.skeleton-post-content,
.skeleton-post-text,
[class*="skeleton-post"],
[class*="post-skeleton"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure the posts container shows actual content */
#profile-content-container,
.posts-grid,
.posts-container {
    /* Remove any skeleton styling */
    background: transparent !important;
    animation: none !important;
}

/* Make sure empty state is visible */
.empty-state {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}