/* JSON 工具三栏布局、树形视图和属性栏专属样式。 */
.container { width: min(1400px, 100%); }
.json-workspace { display: grid; grid-template-columns: 520px minmax(360px, 1fr) 260px; min-height: 542px; }
.json-editor-panel { min-width: 0; border-right: 1px solid #e3e7eb; }
.json-editor-panel .CodeMirror { height: 500px; border-width: 0; }
.tree-panel, .property-panel { display: flex; min-width: 0; flex-direction: column; background: #fff; }
.tree-panel { border-right: 1px solid #e3e7eb; }
.panel-toolbar { display: flex; align-items: center; gap: 5px; min-height: 42px; padding: 7px 8px; border-bottom: 1px solid #e3e7eb; }
.json-editor-panel > .toolbar { min-height: 42px; border-bottom: 1px solid #e3e7eb; }
.tree-search { min-width: 0; height: 28px; flex: 1; padding: 4px 8px; border: 1px solid #d0d5dd; border-radius: 4px; outline: none; font-size: 12px; }
.tree-search:focus { border-color: #009a61; box-shadow: 0 0 0 2px rgba(0, 154, 97, .1); }
.search-count { min-width: 34px; color: #667085; font-size: 12px; text-align: center; white-space: nowrap; }
.tree-action { height: 28px; padding: 0 8px; border: 1px solid #d0d5dd; border-radius: 4px; background: #fff; color: #344054; cursor: pointer; font-size: 12px; white-space: nowrap; }
.tree-action:hover { border-color: #98a2b3; background: #f5f7fa; }
.property-title { margin-right: auto; color: #344054; font-size: 13px; font-weight: 600; }
.json-tree { height: 500px; padding: 14px 12px 24px; overflow: auto; font-family: monospace; font-size: 13px; line-height: 1.7; }
.tree-empty { padding: 30px 12px; color: #98a2b3; text-align: center; }
.tree-list { position: relative; margin: 0; padding-left: 23px; list-style: none; }
.tree-root { padding-left: 0; }
.tree-list:not(.tree-root)::before { position: absolute; top: 0; bottom: 12px; left: 8px; border-left: 1px dashed #c7d0da; content: ""; }
.tree-list > li { position: relative; padding: 2px 0; }
.tree-list:not(.tree-root) > li::before { position: absolute; top: 15px; left: -15px; width: 14px; border-top: 1px dashed #c7d0da; content: ""; }
.tree-list:not(.tree-root) > li:last-child::after { position: absolute; top: 16px; bottom: 0; left: -15px; width: 2px; background: #fff; content: ""; }
.tree-row { position: relative; z-index: 1; display: flex; align-items: center; min-width: max-content; min-height: 26px; padding: 1px 8px 1px 3px; border: 1px solid transparent; border-radius: 4px; cursor: pointer; transition: background-color .12s, border-color .12s, box-shadow .12s; }
.tree-row:hover { background: #f2faf7; }
.json-tree.search-active .tree-row { opacity: .35; }
.json-tree.search-active .tree-row.search-context { opacity: .72; }
.json-tree.search-active .tree-row.match { background: #ffef9e; box-shadow: inset 4px 0 #f59e0b, 0 1px 4px rgba(245, 158, 11, .22); color: #704100; font-weight: 700; opacity: 1; }
.json-tree.search-active .tree-row.match .tree-key,
.json-tree.search-active .tree-row.match .tree-value,
.json-tree.search-active .tree-row.match .tree-summary { color: inherit; }
.tree-row.selected { background: #e3f5ee; box-shadow: inset 3px 0 #009a61; }
.json-tree.search-active .tree-row.selected.match { background: #ffe47a; box-shadow: inset 4px 0 #f59e0b, 0 1px 4px rgba(245, 158, 11, .22); }
.tree-toggle { position: relative; z-index: 2; display: inline-grid; width: 18px; height: 18px; margin: 0 6px 0 0; flex: 0 0 18px; place-items: center; padding: 0 0 1px; border: 1px solid #aeb7c2; border-radius: 3px; background: linear-gradient(#fff, #f5f7f9); box-shadow: 0 1px 2px rgba(31, 42, 55, .1); color: #475467; cursor: pointer; font-family: monospace; font-size: 14px; font-weight: 700; line-height: 1; transition: border-color .12s, background .12s, color .12s, box-shadow .12s; }
.tree-toggle:hover { border-color: #009a61; background: #edf8f4; box-shadow: 0 1px 3px rgba(0, 154, 97, .18); color: #008552; }
.tree-toggle:focus-visible { border-color: #009a61; outline: 0; box-shadow: 0 0 0 3px rgba(0, 154, 97, .16); }
.tree-toggle[aria-expanded="true"] { border-color: #82bca6; background: #eaf7f1; color: #007a4d; }
.tree-toggle.leaf { cursor: default; opacity: 0; }
.tree-key { color: #881280; }
.tree-value { margin-left: 5px; }
.tree-string { color: #c41a16; }
.tree-number { color: #175cd3; }
.tree-boolean { color: #aa0d91; }
.tree-null { color: #667085; font-style: italic; }
.tree-summary { margin-left: 5px; color: #667085; }
.property-content { height: 500px; overflow: auto; }
.property-empty { padding: 30px 12px; color: #98a2b3; text-align: center; }
.property-grid { margin: 0; }
.property-row { display: grid; grid-template-columns: 78px minmax(0, 1fr); border-bottom: 1px solid #edf0f2; }
.property-row dt, .property-row dd { margin: 0; padding: 8px 9px; font-size: 12px; line-height: 1.5; }
.property-row dt { background: #f7f8fa; color: #667085; }
.property-row dd { min-width: 0; overflow-wrap: anywhere; color: #263238; font-family: monospace; white-space: pre-wrap; }
.property-section { margin: 14px 9px 7px; color: #667085; font-size: 12px; font-weight: 600; }
.property-children { width: calc(100% - 18px); margin: 0 9px 14px; border-collapse: collapse; font-family: monospace; font-size: 12px; }
.property-children th, .property-children td { padding: 6px; border: 1px solid #e3e7eb; text-align: left; overflow-wrap: anywhere; }
.property-children th { background: #f7f8fa; color: #667085; font-family: inherit; font-weight: 500; }
.property-children td:first-child { color: #881280; }

@media (max-width: 1180px) {
    .json-workspace { grid-template-columns: 1fr; }
    .json-editor-panel, .tree-panel { border-right: 0; border-bottom: 1px solid #e3e7eb; }
    .json-editor-panel .CodeMirror { height: 420px; }
    .json-tree { height: 420px; }
    .property-content { height: auto; max-height: 420px; }
}

@media (max-width: 480px) {
    .panel-toolbar { flex-wrap: wrap; }
    .tree-search { flex-basis: 100%; }
}