.comments-section{padding:20px;background:var(--input-bg);border-radius:0.5em;border:2px solid var(--border);box-shadow:4px 4px 0 0 var(--shadow-color)}.comments-section h2{margin:0 0 20px;font-size:24px}.comment-form{margin-bottom:20px}.comment-form textarea{width:100%;min-height:80px;padding:12px;background:var(--input-bg);border:2px solid var(--border);border-radius:0.375em;color:var(--text);font-family:inherit;font-size:14px;resize:vertical;margin-bottom:8px;box-shadow:2px 2px 0 0 var(--shadow-color);transition:all 0.12s ease}.comment-form textarea:focus{outline:none;border-color:var(--accent);transform:translate(-1px, -1px);box-shadow:3px 3px 0 0 var(--shadow-color)}.comments-list{display:grid;gap:12px}.comment{background:var(--input-bg);border:2px solid var(--border);border-radius:0.375em;padding:12px;box-shadow:3px 3px 0 0 var(--shadow-color);transition:all 0.12s ease}.comment:hover{transform:translate(-1px, -1px);box-shadow:4px 4px 0 0 var(--shadow-color)}.comment-header{display:flex;justify-content:flex-start;align-items:center;margin-bottom:8px;gap:8px}.comment-author{font-weight:600;color:var(--accent);text-decoration:none}.comment-date{font-size:13px;color:var(--muted)}.comment-body{color:var(--text-secondary);line-height:1.6;font-size:14px}.comment-body p{margin:0}.comment-actions{margin-top:8px;display:flex;gap:8px;align-items:center}.reply-btn{background:var(--input-bg);border:1px solid var(--border);color:var(--accent);cursor:pointer;font-size:12px;font-weight:600;padding:4px 8px;border-radius:0.25em;transition:all 0.12s ease;box-shadow:1px 1px 0 0 var(--shadow-color)}.reply-btn:hover{transform:translate(-1px, -1px);box-shadow:2px 2px 0 0 var(--shadow-color);border-color:var(--accent)}.delete-comment-btn{background:var(--input-bg);border:1px solid var(--border);color:var(--muted);cursor:pointer;font-size:12px;padding:4px 8px;border-radius:0.25em;transition:all 0.12s ease;box-shadow:1px 1px 0 0 var(--shadow-color)}.delete-comment-btn:hover{color:var(--error, #ef4444);border-color:#ef4444;transform:translate(-1px, -1px);box-shadow:2px 2px 0 0 #ef4444}.reply-form{display:none;margin-top:12px;padding-top:12px;border-top:2px solid var(--border)}.reply-form.show{display:block}.reply-form textarea{width:100%;min-height:60px;padding:10px;border-radius:0.375em;border:2px solid var(--border);background:var(--input-bg);color:var(--text);font-size:14px;font-family:inherit;resize:vertical;margin-bottom:8px;box-shadow:2px 2px 0 0 var(--shadow-color);transition:all 0.12s ease}.reply-form textarea:focus{outline:none;border-color:var(--accent);transform:translate(-1px, -1px);box-shadow:3px 3px 0 0 var(--shadow-color)}.reply-form-actions{display:flex;gap:8px}.reply-submit-btn,.cancel-btn{font-size:12px !important;padding:6px 12px !important}.comment-replies{margin-top:12px;padding-top:12px;border-top:2px solid var(--border);display:grid;gap:12px}.comment-replies:empty{display:none}.comment-replies .comment{background:transparent;border:none;border-radius:0.375em;padding:0 0 0 20px;margin-left:12px;border-left:2px solid var(--border);box-shadow:none}.comment-replies .comment:hover{border-left-color:var(--accent);transform:none}.comment-replies .comment-replies{margin-top:8px;padding-top:8px}.comment-replies .comment-replies .comment{margin-left:8px;padding-left:16px}.like-button-wrapper{display:inline-flex;align-items:center}.like-btn{display:inline-flex;align-items:center;gap:4px;background:var(--input-bg);border:1px solid var(--border);color:var(--muted);cursor:pointer;font-size:12px;padding:4px 8px;border-radius:0.25em;transition:all 0.12s ease;box-shadow:1px 1px 0 0 var(--shadow-color)}.like-btn:hover{transform:translate(-1px, -1px);box-shadow:2px 2px 0 0 var(--shadow-color);color:var(--text)}.like-btn.liked{color:#ef4444;border-color:#ef4444}.like-btn.liked svg{fill:#ef4444;stroke:#ef4444}.like-btn svg{flex-shrink:0}.like-count{font-weight:500}.like-count-display{display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-size:12px;padding:4px 8px}.like-count-display svg{color:#ef4444;fill:#ef4444}.collapse-toggle{display:inline-flex;align-items:center;gap:4px;background:var(--input-bg);border:1px solid var(--border);color:var(--muted);cursor:pointer;font-size:12px;padding:4px 8px;border-radius:0.25em;transition:all 0.12s ease;margin-top:8px;box-shadow:1px 1px 0 0 var(--shadow-color)}.collapse-toggle:hover{transform:translate(-1px, -1px);box-shadow:2px 2px 0 0 var(--shadow-color);color:var(--text)}.collapse-toggle .collapse-text{font-weight:500}.comment-replies.collapsed{display:none}.collapse-toggle .collapse-icon{display:inline-block;transition:transform 0.2s ease;font-size:10px}.collapse-toggle.collapsed .collapse-icon{transform:rotate(-90deg)}
