.comment-system{max-width:800px;margin:2rem auto;padding:0 1rem}.comment-form-wrapper{background:#fff;border-radius:12px;padding:2rem;margin-bottom:2rem;box-shadow:0 2px 10px rgba(0,0,0,.1);border:1px solid #e1e8ed}.comment-title{font-size:1.5rem;margin-bottom:1.5rem;color:#2c3e50;font-weight:600}.comment-form .form-group{margin-bottom:1rem;position:relative}.comment-form input,.comment-form textarea{width:100%;padding:.875rem 1rem;border:2px solid #e1e8ed;border-radius:8px;font-size:.95rem;font-family:inherit;transition:all .3s ease;background:#fafbfc}.comment-form input:focus,.comment-form textarea:focus{outline:0;border-color:#3498db;background:#fff;box-shadow:0 0 0 3px rgba(52,152,219,.1)}.comment-form textarea{resize:vertical;min-height:100px;line-height:1.6}.char-counter{position:absolute;bottom:.5rem;right:1rem;font-size:.8rem;color:#7f8c8d;pointer-events:none}.submit-btn{background:linear-gradient(135deg,#3498db,#2980b9);color:#fff;border:none;padding:.875rem 2rem;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:.5rem;min-width:120px;justify-content:center}.submit-btn:hover:not(:disabled){background:linear-gradient(135deg,#2980b9,#1f5f99);transform:translateY(-1px);box-shadow:0 4px 12px rgba(52,152,219,.3)}.submit-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}.btn-loading{display:none;align-items:center;gap:.5rem}.spinner{width:16px;height:16px}.comments-section{background:#fff;border-radius:12px;padding:2rem;box-shadow:0 2px 10px rgba(0,0,0,.1);border:1px solid #e1e8ed}.comments-title{font-size:1.5rem;margin-bottom:1.5rem;color:#2c3e50;font-weight:600;border-bottom:2px solid #ecf0f1;padding-bottom:.5rem}.comments-list{margin-top:1rem}.comment{display:flex;gap:1rem;padding:1.5rem 0;border-bottom:1px solid #ecf0f1}.comment:last-child{border-bottom:none}.comment-avatar{flex-shrink:0}.avatar{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:1.2rem}.comment-content{flex:1;min-width:0}.comment-meta{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem;flex-wrap:wrap}.comment-author{font-weight:600;color:#2c3e50}.comment-author a{color:#3498db;text-decoration:none;transition:color .3s ease}.comment-author a:hover{color:#2980b9;text-decoration:underline}.comment-time{font-size:.85rem;color:#7f8c8d}.comment-text{color:#34495e;line-height:1.6;word-wrap:break-word}.comment-text a{color:#3498db;text-decoration:none}.comment-text a:hover{text-decoration:underline}.load-more-btn{background:#ecf0f1;color:#2c3e50;border:2px solid #bdc3c7;padding:.75rem 1.5rem;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:block;margin:2rem auto 0}.load-more-btn:hover{background:#d5dbdb;border-color:#95a5a6;transform:translateY(-1px)}.comment-message{padding:1rem 1.5rem;border-radius:8px;margin-bottom:1rem;font-weight:500;animation:slideIn .3s ease}.comment-message--success{background:#d5f4e6;color:#27ae60;border:1px solid #a3e4b8}.comment-message--error{background:#fdf2f2;color:#e74c3c;border:1px solid #f5c6cb}.comment-message--info{background:#e3f2fd;color:#2196f3;border:1px solid #b3e5fc}@keyframes slideIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@media (max-width:768px){.comment-system{padding:0 .5rem}.comment-form-wrapper,.comments-section{padding:1.5rem}.comment{gap:.75rem}.avatar{width:40px;height:40px;font-size:1rem}.comment-meta{gap:.5rem}.comment-form input,.comment-form textarea{padding:.75rem;font-size:.9rem}}@media (max-width:480px){.comment-form-wrapper,.comments-section{padding:1rem;border-radius:8px}.submit-btn{padding:.75rem 1.5rem;font-size:.95rem}}@media (prefers-color-scheme:dark){.comment-form-wrapper,.comments-section{background:#2c3e50;border-color:#34495e;color:#ecf0f1}.comment-title,.comments-title{color:#ecf0f1}.comment-form input,.comment-form textarea{background:#34495e;border-color:#4a5f7a;color:#ecf0f1}.comment-form input:focus,.comment-form textarea:focus{background:#34495e;border-color:#3498db}.comment-author{color:#ecf0f1}.comment-text{color:#bdc3c7}.load-more-btn{background:#34495e;color:#ecf0f1;border-color:#4a5f7a}.load-more-btn:hover{background:#4a5f7a}}