/* 金蝉站点：互动组件样式（移动端优先，自适应） */
.qm-engage {
  max-width: 760px;
  margin: 24px auto;
  padding: 18px 16px;
  border: 1px solid #e6e9ef;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(20, 40, 80, .05);
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #2b2f36;
  box-sizing: border-box;
}
.qm-engage * { box-sizing: border-box; }
.qm-engage-head { font-size: 15px; font-weight: 600; margin-bottom: 12px; }

.qm-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.qm-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; font-size: 14px; line-height: 1;
  border: 1px solid #d8dde6; border-radius: 999px; background: #f7f8fa;
  color: #444b56; cursor: pointer; transition: all .15s ease;
}
.qm-btn:hover { border-color: #2f6fed; color: #2f6fed; background: #f0f5ff; }
.qm-btn .qm-ico { font-style: normal; }
.qm-btn .qm-cnt {
  min-width: 18px; padding: 1px 7px; font-size: 12px;
  border-radius: 999px; background: #e9edf3; color: #5a6270;
}
.qm-btn.active { border-color: #2f6fed; background: #2f6fed; color: #fff; }
.qm-btn.active .qm-cnt { background: rgba(255,255,255,.25); color: #fff; }
.qm-fav.active { border-color: #f5a623; background: #f5a623; }
.qm-fav.active .qm-cnt { background: rgba(255,255,255,.25); }

.qm-rate {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 14px; font-size: 14px; color: #444b56;
}
.qm-stars { display: inline-flex; gap: 2px; }
.qm-star {
  font-style: normal; font-size: 20px; color: #d4d9e2; cursor: pointer;
  transition: color .12s ease;
}
.qm-star.on { color: #f5b301; }
.qm-avg { font-size: 12px; color: #8a92a0; }

.qm-comment-btn { margin-top: 14px; }

.qm-comment-panel { display: none; margin-top: 14px; }
.qm-cf {
  padding: 14px; border: 1px dashed #d8dde6; border-radius: 10px; background: #fafbfc;
}
.qm-input {
  width: 100%; padding: 9px 11px; font-size: 14px; color: #2b2f36;
  border: 1px solid #d8dde6; border-radius: 8px; background: #fff; outline: none;
}
.qm-input:focus { border-color: #2f6fed; }
.qm-nick { margin-bottom: 10px; }
.qm-text { margin-top: 10px; resize: vertical; font-family: inherit; }
.qm-cf-stars { display: flex; align-items: center; gap: 8px; }
.qm-cf-label { font-size: 13px; color: #6a7280; }
.qm-cf-starwrap { display: inline-flex; gap: 2px; }
.qm-cf-starwrap .qm-star { font-size: 18px; }
.qm-submit {
  margin-top: 12px; padding: 9px 22px; font-size: 14px;
  border: none; border-radius: 999px; background: #2f6fed; color: #fff; cursor: pointer;
}
.qm-submit:hover { background: #1f5cd4; }
.qm-msg { margin-top: 8px; font-size: 13px; min-height: 16px; }
.qm-msg.ok { color: #1a9c54; }
.qm-msg.err { color: #e0453c; }

.qm-comment-list { margin-top: 16px; }
.qm-loading, .qm-empty { font-size: 13px; color: #9aa2ae; padding: 6px 0; }
.qm-c-item { padding: 12px 0; border-top: 1px solid #eef1f5; }
.qm-c-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qm-c-name { font-weight: 600; font-size: 14px; }
.qm-c-stars { display: inline-flex; }
.qm-c-stars .qm-star { font-size: 13px; cursor: default; }
.qm-c-date { font-size: 12px; color: #9aa2ae; margin-left: auto; }
.qm-c-text { margin-top: 6px; font-size: 14px; line-height: 1.6; color: #3c424c; white-space: pre-wrap; word-break: break-word; }

@media (max-width: 575px) {
  .qm-engage { padding: 14px 12px; margin: 18px 0; }
  .qm-btn { padding: 7px 12px; font-size: 13px; }
  .qm-star { font-size: 19px; }
}