.publish-progress{margin:.85rem 0;padding:1rem;border:1px solid color-mix(in srgb,var(--brand) 45%,transparent);border-radius:16px;background:color-mix(in srgb,var(--brand) 8%,var(--surface))}.publish-progress.error{border-color:color-mix(in srgb,var(--danger) 60%,transparent)}.publish-progress.error .processing-spinner{animation:none;border-color:var(--danger)}.publish-progress-head{display:flex;align-items:center;gap:.8rem}.publish-progress-head>div{display:grid;gap:.15rem;flex:1}.publish-progress-head small{color:var(--muted)}.publish-progress-head strong{font-size:.85rem}.processing-spinner{width:1.25rem;height:1.25rem;border:3px solid color-mix(in srgb,var(--brand) 20%,transparent);border-top-color:var(--brand);border-radius:50%;animation:article-spin .75s linear infinite}.publish-progress-track{height:7px;margin-top:.75rem;overflow:hidden;border-radius:99px;background:color-mix(in srgb,var(--muted) 22%,transparent)}.publish-progress-track span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--brand),#35d7b0);transition:width .3s ease}.button-processing i{animation:article-spin .75s linear infinite}@keyframes article-spin{to{transform:rotate(360deg)}}
.comments-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem}.article-rating-summary{display:flex;align-items:center;gap:.45rem}.article-rating-summary b{color:#e5a300;font-size:1.05rem}.article-rating-summary span{color:var(--muted);font-size:.8rem}.comment-form-v4{display:grid!important;gap:.7rem}.comment-form-v4[hidden]{display:none!important}.comment-reply-state{display:flex;align-items:center;justify-content:space-between;padding:.55rem .75rem;border-radius:10px;background:color-mix(in srgb,var(--brand) 11%,transparent);color:var(--muted);font-size:.82rem}.comment-reply-state button{border:0;background:none;color:var(--brand);font-weight:800;cursor:pointer}.comment-rating-picker{display:flex;align-items:center;gap:.75rem;color:var(--muted);font-size:.84rem}.comment-rating-picker div{display:flex}.comment-rating-picker button{padding:.1rem;border:0;background:none;color:#69808e;font-size:1.45rem;cursor:pointer}.comment-rating-picker button.active{color:#e5a300}.comment-compose-row{display:grid;grid-template-columns:1fr auto auto;align-items:stretch;gap:.55rem}.comment-compose-row textarea{min-height:76px}.comment-photo-button{display:grid;place-items:center;min-width:46px;border:1px solid var(--line);border-radius:12px;color:var(--brand);cursor:pointer}.comment-photo-preview{display:flex;gap:.45rem;flex-wrap:wrap}.comment-photo-preview figure{position:relative;width:68px;height:68px;margin:0;overflow:hidden;border-radius:10px}.comment-photo-preview img{width:100%;height:100%;object-fit:cover}.comment-photo-preview button{position:absolute;right:3px;top:3px;width:21px;height:21px;border:0;border-radius:50%;background:#8d2430;color:#fff;cursor:pointer}.comment-submit-status{min-height:1em;color:var(--muted)}
.comment{align-items:flex-start}.comment>div{min-width:0;flex:1}.comment-body-text{white-space:pre-wrap}.comment-rating{color:#e5a300;letter-spacing:.05em}.comment-photos{display:flex;gap:.5rem;margin-top:.65rem;overflow:auto}.comment-photos button{flex:0 0 86px;height:86px;padding:0;overflow:hidden;border:0;border-radius:11px;background:#dce8ee;cursor:pointer}.comment-photos img{width:100%;height:100%;object-fit:cover}.comment-processing{display:inline-flex;align-items:center;gap:.45rem;margin-top:.55rem;color:var(--muted);font-size:.78rem}.comment-processing .processing-spinner{width:.8rem;height:.8rem;border-width:2px}.comment-actions-row{display:flex;gap:.8rem;margin-top:.45rem}.comment-actions-row button{padding:0;border:0;background:none;color:var(--muted);font-size:.78rem;cursor:pointer}.comment-actions-row button.liked{color:#d93f58}.comment-replies{display:grid;gap:.75rem;margin-top:.9rem;padding-left:1rem;border-left:2px solid var(--line)}
@media(max-width:640px){.comment-compose-row{grid-template-columns:1fr auto}.comment-compose-row textarea{grid-column:1/-1}.comment-compose-row button[type=submit]{min-height:44px}.comment-rating-picker{align-items:flex-start;flex-direction:column;gap:.25rem}.comments-heading{align-items:flex-start}.publish-progress-head{align-items:flex-start}}

.reaction-control{position:relative}.reaction-main-icon{display:inline-grid;min-width:1.2rem;place-items:center;font-size:1.08rem;line-height:1}.reaction-control.selected #likeButton{border-color:color-mix(in srgb,var(--brand) 55%,var(--line));background:color-mix(in srgb,var(--brand) 10%,var(--surface));color:var(--brand)}.reaction-picker{position:absolute;left:0;bottom:calc(100% + 12px);z-index:12;display:flex;gap:.22rem;width:max-content;max-width:min(520px,calc(100vw - 32px));padding:.5rem;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(8px) scale(.96);transform-origin:left bottom;pointer-events:none;transition:.16s ease}.reaction-control:hover .reaction-picker,.reaction-control:focus-within .reaction-picker,.reaction-control.open .reaction-picker{opacity:1;visibility:visible;transform:none;pointer-events:auto}.detail-actions .reaction-picker button{position:relative;display:grid;width:58px;min-width:58px;gap:.05rem;place-items:center;padding:.3rem .2rem;border:0;border-radius:12px;background:transparent;color:var(--text)}.detail-actions .reaction-picker button:hover,.detail-actions .reaction-picker button.selected{background:var(--surface-2);transform:translateY(-5px)}.reaction-picker button>span{font-size:1.65rem;line-height:1.25}.reaction-picker button>small{max-width:56px;overflow:hidden;color:var(--muted);font-size:.58rem;text-overflow:ellipsis;white-space:nowrap}.reaction-picker button>b{position:absolute;right:1px;top:-2px;display:none;min-width:17px;padding:1px 4px;border-radius:999px;background:var(--brand-2);color:#fff;font-size:.58rem}.reaction-picker button>b.has-count{display:block}
@media(max-width:640px){.reaction-picker{position:fixed;left:50%;bottom:18px;max-width:calc(100vw - 20px);overflow-x:auto;transform:translate(-50%,12px) scale(.96);transform-origin:center bottom}.reaction-control:hover .reaction-picker,.reaction-control:focus-within .reaction-picker,.reaction-control.open .reaction-picker{transform:translateX(-50%)}.detail-actions .reaction-picker button{width:52px;min-width:52px}.reaction-picker button>span{font-size:1.5rem}}