:root{ --brand-green:#00a86b; --thumb-red:#ef4444; --thumb-text:#0f172a; --thumb-bg:#f8fafc; --thumb-br:#e2e8f0; }
.diy-thumbs{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin:1rem 0 1.25rem; }
.diy-thumbs .thumb-label{ font-weight:600; color:var(--thumb-text); margin-right:.25rem; opacity:.9; }
.diy-thumbs .thumb-btn{ -webkit-appearance:none; appearance:none; border:1px solid var(--thumb-br); background:var(--thumb-bg); color:var(--thumb-text);
  padding:.65rem .95rem; border-radius:999px; line-height:1; font-weight:700; font-size:1.15rem; display:inline-flex; align-items:center; gap:.45rem;
  min-height:48px; min-width:48px; cursor:pointer; transition:transform .08s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
  box-shadow:0 1px 0 rgba(0,0,0,.03); }
.diy-thumbs .up-count, .diy-thumbs .down-count{ font-size:.95rem; font-weight:700; opacity:.85; }
.diy-thumbs .thumb-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,.06); }
.diy-thumbs .thumb-btn:active{ transform:translateY(0); box-shadow:0 2px 6px rgba(0,0,0,.08); }
.diy-thumbs .thumb-btn:focus{ outline:none; box-shadow:0 0 0 3px rgba(0,168,107,.25); }
.diy-thumbs .thumb-up{ border-color: rgba(0,168,107,.35); background: rgba(0,168,107,.08); }
.diy-thumbs .thumb-up:hover{ background: rgba(0,168,107,.14); }
.diy-thumbs .thumb-down{ border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.08); }
.diy-thumbs .thumb-down:hover{ background: rgba(239,68,68,.14); }
.diy-thumbs.voted-up .thumb-up{ background: rgba(0,168,107,.22); border-color: var(--brand-green); }
.diy-thumbs.voted-up .thumb-down{ opacity:.45; }
.diy-thumbs.voted-down .thumb-down{ background: rgba(239,68,68,.22); border-color: var(--thumb-red); }
.diy-thumbs.voted-down .thumb-up{ opacity:.45; }
.diy-thumbs .thumb-btn[disabled]{ cursor:default; transform:none; box-shadow:none; opacity:.9; }
.diy-thumbs .thumb-msg{ display:block; width:100%; margin:.25rem 0 0; color:#334155; font-size:.9rem; }