.content-favorite {
  position:relative;
  display:inline-flex;
  align-items:center;
  font-size:13px;
  line-height:1.5
}

.content-favorite-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:38px;
  padding:7px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius-control);
  background:#fff;
  color:var(--muted);
  font:inherit;
  cursor:pointer
}

.content-favorite-button:hover:not(:disabled),.content-favorite-button[aria-pressed="true"] {
  background:var(--mint);
  border-color:#b6d8d2;
  color:var(--primary)
}

.content-favorite-button:disabled {
  cursor:default;
  opacity:.65
}

.content-favorite [data-favorite-count] {
  font-variant-numeric:tabular-nums
}

.content-favorite [hidden] {
  display:none!important
}

.content-action-message {
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  z-index:2;
  width:max-content;
  max-width:210px;
  padding:5px 8px;
  border:1px solid var(--line);
  border-radius:var(--radius-label);
  background:#fff;
  color:var(--muted);
  font-size:12px;
  box-shadow:0 2px 8px rgba(9,40,48,.04);
  overflow-wrap:anywhere
}

.content-action-message:empty {
  display:none
}

.detail-engagement {
  margin:24px 0 16px
}

/* Extension panels already supply a grid gap; avoid stacking outer margins. */
.extension-detail-main>.detail-engagement {
  margin:0
}

.detail-end {
  display:flex;
  align-items:center;
  gap:16px;
  max-width:420px;
  margin:0 auto 12px;
  color:#9aa5a9;
  font-size:12px;
  letter-spacing:.12em
}

.detail-end::before,.detail-end::after {
  content:"";
  flex:1;
  border-top:1px solid var(--line)
}

.detail-tags {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 14px;
  font-size:12px;
  color:var(--muted)
}

.detail-tags span {
  padding:4px 10px;
  border-radius:var(--radius-label);
  background:#f5f7f6;
  overflow-wrap:anywhere
}

.detail-engagement-hint {
  text-align:center;
  color:var(--muted);
  font-size:13px;
  margin:0 0 10px
}

.detail-engagement-actions {
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:24px
}

.detail-engagement-actions .lele-like {
  position:relative;
  display:block;
  margin:0;
  font-size:13px
}

.detail-engagement-actions .lele-like-button,.detail-engagement-actions .content-favorite-button,.detail-engagement-actions .detail-reward {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:4px;
  min-width:78px;
  min-height:64px;
  padding:6px 8px;
  border:0;
  background:transparent;
  border-radius:var(--radius-control);
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
  text-align:center;
  text-decoration:none
}

.detail-engagement-actions .lele-like-button i,.detail-engagement-actions .content-favorite-button i,.detail-engagement-actions .detail-reward i {
  display:block;
  flex-basis:100%;
  font-size:26px;
  line-height:1;
  margin-bottom:2px
}

.detail-engagement-actions .lele-like-count {
  padding:0;
  border:0;
  min-width:0
}

.detail-engagement-actions .lele-like-button:hover:not(:disabled),.detail-engagement-actions .lele-like-button[aria-pressed="true"],.detail-engagement-actions .content-favorite-button:hover:not(:disabled),.detail-engagement-actions .content-favorite-button[aria-pressed="true"],.detail-engagement-actions .detail-reward:hover {
  background:var(--mint);
  color:var(--primary)
}

.detail-engagement-actions .lele-like-message {
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  width:max-content;
  max-width:180px;
  text-align:center;
  font-size:12px
}

@media(max-width:560px) {
  .detail-engagement {
    margin:20px 0 12px
  }
  .detail-end {
    gap:12px;
    margin-bottom:8px
  }
  .detail-tags {
    margin-bottom:10px
  }
  .detail-engagement-hint {
    font-size:12px;
    margin-bottom:8px
  }
  .detail-engagement-actions {
    gap:clamp(6px,2vw,12px)
  }
  .detail-engagement-actions>.lele-like,.detail-engagement-actions>.content-favorite,.detail-engagement-actions>.detail-reward {
    flex:1 1 0;
    min-width:0;
    max-width:90px
  }
  .detail-engagement-actions .lele-like-button,.detail-engagement-actions .content-favorite-button {
    width:100%;
    min-width:0
  }
  .detail-engagement-actions .lele-like-button,.detail-engagement-actions .content-favorite-button,.detail-engagement-actions .detail-reward {
    min-height:56px;
    padding:4px;
    font-size:12px
  }
  .detail-engagement-actions .lele-like-button i,.detail-engagement-actions .content-favorite-button i,.detail-engagement-actions .detail-reward i {
    font-size:24px
  }
  .detail-engagement-actions [data-like-text],.detail-engagement-actions [data-favorite-text],.detail-engagement-actions .detail-reward span {
    white-space:nowrap
  }
}