.post-card { animation: fadeIn 0.3s ease-out; } .post-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; } .post-author { display: flex; gap: 12px; cursor: pointer; user-select: none; } .author-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; } .author-info { display: flex; flex-direction: column; gap: 2px; } .author-name { font-size: 15px; font-weight: 600; color: var(--text-primary); } .post-date { font-size: 13px; color: var(--text-secondary); } .menu-btn { width: 32px; height: 32px; border-radius: 50%; background: transparent; color: var(--text-primary); display: flex; align-items: center; justify-content: center; } .menu-btn svg { stroke: currentColor; } .menu-btn:active { background: var(--bg-primary); } .post-content { font-size: 15px; line-height: 1.5; color: var(--text-primary); margin-bottom: 12px; white-space: pre-wrap; word-wrap: break-word; } .post-image { margin: 0 -16px 12px; width: calc(100% + 32px); max-height: 400px; overflow: hidden; } .post-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .post-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .post-tag { padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 600; color: white; } .nsfw-badge { padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 600; background: #FF3B30; color: white; } .post-actions { display: flex; gap: 16px; padding-top: 12px; border-top: 1px solid var(--divider-color); } .action-btn { display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 20px; background: transparent; color: var(--text-primary); font-size: 14px; font-weight: 500; transition: all 0.2s; } .action-btn:active { background: var(--bg-primary); } .action-btn.active { color: var(--text-primary); } .action-btn span { min-width: 20px; }