:root{--bg:#f3f4f6;--surface:#fff;--surface-sunken:#f8fafc;--border:#e2e8f0;--border-strong:#cbd5e1;--text:#0f172a;--text-muted:#64748b;--accent:#4f46e5;--accent-contrast:#fff;--danger:#e11d48;--type-string:#0ea5e9;--type-number:#16a34a;--type-boolean:#d97706;--type-object:#7c3aed;--radius:8px;--radius-sm:6px;--gap:8px;color:var(--text);-webkit-font-smoothing:antialiased;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg)}code,.mono{font-family:ui-monospace,SF Mono,JetBrains Mono,Menlo,monospace}.app,.app__panes{height:100%}.app__panes{grid-template-columns:minmax(0,1fr) minmax(0,1fr);display:grid}@media (width<=860px){.app__panes{grid-template-rows:1fr 1fr;grid-template-columns:1fr;height:auto;min-height:100%}}.editor-pane{background:var(--bg);flex-direction:column;min-height:0;padding:20px;display:flex;overflow:auto}.editor-pane__header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;display:flex}.editor-pane__title{margin:0;font-size:18px;font-weight:650}.editor-pane__actions{align-items:flex-start;gap:8px;display:flex}.tree-list{margin:0;padding:0;list-style:none}.tree-row{contain:layout style}.tree-row--dragging{opacity:.55}.tree-row__main{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);align-items:center;gap:6px;margin:3px 0;padding:4px;display:flex}.tree-children{border-left:2px solid var(--border);margin-left:18px;padding-left:12px}.drag-handle{width:24px;height:28px;color:var(--text-muted);cursor:grab;border-radius:var(--radius-sm);touch-action:none;background:0 0;border:none;flex:none;place-items:center;font-size:15px;display:grid}.drag-handle:hover{background:var(--surface-sunken);color:var(--text)}.drag-handle:active{cursor:grabbing}.expand-toggle,.expand-spacer{flex:none;width:22px;height:28px}.expand-toggle{color:var(--text-muted);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;place-items:center;font-size:11px;display:grid}.expand-toggle:hover{background:var(--surface-sunken);color:var(--text)}.key-input{flex:120px;min-width:80px;font-weight:600}.kv-separator{color:var(--text-muted);font-weight:600}.type-select{flex:none}.value-input{flex:2 140px;min-width:80px}.value-boolean{min-width:80px;color:var(--type-boolean);flex:2 140px;align-items:center;gap:6px;font-weight:600;display:flex}.object-summary{color:var(--type-object);flex:2 140px;font-family:ui-monospace,SF Mono,Menlo,monospace;font-weight:600}.remove-button{width:28px;height:28px;color:var(--text-muted);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:1px solid #0000;flex:none;place-items:center;font-size:13px;display:grid}.remove-button:hover{border-color:var(--danger);color:var(--danger)}input[type=text],select,textarea{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:6px 8px}input[type=text]:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}.add-item{align-items:center;gap:6px;margin-top:8px;display:inline-flex}.add-item__button{font:inherit;color:var(--accent);background:var(--surface);border:1px dashed var(--accent);border-radius:var(--radius-sm);cursor:pointer;padding:6px 12px;font-weight:600}.add-item__button:hover{background:var(--accent);color:var(--accent-contrast)}.ghost-button,.primary-button,.file-button{font:inherit;border-radius:var(--radius-sm);cursor:pointer;padding:7px 12px;font-weight:600}.ghost-button{color:var(--text);background:var(--surface);border:1px solid var(--border-strong)}.ghost-button:hover{background:var(--surface-sunken)}.primary-button{color:var(--accent-contrast);background:var(--accent);border:1px solid var(--accent)}.primary-button:hover{filter:brightness(1.08)}.file-button{color:var(--text);background:var(--surface);border:1px solid var(--border-strong)}.file-button:hover{background:var(--surface-sunken)}.import-control{position:relative}.import-control__panel{z-index:10;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius);width:min(360px,80vw);margin-top:6px;padding:12px;position:absolute;right:0;box-shadow:0 12px 30px #0f172a2e}.import-control__textarea{resize:vertical;width:100%;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:12px}.import-control__row{justify-content:space-between;gap:8px;margin-top:8px;display:flex}.import-control__error{color:var(--danger);margin:8px 0 0;font-size:13px}.code-pane{background:#282c34;flex-direction:column;min-height:0;display:flex}.code-pane__header{color:#e5e7eb;border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:baseline;padding:14px 18px;display:flex}.code-pane__title{margin:0;font-size:15px;font-weight:600}.code-pane__header-actions{align-items:center;gap:12px;display:flex}.code-pane__hint{color:#94a3b8;font-size:12px}.code-pane__copy{font:inherit;color:#e5e7eb;border-radius:var(--radius-sm);cursor:pointer;background:#ffffff0f;border:1px solid #ffffff29;padding:5px 12px;font-size:12px;font-weight:600}.code-pane__copy:hover{background:#ffffff1f}.code-pane__editor{flex:1;min-height:0;font-size:13px;overflow:auto}