@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Fira+Code:wght@400;500&display=swap";:root{--bg-color:#0d1117;--panel-bg:#161b22b3;--border-color:#30363d;--text-primary:#c9d1d9;--text-secondary:#8b949e;--accent-color:#58a6ff;--error-color:#f85149;--success-color:#3fb950;--string-color:#a5d6ff;--number-color:#d2a8ff;--boolean-color:#ff7b72;--null-color:#ff7b72;--key-color:#79c0ff;--glass-blur:12px}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-primary);flex-direction:column;height:100vh;font-family:Inter,sans-serif;display:flex;overflow:hidden}header{border-bottom:1px solid var(--border-color);background:var(--panel-bg);height:60px;-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));z-index:10;justify-content:space-between;align-items:center;padding:0 24px;display:flex}.logo{color:var(--accent-color);align-items:center;gap:12px;font-size:1.2rem;font-weight:600;display:flex}.toolbar{gap:12px;display:flex}button{border:1px solid var(--border-color);color:var(--text-primary);cursor:pointer;background:#ffffff0d;border-radius:6px;align-items:center;gap:8px;padding:8px 16px;font-size:.9rem;transition:all .2s;display:flex}button:hover{border-color:var(--accent-color);background:#ffffff1a}button.primary{background:var(--accent-color);color:#fff;border:none}button.primary:hover{background:#4a9eff}main{flex:1;display:flex;position:relative;overflow:hidden}.panel{flex-direction:column;flex:1;min-height:0;display:flex;position:relative;overflow:hidden}.panel-header{border-bottom:1px solid var(--border-color);background:#ffffff05;justify-content:space-between;align-items:center;padding:12px 24px;display:flex}.panel-title{text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);font-size:.85rem;font-weight:600}.search-container{flex:1;align-items:center;margin:0 16px;display:flex;position:relative}#search-input{border:1px solid var(--border-color);width:100%;color:var(--text-primary);background:#ffffff0d;border-radius:4px;outline:none;padding:6px 12px;font-size:.85rem;transition:all .2s}#search-input:focus{border-color:var(--accent-color);background:#ffffff14}.search-count{color:var(--text-secondary);font-size:.75rem;position:absolute;right:12px}.highlight{background:#ff03;border-radius:2px;padding:0 2px}.match-found{border-left:2px solid var(--accent-color)!important}.editor-container{background:#0d1117;flex:1;min-height:0;display:flex;position:relative;overflow:hidden}.editor-line-panel{flex:1;min-height:0;display:flex;overflow:hidden}.line-numbers{width:44px;color:var(--text-secondary);text-align:right;-webkit-user-select:none;user-select:none;background:#ffffff0a;border-right:1px solid #ffffff14;padding:24px 8px;font-family:Fira Code,monospace;font-size:14px;line-height:1.6;overflow:hidden}.line-numbers span{min-height:1.6em;display:block}.line-numbers span.error-line{color:var(--error-color);font-weight:700}textarea#json-input{height:100%;min-height:0;color:var(--text-primary);resize:none;background:0 0;border:none;outline:none;flex:1;padding:24px;font-family:Fira Code,monospace;font-size:14px;line-height:1.6}.viewer-container{flex:1;padding:24px;font-family:Fira Code,monospace;font-size:14px;line-height:1.6;overflow-y:auto}.tree-node{margin-left:20px;position:relative}.tree-node:before{content:"";background:var(--border-color);width:1px;position:absolute;top:0;bottom:0;left:-10px}.tree-item{cursor:default;align-items:flex-start;padding:2px 0;display:flex}.toggle{cursor:pointer;width:20px;height:20px;color:var(--text-secondary);-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;transition:transform .2s;display:flex}.toggle.collapsed{transform:rotate(-90deg)}.key{color:var(--key-color);margin-right:8px}.value-string{color:var(--string-color)}.value-number{color:var(--number-color)}.value-boolean{color:var(--boolean-color)}.value-null{color:var(--null-color)}.bracket{color:var(--text-secondary)}.separator{color:var(--text-secondary);margin-right:8px}.status-bar{background:var(--panel-bg);border-top:1px solid var(--border-color);height:30px;color:var(--text-secondary);justify-content:space-between;align-items:center;padding:0 24px;font-size:.8rem;display:flex}.status-item{align-items:center;gap:8px;display:flex}.status-item.error{color:var(--error-color)}.status-item.success{color:var(--success-color)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:5px}::-webkit-scrollbar-thumb:hover{background:#484f58}.hidden{display:none}.panel-toggle{border:1px solid var(--border-color);color:var(--text-secondary);cursor:pointer;background:0 0;border-radius:6px;padding:6px 8px;font-size:.9rem;display:none}.panel.collapsed{min-height:0}.panel.collapsed .editor-container,.panel.collapsed .viewer-container{display:none}@media (width<=768px){body{height:auto;overflow:auto}header{gap:8px;height:56px;padding:0 12px}.logo h1{font-size:1rem}.toolbar{gap:8px;padding-bottom:6px;overflow-x:auto}.panel-toggle{justify-content:center;align-items:center;margin-left:8px;display:inline-flex}button{padding:6px 10px;font-size:.8rem}main{flex-direction:column;gap:0;min-height:0}.panel{flex:1;width:100%;min-height:0}main .panel:first-child{flex:2;min-height:0}main .panel:last-child{flex:1;min-height:0}.panel-header{padding:10px 12px}.search-container{margin:0 8px}.editor-line-panel{flex-direction:row;height:100%;min-height:220px}.line-numbers{width:36px;padding:12px 6px;font-size:12px}textarea#json-input{min-height:360px;padding:12px;font-size:13px}.viewer-container{height:calc(100% - 48px);padding:12px}.status-bar{padding:0 12px;font-size:.75rem}.tree-node{margin-left:12px}}