.modern-comment-system{max-width:800px;margin:0 auto;padding:20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.comment-system-header{margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid #e5e7eb}.comment-system-header h2{font-size:24px;font-weight:600;color:#111827;margin:0 0 8px}.comment-system-header p{color:#6b7280;margin:0;font-size:14px}.add-comment-section{margin-bottom:32px;padding:20px;background:#f9fafb;border-radius:12px;border:1px solid #e5e7eb}.comment-input-wrapper{display:flex;gap:12px;align-items:flex-start}.input-container{flex:1}.comment-input{width:100%;padding:12px 16px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;line-height:1.5;resize:vertical;min-height:80px;font-family:inherit;transition:border-color .2s ease}.comment-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1)}.input-actions{display:flex;justify-content:flex-end;margin-top:12px}.submit-comment-btn{background:#3b82f6;color:white;border:none;padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.submit-comment-btn:hover:not(:disabled){background:#2563eb}.submit-comment-btn:disabled{background:#9ca3af;cursor:not-allowed}.comments-list{list-style:none!important;padding:0!important;margin:0!important}.comment-item-new{position:relative!important;margin-bottom:10px!important}.comment-content{display:flex;gap:12px;position:relative}.comment-avatar{flex-shrink:0}.comment-body{flex:1;min-width:0}.comment-body-inner{background:#f6f6f6;padding:12px;border-radius:12px;width:fit-content}.comment-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}.author-name{font-weight:600;color:#111827!important;font-size:14px}.timestamp{color:#6b7280;font-size:12px}.comment-text p{margin:0;color:#374151;font-size:14px;line-height:1.5}.comment-actions{display:flex;gap:16px;align-items:center}.action-btn,.action-text{font-size:12px;font-weight:500;color:#6b7280}.action-btn{display:flex;align-items:center;gap:4px;background:none;border:none;cursor:pointer;padding:4px 8px;border-radius:4px}.action-btn:hover{font-weight:600;color:#111827!important}.like-btn.liked{color:#ef4444}.like-btn.liked:hover{background:#fef2f2;color:#ef4444}.reply-input{margin-top:12px;padding:12px;background:#f9fafb;border-radius:16px;border:1px solid #e5e7eb}.reply-textarea{width:100%;padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;resize:vertical;min-height:60px;font-family:inherit}.reply-textarea:focus{outline:none;border-color:#3b82f6}.reply-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}.cancel-btn{background:none;border:1px solid #d1d5db;color:#6b7280;border-radius:4px}.cancel-btn,.submit-btn{padding:6px 12px;font-size:12px;cursor:pointer}.submit-btn{background:#3b82f6;color:white;border:none;border-radius:4px}.replies-list{list-style:none;padding:0;margin:16px 0 0 52px;position:relative}.comment-item-new:has(.replies-list){position:relative}.comment-item-new:has(.replies-list):after{content:"";position:absolute;left:28px;top:48px;bottom:0;width:2px;background:#e5e7eb;z-index:1}.comment-item-new.depth-1{margin-left:0}.comment-item-new.depth-1 .comment-content:before{content:"";position:absolute;left:-24px;top:0;width:20px;height:20px;border-left:2px solid #e5e7eb;border-bottom:2px solid #e5e7eb;border-bottom-left-radius:10px}.comment-item-new.depth-2{margin-left:0}.comment-item-new.depth-2 .comment-content:after{content:"";position:absolute;left:-24px;top:8px;width:20px;height:20px;border-left:2px solid #e5e7eb;border-bottom:2px solid #e5e7eb;border-bottom-left-radius:12px}.comment-item-new.depth-2 .comment-content:before,.comment-item-new.depth-3 .comment-content:before,.comment-item-new.depth-4 .comment-content:before,.comment-item-new.depth-5 .comment-content:before{display:none}.comment-item-new.depth-3 .comment-content:after,.comment-item-new.depth-4 .comment-content:after,.comment-item-new.depth-5 .comment-content:after{content:"";position:absolute;left:-24px;top:8px;width:20px;height:20px;border-left:2px solid #e5e7eb;border-bottom:2px solid #e5e7eb;border-bottom-left-radius:12px}@media (max-width:768px){.modern-comment-system{padding:16px}.replies-list{margin-left:40px}.comment-item-new:has(.replies-list):after{left:20px}.comment-item-new.depth-1 .comment-content:before{left:-16px;width:16px}.comment-item-new.depth-2 .comment-content:after{left:-16px;width:14px}}@media (prefers-color-scheme:dark){.modern-comment-system{background:var(--bg-elev1);color:var(--text-main);width:100%}.comment-system-header{border-bottom-color:#374151}.comment-system-header h2{color:#020202}.comment-system-header p{color:#9ca3af}.add-comment-section,.comment-input{background:#374151;border-color:#4b5563}.comment-input{color:#f9fafb}.comment-input:focus{border-color:#60a5fa;box-shadow:0 0 0 3px rgba(96,165,250,.1)}.author-name{color:#f9fafb}.comment-text p{color:#000000}.action-btn{color:#9ca3af}.action-btn:hover{font-weight:600;color:#111827!important}.reply-textarea{background:#374151;border-color:#4b5563;color:#f9fafb}.cancel-btn{border-color:#4b5563;color:#9ca3af}}.comment-item-new{animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.action-btn:focus,.cancel-btn:focus,.submit-btn:focus,.submit-comment-btn:focus{outline:2px solid #3b82f6;outline-offset:2px}.show-replies-text{color:#3b82f6;font-size:14px;font-weight:700;cursor:pointer;margin-left:48px}.dot-loader{width:40px;aspect-ratio:2;--_g:no-repeat radial-gradient(circle closest-side,#6b7280 90%,#0000);background:var(--_g) 0 50%,var(--_g) 50% 50%,var(--_g) 100% 50%;background-size:calc(100% / 3) 50%;animation:l3 1s linear infinite}@keyframes l3{20%{background-position:0 0,50% 50%,100% 50%}40%{background-position:0 100%,50% 0,100% 50%}60%{background-position:0 50%,50% 100%,100% 0}80%{background-position:0 50%,50% 50%,100% 100%}}