.hdbg-wrap { max-width: 980px; margin: 20px auto; }
.hdbg-grid { display:grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 10px; }
.hdbg-form label { display:flex; flex-direction:column; font-size: 14px; gap: 6px; }
.hdbg-form input { padding: 8px; border:1px solid #ccc; border-radius:6px; }
.hdbg-form button { margin-top: 12px; padding: 10px 14px; border:0; background:#111; color:#fff; border-radius:8px; cursor:pointer; }
.hdbg-output { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; align-items: start; }
.hdbg-json { background:#0b0b0b; color:#eaeaea; padding:12px; border-radius:10px; overflow:auto; max-height: 520px; }
.hdbg-note { font-size: 12px; color:#555; }
@media (max-width: 900px) {
  .hdbg-output { grid-template-columns: 1fr; }
}