:root{--bg-color: #f8f9fa;--text-color: #212529;--header-bg: #ffffff;--border-color: #dee2e6;--accent-color: #0d6efd;--button-hover: #e9ecef}[data-theme=dark]{--bg-color: #121212;--text-color: #e0e0e0;--header-bg: #1e1e1e;--border-color: #333;--accent-color: #bb86fc;--button-hover: #333}body{background-color:var(--bg-color);color:var(--text-color);transition:background-color .3s,color .3s;margin:0;padding:0;font-family:Inter,sans-serif}.app{display:flex;flex-direction:column;height:100vh}.header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background-color:var(--header-bg);border-bottom:1px solid var(--border-color)}.header h1{margin:0;font-size:1.5rem;font-weight:700;background:linear-gradient(90deg,#00c9ff,#92fe9d);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.actions{display:flex;gap:.5rem}button{background:transparent;border:1px solid var(--border-color);color:var(--text-color);padding:.5rem 1rem;border-radius:4px;cursor:pointer;transition:all .2s;font-weight:500}button:hover{background-color:var(--button-hover);border-color:var(--accent-color);color:var(--accent-color)}.main-content{display:flex;flex:1;overflow:hidden;position:relative}.main-content.editor .editor-pane,.main-content.viewer .viewer-pane{width:100%;display:block}.main-content.split .pane{width:50%;display:block}.pane{height:100%;overflow:auto;box-sizing:border-box}.pane{flex:1;display:flex;flex-direction:column}.editor-pane{border-right:1px solid var(--border-color)}.editor-container,.viewer-container{height:100%;padding:1rem;box-sizing:border-box}.json-editor{width:100%;height:100%;border:none;resize:none;background:transparent;color:var(--text-color);font-family:Fira Code,monospace;font-size:14px;line-height:1.5;outline:none}.viewer-pane{background-color:var(--bg-color)}.error-message{color:#ff6b6b;padding:1rem;border:1px solid #ff6b6b;border-radius:4px;background-color:#ff6b6b1a;margin:1rem}.viewer-wrapper{display:flex;height:100%;padding:1rem;box-sizing:border-box}.viewer-scroll-container{flex:1;overflow:auto}.viewer-grid{display:grid;grid-template-columns:auto 1fr;font-family:Fira Code,monospace;font-size:14px;line-height:1.5}.viewer-gutter-col{display:flex;flex-direction:column;padding-right:8px;border-right:1px solid var(--border-color);margin-right:12px;-webkit-user-select:none;user-select:none}.gutter-line{display:flex;align-items:center;height:21px;min-height:21px}.collapse-btn{width:16px;min-width:16px;text-align:center;cursor:pointer;color:var(--text-color);opacity:.5;font-size:10px;-webkit-user-select:none;user-select:none;transition:opacity .15s}.collapse-btn:hover{opacity:1}.collapse-btn-placeholder{width:16px;min-width:16px}.line-num{width:32px;text-align:right;color:var(--text-color);opacity:.4;-webkit-user-select:none;user-select:none;font-size:12px}.viewer-content-col{white-space:pre;outline:none;color:var(--text-color);caret-color:var(--accent-color)}.view-controls{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:var(--header-bg);padding:4px;border-radius:20px;box-shadow:0 4px 12px #0000001a;border:1px solid var(--border-color);display:flex;gap:4px;z-index:100}.view-controls button{border:none;background:transparent;padding:8px 16px;border-radius:16px;font-size:12px;color:var(--text-color)}.view-controls button.active{background:var(--accent-color);color:#fff}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#aaa}