/* JSON Editor styles - integrate with toolbox look */
.json-editor-page { padding: 2rem; max-width: 1200px; margin: 0 auto; }
.json-container { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
.card { background: #1a1a1a; border-radius: 16px; padding: 1rem; color: #e6e6e6; box-shadow: 0 2px 10px rgba(0,0,0,0.6); }
.json-input-card h2, .json-editor-card h2 { margin: 0 0 0.75rem 0; }
.controls { display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:0.5rem; }
.controls button { background:#151515; color:#e6e6e6; border:1px solid #2a2a2a; padding:0.5rem 0.75rem; border-radius:8px; cursor:pointer; }
.json-input-card { }
#json-input { width:90%; min-height:220px; background:#0d0d0d; color:#f5f5f5; border:1px solid #222; padding:0.75rem; font-family: monospace; font-size:0.95rem; border-radius:8px; resize:vertical; }
.status-row { display:flex; justify-content:space-between; margin-top:0.5rem; }
.status { color:#a8a8a8; }
.error { color:#ff8080; font-size:0.95rem; }
.editor-header { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.editor-actions { display:flex; gap:0.5rem; align-items:center; }
#search-input { padding:0.5rem; border-radius:8px; border:1px solid #222; background:#0d0d0d; color:#e6e6e6; }
.editor-area { margin-top:0.75rem; min-height:800px; max-height:75vh; overflow:auto; padding:0.75rem; border-radius:8px; border:1px solid #222; background:#0b0b0b; }
.field { margin:0.5rem 0; display:flex; gap:0.5rem; align-items:center; }
.field label { min-width:140px; color:#dcdcdc; }
.field input[type="text"], .field input[type="number"] { flex:1; padding:0.45rem; border-radius:6px; border:1px solid #333; background:#0d0d0d; color:#e6e6e6; }
.field textarea { width:100%; min-height:500px; padding:0.6rem; border-radius:6px; border:1px solid #333; background:#0d0d0d; color:#e6e6e6; font-family:inherit; }
.collapsible { border-left:2px solid rgba(255,255,255,0.03); padding-left:0.75rem; margin:0.5rem 0; }
.array-item { display:flex; gap:0.5rem; align-items:start; border:1px solid #202020; padding:0.5rem; border-radius:6px; margin-bottom:0.5rem; }
.editor-actions button, .output-actions button { background:#151515; color:#e6e6e6; border:1px solid #2a2a2a; padding:0.4rem 0.6rem; border-radius:6px; cursor:pointer; }
.generated-output { margin-top:1.5rem; }
.output-area { background:#070707; color:#eaeaea; padding:1rem; border-radius:8px; min-height:180px; overflow:auto; font-family:monospace; }

@media (max-width: 900px) {
    .json-container { grid-template-columns: 1fr; }
}