*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial,sans-serif;
}

body{
    background:#eef2f7;
    color:#222;
}

/* Cover */
.cover-container{position:relative;}
.cover-photo{
    width:100%;
    height:300px;
    object-fit:cover;
    display:block;
}

/* Main Card */
.profile-page{
    max-width:850px;
    margin:20px auto 30px;
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 8px 25px rgba(0,0,0,.15);
}

/* Profile Picture */
.profile-image-box{
    display:flex;
    justify-content:center;
    margin-top:-90px;
}
.profile-picture{
    width:180px;
    height:180px;
    border-radius:50%;
    object-fit:cover;
    border:6px solid #fff;
    background:#ddd;
    box-shadow:0 4px 15px rgba(0,0,0,.2);
}

/* Info */
.profile-info{
    text-align:center;
    padding:20px;
}
.profile-info h1{
    font-size:30px;
    margin-top:10px;
}
.username{
    color:#1877f2;
    font-size:18px;
    margin-top:5px;
}

.details{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    margin:18px 0;
}
.details p{
    background:#f5f7fb;
    padding:8px 14px;
    border-radius:20px;
    font-size:15px;
    color:#555;
    border:1px solid #e5e5e5;
}

#rank{
    font-weight:bold;
    color:#ff9800;
}
#lastSeen{
    color:#28a745;
    font-weight:bold;
}

.bio{
    max-width:600px;
    margin:20px auto;
    padding:15px;
    background:#fafafa;
    border-radius:12px;
    color:#444;
    line-height:1.6;
}

/* Stats */
.stats{
    display:flex;
    justify-content:space-evenly;
    margin:30px 0;
}
.stats div{flex:1;}
.stats h2{color:#1877f2;font-size:28px;}
.stats span{color:#666;}

/* Buttons */
.buttons{
    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
}
.buttons button{
    padding:12px 26px;
    border:none;
    border-radius:30px;
    font-size:16px;
    cursor:pointer;
    transition:.3s;
    color:#fff;
}
#editProfileBtn{background:#444;}
#followBtn{background:#1877f2;}
#messageBtn{background:#28a745;}
.buttons button:hover{
    transform:translateY(-3px);
    opacity:.9;
}

/* Posts */
.posts-section{padding:25px;}
.posts-section h2{
    margin-bottom:20px;
    color:#1877f2;
}

/* Two posts per row */
#gallery{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}

.gallery-item{
    position:relative;
    width:100%;
    height:180px;
    overflow:hidden;
    border-radius:12px;
    background:#f5f5f5;
    cursor:pointer;
}

.gallery-item img,
.gallery-item video{
    width:100%;
    height:100%;
    object-fit:cover;
}

.text-post-preview{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:100%;
    padding:12px;
    text-align:center;
    font-weight:bold;
    color:#333;
    background:#fff;
}

.video-icon{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    font-size:40px;
    color:#fff;
    text-shadow:0 0 10px #000;
}

.view-all-posts-link{
    grid-column:1/-1;
    display:block;
    text-align:center;
    padding:14px;
    margin-top:8px;
    background:#8c8c8c;
    color:#fff;
    font-weight:800;
    font-size:1.1rem;
    text-decoration:none;
    border-radius:10px;
}

@media(max-width:768px){
.cover-photo{height:220px;}
.profile-picture{
    width:140px;
    height:140px;
    margin-top:20px;
}
.profile-info h1{font-size:24px;}
.stats{flex-direction:row;}
.buttons{flex-direction:column;}
.buttons button{width:100%;}
#gallery{
    grid-template-columns:repeat(2,1fr);
}
}