/* code by ai design and debug by omeo */
.post-card {
    background:rgba(255,255,255,0.06);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:12px; padding:28px;
    box-shadow:0 8px 32px rgba(0,0,0,0.3);
}
.post-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,0.08); }
.post-av { width:36px; height:36px; border-radius:50%; overflow:hidden; border:1px solid rgba(255,255,255,0.1); flex-shrink:0; }
.post-av img { width:100%; height:100%; object-fit:cover; }
.post-nm { font-size:16px; color:#fff; }
.post-un { font-size:12px; color:#fff; }
.post-time { font-size:11px; color:#fff; margin-bottom:6px; }
.post-body { font-size:15px; line-height:1.6; color:#fff; word-break:break-word; margin-bottom:10px; font-family:monospace; }

.post-media { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.post-media img, .post-media video { max-width:100%; border-radius:8px; }
.post-stats { display:flex; gap:16px; font-size:14px; color:#fff; padding-top:12px; margin-top:10px; border-top:1px solid rgba(255,255,255,0.08); }
.post-stats .spl { margin-right:auto; }
.post-stats svg { width:14px; height:14px; vertical-align:middle; }
.post-stats i { font-size:14px; vertical-align:middle; }
.post-stats span { cursor:default; display:flex; align-items:center; gap:4px; }
.post-stats .act { cursor:pointer; transition:color 0.15s; }
.post-stats .act:hover { color:#888; }
.cmt-area { border-top:1px solid rgba(255,255,255,0.06); margin-top:10px; padding-top:10px; }
.cmt-list { display:flex; flex-direction:column; gap:8px; margin-bottom:10px; max-height:200px; overflow-y:auto; }
.cmt-row { display:flex; gap:8px; align-items:flex-start; font-size:13px; }
.cmt-row .ca { width:24px; height:24px; border-radius:50%; overflow:hidden; flex-shrink:0; }
.cmt-row .ca img { width:100%; height:100%; object-fit:cover; }
.cmt-row .cb { flex:1; }
.cmt-row .cu { color:#fff; }
.cmt-row .ct { color:#fff; font-family:monospace; }
.cmt-inp { display:flex; gap:8px; }
.cmt-inp input {
    flex:1; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1);
    border-radius:6px; padding:6px 10px; color:#fff; font-size:14px; outline:none; font-family:monospace;
}
.cmt-inp input:focus { border-color:rgba(255,255,255,0.3); }
.cmt-inp button {
    background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.1);
    border-radius:6px; padding:6px 14px; color:#fff; font-size:14px; cursor:pointer; font-family:monospace;
}
.cmt-inp button:hover { background:rgba(255,255,255,0.15); }
.empty { text-align:center; color:#fff; padding:60px 20px; font-size:18px; letter-spacing:2px; opacity:0.5; }