/* Contained /tools/ estate styles (browser-first utilities inside csmbac.com). */
.tools-body { font-family: var(--font-ui, inherit); }

.tools-hero { max-width: 720px; margin: 2.5rem auto 1.5rem; }
.tools-hero h1 { margin-bottom: 0.5rem; }
.tools-lead { color: var(--text-muted, inherit); font-size: 1.1rem; }

.tools-app,
.tools-section,
.tools-related,
.tools-family {
  max-width: 720px;
  margin: 2rem auto;
}

.tools-app {
  padding: 1.5rem;
  border: 1px solid color-mix(in srgb, var(--text-main, #222) 18%, transparent);
  border-radius: 10px;
  background: var(--panel-bg, transparent);
}

.tools-section h2,
.tools-related h2,
.tools-family h2 { margin-bottom: 0.75rem; }

.tools-control label { display: block; margin: 0.75rem 0 0.25rem; font-weight: 600; }

.tools-textarea {
  width: 100%;
  min-height: 160px;
  padding: 0.65rem;
  font: inherit;
  border: 1px solid color-mix(in srgb, var(--text-main, #222) 25%, transparent);
  border-radius: 6px;
  background: var(--panel-bg, #fff);
  color: var(--text-main, inherit);
}

.tools-file,
.tools-number {
  padding: 0.55rem;
  border: 1px solid color-mix(in srgb, var(--text-main, #222) 25%, transparent);
  border-radius: 6px;
  background: var(--panel-bg, #fff);
  color: var(--text-main, inherit);
}

.tools-number { width: 8rem; }

.tools-field-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; margin-bottom: 0.75rem; }

.tools-result { margin-top: 1rem; padding: 0.75rem; border-radius: 6px; background: var(--panel-bg, transparent); }
.tools-output { margin-top: 1rem; }

.tools-case-modes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }

.tool-btn {
  padding: 0.55rem 0.9rem;
  font: inherit;
  border: 1px solid var(--link-uk, #2563eb);
  background: transparent;
  color: var(--link-uk, #2563eb);
  border-radius: 6px;
  cursor: pointer;
}
.tool-btn:hover { background: var(--panel-bg, rgba(0,0,0,0.06)); }

.tools-related__grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.tools-related__link {
  padding: 0.75rem;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--link-uk, #2563eb) 35%, transparent);
  color: var(--link-uk, #2563eb);
  text-decoration: none;
}
.tools-related__link:hover { background: var(--panel-bg, rgba(0,0,0,0.06)); }

.tools-family { margin-bottom: 2.5rem; }
.tools-family .image-tools-grid { margin: 0; }

.teaser-line { max-width: 720px; margin: 1.25rem auto; }