.yxyh-rf-event {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    justify-self: flex-start;
    gap: 4px;
    box-sizing: border-box;
    width: fit-content;
    max-width: 100%;
    vertical-align: middle;
}

.yxyh-rf-event-pc {
    margin-top: 4px;
    padding: 1px 6px;
    border: 1px solid #f5e5c4;
    border-radius: 4px;
    background: #fffdf6;
    color: #8a6a2f;
    font-size: 11px;
    line-height: 17px;
}

.yxyh-rf-event-mb {
    margin: 4px 0 2px;
    padding: 1px 5px;
    border: 1px solid #f5e5c4;
    border-radius: 4px;
    background: #fffdf6;
    color: #8a6a2f;
    font-size: 11px;
    line-height: 17px;
}

.yxyh-rf-event::before {
    content: "";
    flex: 0 0 auto;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #e6b85a;
}

.yxyh-rf-event span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.yxyh-rf-event[data-effect="punish"] {
    border-color: #f3d4d4;
    background: #fffafa;
    color: #9a6666;
}

.yxyh-rf-event[data-effect="punish"]::before {
    background: #dda0a0;
}