/* Base */
.jbt-root { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:#111; }
.jbt-topbar { position: sticky; top:0; z-index: 5; display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.6rem .8rem; background:#111; color:#fff; }
.jbt-left-actions, .jbt-right-actions { display:flex; gap:.5rem; align-items:center; }
.jbt-btn { border:1px solid #333; background:#222; color:#fff; padding:.4rem .7rem; border-radius:.5rem; cursor:pointer; }
.jbt-btn:hover { background:#2f2f2f; }
.jbt-primary { border-color:#0a6; background:#0b7; }
.jbt-primary:hover { background:#0a6; }
.jbt-link { color:#9fd; text-decoration:none; padding:.25rem .5rem; border:1px solid #2b4950; border-radius:.5rem; }
.jbt-link:hover { background:#1b2b2e; }
.jbt-status { display:inline-block; width:.6rem; height:.6rem; border-radius:50%; background:#777; margin-right:.25rem; }

/* Dropdown */
.jbt-dropdown { position: relative; }
.jbt-dropdown-menu { position:absolute; top:110%; left:0; min-width: 220px; background:#1b1b1b; border:1px solid #333; border-radius:.5rem; padding:.25rem; display:none; z-index:10; }
.jbt-drop-item { display:block; width:100%; text-align:left; background:transparent; border:none; color:#fff; padding:.5rem .6rem; cursor:pointer; border-radius:.35rem; }
.jbt-drop-item:hover { background:#2a2a2a; }

/* Container + panels */
.jbt-container { display:flex; height: 70vh; min-height: 420px; border-top:1px solid #eee; resize: vertical; overflow:auto; }
.jbt-panel { flex:1; display:flex; flex-direction:column; }
.jbt-left { min-width: 220px; }
.jbt-right { min-width: 280px; }
.jbt-panel-header { padding:.5rem .75rem; border-bottom:1px solid #eee; background:#f7f7f7; font-weight:600; }
.jbt-right-header { display:flex; align-items:center; justify-content:space-between; }
#jbt-input { flex:1; width:100%; border:none; outline:none; padding:.75rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 13px; resize: vertical; min-height: 180px; }
.jbt-error { min-height: 1.25rem; color:#ff6b6b; font-size:.9rem; padding:.25rem .75rem .5rem; white-space:pre-wrap; }
.jbt-divider { width:6px; cursor: col-resize; background: linear-gradient(180deg, #ddd, #bbb); }
.jbt-divider:hover { background: linear-gradient(180deg, #ccc, #aaa); }
.jbt-output { flex:1; overflow: auto; padding:.5rem .75rem; background:#fcfcfc; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size:13px; border-left:1px solid #eee; }

/* Tree view */
.jbt-tree { line-height: 1.5; }
.jbt-node { white-space: nowrap; }
.jbt-toggle { cursor:pointer; user-select:none; display:inline-block; width:1rem; text-align:center; }
.jbt-key { color:#7a1f7c; }
.jbt-string { color:#0b6; }
.jbt-number { color:#06c; }
.jbt-boolean { color:#c50; }
.jbt-null { color:#999; }
.jbt-brace { color:#555; }
.jbt-kv { margin-left: 1rem; }

/* Modal */
.jbt-modal { position: fixed; inset:0; display:none; align-items:center; justify-content:center; background: rgba(0,0,0,.6); z-index: 50; }
.jbt-modal[aria-hidden="false"] { display:flex; }
.jbt-modal-content { width:min(900px, 94vw); background:#fff; color:#111; border-radius:.75rem; overflow:hidden; box-shadow: 0 10px 30px rgba(0,0,0,.4); display:flex; flex-direction:column; }
.jbt-modal-header { display:flex; align-items:center; justify-content:space-between; padding:.6rem .75rem; border-bottom:1px solid #eee; background:#f7f7f7; }
#jbt-modal-body { min-height:260px; padding:.75rem; border:none; outline:none; resize:vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.jbt-modal-actions { display:flex; gap:.5rem; justify-content:flex-end; padding:.6rem .75rem; border-top:1px solid #eee; }

/* Fullscreen */
.jbt-fullscreen .jbt-container { height: calc(100vh - 60px); }
.jbt-fullscreen { position: fixed; inset:0; background:#111; color:#fff; z-index:9999; }
.jbt-fullscreen .jbt-panel-header { background:#191919; border-bottom-color:#2a2a2a; }
.jbt-fullscreen .jbt-output { background:#0f0f0f; border-left-color:#2a2a2a; }

/* Dark mode */
.jbt-dark .jbt-topbar { background:#0d0d0d; }
.jbt-dark .jbt-container { border-top-color:#222; }
.jbt-dark .jbt-panel-header { background:#151515; border-bottom-color:#262626; color:#eee; }
.jbt-dark #jbt-input { background:#0f0f0f; color:#e6e6e6; }
.jbt-dark .jbt-output { background:#0b0b0b; color:#ddd; border-left-color:#222; }
.jbt-dark .jbt-divider { background: linear-gradient(180deg, #333, #222); }
.jbt-dark .jbt-divider:hover { background: linear-gradient(180deg, #3a3a3a, #2a2a2a); }
.jbt-dark .jbt-link { color:#bfe; border-color:#2a4550; }
.jbt-dark .jbt-dropdown-menu { background:#101010; border-color:#2a2a2a; }
.jbt-dark .jbt-modal-content { background:#0f0f0f; color:#eee; }
.jbt-dark #jbt-modal-body { background:#0a0a0a; color:#eee; border-top:1px solid #222; }

/* Responsive */
@media (max-width: 900px) {
  .jbt-container { flex-direction: column; height: auto; }
  .jbt-divider { height:6px; width:100%; cursor: row-resize; }
}