/* ==========================================================================
   Ajudo — Formatador de JSON (estilos específicos). Base no .tt-*.
   ========================================================================== */

.fj-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fj-area {
  width: 100%; box-sizing: border-box; min-height: 280px; resize: vertical;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9rem; line-height: 1.5; color: var(--ink);
  background: var(--paper-deep); border: 1.5px solid var(--line-strong);
  border-radius: var(--radius); padding: 14px;
}
.fj-area:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(63,125,94,0.15); }
.fj-area[readonly] { background: var(--card); }
.fj-label { font-size: 0.82rem; font-weight: 600; color: var(--ink); margin-bottom: 7px; display: block; }

.fj-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0; }
.fj-btn {
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 600;
  color: var(--ink-soft); background: var(--card); border: 1.5px solid var(--line-strong);
  border-radius: 999px; padding: 7px 14px; cursor: pointer;
}
.fj-btn.is-active { color: var(--paper); background: var(--green-deep); border-color: var(--green-deep); }

.fj-status { font-size: 0.88rem; font-weight: 600; min-height: 1.4em; margin-top: 4px; }
.fj-status.is-ok { color: var(--green-deep); }
.fj-status.is-bad { color: var(--terracotta); }

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