.json-output{font-family:monospace;font-size:13px;line-height:1.6;background:#f5f5f5;border:1px solid #e8e8e8;border-radius:3px;padding:15px;overflow-x:auto;white-space:pre-wrap;word-break:break-all;min-height:200px;max-height:500px;overflow-y:auto}
.error-msg{color:#e53935;font-size:13px;margin-top:10px;padding:10px;background:#fce4ec;border-radius:3px;display:none}
.error-msg.visible{display:block}
.size-info{font-size:12px;color:#888;margin-top:8px;text-align:right}
.tree-view{font-family:monospace;font-size:13px;line-height:1.6;padding:15px;background:#f9f9f9;border:1px solid #e8e8e8;border-radius:3px;max-height:500px;overflow-y:auto;display:none}
.tree-view.visible{display:block}
.tree-node{margin-left:20px}
.tree-key{color:#3592e2;font-weight:700}
.tree-string{color:#4caf50}
.tree-number{color:#F78015}
.tree-boolean{color:#9c27b0}
.tree-null{color:#9c27b0;font-style:italic}
.tree-toggle{cursor:pointer;user-select:none}
.tree-toggle::before{content:"▼ ";font-size:10px}
.tree-toggle.collapsed::before{content:"▶ "}
.tree-toggle.collapsed+*{display:none}
.highlight{background:#fff3cd;padding:1px 3px;border-radius:2px}
.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.toolbar .btn{font-size:12px;padding:6px 12px}
.line-numbers{display:inline-block;width:30px;text-align:right;color:#aaa;font-size:12px;margin-right:10px;user-select:none}
.json-line{display:block}
.json-line:hover{background:#e8f4fd}
@media(max-width:768px){
  .json-output{font-size:12px;padding:10px}
  .toolbar{flex-direction:column}
  .toolbar .btn{width:100%}
}