/* ============================================================
   码工具箱 - JSON格式化工具（工具专属样式）
   公共样式见 site.css
   ============================================================ */

/* ---------- 输入/输出双栏 ---------- */
.panes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  background: var(--bg);
}

.pane {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pane.left-pane { border-radius: 0 0 0 var(--radius); }
.pane.right-pane { border-radius: 0 0 var(--radius) 0; }

.pane-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  background: #fafbfc;
  font-size: 12px;
  color: var(--text-2);
}
.pane-head .label { font-weight: 600; color: var(--text); }
.pane-head .stat { color: var(--text-3); font-variant-numeric: tabular-nums; }

textarea {
  flex: 1 1 auto;
  width: 100%;
  min-height: 440px;
  padding: 14px 16px;
  border: none;
  outline: none;
  resize: vertical;
  background: #fcfcfd;
  color: var(--text);
  font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.6;
  tab-size: 2;
}
textarea::placeholder { color: var(--text-3); }
textarea#output { background: #fff; }

@media (max-width: 860px) {
  .panes { grid-template-columns: 1fr; }
  .pane.left-pane, .pane.right-pane { border-radius: 0 0 var(--radius) var(--radius); }
  textarea { min-height: 300px; }
}