.comment-section { width: min(880px, 100%); margin: 70px auto 110px; padding-top: 38px; border-top: 1px solid var(--line); color: var(--ink); }
.comment-title { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.comment-title h2 { margin: 4px 0 0; font-size: 27px; }
.comment-title > span { color: var(--muted); font-size: 13px; white-space: nowrap; }
.comment-composer { padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--canvas); }
.comment-composer label { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 700; }
.comment-composer textarea,.comment-reply-form textarea,.comment-edit-form textarea { display: block; width: 100%; min-height: 112px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 7px; background: var(--canvas); color: var(--ink); font: 14px/1.9 Vazirmatn,sans-serif; resize: vertical; }
.comment-composer textarea:focus,.comment-reply-form textarea:focus,.comment-edit-form textarea:focus { outline: 2px solid var(--action); outline-offset: 2px; }
.comment-composer > div,.comment-reply-form > div,.comment-edit-form > div { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 12px; }
.comment-composer > div span { margin-inline-end: auto; color: var(--muted); font-size: 11px; }
.comment-composer button,.comment-reply-form button[type=submit],.comment-edit-form button[type=submit] { min-height: 38px; padding: 8px 17px; border: 0; border-radius: 6px; background: var(--action); color: var(--canvas); font: 700 12px Vazirmatn,sans-serif; }
.comment-composer button:disabled,.comment-reply-form button:disabled,.comment-edit-form button:disabled { opacity: .5; cursor: not-allowed; }
.comment-login { padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 14px; }
.comment-login a { color: var(--action); font-weight: 700; }
.comment-list { margin-top: 26px; }
.comment-thread { border-bottom: 1px solid var(--line); padding: 21px 0; }
.comment-card { display: flex; align-items: start; gap: 13px; }
.comment-avatar { display: grid; place-items: center; flex: none; width: 42px; height: 42px; overflow: hidden; border-radius: 50%; background: var(--surface); color: var(--action); font-size: 12px; font-weight: 700; }
.comment-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.comment-body { flex: 1; min-width: 0; }
.comment-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 12px; }
.comment-head strong { font-size: 13px; }
.comment-head time,.comment-head small { color: var(--muted); font-size: 11px; }
.comment-status { padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--canvas) 86%, #d3a04b); color: #8a5800; font-size: 10px; font-weight: 700; }
.comment-status[data-status=declined] { background: color-mix(in srgb, var(--canvas) 86%, #bf6e67); color: #a33c32; }
.comment-status[data-status=approved] { background: color-mix(in srgb, var(--canvas) 84%, #65b798); color: var(--action); }
.comment-quote { display: grid; gap: 3px; max-width: 52ch; margin: 10px 0; padding: 8px 12px; border-inline-start: 2px solid var(--action); border-radius: 5px; background: var(--surface); color: var(--muted); font-size: 11px; line-height: 1.8; }
.comment-quote strong { color: var(--action); font-size: 11px; }
.comment-quote span { display: block; overflow-wrap: anywhere; }
.comment-review-note { margin: 9px 0; padding: 9px 12px; border-radius: 6px; background: color-mix(in srgb, var(--canvas) 90%, #bf6e67); color: var(--ink); font-size: 12px; }
.comment-moderation-note { margin: 9px 0 0; color: var(--muted); font-size: 11px; }
.comment-text,.comment-deleted { margin: 8px 0 10px; color: var(--ink); font-size: 14px; line-height: 2; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-deleted { color: var(--muted); font-style: italic; }
.comment-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.comment-actions button,.comment-show-replies,.comment-reply-form button[type=button],.comment-edit-form button[type=button] { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 5px 8px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font: 600 12px Vazirmatn,sans-serif; }
.comment-actions button:hover,.comment-show-replies:hover { background: var(--surface); color: var(--action); }
.comment-actions button[aria-pressed=true] { color: var(--action); }
.comment-card[data-status=pending] [data-comment-action=like],
.comment-card[data-status=pending] [data-comment-action=reply],
.comment-card[data-status=declined] [data-comment-action=like],
.comment-card[data-status=declined] [data-comment-action=reply] { display: none; }
.comment-actions button svg { flex: none; }
.comment-show-replies { margin: 10px 55px 0 0; color: var(--action); }
.comment-replies { margin: 10px 55px 0 0; padding-inline-start: 17px; border-inline-start: 2px solid var(--line); }
.comment-reply { padding: 16px 0; }
.comment-reply + .comment-reply { border-top: 1px solid var(--line); }
.comment-reply-form { margin: 14px 55px 0 0; padding: 14px; border-radius: 8px; background: var(--surface); }
.comment-reply-form strong { display: block; margin-bottom: 8px; font-size: 12px; }
.comment-reply-form textarea,.comment-edit-form textarea { min-height: 82px; }
.comment-confirm { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; color: var(--muted); font-size: 12px; }
.comment-confirm button { padding: 6px 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--canvas); color: var(--ink); font: inherit; }
.comment-confirm button:first-of-type { color: #b8362f; }
.comment-error { margin: 14px 0; color: #b8362f; font-size: 13px; }
.comment-state { padding: 28px 0; color: var(--muted); font-size: 13px; }
.comment-more { display: block; margin: 25px auto 0; padding: 10px 22px; border: 1px solid var(--line); border-radius: 7px; background: var(--canvas); color: var(--action); font: 700 13px Vazirmatn,sans-serif; }
.post-collection-nav { width: min(880px, 100%); margin: 42px auto 0; padding: 26px; border: 1px solid var(--line); border-radius: 10px; background: var(--canvas); }
.post-like-action { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; width: min(880px, 100%); margin: 34px auto 0; }
.post-like-action button { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 9px 15px; border: 1px solid var(--line); border-radius: 7px; background: var(--canvas); color: var(--ink); font: 700 13px Vazirmatn,sans-serif; }
.post-like-action button:hover,.post-like-action button[aria-pressed=true] { border-color: var(--action); color: var(--action); }
.post-like-action button strong { min-width: 25px; padding-inline-start: 9px; border-inline-start: 1px solid var(--line); font-size: 12px; }
.post-like-action > span { color: var(--muted); font-size: 11px; }
.post-collection-nav > a { color: var(--action); font-size: 13px; font-weight: 700; }
.post-collection-nav h2 { margin: 7px 0 5px; font-size: 21px; }
.post-collection-nav p { color: var(--muted); font-size: 12px; }
.post-collection-links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.post-collection-links a { min-height: 88px; padding: 16px; border: 1px solid var(--line); border-radius: 7px; background: var(--canvas); text-decoration: none; }
.post-collection-links a:hover { border-color: var(--action); }
.post-collection-links > a:first-child { text-align: right; }
.post-collection-links > a:nth-child(2) { text-align: left; }
.post-collection-links span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 11px; }
.post-collection-links strong { color: var(--ink); font-size: 14px; line-height: 1.6; }
@media(max-width:700px){.comment-section{margin:50px auto 100px;padding-top:28px}.comment-title h2{font-size:23px}.comment-composer{padding:15px}.comment-replies,.comment-reply-form,.comment-show-replies{margin-inline-start:20px}.comment-avatar{width:34px;height:34px}.post-collection-nav{padding:20px}.post-collection-links{grid-template-columns:1fr}}
.content-category-list{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px}.content-category-list span{display:inline-flex;align-items:center;min-height:29px;padding:3px 11px;border:1px solid var(--line);border-radius:999px;color:var(--action);background:var(--surface);font:700 12px/1.6 Vazirmatn,sans-serif}