:root{--bg-primary: #1e1e1e;--bg-secondary: #252526;--bg-tertiary: #2d2d2d;--text-primary: #cccccc;--text-secondary: #969696;--text-muted: #6a6a6a;--border-color: #3e3e3e;--accent-color: #0e639c;--accent-hover: #1177bb;--error-color: #f44747;--warning-color: #cca700;--success-color: #4ec9b0;--scrollbar-thumb: rgba(121, 121, 121, .4);--scrollbar-thumb-hover: rgba(100, 100, 100, .7)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;font-size:14px;line-height:1.5;color:var(--text-primary);background-color:var(--bg-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{display:grid;grid-template-columns:280px 1fr;grid-template-rows:1fr;height:100vh;overflow:hidden}#nav-tree{background-color:var(--bg-secondary);border-right:1px solid var(--border-color);overflow:auto;display:flex;flex-direction:column}#preview-pane{background-color:var(--bg-primary);overflow:hidden;display:flex;flex-direction:column}@media(max-width:768px){#app{grid-template-columns:1fr}#nav-tree{display:none}#nav-tree.active{display:flex}#preview-pane{display:none}#preview-pane.active{display:flex}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:4px;min-height:20px}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}::-webkit-scrollbar-corner{background:transparent}*{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent}.loading{display:flex;align-items:center;justify-content:center;padding:16px;color:var(--text-secondary);font-size:13px}.loading:before{content:"";display:inline-block;width:16px;height:16px;margin-right:8px;border:2px solid var(--text-muted);border-top-color:var(--accent-color);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;padding:24px;text-align:center;color:var(--text-primary);background-color:var(--bg-primary)}.error-screen h2{margin-bottom:12px;color:var(--error-color);font-size:18px;font-weight:600}.error-screen p{margin-bottom:16px;color:var(--text-secondary);max-width:400px}.error-screen button{padding:8px 16px;background-color:var(--accent-color);color:#fff;border:none;border-radius:4px;font-size:13px;cursor:pointer}.error-screen button:hover{background-color:var(--accent-hover)}.warning-banner{display:flex;align-items:center;padding:6px 12px;background-color:#cca70026;border-bottom:1px solid var(--warning-color);color:var(--warning-color);font-size:12px;line-height:1.4}.warning-banner:before{content:"⚠";margin-right:8px;font-size:14px}.tree-node{display:flex;align-items:center;padding:3px 8px;padding-left:calc(8px + var(--indent-level, 0) * 16px);cursor:pointer;-webkit-user-select:none;user-select:none;font-size:13px;color:var(--text-primary);border-radius:0}.tree-node:hover{background-color:var(--bg-tertiary)}.tree-node.selected{background-color:var(--accent-color);color:#fff}.tree-content{flex:1;overflow-y:auto;padding:4px 0}.tree-no-matches{padding:12px 16px;color:var(--text-secondary);font-size:13px;font-style:italic}.tree-error{display:flex;align-items:center;padding:3px 8px;padding-left:calc(8px + var(--indent-level, 0) * 16px);color:var(--error-color);font-size:12px}.tree-icon{margin-right:6px;font-size:12px;flex-shrink:0;width:16px;text-align:center}.tree-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.filter-input{width:100%;padding:6px 10px;background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-primary);font-size:13px;font-family:inherit;outline:none;box-sizing:border-box}.filter-input::placeholder{color:var(--text-muted)}.filter-input:focus{border-color:var(--accent-color)}.preview-header{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color);font-size:12px;color:var(--text-secondary);flex-shrink:0}.preview-content{flex:1;padding:16px;overflow:auto;font-family:Cascadia Code,Fira Code,Consolas,Courier New,monospace;font-size:13px;line-height:1.6;white-space:pre-wrap;word-wrap:break-word}.pane-divider{width:4px;cursor:col-resize;background-color:var(--border-color);transition:background-color .15s ease;flex-shrink:0}.pane-divider:hover{background-color:var(--accent-color)}.layout-tab-bar{display:flex;background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color);flex-shrink:0}.layout-tab{flex:1;padding:8px 16px;border:none;background:transparent;color:var(--text-secondary);font-size:13px;font-family:inherit;cursor:pointer;border-bottom:2px solid transparent;transition:color .15s ease,border-color .15s ease}.layout-tab:hover{color:var(--text-primary)}.layout-tab.active{color:var(--text-primary);border-bottom-color:var(--accent-color)}.json-key{color:#9cdcfe}.json-string{color:#ce9178}.json-number{color:#b5cea8}.json-boolean,.json-null{color:#569cd6}.json-punctuation{color:#ccc}.refresh-button{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:4px 8px;font-size:14px;border-radius:4px}.refresh-button:hover{color:var(--text-primary);background-color:var(--bg-tertiary)}.refresh-button:disabled{opacity:.5;cursor:default}.refresh-button.loading{animation:spin .8s linear infinite}.filter-bar{position:relative;display:flex;align-items:center;padding:8px;flex-shrink:0}.filter-bar .filter-input{margin:0;width:100%;padding-right:28px}.filter-clear-btn{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-secondary);font-size:16px;cursor:pointer;padding:2px 6px;border-radius:3px;line-height:1}.filter-clear-btn:hover{color:var(--text-primary);background-color:var(--bg-tertiary)}.preview-toolbar{display:flex;align-items:center;justify-content:flex-end;padding:4px 8px;background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color);flex-shrink:0;gap:4px}.preview-body{flex:1;overflow:hidden;display:flex;flex-direction:column}.preview-markdown{white-space:normal;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.7}.preview-markdown h1,.preview-markdown h2,.preview-markdown h3,.preview-markdown h4,.preview-markdown h5,.preview-markdown h6{color:var(--text-primary);margin-top:1.2em;margin-bottom:.4em;font-weight:600}.preview-markdown h1{font-size:1.8em;border-bottom:1px solid var(--border-color);padding-bottom:.3em}.preview-markdown h2{font-size:1.4em;border-bottom:1px solid var(--border-color);padding-bottom:.3em}.preview-markdown h3{font-size:1.2em}.preview-markdown p{margin:.6em 0}.preview-markdown ul,.preview-markdown ol{margin:.5em 0;padding-left:2em}.preview-markdown li{margin:.25em 0}.preview-markdown code{background-color:var(--bg-tertiary);padding:.15em .4em;border-radius:3px;font-family:Cascadia Code,Fira Code,Consolas,Courier New,monospace;font-size:.9em}.preview-markdown pre{background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px;padding:12px 16px;margin:.8em 0;overflow-x:auto}.preview-markdown pre code{background:none;padding:0;border-radius:0;font-size:13px;line-height:1.5}.preview-markdown blockquote{border-left:3px solid var(--accent-color);margin:.8em 0;padding:.4em 1em;color:var(--text-secondary);background-color:var(--bg-secondary);border-radius:0 4px 4px 0}.preview-markdown table{border-collapse:collapse;margin:.8em 0;width:100%}.preview-markdown th,.preview-markdown td{border:1px solid var(--border-color);padding:6px 12px;text-align:left}.preview-markdown th{background-color:var(--bg-secondary);font-weight:600}.preview-markdown tr:nth-child(2n){background-color:var(--bg-secondary)}.preview-markdown a{color:var(--accent-hover);text-decoration:none}.preview-markdown a:hover{text-decoration:underline}.preview-markdown hr{border:none;border-top:1px solid var(--border-color);margin:1.5em 0}.preview-markdown img{max-width:100%;height:auto}#app.fullscreen #nav-tree{display:none}#app.fullscreen{grid-template-columns:1fr}#app.fullscreen .pane-divider{display:none}.fullscreen-toggle{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:4px 8px;font-size:14px;border-radius:4px}.fullscreen-toggle:hover{color:var(--text-primary);background-color:var(--bg-tertiary)}