body { font-family: system-ui, Arial, sans-serif; margin: 0; padding: 0; }
header { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid #eee; }
header a { text-decoration: none; }
nav { margin-left: auto; display: flex; gap: 12px; }
.search input { padding: 6px; }
.layout { display: grid; grid-template-columns: 1fr 320px; gap: 24px; padding: 16px; }
.post { border-bottom: 1px solid #eee; padding: 12px 0; }
.post img, .post video { max-width: 100%; border-radius: 8px; }
.filters { padding: 12px 16px; display: flex; gap: 8px; }
.filters a.active { font-weight: bold; }
.sidebar { border-left: 1px dashed #ddd; padding-left: 16px; }
.messages { list-style: none; padding: 8px 16px; }
.comment { padding: 8px 0; border-bottom: 1px dashed #eee; }


/* Comment threads */
.comment-node { margin: 8px 0 8px 0; border-left: 2px solid #eee; padding-left: 10px; }
.comment-node .children { margin-left: 14px; }
.comment-header { display: flex; align-items: center; gap: 8px; }
.comment-header .reply-link { margin-left: auto; font-size: 0.9em; }
.toggle-thread { width: 24px; height: 24px; line-height: 20px; text-align: center; border: 1px solid #ddd; background: #f8f8f8; border-radius: 4px; cursor: pointer; }
.comment-body { margin: 4px 0 6px 32px; }
.collapsed > .children { display: none; }
.collapsed > .comment-body { display: none; }
.collapsed > .comment-header .toggle-thread { background: #eee; }