#text-json-formatter #json-formatter { margin-top:24px; }
#text-json-formatter .json-toolbar { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:14px; padding:14px; border:1px solid #dfe6ef; border-radius:14px; background:#f7f9fc; }
#text-json-formatter .json-actions { display:flex; flex-wrap:wrap; gap:8px; }
#text-json-formatter .btn { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:38px; padding:7px 12px; border:1px solid transparent; border-radius:6px; background:#fff; color:#334155; font-weight:600; line-height:1.25; }
#text-json-formatter .btn:focus-visible, #text-json-formatter select:focus-visible, #text-json-formatter textarea:focus-visible { outline:3px solid rgba(37,99,235,.24); outline-offset:2px; }
#text-json-formatter .btn-primary { border-color:#2563eb; background:#2563eb; color:#fff; }
#text-json-formatter .btn-outline-primary { border-color:#2563eb; color:#1d4ed8; }
#text-json-formatter .btn-outline-secondary { border-color:#94a3b8; color:#475569; }
#text-json-formatter .btn-sm { min-height:31px; padding:4px 9px; font-size:13px; }
#text-json-formatter .btn:disabled { cursor:not-allowed; opacity:.55; }
#text-json-formatter .json-indent { display:flex; align-items:center; gap:8px; }
#text-json-formatter .json-indent label { margin:0; color:#52657d; font-size:13px; font-weight:600; }
#text-json-formatter .json-indent select { width:112px; }
#text-json-formatter .form-control { width:100%; border:1px solid #ced8e5; border-radius:6px; background:#fff; }
#text-json-formatter select.form-control { padding:7px 9px; color:#23364d; }
#text-json-formatter .json-workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
#text-json-formatter .json-pane { min-width:0; }
#text-json-formatter .json-pane-title { display:block; margin:0 0 8px; color:#263b53; font-size:14px; font-weight:700; }
#text-json-formatter .json-pane-header { display:flex; align-items:center; justify-content:space-between; min-height:31px; margin-bottom:8px; }
#text-json-formatter .json-pane-header .json-pane-title { margin:0; }
#text-json-formatter #json-input, #text-json-formatter .json-output { box-sizing:border-box; height:480px; border:1px solid #ced8e5; border-radius:12px; background:#fff; }
#text-json-formatter #json-input { resize:vertical; padding:16px; color:#23364d; font:14px/1.65 Consolas,Monaco,'Courier New',monospace; tab-size:2; }
#text-json-formatter #json-input:focus { border-color:#4d86ee; box-shadow:0 0 0 3px rgba(37,99,235,.12); outline:0; }
#text-json-formatter .json-output { position:relative; overflow:auto; background:#172033; }
#text-json-formatter #json-result { min-height:100%; margin:0; padding:16px; color:#d8e2f0; background:transparent; font:14px/1.65 Consolas,Monaco,'Courier New',monospace; white-space:pre; }
#text-json-formatter #json-result:focus { outline:3px solid rgba(96,165,250,.65); outline-offset:-3px; }
#text-json-formatter #json-empty { position:absolute; top:50%; left:50%; width:calc(100% - 48px); margin:0; transform:translate(-50%,-50%); color:#8797ad; text-align:center; }
#text-json-formatter .json-key { color:#7dd3fc; }
#text-json-formatter .json-string { color:#a7f3d0; }
#text-json-formatter .json-number { color:#fcd34d; }
#text-json-formatter .json-boolean { color:#c4b5fd; }
#text-json-formatter .json-null { color:#fda4af; }
#text-json-formatter .json-status { min-height:24px; margin-top:10px; font-size:14px; font-weight:600; }
#text-json-formatter .json-status.is-success { color:#087f5b; }
#text-json-formatter .json-status.is-error { color:#c92a2a; }
#text-json-formatter .json-privacy { display:flex; align-items:center; gap:6px; margin:8px 0 0; color:#63758a; font-size:13px; }
#text-json-formatter .json-help { margin-top:42px; }
@media (max-width:767px) {
  #text-json-formatter .json-toolbar { align-items:stretch; flex-direction:column; }
  #text-json-formatter .json-indent { justify-content:space-between; }
  #text-json-formatter .json-workspace { grid-template-columns:1fr; }
  #text-json-formatter #json-input, #text-json-formatter .json-output { height:360px; }
}