:root {
  --bg: #16181d;
  --bg-panel: #1d2026;
  --bg-toolbar: #22262e;
  --border: #2e333d;
  --text: #d7dae0;
  --text-dim: #8a90a0;
  --accent: #4f8ef7;
  --accent-2: #2563eb;
  --error: #f87171;
  --ok: #4ade80;
  --json-string: #6bbf7b;
  --json-number: #d9a441;
  --json-bool: #c586e0;
  --json-null: #5b6372;
  --json-key: #4f8ef7;
  --json-punct: #7c8493;
  --hl: #4f3a12;
  font-size: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}

/* ---------- Toolbar ---------- */
#toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding: 0 12px;
  background: var(--bg-toolbar);
  border-bottom: 1px solid var(--border);
}

.brand {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.3px;
  color: var(--accent);
  user-select: none;
}
.brand span { color: var(--text); font-weight: 400; }

.toolbar-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.spacer { flex: 1; }

#import-label {
  background: #2b303a;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 5px 12px;
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  position: relative;
  white-space: nowrap;
}
#import-label:hover { background: #353b47; border-color: #3a4150; }
#import-label input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }

#toolbar button {
  background: #2b303a;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 5px 11px;
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.12s;
}
#toolbar button:hover:not(:disabled) { background: #353b47; }
#toolbar button:disabled { opacity: 0.4; cursor: default; }

a.nav-link {
  color: var(--text-dim);
  font-size: 12.5px;
  text-decoration: none;
  white-space: nowrap;
}
a.nav-link:hover { color: var(--accent); }

/* ---------- Main layout ---------- */
#app {
  display: flex;
  height: calc(100% - 46px);
}

/* ---------- Editor pane ---------- */
#editor-pane {
  width: 42%;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  overflow: hidden;
}

.pane-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
}

.status {
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.status.ok { color: var(--ok); }
.status.err { color: var(--error); }

#editor {
  flex: 1;
  width: 100%;
  resize: none;
  background: #111318;
  color: var(--text);
  border: none;
  outline: none;
  padding: 12px 14px;
  font: 12.5px/1.5 "SF Mono", Menlo, Monaco, "Courier New", monospace;
  tab-size: 2;
}

#errors {
  max-height: 30%;
  overflow-y: auto;
  border-top: 1px solid var(--border);
  color: var(--error);
  font: 11.5px/1.5 "SF Mono", Menlo, Monaco, "Courier New", monospace;
  background: #1a1418;
}
#errors:empty { display: none; }
#errors div { padding: 6px 12px; border-bottom: 1px solid #2a2024; }

/* ---------- Splitter ---------- */
#splitter {
  width: 5px;
  cursor: col-resize;
  background: var(--border);
  flex-shrink: 0;
}
#splitter:hover { background: var(--accent); }

/* ---------- View pane ---------- */
#view-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.view-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}

#search {
  flex: 1;
  max-width: 360px;
  background: #14161b;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  padding: 6px 10px;
  font-size: 12.5px;
  outline: none;
}
#search:focus { border-color: var(--accent); }

.view-actions { display: flex; gap: 6px; }
.view-actions button {
  background: #2b303a;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.12s;
}
.view-actions button:hover { background: #353b47; }

/* ---------- Tree ---------- */
#tree-wrapper {
  flex: 1;
  overflow: auto;
  position: relative;
}

#tree {
  padding: 10px 14px;
  font: 12.5px/1.6 "SF Mono", Menlo, Monaco, "Courier New", monospace;
}

.tree-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: 13px;
  pointer-events: none;
}
.tree-empty.hidden { display: none; }

.json-node { position: relative; }

.json-children {
  padding-left: 18px;
  border-left: 1px solid #262b35;
  margin-left: 4px;
}
.json-node.collapsed > .json-children { display: none; }

.json-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 1px 4px;
  border-radius: 4px;
  white-space: pre-wrap;
  word-break: break-word;
}
.json-row.expandable { cursor: pointer; }
.json-row.expandable:hover { background: #232730; }

.toggle {
  display: inline-block;
  width: 12px;
  flex-shrink: 0;
  color: var(--text-dim);
  transition: transform 0.1s;
  user-select: none;
}
.json-node.collapsed > .json-row .toggle { transform: rotate(-90deg); }
.toggle.leaf { visibility: hidden; }

.json-key { color: var(--json-key); }
.json-colon { color: var(--json-punct); }
.json-punct { color: var(--json-punct); }
.json-preview { color: var(--text-dim); font-style: italic; }
.json-count { color: var(--text-dim); font-size: 11px; }

.json-value.string { color: var(--json-string); }
.json-value.number { color: var(--json-number); }
.json-value.boolean { color: var(--json-bool); }
.json-value.null { color: var(--json-null); font-style: italic; }

.json-hit { background: var(--hl); border-radius: 3px; }

.json-value { cursor: pointer; }
.json-value:hover { background: rgba(79, 142, 247, 0.15); border-radius: 3px; }

.json-key.editable-key { cursor: pointer; }
.json-key.editable-key:hover { background: rgba(79, 142, 247, 0.15); border-radius: 3px; }

.json-edit-input {
  background: #111318;
  color: inherit;
  border: 1px solid var(--accent);
  border-radius: 3px;
  padding: 0 4px;
  font: inherit;
  outline: none;
  min-width: 60px;
}
.json-edit-input:focus { border-color: var(--accent-2); }

/* ---------- Footer ---------- */
#view-footer {
  padding: 6px 14px;
  font-size: 11.5px;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #3a4150; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #4a5260; }