/* Shared styles for individual tool pages (inherits variables from ../../style.css) */
.tool-nav {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
}
.tool-nav a { color: var(--muted); font-weight: 500; }
.tool-nav a:hover { color: var(--accent); }
.tool-nav .sep { color: var(--muted); }

.two-col { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
@media (max-width: 780px) { .two-col { grid-template-columns: 1fr; } }

.copy-line { display: flex; gap: 8px; align-items: center; }
.copy-line input { flex: 1; }

.range-row { display: flex; align-items: center; gap: 12px; }
.range-row input[type=range] { flex: 1; }
.range-row output { min-width: 46px; text-align: right; font-weight: 600; color: var(--primary); }

.chk-row { display: flex; gap: 14px; flex-wrap: wrap; }
.chk-row label { display: flex; align-items: center; gap: 6px; cursor: pointer; }

.pill { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--grad-soft); color: var(--accent); font-size: .75rem; font-weight: 600; }

.tool-desc { color: var(--muted); font-size: .95rem; max-width: 720px; margin: 0 auto 30px; text-align: center; }

pre.output {
  padding: 16px; border-radius: 12px; background: var(--bg-2);
  border: 1px solid var(--card-border); overflow: auto; max-height: 480px;
  font-family: 'JetBrains Mono', monospace; font-size: .9rem; white-space: pre-wrap;
}