.content-reactions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    margin-block: 2.5rem 1.5rem;
    padding: 1.4rem;
    border: 1px solid var(--border, #dee5df);
    border-radius: 20px;
    background: linear-gradient(115deg, #fff, #f2f8f5);
}
.content-reactions__intro { flex: 1 1 200px; }
.content-reactions__intro h2 { margin: 0 0 .3rem; font-size: 1.1rem; line-height: 1.7; }
.content-reactions__intro p { margin: 0; color: var(--muted, #62756e); font-size: .78rem; line-height: 1.8; }
.content-reactions__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.content-reactions__vote {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 46px;
    padding: .65rem .9rem;
    border: 1px solid #cdded7;
    border-radius: 12px;
    background: #fff;
    color: #315149;
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
    transition: border-color .2s, background .2s, transform .2s;
}
.content-reactions__vote svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.content-reactions__vote--dislike svg { transform: rotate(180deg); }
.content-reactions__vote bdi { min-width: 1.1em; font-weight: 700; font-variant-numeric: tabular-nums; }
.content-reactions__vote:hover:not(:disabled) { transform: translateY(-2px); border-color: #019893; }
.content-reactions__vote[aria-pressed="true"] { color: #006a63; border-color: #019893; background: #ddf3ed; }
.content-reactions__vote--dislike[aria-pressed="true"] { color: #a21e48; border-color: #bc4b71; background: #fff0f5; }
.content-reactions__vote:disabled { opacity: .55; cursor: wait; }
.content-reactions button:focus-visible { outline: 3px solid #019893; outline-offset: 3px; }
.content-reactions__feedback { flex: 1 0 100%; min-height: 1.5em; color: var(--muted, #62756e); font-size: .78rem; line-height: 1.8; }
.content-reactions__feedback button { margin-inline-start: .6rem; padding: .35rem .6rem; min-height: 40px; font: inherit; color: #006a63; background: #fff; border: 1px solid #cdded7; border-radius: 6px; cursor: pointer; }
.content-reactions [hidden] { display: none; }
@media (max-width: 480px) {
    .content-reactions { padding: 1rem; }
    .content-reactions__actions { width: 100%; }
    .content-reactions__vote { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .content-reactions__vote { transition: none; } }