.comment-user-rank, .comment-user-friend, .comment-user-admin{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;border-radius:6px;font-size:0.8em;margin-left:6px;line-height:1.375;vertical-align:middle;font-weight:500;margin-right:3px;border:none;transition:all 0.2s ease-in-out;align-self:center;box-sizing:border-box;position:relative;text-align:center;top:-1px;}
.author_name{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;align-items:center;flex-wrap:wrap;gap:4px;line-height:1.375;width:100%;}
.author_name .fn, .author_name a{line-height:1.375;vertical-align:middle;display:inline-flex;align-items:center;}
.comment-user-rank.rank-1{background-color:#232323 !important;color:#E8E8E8 !important;font-weight:500;}
.comment-user-rank.rank-2{background-color:#8A6E4F !important;color:#FFFFFF !important;font-weight:500;}
.comment-user-rank.rank-3{background-color:#C9C9C9 !important;color:#1A1A1A !important;font-weight:500;}
.comment-user-rank.rank-4{background-color:#FFD700 !important;color:#1A1A1A !important;font-weight:600;}
.comment-user-rank.rank-5{background:linear-gradient(120deg, #E6E8FA 0%, #D0D8F0 100%) !important;color:#1A1A1A !important;font-weight:600;}
.comment-user-rank.rank-6{background:linear-gradient(120deg, #74D0FF 0%, #4A90E2 100%) !important;color:#FFFFFF !important;font-weight:600;}
.comment-user-rank.rank-7{background:linear-gradient(120deg, #9D75CB 0%, #7B5BBF 100%) !important;color:#FFFFFF !important;font-weight:700;}
.comment-user-rank.rank-8{background:linear-gradient(120deg, #B76CFE 0%, #9A48E8 100%) !important;color:#FFFFFF !important;font-weight:700;}
.comment-user-rank.rank-9{background:linear-gradient(120deg, #FF7A7A 0%, #E84848 100%) !important;color:#FFFFFF !important;font-weight:700;}
.comment-user-rank.rank-10{background:linear-gradient(120deg, #FF5722 0%, #E64A19 100%) !important;color:#FFFFFF !important;font-weight:700;}
.comment-user-rank.rank-11{background:linear-gradient(120deg, #FFD700 0%, #F5C100 100%) !important;color:#1A1A1A !important;font-weight:800;}
.comment-user-rank.rank-12{background:linear-gradient(120deg, #FF0040 0%, #C70039 100%) !important;color:#FFFFFF !important;font-weight:800;box-shadow:none !important;}
.comment-user-admin{background:linear-gradient(120deg, #FF0040 0%, #C70039 100%) !important;color:#ffffff !important;font-weight:800;}
.comment-user-admin:hover{background:linear-gradient(120deg, #FF1A53 0%, #D80040 100%) !important;transform:translateY(-1px);color:#ffffff !important;}
.comment-user-friend{border-radius:0 6px 6px 0;padding:2px 8px 2px 12px;position:relative;background:linear-gradient(120deg, #74D0FF 0%, #9D75CB 100%) !important;color:#FFFFFF !important;font-weight:600;border-left:2px solid #4A90E2 !important;justify-content:flex-start;text-align:left;}
.comment-user-friend::before{content:"⭐";position:absolute;left:-8px;top:50%;transform:translateY(-50%);font-size:0.9em;background:#FFFFFF !important;color:#4A90E2 !important;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1;}
.comment-user-friend:hover{background:linear-gradient(120deg, #9D75CB 0%, #74D0FF 100%) !important;transform:scale(1.05);color:#FFFFFF !important;box-shadow:none !important;}
.comment-user-rank:hover{opacity:0.95;transform:translateY(-1px);filter:brightness(1.1);}
@media(max-width:768px){
.comment-user-rank, .comment-user-admin{font-size:0.75em;padding:1px 6px;border-radius:4px;line-height:1.375;}
.comment-user-friend{font-size:0.75em;padding:1px 6px 1px 10px;border-radius:0 4px 4px 0;line-height:1.375;}
.comment-user-friend::before{left:-7px;width:14px;height:14px;font-size:0.8em;top:50%;transform:translateY(-50%);}
.comment-author{gap:3px;}
} @media (prefers-color-scheme: dark) { .comment-user-rank.rank-1{background-color:#171717 !important;color:#F0F0F0 !important;}
.comment-user-rank.rank-2{background-color:#6D553F !important;color:#FFFFFF !important;}
.comment-user-rank.rank-3{background-color:#8A8A8A !important;color:#FFFFFF !important;}
.comment-user-rank.rank-4{background-color:#D4AF37 !important;color:#1A1A1A !important;}
.comment-user-rank.rank-5{background:linear-gradient(120deg, #4A5066 0%, #3A4059 100%) !important;color:#FFFFFF !important;}
.comment-user-rank.rank-6{background:linear-gradient(120deg, #2A6BA8 0%, #1A5B90 100%) !important;color:#FFFFFF !important;}
.comment-user-rank.rank-7{background:linear-gradient(120deg, #6A4A99 0%, #5A3A88 100%) !important;color:#FFFFFF !important;}
.comment-user-rank.rank-8{background:linear-gradient(120deg, #8A38D8 0%, #7A28C8 100%) !important;color:#FFFFFF !important;}
.comment-user-rank.rank-9{background:linear-gradient(120deg, #C83838 0%, #B82828 100%) !important;color:#FFFFFF !important;}
.comment-user-rank.rank-10{background:linear-gradient(120deg, #D84818 0%, #C83808 100%) !important;color:#FFFFFF !important;}
.comment-user-rank.rank-11{background:linear-gradient(120deg, #B8860B 0%, #A8760A 100%) !important;color:#1A1A1A !important;}
.comment-user-rank.rank-12{background:linear-gradient(120deg, #A80030 0%, #980020 100%) !important;color:#FFFFFF !important;box-shadow:none !important;}
.comment-user-admin{background:linear-gradient(120deg, #A80030 0%, #980020 100%) !important;color:#FFFFFF !important;box-shadow:none !important;}
.comment-user-admin:hover{background:linear-gradient(120deg, #B81A40 0%, #A80A30 100%) !important;color:#FFFFFF !important;}
.comment-user-friend{background:linear-gradient(120deg, #2A6BA8 0%, #6A4A99 100%) !important;color:#FFFFFF !important;border-left:2px solid #1A5B90 !important;box-shadow:none !important;}
.comment-user-friend::before{background:#121212 !important;color:#74D0FF !important;box-shadow:none !important;}
.comment-user-friend:hover{background:linear-gradient(120deg, #6A4A99 0%, #2A6BA8 100%) !important;color:#FFFFFF !important;}
} @media (prefers-contrast: more) {
.comment-user-rank, .comment-user-friend, .comment-user-admin{color:#FFFFFF !important;opacity:0.98;box-shadow:none !important;filter:contrast(1.2);}
} .comment-user-rank span,
.comment-user-admin span, .comment-user-friend span{display:block;width:100%;text-align:center;}
.comment-rank-top{margin:auto;}
.rank-top-title{text-align:center;font-size:1.8em;margin:0 0 25px;color:#2d3748;font-weight:600;background:linear-gradient(135deg, #ff9800 0%, #2196f3 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.rank-top-flex{display:flex;flex-wrap:wrap;gap:18px;margin:0;padding:0;list-style:none;--gap:18px;justify-content:center;}
.rank-top-card{flex:0 0 auto;width:calc((100% - (var(--columns) - 1) * var(--gap)) / var(--columns));min-width:200px;position:relative;background:linear-gradient(135deg, #f8f9fa 0%, #f1f3f5 100%);border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,0.06);overflow:hidden;transition:all 0.3s ease;box-sizing:border-box;}
.rank-top-flex[style*="--columns: 1"] .rank-top-card{width:280px !important;margin:0 10px 18px;}
.rank-top-card.rank-card-1st{background:linear-gradient(135deg, #fff8e1 0%, #fff3e0 100%);border:2px solid #ffc107;box-shadow:0 0 20px rgba(255, 193, 7, 0.3), 0 2px 8px rgba(0,0,0,0.06);transform:translateY(-5px);}
.rank-card-1st .rank-top-name{color:#e65100 !important;font-size:1.3em !important;text-shadow:0 1px 3px rgba(255, 193, 7, 0.2);}
.rank-card-1st .rank-top-name a{color:#e65100 !important;font-size:1.3em !important;text-shadow:0 1px 3px rgba(255, 193, 7, 0.2);}
.rank-card-1st .rank-top-badge{background:linear-gradient(135deg, #ffb300 0%, #ff8f00 100%) !important;color:#fff8e1 !important;font-size:0.95em !important;padding:7px 0 !important;}
.rank-top-card.rank-card-2nd{background:linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);border:2px solid #9e9e9e;box-shadow:0 0 20px rgba(158, 158, 158, 0.3), 0 2px 8px rgba(0,0,0,0.06);transform:translateY(-3px);}
.rank-card-2nd .rank-top-name{color:#424242 !important;font-size:1.25em !important;text-shadow:0 1px 3px rgba(158, 158, 158, 0.2);}
.rank-card-2nd .rank-top-name a{color:#424242 !important;font-size:1.25em !important;text-shadow:0 1px 3px rgba(158, 158, 158, 0.2);}
.rank-card-2nd .rank-top-badge{background:linear-gradient(135deg, #bdbdbd 0%, #757575 100%) !important;color:#fafafa !important;font-size:0.95em !important;padding:7px 0 !important;}
.rank-top-card.rank-card-3rd{background:linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);border:2px solid #ff8a65;box-shadow:0 0 20px rgba(255, 138, 101, 0.3), 0 2px 8px rgba(0,0,0,0.06);transform:translateY(-2px);}
.rank-card-3rd .rank-top-name{color:#d84315 !important;font-size:1.25em !important;text-shadow:0 1px 3px rgba(255, 138, 101, 0.2);}
.rank-card-3rd .rank-top-name a{color:#d84315 !important;font-size:1.25em !important;text-shadow:0 1px 3px rgba(255, 138, 101, 0.2);}
.rank-card-3rd .rank-top-badge{background:linear-gradient(135deg, #ffab91 0%, #e64a19 100%) !important;color:#fff8e1 !important;font-size:0.95em !important;padding:7px 0 !important;}
.rank-top-card:hover{transform:translateY(-8px);box-shadow:0 12px 20px rgba(0,0,0,0.15);}
.rank-top-card.rank-card-1st:hover{box-shadow:0 0 30px rgba(255, 193, 7, 0.5), 0 12px 20px rgba(0,0,0,0.15);transform:translateY(-10px);}
.rank-top-card.rank-card-2nd:hover{box-shadow:0 0 30px rgba(158, 158, 158, 0.5), 0 12px 20px rgba(0,0,0,0.15);transform:translateY(-8px);}
.rank-top-card.rank-card-3rd:hover{box-shadow:0 0 30px rgba(255, 138, 101, 0.5), 0 12px 20px rgba(0,0,0,0.15);transform:translateY(-7px);}
.rank-top-card-inner{padding:25px 20px;margin-top:30px;text-align:center;box-sizing:border-box;}
.rank-top-avatar-wrap{margin:0 auto 15px;border-radius:50%;overflow:hidden;border:3px solid #f0f4f8;animation:avatarPulse 3s infinite ease-in-out;}
.rank-card-1st .rank-top-avatar-wrap{border:4px solid #ffc107;box-shadow:0 0 15px rgba(255, 193, 7, 0.4);}
.rank-card-2nd .rank-top-avatar-wrap{border:4px solid #9e9e9e;box-shadow:0 0 15px rgba(158, 158, 158, 0.4);}
.rank-card-3rd .rank-top-avatar-wrap{border:4px solid #ff8a65;box-shadow:0 0 15px rgba(255, 138, 101, 0.4);}
.rank-top-avatar{width:100%;height:100%;object-fit:cover;border:none;padding:0;margin:0;}
.rank-top-name{font-size:1.2em;font-weight:700;color:#2d3748;margin-bottom:10px;line-height:1.3;position:relative;}
.rank-card-1st .rank-top-name::after{content:"";display:block;width:60px;height:3px;background:#ffc107;margin:8px auto 0;border-radius:3px;}
.rank-card-2nd .rank-top-name::after{content:"";display:block;width:60px;height:3px;background:#9e9e9e;margin:8px auto 0;border-radius:3px;}
.rank-card-3rd .rank-top-name::after{content:"";display:block;width:60px;height:3px;background:#ff8a65;margin:8px auto 0;border-radius:3px;}
.rank-top-meta{display:flex;flex-direction:column;gap:8px;font-size:1em;line-height:1.4;}
.comment-user-rank{padding:5px 14px;border-radius:20px;font-weight:600;color:#fff;}
.rank-card-1st .comment-user-rank{background:linear-gradient(135deg, #ffc107 0%, #ff9800 100%);box-shadow:0 2px 6px rgba(255, 152, 0, 0.3);}
.rank-card-2nd .comment-user-rank{background:linear-gradient(135deg, #e0e0e0 0%, #9e9e9e 100%);box-shadow:0 2px 6px rgba(158, 158, 158, 0.3);}
.rank-card-3rd .comment-user-rank{background:linear-gradient(135deg, #ffccbc 0%, #ff8a65 100%);box-shadow:0 2px 6px rgba(255, 138, 101, 0.3);}
.rank-top-count{color:#718096;font-weight:500;}
.rank-card-1st .rank-top-count{color:#ff9800;font-size:1.05em;}
.rank-card-2nd .rank-top-count{color:#9e9e9e;font-size:1.05em;}
.rank-card-3rd .rank-top-count{color:#ff8a65;font-size:1.05em;}
.rank-top-badge{position:absolute;top:0;left:0;width:100%;padding:6px 0;font-size:0.9em;font-weight:700;color:white;text-align:center;margin:0;letter-spacing:1px;text-shadow:0 1px 3px rgba(0,0,0,0.2);}
.rank-1st{background:linear-gradient(135deg, #ffc107 0%, #ff9800 100%);background-repeat:no-repeat;}
.rank-2nd{background:linear-gradient(135deg, #e0e0e0 0%, #9e9e9e 100%);background-repeat:no-repeat;}
.rank-3rd{background:linear-gradient(135deg, #ffccbc 0%, #ff8a65 100%);background-repeat:no-repeat;}
.rank-top-badge:not(.rank-1st):not(.rank-2nd):not(.rank-3rd){background:linear-gradient(135deg, #d7ccc8 0%, #8d6e63 100%);color:#f5f5dc !important;text-shadow:0 1px 2px rgba(0,0,0,0.1);}
.rank-top-empty{text-align:center;padding:50px 20px;color:#718096;font-size:1.1em;line-height:1.6;background:#fff;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,0.06);}
@keyframes avatarPulse {
0%{box-shadow:0 0 0 0 rgba(99, 181, 246, 0.4);}
70%{box-shadow:0 0 0 10px rgba(99, 181, 246, 0);}
100%{box-shadow:0 0 0 0 rgba(99, 181, 246, 0);}
} .rank-card-1st .rank-top-avatar-wrap{animation:avatarPulseGold 3s infinite ease-in-out;}
.rank-card-2nd .rank-top-avatar-wrap{animation:avatarPulseSilver 3s infinite ease-in-out;}
.rank-card-3rd .rank-top-avatar-wrap{animation:avatarPulseBronze 3s infinite ease-in-out;}
@keyframes avatarPulseGold {
0%{box-shadow:0 0 0 0 rgba(255, 193, 7, 0.4);}
70%{box-shadow:0 0 0 12px rgba(255, 193, 7, 0);}
100%{box-shadow:0 0 0 0 rgba(255, 193, 7, 0);}
}
@keyframes avatarPulseSilver {
0%{box-shadow:0 0 0 0 rgba(158, 158, 158, 0.4);}
70%{box-shadow:0 0 0 12px rgba(158, 158, 158, 0);}
100%{box-shadow:0 0 0 0 rgba(158, 158, 158, 0);}
}
@keyframes avatarPulseBronze {
0%{box-shadow:0 0 0 0 rgba(255, 138, 101, 0.4);}
70%{box-shadow:0 0 0 12px rgba(255, 138, 101, 0);}
100%{box-shadow:0 0 0 0 rgba(255, 138, 101, 0);}
} @media(max-width:992px){
.rank-top-flex{--columns:2;}
.rank-top-card{width:calc((100% - var(--gap)) / 2);}
.rank-card-1st .rank-top-name{font-size:1.2em !important;}
.rank-card-2nd .rank-top-name, .rank-card-3rd .rank-top-name{font-size:1.15em !important;}
}
@media(max-width:576px){
.rank-top-flex {--columns: 1;} .rank-top-card {
width: 300px !important; }
.rank-top-title {
font-size: 1.5em;
} .rank-card-1st .rank-top-name {
font-size: 1.2em !important;
}
.rank-card-2nd .rank-top-name, .rank-card-3rd .rank-top-name {
font-size: 1.15em !important;
}
}