.top-commenters-container {
background: #2D585D;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.top-commenters-title {
margin-bottom: 10px;
font-weight: bold;
text-align: center;
color: #fff !important;
} .top-commenters-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
}
.top-commenter-item {
display: flex;
align-items: center;
gap: 8px;
background: #fff;
}
.top-commenter-link,
.top-commenter-name {
font-weight: 600;
color: #333;
margin-right: auto;
text-decoration: none;
}
.top-commenter-link:hover,
.top-commenter-link:focus {
text-decoration: underline;
}
.comment-count {
font-size: 0.9em;
color: #888;
margin-left: 4px;
} .badge {
margin-left: 6px;
font-size: 1.2em;
line-height: 1;
} .badge:hover { transform: none; box-shadow: none; } .comment-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 10px;
margin-left: 6px;
font-size: 0.85em;
font-weight: 700;
border-radius: 999px;
text-decoration: none;
vertical-align: middle;
transition: transform .2s ease, box-shadow .2s ease;
border: 1px solid #ddd;
background-color: #fff;
}
.comment-badge:hover {
transform: translateY(-1px);
box-shadow: 0 1px 6px rgba(0,0,0,.12);
}
.comment-badge .emoji { line-height: 1; }
.comment-badge .label { line-height: 1; } .comment-badge.flower  {  color: #b21e5b;  } .comment-badge.clover4 {  color: #0f3a17;     } .comment-badge.clover3 {  color: #0f3a17;     } .comment-badge.sprout  { color: #0f3a17;  }  @media (max-width: 600px) {
.comment-badge .label { display: none; }
} .top-commenter-item.has-url .top-commenter-link {
font-weight: 600; color:#444;
}
.top-commenter-item.has-url .top-commenter-link:hover {
color:#2D585D;
text-decoration: underline;
} .top-commenter-item .top-commenter-name {
text-decoration: none;
font-weight: 500;
}