.reaction-section { --rx-accent:#ee511e; --rx-bg:#fff; --rx-text:#242b39; --rx-muted:#616b7b; --rx-line:#e1e5ec; --rx-hover:#fff2ec; position:relative; max-width:930px; margin:3rem auto; padding:clamp(1.2rem,3vw,2rem); border:1px solid var(--rx-line); border-radius:18px; background:var(--rx-bg); color:var(--rx-text); font-family:inherit; }
.reaction-dark { --rx-accent:#d8ac83; --rx-bg:#12171c; --rx-text:#f0ece6; --rx-muted:#aab1b8; --rx-line:#ffffff29; --rx-hover:#d8ac8317; border-radius:4px; }
.reaction-main { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
.reaction-copy h2 { margin:0 0 .4rem; color:var(--rx-text); font-weight:700; font-family:inherit; font-size:clamp(1.1rem,2vw,1.4rem); line-height:1.25; letter-spacing:0; text-transform:none; }
.reaction-copy p, .reaction-dialog > form > p { color:var(--rx-muted); font-size:.85rem; line-height:1.6; margin:0; }
.reaction-votes { display:flex; gap:.65rem; }
.reaction-section button, .reaction-share a { font-family:inherit; }
.reaction-vote { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6rem; min-height:48px; padding:.7rem 1rem; border:1px solid var(--rx-line); border-radius:100px; color:var(--rx-text); background:transparent; font-size:.82rem; font-weight:600; cursor:pointer; transition:background .2s,border-color .2s,transform .2s; }
.reaction-vote svg, .reaction-share svg { width:19px; height:19px; flex:none; }
.reaction-vote b { min-width:1.3em; font-variant-numeric:tabular-nums; font-weight:700; }
.reaction-vote:hover:not(:disabled), .reaction-vote[aria-pressed=true] { background:var(--rx-hover); border-color:var(--rx-accent); color:var(--rx-accent); }
.reaction-vote[aria-pressed=true] svg { fill:var(--rx-hover); }
.reaction-vote:disabled { opacity:.55; cursor:wait; }
.reaction-section :focus-visible, .reaction-dialog :focus-visible { outline:2px solid var(--rx-accent); outline-offset:4px; }
.reaction-status { min-height:1.4em; margin:.8rem 0 0; font-size:.8rem; color:var(--rx-accent); }
.reaction-share { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--rx-line); display:flex; gap:.8rem 1.2rem; align-items:center; flex-wrap:wrap; }
.reaction-share > span { color:var(--rx-muted); font-size:.75rem; }
.reaction-share-actions { display:flex; gap:.45rem; flex-wrap:wrap; }
.reaction-share a, .reaction-share button { display:inline-flex; align-items:center; gap:.4rem; min-height:40px; padding:.5rem .7rem; color:var(--rx-text); border:1px solid transparent; border-radius:5px; background:transparent; font-size:.78rem; cursor:pointer; text-decoration:none; }
.reaction-share a:hover, .reaction-share button:hover { color:var(--rx-accent); background:var(--rx-hover); }
.reaction-share-status { flex-basis:100%; color:var(--rx-muted); font-size:.8rem; overflow-wrap:anywhere; margin:0; }
.reaction-share-status:empty { display:none; }
.reaction-thanks { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.reaction-thanks span { position:absolute; right:25%; bottom:35%; color:var(--rx-accent); opacity:0; }
.reaction-thanks span:nth-child(2) { right:17%; bottom:25%; }
.reaction-thanks span:nth-child(3) { right:32%; bottom:22%; }
.is-thanking [data-vote=like] svg { animation:reaction-pop .55s ease; }
.is-thanking .reaction-thanks span { animation:reaction-spark 1.4s ease-out both; }
.is-thanking .reaction-thanks span:nth-child(2) { animation-delay:.1s; }
.is-thanking .reaction-thanks span:nth-child(3) { animation-delay:.2s; }
@keyframes reaction-pop { 45% { transform:translateY(-3px) rotate(-14deg) scale(1.22); } }
@keyframes reaction-spark { 15% { opacity:1; } 100% { opacity:0; transform:translateY(-60px) rotate(50deg) scale(.4); } }
.reaction-dialog { --rx-accent:#ee511e; --rx-bg:#fff; --rx-text:#242b39; --rx-muted:#616b7b; --rx-line:#e1e5ec; width:min(500px,calc(100% - 2rem)); max-height:calc(100dvh - 2rem); padding:clamp(1.2rem,4vw,2rem); border:1px solid var(--rx-line); border-radius:16px; background:var(--rx-bg); color:var(--rx-text); font-family:inherit; box-shadow:0 24px 90px #0008; }
.reaction-dialog.reaction-dark { --rx-accent:#d8ac83; --rx-bg:#12171c; --rx-text:#f0ece6; --rx-muted:#aab1b8; --rx-line:#ffffff29; }
.reaction-dialog::backdrop { background:#020508bd; backdrop-filter:blur(5px); }
.reaction-dialog-heading { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; margin-bottom:.8rem; }
.reaction-dialog h3 { max-width:22ch; margin:0; font-family:inherit; font-size:1.4rem; font-weight:700; line-height:1.2; letter-spacing:0; text-transform:none; }
.reaction-close { border:0; background:transparent; color:var(--rx-muted); font-size:1.8rem; line-height:1; padding:.2rem; cursor:pointer; }
.reaction-dialog label { display:block; color:var(--rx-text); font-size:.85rem; font-weight:600; margin:1.2rem 0 .5rem; }
.reaction-dialog select, .reaction-dialog textarea { box-sizing:border-box; width:100%; padding:.8rem; border:1px solid var(--rx-line); border-radius:7px; background:var(--rx-bg); color:var(--rx-text); font-weight:400; font-family:inherit; font-size:16px; line-height:1.4; }
.reaction-dialog textarea { resize:vertical; }
.reaction-dialog-error { margin-top:.8rem; color:#d5846f; font-size:.8rem; }
.reaction-dialog-actions { display:flex; justify-content:flex-end; gap:.7rem; margin-top:1.3rem; flex-wrap:wrap; }
.reaction-dialog-actions button { min-height:44px; padding:.7rem 1rem; border:1px solid var(--rx-line); border-radius:6px; color:var(--rx-text); background:transparent; font-weight:600; font-size:.85rem; line-height:1.3; font-family:inherit; cursor:pointer; }
.reaction-dialog-actions .reaction-submit { color:var(--rx-bg); background:var(--rx-accent); border-color:var(--rx-accent); }
.reaction-dialog-actions button:disabled { opacity:.55; cursor:wait; }
.reaction-section [hidden], .reaction-dialog [hidden] { display:none !important; }
.reaction-placement { width:min(1240px,calc(100% - 2 * var(--gutter,24px))); margin-inline:auto; }
@media(max-width:580px) { .reaction-votes { width:100%; } .reaction-vote { flex:1; padding:.7rem .6rem; } .reaction-share { align-items:flex-start; } .reaction-share-actions { width:100%; gap:.25rem; } }
@media(prefers-reduced-motion:reduce) { .reaction-section *, .reaction-dialog * { animation:none !important; transition:none !important; } }

@media(max-width:400px) { .reaction-vote { font-size:.75rem; gap:.4rem; padding:.7rem .5rem; } .reaction-vote span { white-space:nowrap; } .reaction-vote svg { width:17px; height:17px; } .reaction-vote b { min-width:1em; } }
@media(max-width:340px) { .reaction-votes { flex-direction:column; } }