.tool-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 2.5rem 1rem;
}

.tool-header {
  margin-bottom: 1.5rem;
}

.tool-title {
  font-size: 2rem;
  margin: 0 0 .5rem 0;
  color: var(--text-1);
}

.tool-subtitle {
  margin: 0;
  color: var(--text-2);
}

.tool-input-group {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  align-items: center;
}

.tool-input {
  flex: 1;
  min-width: 260px;
  padding: .8rem .9rem;
  border: 1px solid var(--border-2);
  border-radius: 10px;
  background: var(--surface-1);
  color: var(--text-1);
}

.tool-button {
  padding: .85rem 1rem;
  border: 0;
  border-radius: 10px;
  background: var(--indigo-7);
  color: #fff;
  cursor: pointer;
}

.tool-tip {
  margin: .75rem 0 0 0;
  color: var(--text-2);
  font-size: .95rem;
}

.tool-status {
  margin-top: 1.25rem;
  padding: 1rem;
  border: 1px solid var(--border-2);
  border-radius: 12px;
  display: none;
}

.tool-result {
  margin-top: 1rem;
  display: none;
}

.tool-promo-banner {
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  padding: 1rem;
  margin-top: 1rem;
}

.tool-promo-title {
  margin: .25rem 0 .5rem 0;
  font-size: 1.25rem;
  color: var(--text-1);
}

.tool-promo-text {
  margin: .25rem 0 .75rem 0;
  color: var(--text-2);
}

.tool-promo-link {
  display: inline-block;
  padding: .75rem 1rem;
  border-radius: 10px;
  background: var(--indigo-7);
  color: #fff;
  text-decoration: none;
}

.tool-hr {
  margin: 2rem 0;
  border: 0;
  border-top: 1px solid var(--border-2);
}

.tool-section {
  margin-top: 2rem;
}

.tool-section--bordered {
  border-top: 1px solid var(--border-2);
  padding-top: 1.25rem;
}

.tool-section-title {
  font-size: 1.35rem;
  margin: 0 0 .75rem 0;
  color: var(--text-1);
}

.tool-section-text {
  margin: .25rem 0 .75rem 0;
  color: var(--text-2);
  line-height: 1.6;
}

.tool-list {
  margin: .25rem 0 0 1.25rem;
  color: var(--text-2);
  line-height: 1.6;
}

.tool-faq-item {
  border: 1px solid var(--border-2);
  border-radius: 12px;
  padding: .9rem;
  margin-bottom: .65rem;
}

.tool-faq-summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text-1);
}

.tool-faq-text {
  margin: .65rem 0 0 0;
  color: var(--text-2);
  line-height: 1.6;
}

.tool-result-grid {
  display: grid;
  gap: .75rem;
}

.tool-result-header {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
}

.tool-result-title {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text-1);
}

.tool-result-pill {
  display: inline-block;
  padding: .2rem .5rem;
  border-radius: 999px;
  color: #fff;
  font-size: .8rem;
}

.tool-result-pill-green {
  background: #15803d;
}

.tool-result-pill-red {
  background: #b91c1c;
}

.tool-result-card {
  border: 1px solid var(--border-2);
  border-radius: 12px;
  padding: .9rem;
}

.tool-result-label {
  color: var(--text-2);
  font-size: .9rem;
}

.tool-result-value {
  font-weight: 600;
  word-break: break-word;
  color: var(--text-1);
}

.tool-result-list {
  margin: .5rem 0 0 1.25rem;
  color: var(--text-2);
  line-height: 1.6;
}

.tool-result-warning {
  border: 1px solid #ffe4c7;
  background: #fff7ed;
  border-radius: 12px;
  padding: .9rem;
}

.tool-result-warning-title {
  font-weight: 600;
  color: var(--text-1);
}

.tool-result-warning-list {
  margin: .5rem 0 0 1.25rem;
  color: #7c2d12;
  line-height: 1.6;
}

.tool-result-raw {
  white-space: pre-wrap;
  word-break: break-word;
  margin: .75rem 0 0 0;
  font-size: .85rem;
  color: var(--text-1);
}

html[data-theme="dark"] .tool-title,
html[data-theme="dark"] .tool-promo-title,
html[data-theme="dark"] .tool-section-title,
html[data-theme="dark"] .tool-faq-summary,
html[data-theme="dark"] .tool-result-title,
html[data-theme="dark"] .tool-result-value,
html[data-theme="dark"] .tool-result-warning-title,
html[data-theme="dark"] .tool-result-raw {
  color: var(--text-1-dark);
}

html[data-theme="dark"] .tool-subtitle,
html[data-theme="dark"] .tool-tip,
html[data-theme="dark"] .tool-promo-text,
html[data-theme="dark"] .tool-section-text,
html[data-theme="dark"] .tool-list,
html[data-theme="dark"] .tool-faq-text,
html[data-theme="dark"] .tool-result-label,
html[data-theme="dark"] .tool-result-list {
  color: var(--text-2-dark);
}

html[data-theme="dark"] .tool-input {
  background: var(--surface-2-dark);
  border-color: var(--border-2-dark);
  color: var(--text-1-dark);
}

html[data-theme="dark"] .tool-button,
html[data-theme="dark"] .tool-promo-link {
  background: var(--indigo-5);
}

html[data-theme="dark"] .tool-promo-banner,
html[data-theme="dark"] .tool-result-card,
html[data-theme="dark"] .tool-faq-item {
  background: var(--surface-2-dark);
  border-color: var(--border-2-dark);
}

html[data-theme="dark"] .tool-hr {
  border-top-color: var(--border-2-dark);
}

html[data-theme="dark"] .tool-result-warning {
  border-color: #fcd34d;
  background: rgba(245, 158, 11, 0.16);
}

html[data-theme="dark"] .tool-result-warning-list {
  color: #fcd34d;
}