#comments{background:#fff;border:1px solid #f0f0f0;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,.08);margin-top:30px;padding:24px}.comment-header{border-bottom:2px solid #f5f5f5;justify-content:space-between;margin-bottom:24px;padding-bottom:16px}.comment-header,.comment-title{align-items:center;display:flex}.comment-title{color:#2c3e50;font-size:20px;font-weight:600;margin:0}.comment-title i{color:#3498db;font-size:22px;margin-right:8px}.comment-count{color:#7f8c8d;font-size:14px;font-weight:400;margin-left:8px}.comment-sort{align-items:center;display:flex}.layui-select{background:#fff;border:1px solid #ddd;border-radius:6px;color:#333;cursor:pointer;font-size:14px;padding:6px 12px;transition:all .3s ease}.layui-select:focus{border-color:#3498db;box-shadow:0 0 0 2px rgba(52,152,219,.1);outline:none}.comment-list{margin-bottom:24px}.comment-pagination{margin-bottom:24px;text-align:center}.comment-item{background:#fff;border:1px solid #f0f0f0;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.04);margin-bottom:20px;padding:20px;position:relative;transition:all .3s ease}.comment-item:hover{box-shadow:0 4px 16px rgba(0,0,0,.08);transform:translateY(-1px)}.comment-item-head{align-items:flex-start;display:flex;justify-content:space-between;margin-bottom:12px}.comment-user{gap:12px}.comment-avatar,.comment-user{align-items:center;display:flex}.comment-avatar{background:linear-gradient(135deg,#667eea,#764ba2);border:2px solid #fff;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.08);color:#fff;flex-shrink:0;font-size:16px;font-weight:700;height:44px;justify-content:center;overflow:hidden;width:44px}.comment-avatar img{border-radius:50%;height:100%;object-fit:cover;width:100%}.comment-user-info{display:flex;flex-direction:column;gap:4px}.comment-username{align-items:center;color:#2c3e50;display:flex;font-size:14px;font-weight:600;gap:8px}.comment-badge{background:#3498db;border-radius:10px;color:#fff;font-size:10px;font-weight:400;padding:2px 6px}.comment-time{color:#95a5a6;font-size:12px}.comment-user-meta{align-items:center;display:flex;flex-wrap:wrap;gap:8px}.comment-user-level{background:#f4f6f8;border-radius:4px;color:#7f8c8d;font-size:11px;font-weight:600;line-height:1.4;padding:1px 6px}.comment-achievement-count{color:#9b59b6;font-size:11px;font-weight:500}.comment-user-titles{margin-top:6px}.comment-title-chips-row,.comment-user-titles{align-items:center;display:flex;flex-wrap:wrap;gap:6px 8px;max-width:100%}.comment-title-chip{align-items:center;background:rgba(0,0,0,.03);border:1px solid;border-radius:999px;display:inline-flex;font-size:11px;font-weight:600;gap:4px;line-height:1.35;max-width:100%;padding:2px 8px}.comment-title-chip-text{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.comment-title-chip i{flex-shrink:0;font-size:10px;opacity:.95}.comment-title-chip.is-active{background:rgba(52,152,219,.12);box-shadow:0 0 0 1px rgba(52,152,219,.2)}.comment-titles-toggle{background:#f8f9fa;border:1px dashed #bdc3c7;border-radius:999px;color:#3498db;cursor:pointer;font-size:12px;font-weight:600;line-height:1.4;padding:2px 10px;transition:background .2s ease,border-color .2s ease}.comment-titles-toggle:hover{background:#e8f4fc;border-color:#3498db}.comment-title-chips-rest{display:flex;flex-wrap:wrap;gap:6px 8px;margin-top:6px;width:100%}.comment-item--nested{border-left:2px solid #e3eef8;margin-left:8px;padding-left:14px}.comment-item--nested .comment-avatar{font-size:14px;height:36px;width:36px}.comment-content{color:#34495e;font-size:14px;line-height:1.6;margin-bottom:16px;word-wrap:break-word}.comment-content img{border-radius:8px;margin:8px 0;max-width:100%}.comment-content a{color:#3498db;text-decoration:none}.comment-content a:hover{text-decoration:underline}.comment-item .comment-actions{align-items:center;border-top:1px solid #f5f5f5;display:flex;gap:16px;padding-top:12px}.action-btn{align-items:center;background:transparent;border:none;border-radius:6px;color:#7f8c8d;cursor:pointer;display:flex;font-size:13px;gap:6px;padding:6px 12px;transition:all .3s ease}.action-btn:hover{background:#f8f9fa;color:#3498db}.action-btn.active{background:#fdf2f2;color:#e74c3c}.action-btn i{font-size:14px}.action-btn.is-busy,.like-btn.is-busy{opacity:.55;pointer-events:none}.replies{border-left:3px solid #e9ecef;margin-left:40px;margin-top:16px;padding-left:20px;position:relative}.replies:before{background:linear-gradient(180deg,#3498db,transparent);border-radius:0 0 3px 0;content:"";height:20px;left:-3px;position:absolute;top:0;width:3px}.replies .comment-item{background:#f8f9fa;border:1px solid #e9ecef;box-shadow:none;margin-bottom:12px}.replies .comment-item:hover{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.04)}.reply-to{color:#3498db;font-size:13px;font-weight:500;margin-left:8px}.reply-to:before{color:#95a5a6;content:"回复 @"}.reply-count{background:#f8f9fa;border-radius:10px;color:#7f8c8d;font-size:12px;margin-left:8px;padding:2px 6px}.replies-wrapper{border-top:1px solid #f5f5f5;margin-top:12px;padding-top:12px}.load-more-replies{border-radius:6px;color:#3498db;cursor:pointer;font-size:13px;padding:12px;text-align:center;transition:all .3s ease}.load-more-replies:hover{background:#f8f9fa}.comment-empty{color:#95a5a6;padding:60px 20px;text-align:center}.comment-empty i{color:#bdc3c7;font-size:48px;margin-bottom:16px}.comment-empty p{font-size:16px;margin:0}.comment-loading{color:#7f8c8d;padding:40px 20px;text-align:center}.comment-loading i{animation:spin 1s linear infinite;font-size:24px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.comment-input-area{background:#f8f9fa;border:1px solid #e9ecef;border-radius:12px;box-sizing:border-box;max-width:100%;overflow:visible;padding:20px;position:relative}.comment-input-header{box-sizing:border-box;display:flex;gap:16px;max-width:100%}.user-avatar{flex-shrink:0}.user-avatar .avatar-text,.user-avatar img{border:2px solid #fff;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.1);height:44px;object-fit:cover;overflow:hidden;width:44px}.avatar-text{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:flex;font-size:18px;font-weight:700;justify-content:center}.comment-input-wrapper{box-sizing:border-box;flex:1;max-width:100%;min-width:0}.reply-state-bar{align-items:center;background:linear-gradient(90deg,#e8f4fc,#f5f9ff);border:1px solid #d6e8f5;border-radius:8px;color:#2c3e50;display:flex;font-size:13px;gap:10px;justify-content:space-between;margin-bottom:10px;padding:8px 12px}.reply-state-text strong{color:#3498db;font-weight:600}.reply-state-dismiss{background:transparent;border:none;border-radius:4px;color:#7f8c8d;cursor:pointer;font-size:20px;line-height:1;padding:0 4px}.reply-state-dismiss:hover{background:rgba(231,76,60,.08);color:#e74c3c}.comment-input-toolbar{border-bottom:1px solid #e9ecef;display:flex;gap:8px;margin-bottom:12px;padding:8px 0}.toolbar-btn{align-items:center;background:#fff;border:1px solid #ddd;border-radius:6px;color:#666;cursor:pointer;display:flex;font-size:14px;height:32px;justify-content:center;transition:all .3s ease;width:32px}#emojiBtn{position:relative}#emojiBtn i{font-size:16px;line-height:1}#emojiBtn:hover{transform:scale(1.05)}#emojiBtn:hover,.toolbar-btn:hover{background:#f8f9fa;border-color:#3498db;color:#3498db}.toolbar-btn.active{background:#e3f2fd;border-color:#3498db;color:#3498db}.comment-textarea{background:#fff;border:1px solid #e9ecef;border-radius:8px;box-sizing:border-box;font-size:14px;line-height:1.6;max-width:100%;min-height:100px;padding:16px;resize:vertical;transition:all .3s ease;width:100%;word-wrap:break-word;overflow-wrap:break-word}.comment-textarea:focus{border-color:#3498db;box-shadow:0 0 0 3px rgba(52,152,219,.1);outline:none}.comment-input-footer{align-items:center;border-top:1px solid #e9ecef;display:flex;justify-content:space-between;margin-top:12px;padding-top:12px}.comment-tip{align-items:center;color:#6c757d;display:flex;font-size:12px;gap:12px}#charCount,.login-tip{font-weight:500}.login-tip{color:#e74c3c}.comment-actions{display:flex;gap:8px}.emoji-picker{background:#fff;border:1px solid #ddd;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.15);box-sizing:border-box;display:none;font-family:Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji,sans-serif;max-width:calc(100vw - 20px);position:absolute;width:320px;z-index:10000}.emoji-tabs{background:#f8f9fa;border-bottom:1px solid #e9ecef;border-radius:8px 8px 0 0;display:flex}.emoji-tab{border-bottom:2px solid transparent;color:#666;cursor:pointer;flex:1;font-size:12px;padding:12px;text-align:center;transition:all .3s ease}.emoji-tab.active{background:#fff;border-bottom-color:#3498db;color:#3498db}.emoji-content{background:#fff;display:grid;gap:8px;grid-template-columns:repeat(8,1fr);max-height:200px;overflow-y:auto;padding:16px}.emoji-item{align-items:center;border-radius:4px;cursor:pointer;display:flex;font-size:20px;height:32px;justify-content:center;line-height:1;transition:all .3s ease;user-select:none;width:32px}.emoji-item:hover{background:#f8f9fa;transform:scale(1.1)}.format-toolbar{border:1px solid #ddd;border-radius:6px;box-shadow:0 2px 12px rgba(0,0,0,.1);gap:4px;padding:8px;position:absolute;z-index:1000}.format-btn,.format-toolbar{background:#fff;display:flex}.format-btn{align-items:center;border:1px solid #ddd;border-radius:4px;color:#666;cursor:pointer;font-size:12px;font-weight:700;height:28px;justify-content:center;transition:all .3s ease;width:28px}.format-btn:hover{background:#f8f9fa;border-color:#3498db;color:#3498db}.format-btn.active{background:#e3f2fd;border-color:#3498db;color:#3498db}.like-btn{position:relative;transition:all .3s ease}.like-btn.layui-btn-danger{background-color:#ff6b6b}.like-btn:hover{transform:scale(1.1)}.like-btn i{transition:all .3s ease}.like-btn.layui-btn-danger i{animation:heartBeat .3s ease-in-out}@keyframes heartBeat{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}@media (max-width:768px){#comments{margin-top:20px;padding:16px}.comment-header{align-items:flex-start}.comment-header,.comment-input-header{flex-direction:column;gap:12px}.user-avatar{align-self:flex-start}.comment-input-toolbar{justify-content:center}.comment-input-footer{align-items:stretch;flex-direction:column;gap:12px}.comment-actions{justify-content:center}.emoji-picker{left:50%!important;transform:translateX(-50%);width:280px}.emoji-content{grid-template-columns:repeat(6,1fr)}.format-toolbar{left:50%!important;transform:translateX(-50%)}.replies{margin-left:20px;padding-left:12px}.comment-item{padding:16px}.comment-user{gap:8px}.comment-avatar{font-size:14px;height:32px;width:32px}}