.tool-comments-shell {
  width: min(100% - 32px, 1040px);
  margin: 52px auto;
  padding: 30px;
  border: 1px solid #dce5f0;
  border-radius: 22px;
  color: #10233f;
  background: #fff;
  box-shadow: 0 18px 48px rgba(14, 39, 72, .08);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

.tool-comments-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.tool-comments-heading h2 { margin: 0; font-size: clamp(24px, 3vw, 34px); }
.tool-comments-heading p { max-width: 520px; margin: 0; color: #52657d; }
.tool-comment-list { display: grid; gap: 12px; margin: 22px 0 28px; }
.tool-comment-empty { padding: 22px; border-radius: 14px; color: #52657d; background: #f4f7fb; text-align: center; }
.tool-comment-item { padding: 18px; border: 1px solid #e1e8f1; border-radius: 15px; background: #f9fbfd; }
.tool-comment-item header { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.tool-comment-item strong { color: #123254; }
.tool-comment-item time { color: #718198; font-size: 13px; }
.tool-comment-item p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.tool-comment-form { display: grid; gap: 13px; padding-top: 24px; border-top: 1px solid #e1e8f1; }
.tool-comment-form label { display: grid; gap: 6px; color: #334b67; font-weight: 700; }
.tool-comment-form input,
.tool-comment-form textarea { width: 100%; padding: 12px 14px; border: 1px solid #cbd7e5; border-radius: 11px; color: #10233f; background: #fff; }
.tool-comment-form textarea { min-height: 120px; resize: vertical; }
.tool-comment-form button { justify-self: start; min-height: 44px; padding: 0 20px; border: 0; border-radius: 11px; color: #fff; background: #1769e0; font-weight: 800; cursor: pointer; }
.tool-comment-form button:disabled { cursor: wait; opacity: .6; }
.tool-comment-message { min-height: 24px; margin: 0; color: #52657d; }
.tool-comment-message.is-success { color: #0f7d58; }
.tool-comment-message.is-error { color: #b42335; }
.tool-comment-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

@media (max-width: 700px) {
  .tool-comments-shell { width: min(100% - 20px, 1040px); margin: 34px auto; padding: 20px; }
  .tool-comments-heading { align-items: start; flex-direction: column; gap: 8px; }
  .tool-comment-item header { flex-direction: column; gap: 3px; }
}