.create-post{
  background:#1a1a1a;
  padding:15px;
  border-radius:18px;
  margin-bottom:20px;
}

.create-post textarea{
  width:100%;
  min-height:100px;
  background:#111;
  border:none;
  outline:none;
  color:white;
  padding:15px;
  border-radius:12px;
  resize:none;
}

.create-post button{
  margin-top:12px;
  width:100%;
  height:45px;
  border:none;
  border-radius:12px;
  background:#ff004f;
  color:white;
}

.post-card{
  background:#1a1a1a;
  border-radius:18px;
  padding-bottom:15px;
}

.post-top{
    cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
  padding:15px;
}

.avatar{
  width:45px;
  height:45px;
  border-radius:50%;
  object-fit:cover;
  background:#444;
}

.post-content{
  padding:0 15px;
}
.sidebar-card{

  background:#1a1a1a;

  border:1px solid #2a2a2a;

  border-radius:20px;

  padding:20px;

  margin-bottom:20px;

}


.sidebar-card h3{

  margin-bottom:12px;

}


.left-sidebar button{

  width:60px;

  height:60px;

  border:none;

  border-radius:18px;

  background:#1a1a1a;

  color:white;

  font-size:24px;

}
/* ======================
   POST CARD
====================== */

.post-card{

  background:#161616;

  border:1px solid #252525;

  border-radius:24px;

  margin-bottom:24px;

  overflow:hidden;

  transition:.25s;

}


.post-card:hover{

  transform:translateY(-2px);

  border-color:#3a3a3a;

}


/* ======================
   POST TOP
====================== */

.post-top{

  display:flex;

  align-items:center;

  gap:14px;

  padding:18px;

  cursor:pointer;

}


.post-user h3{

  font-size:17px;

  font-weight:700;

}


.post-user span{

  font-size:13px;

  color:#ffcc00;

}


/* ======================
   AVATAR
====================== */

.avatar{

  width:52px;

  height:52px;

  border-radius:50%;

  object-fit:cover;

  border:2px solid #ff00c8;

  box-shadow:

    0 0 18px rgba(255,0,200,.45);

}


/* ======================
   POST CONTENT
====================== */

.post-content{

  padding:0 18px 18px;

  font-size:16px;

  line-height:1.7;

  color:#f2f2f2;

}


/* ======================
   POST IMAGE
====================== */

.post-image{

  width:100%;

  max-height:650px;

  object-fit:cover;

  background:#111;

}


/* ======================
   ACTION BAR
====================== */

.post-actions{

  display:flex;

  align-items:center;

  justify-content:space-around;

  padding:14px;

  border-top:1px solid #252525;

}


.action-btn{

  background:none;

  border:none;

  color:white;

  font-size:15px;

  display:flex;

  align-items:center;

  gap:8px;

  padding:10px 14px;

  border-radius:14px;

  transition:.2s;

}


.action-btn:hover{

  background:#242424;

}


/* ======================
   CREATE POST
====================== */

.create-post{

  background:#161616;

  border:1px solid #252525;

  border-radius:24px;

  padding:20px;

  margin-bottom:24px;

}


.create-post textarea{

  width:100%;

  min-height:120px;

  background:#0f0f0f;

  border:1px solid #2a2a2a;

  border-radius:18px;

  color:white;

  padding:18px;

  resize:none;

  outline:none;

  font-size:15px;

}


.create-post textarea:focus{

  border-color:#ff00c8;

}


.create-post input{

  margin-top:16px;

  width:100%;

}


.create-post button{

  width:100%;

  height:52px;

  border:none;

  border-radius:18px;

  margin-top:18px;

  background:

  linear-gradient(

    135deg,

    #ff004f,

    #ff00c8

  );

  color:white;

  font-size:16px;

  font-weight:700;

}


/* ======================
   MOBILE
====================== */

@media(max-width:767px){

  .feed{

    padding:12px;

  }


  .post-card{

    border-radius:18px;

  }


  .post-content{

    font-size:15px;

  }

}
/* ======================
   LIKE ANIMATION
====================== */

.like-btn{

  transition:.2s;

}


.like-btn.liked{

  transform:scale(1.2);

  color:#ff004f;

}

/* ======================
   IMAGE VIEWER
====================== */

.image-viewer{

  position:fixed;

  inset:0;

  z-index:99999;

  background:rgba(0,0,0,.96);

  backdrop-filter:blur(10px);

  animation:fadeIn .25s ease;

}


.viewer-backdrop{

  width:100%;

  height:100%;

  display:flex;

  align-items:center;

  justify-content:center;

  position:relative;

  padding:20px;

}


.viewer-image{

  max-width:100%;

  max-height:100%;

  border-radius:18px;

  object-fit:contain;

  animation:zoomIn .25s ease;

}


/* CLOSE */

.close-viewer{

  position:absolute;

  top:20px;

  right:20px;

  width:48px;

  height:48px;

  border:none;

  border-radius:50%;

  background:rgba(255,255,255,.12);

  color:white;

  font-size:20px;

  backdrop-filter:blur(10px);

}


/* ANIMATIONS */

@keyframes fadeIn{

  from{

    opacity:0;

  }

  to{

    opacity:1;

  }

}


