.tool-hero {
  background:
    radial-gradient(circle at top right, rgba(115, 210, 222, 0.24), transparent 34%),
    linear-gradient(135deg, #ffffff, #f7fcfd);
}

.tool-category-tag {
  background: rgba(23, 149, 168, 0.1);
  color: var(--primary-strong);
}

.tool-card,
.guide-card,
.faq-card,
.related-tools-card,
.content-depth-card {
  box-shadow: var(--shadow-md);
}

.tool-card {
  background: var(--bg-card);
}

.summary-item {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.empty-result {
  background: rgba(125, 211, 252, 0.08);
  border-color: rgba(23, 149, 168, 0.35);
}

.secondary-btn:hover {
  border-color: var(--primary);
  color: var(--primary-strong);
}

.generated-panel textarea {
  min-height: 340px;
  resize: vertical;
  padding: 1rem;
  line-height: 1.7;
  font-family: "Outfit", sans-serif;
  font-size: 0.98rem;
  background: linear-gradient(180deg, #ffffff, #f9fdfe);
}

.guide-card li::before {
  background: var(--primary);
}

.related-tool-link:hover {
  border-color: rgba(23, 149, 168, 0.28);
  box-shadow: 0 10px 24px rgba(23, 149, 168, 0.1);
}

.results-panel {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-color);
}

.toast {
  background: #111827;
}

@media (max-width: 768px) {
  .generated-panel textarea {
    min-height: 300px;
  }
}

@media (max-width: 500px) {
  .generated-panel textarea {
    min-height: 260px;
  }
}