.tool-wrap {
  width: min(980px, calc(100% - 2rem));
  margin: 1.5rem auto 2.5rem;
}

.tool-card {
  background: #ffffff;
  border: 1px solid #bfdcd1;
  border-radius: 18px;
  box-shadow: 0 12px 26px rgba(37, 51, 46, .08);
  padding: 1.1rem;
  margin-bottom: 1rem;
}

.tool-card h1 {
  margin: .2rem 0 .6rem;
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  line-height: 1.12;
  color: #163b31;
}

.tool-card p {
  color: #2f4a40;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
}

.tool-field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.tool-field label {
  font-weight: 700;
  color: #1d5344;
}

.tool-field input,
.tool-field select {
  border: 1px solid #bfdcd1;
  border-radius: 10px;
  padding: .55rem .65rem;
  font: inherit;
}

.tool-actions {
  margin-top: .8rem;
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}

.tool-output {
  margin-top: .9rem;
  border: 1px solid #d6e7df;
  border-radius: 12px;
  padding: .85rem;
  background: #f8fcfa;
}

.tool-output h2 {
  margin: 0 0 .35rem;
  font-size: 1.15rem;
  color: #1f5f52;
}

.tool-output ul {
  margin: 0;
  padding-left: 1.15rem;
}

.tool-disclaimer {
  margin-top: .65rem;
  font-size: .92rem;
  color: rgba(37, 51, 46, .78);
}

.tool-related {
  margin-top: .7rem;
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}

.tool-related a {
  font-weight: 700;
  color: #2e6f5c;
  text-decoration: none;
}

.tool-related a:hover,
.tool-related a:focus-visible {
  text-decoration: underline;
}

@media (max-width: 860px) {
  .tool-grid {
    grid-template-columns: 1fr;
  }
}