.path-summary { display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--wb-muted); font-size:.76rem; font-weight:800; }
.path-summary span { padding:7px 9px; border:1px solid var(--wb-border); border-radius:999px; background:var(--wb-surface-2); }
.path-summary strong { color:var(--wb-text); font-family:var(--wb-mono); }
.path-grid { display:grid; grid-template-columns:.92fr 1.08fr; gap:12px; }
.path-editor,.path-browser { overflow:hidden; min-width:0; }
.path-card-head { min-height:52px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 13px; border-bottom:1px solid var(--wb-border); background:linear-gradient(180deg,#fbfcfb,#f6f9f7); }
.path-card-head h2 { margin:0; font-size:.9rem; }
.path-card-head span { display:block; color:var(--wb-muted); font-size:.72rem; margin-top:3px; }
.path-mini-btn { border:1px solid var(--wb-border); background:#fff; border-radius:8px; padding:6px 8px; font-size:.72rem; font-weight:800; color:var(--wb-muted); }
.path-mini-btn:hover { color:var(--wb-accent-dark); border-color:#a9c8b2; background:var(--wb-accent-soft); }
.path-editor textarea { width:100%; height:50vh; min-height:440px; resize:vertical; border:0; outline:0; padding:14px 15px; background:#fff; color:#17251c; font-family:var(--wb-mono); font-size:13px; line-height:1.55; white-space:pre; overflow:auto; tab-size:2; }
.path-editor textarea:focus { box-shadow:inset 0 0 0 2px rgba(20,131,59,.08); }
.path-browser-head { position:sticky; top:0; z-index:2; }
.path-tree-tools { display:flex; gap:6px; }
.path-tree { height:50vh; min-height:440px; overflow:auto; padding:10px 0; background:#fcfefd; font-family:var(--wb-mono); font-size:12.5px; line-height:1.5; }
.path-empty { padding:34px 18px; color:var(--wb-muted); text-align:center; font-family:var(--wb-sans); }
.path-tree details { margin:0; }
.path-tree summary { list-style:none; cursor:pointer; }
.path-tree summary::-webkit-details-marker { display:none; }
.path-tree-node { position:relative; }
.path-tree-row { display:flex; align-items:center; gap:7px; min-height:30px; padding:4px 11px; border-left:3px solid transparent; cursor:pointer; }
.path-tree-row:hover { background:#f1f7f3; }
.path-tree-row.is-selected { background:var(--wb-accent-soft); border-left-color:var(--wb-accent); }
.path-tree-toggle { width:14px; flex:0 0 14px; color:#7e8c83; text-align:center; }
details > summary .path-tree-toggle::before { content:'▸'; }
details[open] > summary .path-tree-toggle::before { content:'▾'; }
.path-tree-spacer { width:14px; flex:0 0 14px; }
.path-tree-key { color:#744495; font-weight:700; overflow-wrap:anywhere; }
.path-tree-sep { color:#9aa59e; }
.path-tree-preview { color:#40594a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.path-tree-preview.string { color:#0f6b30; }
.path-tree-preview.number { color:#2158a8; }
.path-tree-preview.boolean { color:#9a6200; }
.path-tree-preview.null { color:#8a4b52; }
.path-tree-children { margin-left:18px; border-left:1px solid #e5ece7; }
.path-output,.query-studio { margin-top:12px; overflow:hidden; }
.path-section-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px; border-bottom:1px solid var(--wb-border); background:linear-gradient(180deg,#fbfcfb,#f7f9f8); }
.path-section-head h2 { margin:3px 0 0; font-size:.95rem; }
.path-section-kicker { color:var(--wb-accent); font-size:.66rem; font-weight:900; letter-spacing:.09em; }
.path-type-pill { display:inline-flex; align-items:center; min-height:29px; padding:0 10px; border-radius:999px; border:1px solid #c7ddd0; background:#f2faf4; color:#497055; font:800 .7rem var(--wb-mono); }
.path-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:12px; }
.path-copy-card { display:grid; grid-template-columns:1fr auto; gap:7px 10px; align-items:center; border:1px solid var(--wb-border); border-radius:11px; padding:11px; background:var(--wb-surface-2); min-width:0; }
.path-copy-card span { grid-column:1 / -1; color:var(--wb-muted); font-size:.68rem; font-weight:900; text-transform:uppercase; letter-spacing:.05em; }
.path-copy-card code { min-width:0; overflow:auto; white-space:nowrap; color:#203b2a; font:12px var(--wb-mono); }
.path-copy-card button { border:1px solid var(--wb-border); background:#fff; border-radius:7px; padding:5px 8px; font-size:.68rem; font-weight:850; color:var(--wb-muted); }
.path-copy-card button:hover { color:var(--wb-accent-dark); background:var(--wb-accent-soft); border-color:#a9c8b2; }
.selected-preview { border-top:1px solid var(--wb-border); padding:12px; }
.selected-preview > span { display:block; color:var(--wb-muted); font-size:.68rem; font-weight:900; text-transform:uppercase; letter-spacing:.05em; margin-bottom:7px; }
.selected-preview pre { margin:0; max-height:180px; overflow:auto; border:1px solid var(--wb-border); border-radius:9px; background:#fcfefd; padding:10px 11px; color:#264432; font:12px/1.55 var(--wb-mono); white-space:pre-wrap; overflow-wrap:anywhere; }
.query-head { align-items:center; }
.query-controls { display:flex; gap:7px; min-width:min(540px,100%); }
.query-controls input { flex:1; min-width:0; border:1px solid var(--wb-border); background:#fff; color:var(--wb-text); border-radius:9px; padding:8px 10px; outline:0; font:12.5px var(--wb-mono); }
.query-controls input:focus { border-color:#9fceb0; box-shadow:0 0 0 3px rgba(20,131,59,.06); }
.query-help { padding:10px 12px; color:var(--wb-muted); font-size:.76rem; border-bottom:1px solid var(--wb-border); background:#fcfdfc; }
.query-help code { color:#285a38; font-family:var(--wb-mono); }
.query-meta { padding:9px 12px; color:var(--wb-muted); font-size:.74rem; font-weight:800; border-bottom:1px solid var(--wb-border); }
.query-meta strong { color:var(--wb-text); font-family:var(--wb-mono); }
.query-results { max-height:340px; overflow:auto; }
.query-row { display:grid; grid-template-columns:minmax(240px,.9fr) minmax(0,1.4fr) auto; border-bottom:1px solid #edf1ee; align-items:stretch; }
.query-row:last-child { border-bottom:0; }
.query-path,.query-value,.query-action { padding:10px 11px; min-width:0; font-size:.76rem; }
.query-path { font-family:var(--wb-mono); color:#294034; background:#fbfdfb; }
.query-value { font-family:var(--wb-mono); color:#53645a; overflow-wrap:anywhere; }
.query-action { display:flex; align-items:center; justify-content:center; }
.query-action button { border:1px solid var(--wb-border); background:#fff; border-radius:7px; padding:5px 7px; color:var(--wb-muted); font-size:.68rem; font-weight:800; }
@media (max-width:980px) {
  .path-grid { grid-template-columns:1fr; }
  .path-editor textarea,.path-tree { height:38vh; min-height:320px; }
  .query-head { align-items:flex-start; flex-direction:column; }
  .query-controls { width:100%; min-width:0; }
}
@media (max-width:680px) {
  .path-summary { width:100%; }
  .path-summary span { flex:1 1 auto; text-align:center; }
  .path-cards { grid-template-columns:1fr; }
  .path-browser-head { align-items:flex-start; flex-direction:column; padding:10px 13px; }
  .query-controls { flex-direction:column; }
  .query-row { grid-template-columns:1fr; }
  .query-action { justify-content:flex-start; padding-top:0; }
}