:root{--bg-primary:#1e1e1e;--bg-secondary:#252526;--bg-tertiary:#2d2d30;--bg-elevated:#3c3c3c;--surface-primary:#252526;--surface-secondary:#2d2d30;--surface-elevated:#3c3c3c;--surface-overlay:#0009;--border-primary:#3c3c3c;--border-secondary:#464647;--border-focus:#007acc;--border-error:#f14c4c;--border-success:#89d185;--text-primary:#ccc;--text-secondary:#969696;--text-muted:#6a6a6a;--text-accent:#569cd6;--text-success:#89d185;--text-error:#f14c4c;--text-warning:#ffcc02;--btn-primary-bg:#0e639c;--btn-primary-hover:#17b;--btn-secondary-bg:#3c3c3c;--btn-secondary-hover:#464647;--btn-danger-bg:#f14c4c;--btn-danger-hover:#ff6b6b;--syntax-keyword:#569cd6;--syntax-string:#ce9178;--syntax-number:#b5cea8;--syntax-comment:#6a9955;--syntax-operator:#d4d4d4;--syntax-bracket:gold;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--space-3xl:64px;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--radius-xl:12px;--shadow-sm:0 1px 2px #0000004d;--shadow-md:0 4px 8px #0000004d;--shadow-lg:0 8px 16px #0006;--transition-fast:.15s ease-out;--transition:.2s ease-out;--transition-slow:.3s ease-out;--font-mono:"Google Sans Code", monospace;--font-sans:"Jost", sans-serif;--header-height:60px;--toolbar-height:40px;--pane-header-height:32px;--sidebar-width:280px;--panel-min-height:400px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;margin:0;padding:0;font-size:14px;font-weight:500;line-height:1.5;overflow:hidden}body a{color:#fff}.app-container{background:var(--bg-primary);flex-direction:column;min-height:100vh;display:flex}.app-header{height:var(--header-height);background:var(--surface-primary);border-bottom:1px solid var(--border-primary);padding:0 var(--space-lg);z-index:100;align-items:center;display:flex;position:sticky;top:0}.app-title{align-items:center;gap:var(--space-sm);color:var(--text-primary);font-size:16px;font-weight:600;display:flex}.app-title .logo{font-size:20px}.app-title .version{background:var(--btn-primary-bg);color:#fff;border-radius:var(--radius-sm);padding:2px 8px;font-size:11px;font-weight:500}.app-main{flex:auto;min-height:0;display:flex;overflow:hidden}.app-sidebar{width:var(--sidebar-width);min-width:var(--sidebar-width);max-width:var(--sidebar-width);background:var(--surface-secondary);border-right:1px solid var(--border-primary);flex-direction:column;flex-shrink:0;display:flex;overflow-y:auto}.sidebar-section{padding:var(--space-lg);border-bottom:1px solid var(--border-primary)}.sidebar-section:last-child{border-bottom:none}.sidebar-title{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--space-md);font-size:12px;font-weight:600}.editor-container{background:var(--bg-primary);flex-direction:column;flex:auto;min-width:0;display:flex}.editor-toolbar{height:var(--toolbar-height);background:var(--surface-primary);border-bottom:1px solid var(--border-primary);padding:0 var(--space-md);align-items:center;gap:var(--space-sm);display:flex}.editor-panes{flex:1;display:flex;overflow:hidden}.editor-pane{background:var(--surface-primary);border-right:1px solid var(--border-primary);width:50%;min-height:var(--panel-min-height);flex-direction:column;flex:50%;display:flex}.editor-pane:last-child{border-right:none}.pane-header{height:var(--pane-header-height);background:var(--surface-secondary);border-bottom:1px solid var(--border-primary);padding:0 var(--space-md);color:var(--text-secondary);align-items:center;font-size:12px;font-weight:500;display:flex}.pane-header .icon{margin-right:var(--space-xs)}.pane-content{flex:1;position:relative;overflow:hidden auto}.code-editor{width:100%;height:calc(100vh - var(--header-height) - var(--toolbar-height) - var(--pane-header-height));background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-mono);padding:var(--space-md);resize:none;tab-size:2;border:none;outline:none;font-size:12px;line-height:1.5}.code-editor:focus{background:var(--bg-primary)}.code-editor::placeholder{color:var(--text-muted)}.output-display{width:100%;height:calc(100vh - var(--header-height) - var(--pane-header-height));background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-mono);padding:var(--space-md);white-space:pre-wrap;word-break:break-all;word-wrap:break-word;border:none;margin:0;font-size:12px;line-height:1.4;overflow:hidden auto}.btn{align-items:center;gap:var(--space-xs);border:1px solid var(--border-primary);border-radius:var(--radius-sm);background:var(--btn-secondary-bg);color:var(--text-primary);cursor:pointer;transition:var(--transition);padding:6px 12px;font-size:12px;font-weight:500;text-decoration:none;display:inline-flex}.btn:hover{background:var(--btn-secondary-hover);border-color:var(--border-secondary)}.btn-primary{background:var(--btn-primary-bg);border-color:var(--btn-primary-bg);color:#fff}.btn-primary:hover{background:var(--btn-primary-hover);border-color:var(--btn-primary-hover)}.btn-danger{background:var(--btn-danger-bg);border-color:var(--btn-danger-bg);color:#fff}.btn-danger:hover{background:var(--btn-danger-hover);border-color:var(--btn-danger-hover)}.status-indicator{align-items:center;gap:var(--space-xs);border-radius:var(--radius-sm);padding:4px 8px;font-size:11px;font-weight:500;display:inline-flex}.status-indicator.success{color:var(--text-success);background:#89d1851a;border:1px solid #89d18533}.status-indicator.error{color:var(--text-error);background:#f14c4c1a;border:1px solid #f14c4c33}.status-indicator.warning{color:var(--text-warning);background:#ffcc021a;border:1px solid #ffcc0233}.code-editor::-webkit-scrollbar{width:8px;height:8px}.pane-content::-webkit-scrollbar{width:8px;height:8px}.code-editor::-webkit-scrollbar-track{background:var(--surface-secondary)}.pane-content::-webkit-scrollbar-track{background:var(--surface-secondary)}.code-editor::-webkit-scrollbar-thumb{background:var(--border-secondary);border-radius:4px}.pane-content::-webkit-scrollbar-thumb{background:var(--border-secondary);border-radius:4px}.code-editor::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.pane-content::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}@media (width<=768px){.app-main{flex-direction:column}.app-sidebar{border-right:none;border-bottom:1px solid var(--border-primary);width:100%}.editor-panes{flex-direction:column}.editor-pane{border-right:none;border-bottom:1px solid var(--border-primary);min-height:300px}.editor-pane:last-child{border-bottom:none}}.json-key,.json-string{color:var(--syntax-string)}.json-number{color:var(--syntax-number)}.json-boolean{color:var(--syntax-keyword)}.json-null{color:var(--text-muted)}.hidden{display:none!important}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:var(--space-sm)}.text-xs{font-size:11px}.text-sm{font-size:12px}.font-mono{font-family:var(--font-mono)}.opacity-50{opacity:.5}