.x-post { font-family:Arial,sans-serif; gap:12px; }
.x-post .avatar,.x-post .demo-avatar { width:40px; height:40px; }
.x-post-header { display:flex; gap:5px; align-items:center; font-size:15px; line-height:20px; }
.x-post-header strong { font-size:15px; color:#e7e9ea; }
.x-post-header>span { color:#71767b; font-size:14px; }
.x-post .x-post-body>p { font-size:15px; line-height:20px; white-space:pre-line; color:#e7e9ea; margin:5px 0 0; }
.x-icon { width:18px; height:18px; display:inline-block; flex:none; background:currentColor; mask:var(--icon) center/contain no-repeat; }
.x-reply { --icon:url('x-reply.svg'); }.x-like { --icon:url('x-like.svg'); }.x-views { --icon:url('x-views.svg'); }.x-more { --icon:url('x-more.svg'); margin-left:auto; color:#71767b; }
.x-actions { display:flex; justify-content:space-between; max-width:320px; margin-top:12px; color:#71767b; font-size:12px; }
.x-action,.x-actions .demo-comment { display:inline-flex; gap:8px; align-items:center; min-height:30px; min-width:44px; margin:0; padding:4px 0; border:0; background:transparent; font:inherit; color:inherit; }
.x-actions .demo-comment:hover,.x-actions .demo-comment.clicked { color:#1d9bf0; background:#1d9bf015; }
.x-action [data-count] { font-variant-numeric:tabular-nums; }
@media(max-width:760px) { .x-post .avatar,.x-post .demo-avatar { width:36px; height:36px; } .x-post-header { flex-wrap:wrap; } }
.x-verified { --icon:url('x-verified.svg'); color:#1d9bf0; width:18px; height:18px; }
.x-grok { --icon:url('x-grok.svg'); width:20px; height:20px; }
.x-repost { --icon:url('x-repost.svg'); }
.x-bookmark { --icon:url('x-bookmark.svg'); }
.x-share { --icon:url('x-share.svg'); }
.x-post-header { flex-wrap:nowrap; gap:4px; }
.x-post-header strong { flex-shrink:0; }
.x-post-header .x-handle { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.x-post-header .x-time { white-space:nowrap; flex-shrink:0; }
.x-post-header .x-header-tools { margin-left:auto; padding-left:8px; display:flex; gap:12px; flex:none; color:#71767b; }
.x-header-tools .x-more { margin:0; }
.x-actions { max-width:none; gap:8px; }
.x-action,.x-actions .demo-comment { min-width:0; gap:5px; }
.x-actions .x-icon { width:18px; height:18px; }
@media(max-width:480px) { .x-post-header strong { font-size:14px; } .x-post-header>span { font-size:12px; } .x-post-header .x-header-tools { gap:6px; padding-left:3px; } .x-actions { gap:5px; font-size:11px; } .x-actions .x-icon { width:16px; height:16px; } }