/* ===========================================================
     JSON STUDIO STYLES
  =========================================================== */
  .js-root {
    flex: 1; display: flex; flex-direction: column;
    overflow: hidden; background: #c0c0c0;
    font-family: Verdana, sans-serif; font-size: 11px;
  }

  /* tab strip */
  .js-tabs {
    display: flex; background: #c0c0c0;
    border-bottom: 1px solid #808080; padding: 4px 4px 0; flex-shrink: 0;
    overflow-x: auto;
  }
  .js-tab {
    background: #c0c0c0; border: 2px outset #ffffff; border-bottom: none;
    padding: 3px 12px; margin-right: 2px;
    font-family: Verdana, sans-serif; font-size: 11px; cursor: pointer;
    color: #404040; position: relative; top: 1px; white-space: nowrap;
  }
  .js-tab.active {
    background: #c0c0c0; color: #000; font-weight: bold; top: 0;
    padding-bottom: 5px; z-index: 2;
  }
  .js-tab:hover:not(.active) { background: #d4d0c8; color: #000; }

  /* toolbar */
  .js-toolbar {
    background: #c0c0c0; border-bottom: 2px groove #ffffff;
    padding: 4px 6px; display: flex; flex-wrap: wrap; gap: 4px;
    align-items: center; flex-shrink: 0;
  }
  .js-toolbar .group {
    display: flex; gap: 2px; padding: 0 4px;
    border-left: 1px solid #808080; border-right: 1px solid #ffffff;
  }
  .js-toolbar .group:first-child { border-left: none; }
  .js-toolbar .group:last-child { border-right: none; }
  .js-btn {
    background: #c0c0c0; border: 2px outset #ffffff;
    padding: 2px 8px; font-family: Verdana, sans-serif;
    font-size: 11px; cursor: pointer; color: #000; white-space: nowrap;
  }
  .js-btn:active, .js-btn.pressed { border: 2px inset #ffffff; padding: 3px 7px 1px 9px; }
  .js-btn:disabled { color: #808080; cursor: default; }
  .js-toolbar label {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 0 4px; font-size: 11px;
  }
  .js-toolbar select, .js-toolbar input[type=text], .js-toolbar input[type=number] {
    font-family: Verdana, sans-serif; font-size: 11px;
    border: 2px inset #ffffff; background: #ffffff;
    padding: 1px 4px;
  }
  .js-toolbar input[type=checkbox] { vertical-align: middle; }

  /* body */
  .js-body { flex: 1; display: flex; overflow: hidden; gap: 4px; padding: 4px; }
  .js-pane {
    flex: 1; display: flex; flex-direction: column;
    background: #c0c0c0; border: 2px inset #ffffff; min-width: 0;
  }
  .js-pane-title {
    background: linear-gradient(to right, #000080, #1084d0);
    color: #fff; padding: 2px 6px; font-size: 11px; font-weight: bold;
    display: flex; justify-content: space-between; align-items: center;
    flex-shrink: 0;
  }
  .js-pane-title .actions { display: flex; gap: 2px; }
  .js-pane-title .actions .js-btn { padding: 0 5px; font-size: 10px; }
  .js-pane-content { flex: 1; overflow: hidden; display: flex; min-height: 0; }

  /* editor */
  .js-editor-wrap {
    flex: 1; display: flex; background: #ffffff;
    font-family: "Courier New", Courier, monospace; font-size: 12px;
    overflow: auto; min-height: 0;
  }
  .js-linenos {
    background: #e8e8e8; color: #808080; text-align: right;
    padding: 4px 6px 4px 8px; user-select: none; border-right: 1px solid #c0c0c0;
    white-space: pre; font-family: "Courier New", monospace; font-size: 12px;
    line-height: 1.5; min-width: 36px;
  }
  .js-linenos.hidden { display: none; }
  .js-textarea {
    flex: 1; border: none; outline: none; resize: none;
    padding: 4px 6px; font-family: "Courier New", monospace;
    font-size: 12px; line-height: 1.5;
    background: transparent; color: #000; tab-size: 2; white-space: pre;
    min-width: 100%;
  }
  .js-textarea:focus { background: #ffffe8; }

  /* tree */
  .js-tree {
    flex: 1; overflow: auto; background: #ffffff; padding: 4px 6px;
    font-family: "Courier New", monospace; font-size: 12px; line-height: 1.5;
  }
  .tn { white-space: nowrap; }
  .tn-toggle {
    display: inline-block; width: 12px; text-align: center;
    cursor: pointer; user-select: none; color: #000080; font-weight: bold;
  }
  .tn-toggle.leaf { color: transparent; cursor: default; }
  .tn-key { color: #800000; cursor: pointer; }
  .tn-key:hover { background: #ffffcc; }
  .tn-colon { color: #000; margin-right: 4px; }
  .tn-val { cursor: pointer; }
  .tn-val:hover { background: #ffffcc; }
  .tn-string { color: #008000; }
  .tn-number { color: #0000ff; }
  .tn-boolean { color: #800080; font-weight: bold; }
  .tn-null { color: #808080; font-style: italic; }
  .tn-bracket { color: #000; }
  .tn-meta {
    color: #808080; font-size: 10px; margin-left: 4px;
    font-family: Verdana, sans-serif;
  }
  .tn-children { padding-left: 18px; border-left: 1px dotted #c0c0c0; margin-left: 4px; }
  .tn-children.hidden { display: none; }
  .tn-badge {
    display: inline-block; padding: 0 4px; margin-right: 4px;
    font-size: 9px; font-family: Verdana, sans-serif;
    background: #c0c0c0; border: 1px solid #808080; color: #404040;
    vertical-align: 1px;
  }
  .tn-search-hit { background: #ffff00; }
  .tn-search-active { background: #ff8000; color: #fff; }

  /* output / aux panes */
  .js-output {
    flex: 1; overflow: auto; background: #ffffff;
    font-family: "Courier New", monospace; font-size: 12px;
    padding: 6px; white-space: pre; line-height: 1.5;
  }

  /* validation strip */
  .js-validation {
    background: #ffffe1; border-top: 1px solid #808080;
    padding: 3px 8px; font-size: 11px; font-family: "Courier New", monospace;
    color: #008000; flex-shrink: 0;
  }
  .js-validation.error { background: #ffe0e0; color: #a00000; }
  .js-validation.warn { background: #fff4d0; color: #806000; }

  /* search bar */
  .js-search {
    background: #c0c0c0; border-bottom: 1px solid #808080;
    padding: 4px 6px; display: none; gap: 4px; align-items: center;
    flex-shrink: 0; flex-wrap: wrap;
  }
  .js-search.visible { display: flex; }
  .js-search input[type=text] {
    font-family: "Courier New", monospace; font-size: 11px;
    border: 2px inset #ffffff; background: #ffffff;
    padding: 2px 4px; min-width: 140px;
  }
  .js-search .count {
    font-size: 11px; color: #404040; min-width: 60px; text-align: center;
    border: 1px inset #ffffff; padding: 2px 6px; background: #ffffe1;
  }

  /* diff view */
  .js-diff {
    flex: 1; display: flex; overflow: hidden;
    font-family: "Courier New", monospace; font-size: 11px;
  }
  .js-diff-side { flex: 1; overflow: auto; background: #ffffff; }
  .js-diff-row { display: flex; line-height: 1.4; min-width: 100%; min-height: 1.4em; }
  .js-diff-row .ln {
    width: 36px; text-align: right; padding: 0 4px;
    background: #e8e8e8; color: #808080; user-select: none;
    border-right: 1px solid #c0c0c0; flex-shrink: 0;
  }
  .js-diff-row .gutter {
    width: 14px; text-align: center; padding: 0;
    background: #e8e8e8; color: #808080; user-select: none;
    flex-shrink: 0; font-weight: bold;
  }
  .js-diff-row.add .gutter { color: #006000; }
  .js-diff-row.del .gutter { color: #800000; }
  .js-diff-row.chg .gutter { color: #806000; }
  .js-diff-row.placeholder { background: #f4f4f4; }
  .js-diff-row.placeholder .ln, .js-diff-row.placeholder .gutter { background: #ececec; color: transparent; }
  .js-diff-row .ct { flex: 1; padding: 0 6px; white-space: pre; }
  .js-diff-row.add { background: #d4f4d4; }
  .js-diff-row.add .ln { background: #a4e4a4; }
  .js-diff-row.del { background: #f4d4d4; }
  .js-diff-row.del .ln { background: #e4a4a4; }
  .js-diff-row.chg { background: #fff4d0; }
  .js-diff-row.chg .ln { background: #ffe4a0; }
  .js-diff-row .ct .chg-del { background: #f4a4a4; color: #800000; }
  .js-diff-row .ct .chg-add { background: #a4e4a4; color: #006000; }

  /* stats */
  .js-stats { padding: 12px; font-family: "Courier New", monospace; font-size: 12px; }
  .js-stats h3 {
    font-family: Verdana, sans-serif; font-size: 12px;
    margin: 12px 0 6px; padding: 2px 6px;
    background: #000080; color: #fff;
  }
  .js-stats h3:first-child { margin-top: 0; }
  .js-stats .row {
    display: flex; padding: 2px 6px;
    border-bottom: 1px dotted #c0c0c0;
  }
  .js-stats .row .k { flex: 1; color: #404040; }
  .js-stats .row .v { color: #000; font-weight: bold; }
  .js-stats .bar {
    display: inline-block; height: 10px; background: #000080;
    vertical-align: middle; margin-right: 6px;
  }

  /* snapshots list */
  .js-snaps { padding: 8px; }
  .js-snaps .snap {
    display: flex; padding: 4px 6px; gap: 8px;
    align-items: center; border-bottom: 1px dotted #c0c0c0;
  }
  .js-snaps .snap:hover { background: #ffffe1; }
  .js-snaps .name { flex: 1; font-family: "Courier New", monospace; }
  .js-snaps .when { color: #808080; font-size: 10px; }

  /* generic horizontal split for two panes side-by-side */
  .js-split-h { display: flex; flex: 1; gap: 4px; min-height: 0; overflow: hidden; }

  /* mode-specific layout when only one pane visible */
  .js-pane.hidden { display: none; }