.reputationPill { color: inherit; font: inherit; cursor: pointer; flex-direction: column; gap: 2px; }
.reputationLabel { font-size: 11px; }
#reputationStars { color: #ffe16c; font-size: 19px; line-height: 1; white-space: nowrap; }
#reputationStars .starEmpty { color: #b6d1e5; }
.reputationOverlay { position: fixed; inset: 0; z-index: 12000; display: flex; align-items: center; justify-content: center; padding: 12px; background: #06325999; }
.reputationDialog { width: min(520px, 100%); max-height: calc(100dvh - 24px); overflow: auto; background: #f4fbff; border: 3px solid #a6dff5; border-radius: 8px; box-shadow: 0 8px 24px #003c6655; color: #164a70; }
.reputationHeader { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: #087acb; color: white; }
.reputationHeader h2 { margin: 0; font-size: 21px; }
.reputationHeader button { width: 44px; height: 44px; border: 2px solid #ccecff; border-radius: 8px; color: #075cb4; background: white; font-size: 26px; cursor: pointer; }
.reputationContent { padding: 16px 18px; }
.reputationSummary { margin: 0 0 12px; font-weight: 900; }
.reputationRows { margin: 0; }
.reputationRows > div { padding: 10px 0; border-bottom: 1px solid #cfe3ee; }
.reputationRows dt { display: flex; justify-content: space-between; gap: 12px; font-weight: 800; }
.reputationRows dd { margin: 4px 0 0; font-size: 13px; }
.reputationRows meter { display: block; width: 100%; height: 12px; margin-top: 4px; accent-color: #29b766; }
.reputationFootnote { font-size: 12px; margin-bottom: 0; }
@media (max-width: 600px) { #reputationStars { font-size: 16px; } .reputationHeader { padding: 8px 12px; } .reputationContent { padding: 10px 12px; } }