.tool-page { max-width: 980px; margin: 0 auto; padding: var(--space-lg) var(--space-md); }
.tool-back { font-size: 0.85rem; color: var(--blue); font-weight: 500; display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: var(--space-md); text-decoration: none; }
.tool-back:hover { text-decoration: underline; }
.tool-header { display: flex; align-items: flex-start; gap: 1.25rem; margin-bottom: var(--space-lg); }
.tool-emoji { font-size: 3rem; line-height: 1; flex-shrink: 0; }
.tool-cat { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue); margin-bottom: 0.3rem; }
.tool-title { font-family: var(--font-display); font-size: clamp(1.8rem,4vw,2.5rem); font-weight: 800; color: var(--navy); margin-bottom: 0.5rem; letter-spacing: -0.02em; }
.tool-subtitle { font-size: 1rem; color: var(--muted); line-height: 1.7; max-width: 560px; }
/* Stacked sections — inputs (+ flow, where relevant) on top, full-width output below.
   Full-width text wraps into far fewer lines than a cramped half-width column, which is
   what keeps each section to roughly 1-2 scrolls instead of a long, narrow scroll-fest. */
.tool-body { display: flex; flex-direction: column; gap: var(--space-md); }
.tool-form-panel { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: var(--space-md); }
.tool-form-panel .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-md); }
@media(max-width:640px) { .tool-form-panel .field-grid { grid-template-columns: 1fr; } }
.tool-form-panel .field-grid .field-group { margin-bottom: 1rem; }
.run-badge-wrap { margin-bottom: var(--space-sm); }
.run-badge { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--muted); }
.field-group { margin-bottom: 1rem; }
.field-group label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--navy); margin-bottom: 0.4rem; }
.field-group .req { color: var(--orange); }
.field-group input, .field-group textarea, .field-group select {
  width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 6px;
  font-family: var(--font-body); font-size: 0.9rem; color: var(--navy);
  background: var(--white); transition: border-color var(--transition); resize: vertical;
}
.field-group input:focus, .field-group textarea:focus, .field-group select:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(26,86,219,0.08);
}
.run-btn { width: 100%; justify-content: center; }
.tool-output-panel { background: var(--bg-light); border: 1px solid var(--border); border-radius: 12px; padding: var(--space-md); }
.output-placeholder .ph-eyebrow { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange); font-weight: 700; margin-bottom: 0.5rem; }
.output-placeholder p { font-size: 0.88rem; color: var(--muted); line-height: 1.6; margin-bottom: 0.6rem; max-width: 70ch; }
.output-placeholder .ph-divider { border: none; border-top: 1px solid var(--border); margin: 1rem 0; }
.output-label { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue); margin-bottom: var(--space-sm); }
/* Output text is capped to a comfortable reading measure (~70 characters) even though the
   panel itself now spans the full width — keeps long agent output easy to scan rather than
   stretching into long, hard-to-track lines. */
.output-body { font-size: 0.9rem; color: var(--navy); line-height: 1.65; }
.output-body h2 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--navy); margin: 1rem 0 0.4rem; max-width: 70ch; }
.output-body h3 { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; color: var(--navy); margin: 0.7rem 0 0.3rem; max-width: 70ch; }
.output-body strong { color: var(--navy); }
.output-body ul { padding-left: 1.2rem; margin: 0.35rem 0 0.65rem; max-width: 70ch; }
.output-body li { margin-bottom: 0.2rem; color: var(--muted); }
.output-body p { color: var(--muted); margin-bottom: 0.65rem; max-width: 70ch; }
.copy-btn { margin-top: 1rem; background: none; border: 1px solid var(--border); border-radius: 6px; padding: 6px 16px; font-size: 0.8rem; color: var(--muted); cursor: pointer; transition: all var(--transition); }
.copy-btn:hover { border-color: var(--blue); color: var(--blue); }