*{
box-sizing:border-box;
}


body{
margin:0;
font-family:Arial, sans-serif;
background:#f5f7fb;
}


.navbar{

height:60px;
background:white;

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

padding:0 25px;

position:sticky;
top:0;

border-bottom:1px solid #ddd;

}



.layout{

display:flex;

max-width:1200px;

margin:auto;

}



.sidebar{

width:260px;

height:calc(100vh - 60px);

padding:20px;

background:white;

position:sticky;

top:60px;

border-right:1px solid #e6e6e6;

}



.profile-card{

display:flex;

align-items:center;

gap:12px;

text-align:left;

}


.avatar{

width:44px;
height:44px;

flex-shrink:0;

border-radius:50%;

background:#eef0f3;

border:1px solid #dde1e6;

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

font-size:16px;
font-weight:600;
color:#5c6470;

}

.profile-text {
    min-width: 0;
}

.profile-text h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-text p {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: #8a8f98;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-divider {
    border: none;
    border-top: 1px solid #ececec;
    margin: 16px 0 4px;
}



.sidebar ul{

list-style:none;

padding:0;
margin:0;

}


.sidebar li{

padding:10px 8px;

font-size:14.5px;

color:#3c3c3c;

cursor:pointer;

border-radius:6px;

}



.sidebar li:hover{

background:#f2f3f5;

}




.feed{

flex:1;

max-width:700px;

padding:25px;

}



.post-box{

background:white;

padding:15px;

border-radius:15px;

margin-bottom:20px;

}


#post{

width:100%;

height:100px;

border:none;

resize:none;

font-size:18px;

outline:none;

}



.post-btn{

background:#111;

color:white;

border:none;

padding:10px 25px;

border-radius:20px;

float:right;

}



.post{

background:white;

padding:20px;

border-radius:15px;

margin-bottom:15px;

}


.actions{

display:flex;

gap:30px;

color:#555;

}



.mobile-profile{

display:none;

font-size:18px;
width:32px;
height:32px;
border-radius:50%;
background:#ddd;
align-items:center;
justify-content:center;

}

.avatar {
    color: #555;
    font-weight: bold;
}

.hidden {
    display: none !important;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal {
    background: white;
    padding: 25px;
    border-radius: 12px;
    width: 90%;
    max-width: 380px;
    text-align: left;
}

.modal h3 {
    margin-top: 0;
}

.modal label {
    display: block;
    font-size: 13px;
    font-weight: bold;
    margin-top: 12px;
    margin-bottom: 4px;
}

.modal input[type="text"],
.modal textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    resize: none;
}

.modal textarea {
    height: 70px;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.btn-secondary {
    background: #eee !important;
    color: #333 !important;
}

.btn-secondary:hover {
    background: #ddd !important;
}

.empty-feed {
    color: #888;
    text-align: center;
}



/* MOBILE */

@media(max-width:700px){


.layout{

display:block;

}



.sidebar{

display:none;

}



.mobile-profile{

display:block;

}



.feed{

padding:10px;

}



.navbar h2{

font-size:20px;

}


}
body {
    background-color: whitesmoke;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    margin: 0;
}

.head1 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    margin: 0;
}

.navbar {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    background-color: rgb(216, 231, 233);
    padding: 10px;
    border-radius: 10px;
    height: 50px;
    position: relative;
}

.navbar button {
    position: absolute;
    right: 20px;
}

.container {
    max-width: 500px;
    margin: 30px auto;
    padding: 20px;
    text-align: center;
}

fieldset {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 16px;
    text-align: left;
}

legend {
    padding: 0 8px;
    font-weight: bold;
}

input[type="text"],
input[type="email"],
input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    margin: 8px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
}

.btn,
button {
    background-color: rgb(94, 158, 165);
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    margin: 6px 4px;
}

.btn:hover,
button:hover {
    background-color: rgb(74, 134, 141);
}

#post {
    width: 80%;
    height: 100px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    resize: none;
    margin-top: 30px;
    font-family: inherit;
    font-size: 14px;
}

.expiry-note {
    font-size: 12px;
    color: #999;
    margin-top: 6px;
}

.site-footer {
    text-align: center;
    padding: 20px;
    font-size: 13px;
}

.site-footer a {
    color: rgb(74, 134, 141);
}

.policy-container {
    max-width: 600px;
    text-align: left;
}

.policy-container h4 {
    margin-top: 20px;
    margin-bottom: 4px;
}

.last-updated {
    color: #999;
    font-size: 12px;
    margin-top: 30px;
}

.feed {
    max-width: 600px;
    margin: 20px auto;
    padding: 0 20px;
}

.post {
    background-color: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 10px;
    text-align: left;
    word-wrap: break-word;
}

.post-author {
    font-weight: bold;
    font-size: 13px;
    color: rgb(74, 134, 141);
    margin-bottom: 4px;
}

.post-time {
    font-weight: normal;
    color: #999;
    font-size: 12px;
}

.post-content {
    font-size: 14px;
}