@keyframes zoomIn{

  from{

    transform:scale(.92);

    opacity:0;

  }

  to{

    transform:scale(1);

    opacity:1;

  }

}

/* ======================
   COMMENT SHEET
====================== */

.comment-sheet{

  position:fixed;

  inset:0;

  z-index:99999;

}


.comment-overlay{

  position:absolute;

  inset:0;

  background:rgba(0,0,0,.65);

  backdrop-filter:blur(8px);

}


/* ======================
   CONTAINER
====================== */

.comment-container{

  position:absolute;

  bottom:0;

  left:0;

  width:100%;

  height:75vh;

  background:#121212;

  border-radius:28px 28px 0 0;

  display:flex;

  flex-direction:column;

  animation:slideUp .25s ease;

}


/* ======================
   HEADER
====================== */

.comment-header{

  display:flex;

  align-items:center;

  justify-content:space-between;

  padding:20px;

  border-bottom:1px solid #222;

}


.comment-header h3{

  font-size:20px;

}


.close-comments{

  width:42px;

  height:42px;

  border:none;

  border-radius:50%;

  background:#1f1f1f;

  color:white;

  font-size:18px;

}


/* ======================
   COMMENT LIST
====================== */

.comment-list{

  flex:1;

  overflow-y:auto;

  padding:20px;

}


.comment-item{

  display:flex;

  gap:14px;

  margin-bottom:20px;

}


.comment-avatar{

  width:48px;

  height:48px;

  border-radius:50%;

  object-fit:cover;

  border:2px solid #ff00c8;

}


.comment-body{

  background:#1a1a1a;

  padding:14px;

  border-radius:18px;

  flex:1;

}


.comment-body strong{

  display:block;

  margin-bottom:6px;

}


/* ======================
   INPUT AREA
====================== */

.comment-input-area{

  display:flex;

  gap:12px;

  padding:16px;

  border-top:1px solid #222;

}


.comment-input{

  flex:1;

  height:52px;

  border:none;

  border-radius:16px;

  background:#1a1a1a;

  color:white;

  padding:0 16px;

  outline:none;

}


.send-comment{

  min-width:90px;

  border:none;

  border-radius:16px;

  background:

  linear-gradient(

    135deg,

    #ff004f,

    #ff00c8

  );

  color:white;

  font-weight:700;

}


/* ======================
   ANIMATION
====================== */

@keyframes slideUp{

  from{

    transform:translateY(100%);

  }

  to{

    transform:translateY(0);

  }

}


/* ======================
   DESKTOP
====================== */

@media(min-width:1024px){

  .comment-container{

    width:650px;

    left:50%;

    transform:translateX(-50%);

    border-radius:28px;

    bottom:20px;

    height:80vh;

  }

}

/* ======================
   NOTIFICATION PANEL
====================== */

.notification-panel{

  position:fixed;

  inset:0;

  z-index:99999;

}


.notification-overlay{

  position:absolute;

  inset:0;

  background:rgba(0,0,0,.65);

  backdrop-filter:blur(8px);

}


/* ======================
   CONTAINER
====================== */

.notification-container{

  position:absolute;

  right:0;

  top:0;

  width:100%;

  max-width:420px;

  height:100vh;

  background:#121212;

  border-left:1px solid #252525;

  display:flex;

  flex-direction:column;

  animation:slideNotification .25s ease;

}


/* ======================
   HEADER
====================== */

.notification-header{

  display:flex;

  align-items:center;

  justify-content:space-between;

  padding:20px;

  border-bottom:1px solid #222;

}


.notification-header h3{

  font-size:22px;

}


.close-notifications{

  width:42px;

  height:42px;

  border:none;

  border-radius:50%;

  background:#1f1f1f;

  color:white;

  font-size:18px;

}


/* ======================
   LIST
====================== */

.notification-list{

  flex:1;

  overflow-y:auto;

  padding:16px;

}


/* ======================
   ITEM
====================== */

.notification-item{

  display:flex;

  gap:14px;

  padding:14px;

  background:#1a1a1a;

  border:1px solid #252525;

  border-radius:20px;

  margin-bottom:14px;

  transition:.2s;

}


.notification-item:hover{

  background:#202020;

}


/* ======================
   AVATAR
====================== */

.notification-avatar{

  width:52px;

  height:52px;

  border-radius:50%;

  object-fit:cover;

  border:2px solid #ff00c8;

}


/* ======================
   CONTENT
====================== */

.notification-content{

  flex:1;

}


.notification-content strong{

  display:block;

  margin-bottom:6px;

  font-size:15px;

}


.notification-content p{

  color:#ccc;

  font-size:14px;

  line-height:1.5;

}


/* ======================
   ANIMATION
====================== */

@keyframes slideNotification{

  from{

    transform:translateX(100%);

  }

  to{

    transform:translateX(0);

  }

}


/* ======================
   MOBILE
====================== */

@media(max-width:767px){

  .notification-container{

    max-width:none;

    width:100%;

  }

}

/* ======================
   SVG ICONS
====================== */

.left-sidebar button,

.bottom-nav button{

  display:flex;

  align-items:center;

  justify-content:center;

}


.left-sidebar svg,

.bottom-nav svg{

  width:24px;

  height:24px;

  stroke-width:2.2;

}