.prtgs-wrap {
--prtgs-star-color:      #fed500;
--prtgs-star-empty:      #ececec;
--prtgs-star-size:       22px;
--prtgs-gap:             10px;
--prtgs-status-bg:       #3a9e6e;
--prtgs-status-error-bg: #c0392b;
--prtgs-status-color:    #fff;
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: var(--prtgs-gap);
line-height: 1;
vertical-align: middle;
} .prtgs-stars {
position: relative; display: inline-flex;
align-items: center;
gap: 2px;
} .prtgs-star {
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--prtgs-star-empty);
width: var(--prtgs-star-size);
height: var(--prtgs-star-size);
-webkit-tap-highlight-color: transparent;
user-select: none;
-webkit-user-select: none;
}
.prtgs-star svg {
width: var(--prtgs-star-size);
height: var(--prtgs-star-size);
display: block;
pointer-events: none;
}
.prtgs-star-full { color: var(--prtgs-star-color); }
.prtgs-star-empty { color: var(--prtgs-star-empty); } .prtgs-star-hover {
color: var(--prtgs-star-color);
}  .prtgs-fill-bar {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
overflow: hidden;
pointer-events: none;
display: flex;
align-items: center;
gap: 2px;
color: var(--prtgs-star-color);
transition: width .3s ease;
white-space: nowrap;
}
.prtgs-fill-bar svg {
width: var(--prtgs-star-size);
height: var(--prtgs-star-size);
flex-shrink: 0;
display: block;
}  .prtgs-meta {
display: inline-block;
vertical-align: middle;
white-space: normal;
line-height: 1;
} .prtgs-meta-inner {
display: inline-flex;
align-items: center;
vertical-align: middle;
}
.prtgs-dash { white-space: pre; }
.prtgs-score {
display: inline-flex;
align-items: center;
gap: 2px;
} .prtgs-meta:not(.prtgs-has-votes) .prtgs-score { display: none; } .prtgs-meta.prtgs-has-votes::before { content: '['; }
.prtgs-meta.prtgs-has-votes::after  { content: ']'; } .prtgs-info {
display: inline-flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
} .prtgs-status {
display: inline-block;
font-size: .8em;
font-weight: 600;
padding: 2px 9px;
border-radius: 20px;
background: var(--prtgs-status-bg);
color: var(--prtgs-status-color);
opacity: 0;
transform: translateY(3px);
transition: opacity .2s ease, transform .2s ease;
pointer-events: none;
white-space: nowrap;
}
.prtgs-status-visible {
opacity: 1;
transform: translateY(0);
}
.prtgs-status-error { background: var(--prtgs-status-error-bg); }  @media ( max-width: 380px ) {
.prtgs-wrap {
flex-direction: column;
align-items: flex-start;
}
} .prtgs-spinner {
display: none;
width: 14px;
height: 14px;
border: 2px solid var(--prtgs-star-empty);
border-top-color: var(--prtgs-star-color);
border-radius: 50%;
animation: prtgs-spin .7s linear infinite;
flex-shrink: 0;
}
@keyframes prtgs-spin {
to { transform: rotate(360deg); }
}