.posts-feed{

margin-top:30px;

background:#111827;

border:1px solid rgba(255,255,255,.08);

border-radius:24px;

padding:24px;

box-shadow:
0 10px 40px rgba(0,0,0,.35);

}

.posts-feed-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:20px;

}

.posts-feed-header h2{

margin:0;

font-size:22px;

font-weight:800;

color:#fff;

}

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

#openCreatePost{

display:flex;

align-items:center;

justify-content:center;

gap:10px;

}

/* ==========================
   MODAL
========================== */

.create-post-modal{

position:fixed;

top:0;

left:0;

right:0;

bottom:0;

display:none;

align-items:center;

justify-content:center;

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

backdrop-filter:blur(8px);

z-index:999999;

padding:20px;

}

.create-post-window{

width:min(900px,92vw);

max-height:90vh;

overflow:auto;

background:#0f172a;

border:1px solid rgba(255,255,255,.08);

border-radius:28px;

box-shadow:
0 40px 100px rgba(0,0,0,.60);

}

.create-post-header{

display:flex;

justify-content:center;

align-items:center;

position:relative;

padding:28px;

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

}

.create-post-header h2{

margin:0;

font-size:34px;

font-weight:900;

color:#fff;

}

.create-post-close{

position:absolute;

right:20px;

top:20px;

width:54px;

height:54px;

border:none;

border-radius:50%;

cursor:pointer;

display:flex;

align-items:center;

justify-content:center;

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

color:#fff;

}

.create-post-close svg{

width:26px;

height:26px;

}

.create-post-body{

padding:30px;

}

.create-post-textarea{

width:100%;

min-height:260px;

resize:none;

border:none;

outline:none;

background:none;

font-size:34px;

line-height:1.4;

color:#fff;

padding:0;

}

.create-post-textarea::placeholder{

color:rgba(255,255,255,.35);

}

.create-post-actions{

display:flex;

gap:16px;

margin-top:20px;

padding-top:20px;

border-top:1px solid rgba(255,255,255,.08);

}

.create-post-action{

display:flex;

align-items:center;

gap:12px;

padding:14px 18px;

border:none;

border-radius:14px;

cursor:pointer;

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

color:#fff;

font-weight:700;

}

.create-post-action svg{

width:22px;

height:22px;

}

.post-preview-grid{

display:grid;

grid-template-columns:
repeat(auto-fill,minmax(160px,1fr));

gap:12px;

margin-top:20px;

}

.create-post-footer{

padding:24px 30px;

border-top:1px solid rgba(255,255,255,.08);

display:flex;

justify-content:flex-end;

}

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

.mobile-post-icon{

display:none;

width:22px;

height:22px;

}

@media(max-width:768px){

.create-post-modal{

padding:0;

}

.create-post-window{

width:100%;

height:100%;

max-height:none;

border-radius:0;

}

.create-post-header h2{

font-size:28px;

}

.create-post-textarea{

font-size:24px;

min-height:220px;

}

.create-post-actions{

flex-direction:column;

}

.create-post-action{

width:100%;

justify-content:center;

}

.create-post-footer{

padding:20px;

}

#createPostModal .btn{

width:100%;

}

.desktop-post-text{

display:none;

}

.mobile-post-icon{

display:block;

}

#openCreatePost{

width:56px;

height:56px;

padding:0;

border-radius:50%;

font-size:0;

}

}

.mobile-post-icon{

display:none;

width:24px;

height:24px;

}

@media(max-width:768px){

.desktop-post-text{

display:none;

}

.mobile-post-icon{

display:block;

}

#openCreatePost{

width:56px;

height:56px;

padding:0;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

}

}

.post-preview-grid{

display:grid;

grid-template-columns:
repeat(
auto-fill,
minmax(
120px,
120px
)
);

gap:12px;

margin-top:20px;

justify-content:flex-start;

}

.post-preview-item{

aspect-ratio:1;

overflow:hidden;

border-radius:16px;

background:#111827;

}

.post-preview-item{

position:relative;

isolation:isolate;

}

.post-preview-item img{

width:100%;

height:100%;

object-fit:cover;

display:block;

}

.post-preview-item{

position:relative;

}

.post-media-remove{

position:absolute;

top:8px;

right:8px;

width:32px;

height:32px;

border:none;

border-radius:50%;

cursor:pointer;

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

color:#fff;

font-size:20px;

font-weight:700;

display:flex;

align-items:center;

justify-content:center;

z-index:100;

}

.post-preview-item video{

width:100%;

height:100%;

object-fit:cover;

display:block;

border-radius:16px;

}

@media(max-width:768px){

.post-preview-grid{

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

gap:8px;

}

.post-preview-item{

aspect-ratio:1;

}

}

.post-counter{

margin-top:16px;

margin-bottom:10px;

font-size:13px;

font-weight:700;

color:#9ca3af;

}

.feed-post{

background:#0f172a;

border:1px solid rgba(
255,
255,
255,
.08
);

border-radius:20px;

padding:20px;

margin-bottom:16px;

}

.feed-post-header{

display:flex;

justify-content:space-between;

margin-bottom:14px;

}

.feed-post-user{

display:flex;

align-items:center;

gap:12px;

}

.feed-post-user img{

width:48px;

height:48px;

border-radius:50%;

object-fit:cover;

}

.feed-post-name{

font-weight:800;

color:#fff;

}

.feed-post-date{

font-size:12px;

color:#9ca3af;

margin-top:2px;

}

.feed-post-content{

color:#e5e7eb;

line-height:1.7;

font-size:15px;

white-space:pre-wrap;

}