.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:.65rem;max-width:520px;padding:12px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--surface) 90%,var(--surface-2))}.comment-form-v4[hidden]{display:none!important}.comment-reply-state{display:flex;align-items:center;justify-content:space-between;padding:.45rem .6rem;border-radius:9px;background:color-mix(in srgb,var(--brand) 11%,transparent);color:var(--muted);font-size:.8rem}.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:.4rem;color:var(--muted);font-size:.8rem}.comment-rating-picker div{display:flex}.comment-rating-picker button{padding:0;border:0;background:none!important;color:#718090;font-size:1.28rem;line-height:1;cursor:pointer}.comment-rating-picker button.active{color:#e5a300}.comment-compose-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:.45rem}.comment-compose-row textarea{width:100%;min-height:42px;height:42px;resize:none;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);padding:10px;line-height:1.25;outline:none}.comment-compose-row textarea:focus{border-color:var(--brand)}.comment-photo-button{display:grid;place-items:center;width:34px;min-width:34px;height:42px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-size:1.2rem;cursor:pointer}.comment-photo-button:hover{background:var(--surface-2);color:var(--brand)}.comment-compose-row button[type=submit]{min-height:42px;border:0;border-radius:9px;background:#25a84d;color:#fff;font-weight:800;padding:0 15px}.comment-compose-row button[type=submit]:hover{background:#1f913f}.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-form-v4{max-width:none;padding:10px}.comment-compose-row{grid-template-columns:34px minmax(0,1fr) auto;gap:.3rem}.comment-compose-row textarea{grid-column:auto;min-height:42px}.comment-compose-row button[type=submit]{min-height:42px;padding:0 12px}.comment-rating-picker{align-items:center;flex-direction:row;gap:.35rem}.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}
.comment-form-v4{grid-template-columns:minmax(0,1fr);width:100%;max-width:none}#commentReplyState[hidden]{display:none!important}.comment-reply-state span:empty{display:none}.comment-reply-state:has(span:empty){justify-content:flex-end;padding:0;background:transparent}.comment-photo-dialog{width:min(900px,calc(100vw - 24px));max-height:calc(100vh - 24px);padding:12px;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--text);box-shadow:var(--shadow)}.comment-photo-dialog::backdrop{background:rgba(1,19,29,.75);backdrop-filter:blur(5px)}.comment-photo-dialog header{display:flex;align-items:center;justify-content:space-between;min-height:34px;padding:0 2px 8px}.comment-photo-dialog header b{color:var(--muted);font-size:.85rem}.comment-photo-dialog header button,.comment-photo-stage>button{display:grid;place-items:center;border:0;color:var(--text);cursor:pointer}.comment-photo-dialog header button{width:34px;height:34px;border-radius:9px;background:var(--surface-2);font-size:1rem}.comment-photo-stage{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px}.comment-photo-stage img{display:block;width:100%;max-height:calc(100vh - 120px);object-fit:contain;border-radius:10px;background:#071823}.comment-photo-stage>button{width:42px;height:42px;border-radius:50%;background:color-mix(in srgb,var(--surface) 90%,transparent);box-shadow:0 3px 14px rgba(0,0,0,.16)}.comment-photo-stage>button[hidden]{display:none}@media(max-width:640px){.comment-photo-dialog{width:calc(100vw - 16px);padding:8px}.comment-photo-stage{grid-template-columns:34px minmax(0,1fr) 34px;gap:4px}.comment-photo-stage>button{width:34px;height:34px}}
@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}}