@charset "UTF-8";
.jf-toolbar { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin-bottom: 14px; }
.jf-indent { width: 130px; }
.jf-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.jf-status { min-height: 22px; margin-bottom: 12px; font-size: 0.9rem; font-weight: 600; }
.jf-status.ok { color: var(--tool-success); }
.jf-status.err { color: var(--tool-danger); }
.jf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.jf-col { display: flex; flex-direction: column; gap: 6px; }
.jf-collabel { font-weight: 600; font-size: 0.9rem; }
.jf-hint { font-weight: 400; opacity: 0.65; font-size: 0.82rem; }
#jfInput { min-height: 420px; font-family: 'Courier New', monospace; font-size: 0.92rem; white-space: pre; }
.jf-tree { min-height: 420px; max-height: 620px; overflow: auto; background: var(--bg-color); border: 1px solid var(--border-color); border-radius: var(--tool-radius-sm); padding: 12px; font-family: 'Courier New', monospace; font-size: 0.9rem; line-height: 1.5; }
.jf-node { padding-left: 16px; }
.jf-node.root { padding-left: 0; }
.jf-toggle { cursor: pointer; user-select: none; }
.jf-toggle::before { content: "\25BC"; display: inline-block; width: 14px; font-size: 0.7rem; opacity: 0.7; transition: transform 0.15s; }
.jf-toggle.collapsed::before { transform: rotate(-90deg); }
.jf-key { color: #0b7285; font-weight: 700; }
.jf-str { color: #2b8a3e; }
.jf-num { color: #1971c2; }
.jf-bool { color: #d9480f; }
.jf-null { color: #868e96; font-style: italic; }
.jf-muted { opacity: 0.6; }
.jf-collapsed-body { display: none; }
body.dark-mode .jf-key { color: #66d9e8; }
body.dark-mode .jf-str { color: #8ce99a; }
body.dark-mode .jf-num { color: #74c0fc; }
body.dark-mode .jf-bool { color: #ffa94d; }
.jf-about p { margin: 0 0 12px; }
@media (max-width: 800px) { .jf-grid { grid-template-columns: 1fr; } #jfInput, .jf-tree { min-height: 260px; } }