.article-like{margin:20px 0;display:flex;justify-content:center;padding:15px;background:linear-gradient(135deg,#f5f7fa 0,#e6e8eb 100%);border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.05)}.like-collect-container{display:flex;gap:20px;align-items:center;width:100%;max-width:400px;justify-content:space-around}.valine-interact-button{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 28px;background:linear-gradient(135deg,#fff 0,#f8f9fa 100%);border:2px solid transparent;border-radius:30px;cursor:pointer;transition:all .3s cubic-bezier(.4, 0, .2, 1);font-size:15px;font-weight:600;color:#666;box-shadow:0 2px 8px rgba(0,0,0,.08);position:relative;overflow:hidden}.valine-interact-button::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .5s;z-index:1}.valine-interact-button:hover::before{left:100%}.valine-interact-button:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 6px 20px rgba(102,126,234,.3);border-color:#667eea}.valine-interact-button:active{transform:translateY(-1px) scale(.98)}.valine-interact-button.active{background:linear-gradient(135deg,#fff1f0 0,#ffe6e6 100%);border-color:#ff4d4f;color:#ff4d4f;box-shadow:0 4px 16px rgba(255,77,79,.3)}.valine-interact-button.like-button.active{animation:like-animation .6s cubic-bezier(.4,0,.2,1);background:linear-gradient(135deg,#fff1f0 0,#ff8a80 100%)}.valine-interact-button.collect-button.active{animation:collect-animation .6s cubic-bezier(.4,0,.2,1);background:linear-gradient(135deg,#fffbe6 0,#ffd54f 100%);color:#f57c00;border-color:#f57c00}.valine-interact-button i{font-size:18px;transition:all .3s ease;position:relative;z-index:2}.valine-interact-button.like-button i{background:linear-gradient(135deg,#ff4d4f,#ff8a80);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.valine-interact-button.collect-button i{background:linear-gradient(135deg,#fa8c16,#ffd54f);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.valine-interact-button.active i{transform:scale(1.3) rotate(15deg);filter:drop-shadow(0 2px 4px rgba(255, 77, 79, .3))}.valine-interact-button .count{font-weight:700;font-size:16px;position:relative;z-index:2;background:linear-gradient(135deg,#666,#999);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.valine-interact-button.active .count{background:linear-gradient(135deg,#ff4d4f,#ff8a80);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.valine-interact-button.collect-button.active .count{background:linear-gradient(135deg,#f57c00,#ffd54f);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.valine-interact-button .text{position:relative;z-index:2;font-weight:600}@keyframes like-animation{0%{transform:scale(1)}30%{transform:scale(1.15) rotate(-5deg)}60%{transform:scale(1.1) rotate(5deg)}100%{transform:scale(1) rotate(0)}}@keyframes collect-animation{0%{transform:scale(1)}30%{transform:scale(1.15) rotate(5deg)}60%{transform:scale(1.1) rotate(-5deg)}100%{transform:scale(1) rotate(0)}}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(102,126,234,.4)}70%{box-shadow:0 0 0 10px rgba(102,126,234,0)}100%{box-shadow:0 0 0 0 rgba(102,126,234,0)}}.valine-interact-button:focus{outline:0;animation:pulse 1.5s infinite}@media (max-width:768px){.like-collect-container{flex-direction:column;gap:12px;width:100%}.valine-interact-button{width:100%;justify-content:center;padding:12px 20px}.valine-interact-button i{font-size:16px}.valine-interact-button .count{font-size:14px}}