.edit-workspace[data-v-3a4f85cb]{display:flex;flex-direction:column;height:100%;background-color:var(--color-bg-primary);position:relative}.compatibility-mode-container[data-v-3a4f85cb]{display:flex;align-items:center;gap:6px;margin-left:12px}.compatibility-toggle[data-v-3a4f85cb]{display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none}.compatibility-toggle input[type=checkbox][data-v-3a4f85cb]{cursor:pointer;width:16px;height:16px}.toggle-label[data-v-3a4f85cb]{font-size:13px;color:var(--color-text-primary);white-space:nowrap}.help-icon[data-v-3a4f85cb]{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background-color:var(--color-bg-secondary);cursor:help;font-size:11px;font-weight:700;color:var(--color-text-secondary);border:1px solid var(--color-border);line-height:1}.editor-container[data-v-3a4f85cb]{flex:1;overflow:hidden}.shortcuts-overlay[data-v-c27348f1]{position:fixed;inset:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--spacing-lg)}.shortcuts-panel[data-v-c27348f1]{background-color:var(--color-bg-primary);border:1px solid var(--color-border-primary);border-radius:var(--border-radius-md);max-width:800px;width:100%;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 10px 40px #0000004d}.shortcuts-header[data-v-c27348f1]{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-lg);border-bottom:1px solid var(--color-border-primary)}.shortcuts-header h2[data-v-c27348f1]{margin:0;font-size:var(--font-size-xl);color:var(--color-text-bright)}.close-btn[data-v-c27348f1]{background:none;border:none;color:var(--color-text-secondary);font-size:var(--font-size-xl);cursor:pointer;padding:var(--spacing-xs);line-height:1;transition:color .2s}.close-btn[data-v-c27348f1]:hover{color:var(--color-text-bright)}.shortcuts-content[data-v-c27348f1]{flex:1;overflow-y:auto;padding:var(--spacing-lg);display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-lg)}.shortcuts-section h3[data-v-c27348f1]{margin:0 0 var(--spacing-md) 0;font-size:var(--font-size-lg);color:var(--color-text-bright);border-bottom:1px solid var(--color-border-secondary);padding-bottom:var(--spacing-xs)}.shortcuts-list[data-v-c27348f1]{margin:0;display:grid;gap:var(--spacing-sm)}.shortcuts-list dt[data-v-c27348f1]{font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin-bottom:var(--spacing-xs)}.shortcuts-list dd[data-v-c27348f1]{margin:0 0 var(--spacing-md) 0;color:var(--color-text-secondary);font-size:var(--font-size-sm)}kbd[data-v-c27348f1]{display:inline-block;padding:2px 6px;background-color:var(--color-bg-tertiary);border:1px solid var(--color-border-primary);border-radius:var(--border-radius-sm);font-family:var(--font-family-mono);font-size:var(--font-size-sm);color:var(--color-text-bright);box-shadow:0 1px 2px #0003}.shortcuts-footer[data-v-c27348f1]{padding:var(--spacing-md) var(--spacing-lg);border-top:1px solid var(--color-border-primary);background-color:var(--color-bg-secondary)}.shortcuts-footer .hint[data-v-c27348f1]{margin:0;font-size:var(--font-size-sm);color:var(--color-text-secondary);text-align:center}@media(max-width:768px){.shortcuts-content[data-v-c27348f1]{grid-template-columns:1fr}}.language-switcher[data-v-b20067d7]{position:relative;display:inline-block}.language-switcher-trigger[data-v-b20067d7]{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background-color:var(--color-bg-elevated);color:var(--color-text-primary);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-base);white-space:nowrap;user-select:none;min-width:140px}.language-switcher-trigger[data-v-b20067d7]:hover{background-color:var(--color-bg-hover);border-color:var(--color-border-secondary);color:var(--color-text-bright);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.language-switcher-trigger[data-v-b20067d7]:focus{outline:2px solid var(--color-border-focus);outline-offset:2px}.language-switcher-trigger[data-v-b20067d7]:active{transform:translateY(0) scale(.98)}.language-switcher-trigger.active[data-v-b20067d7]{background-color:var(--color-bg-hover);border-color:var(--color-accent-primary)}.language-switcher-trigger .icon[data-v-b20067d7]{font-size:var(--font-size-lg);line-height:1}.language-switcher-trigger .label[data-v-b20067d7]{flex:1;text-align:left;font-size:var(--font-size-sm)}.language-switcher-trigger .dropdown-arrow[data-v-b20067d7]{font-size:10px;opacity:.7;transition:transform var(--transition-fast)}.language-switcher-trigger.active .dropdown-arrow[data-v-b20067d7]{transform:rotate(180deg)}.language-dropdown[data-v-b20067d7]{position:fixed;z-index:10000;background-color:var(--color-bg-secondary);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:var(--spacing-xs) 0;max-height:300px;overflow-y:auto;animation:dropdownSlideIn-b20067d7 .15s ease-out}@keyframes dropdownSlideIn-b20067d7{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.language-option[data-v-b20067d7]{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--spacing-sm) var(--spacing-md);background:none;border:none;color:var(--color-text-primary);font-family:var(--font-family-base);font-size:var(--font-size-sm);text-align:left;cursor:pointer;transition:background-color var(--transition-fast)}.language-option[data-v-b20067d7]:hover{background-color:var(--color-bg-hover)}.language-option[data-v-b20067d7]:focus{outline:none;background-color:var(--color-bg-hover);box-shadow:inset 2px 0 0 var(--color-accent-primary)}.language-option.active[data-v-b20067d7]{background-color:var(--color-bg-active);color:var(--color-text-bright);font-weight:var(--font-weight-semibold)}.language-info[data-v-b20067d7]{display:flex;flex-direction:column;gap:2px;flex:1}.language-native[data-v-b20067d7]{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:1.4}.language-code[data-v-b20067d7]{font-size:var(--font-size-xs);color:var(--color-text-tertiary);font-family:var(--font-family-mono);line-height:1.2}.language-option.active .language-code[data-v-b20067d7]{color:var(--color-text-secondary)}.language-option .check-icon[data-v-b20067d7]{margin-left:var(--spacing-md);color:var(--color-accent-primary);font-size:var(--font-size-md);font-weight:700}.language-dropdown[data-v-b20067d7]::-webkit-scrollbar{width:8px}.language-dropdown[data-v-b20067d7]::-webkit-scrollbar-track{background:var(--color-bg-secondary)}.language-dropdown[data-v-b20067d7]::-webkit-scrollbar-thumb{background:var(--color-border-primary);border-radius:var(--radius-sm)}.language-dropdown[data-v-b20067d7]::-webkit-scrollbar-thumb:hover{background:var(--color-border-secondary)}@media(max-width:768px){.language-switcher-trigger .label[data-v-b20067d7]{display:none}.language-switcher-trigger[data-v-b20067d7]{min-width:auto;padding:var(--spacing-sm)}.language-dropdown[data-v-b20067d7]{min-width:200px!important}}.context-menu[data-v-8c8dd4a7]{position:fixed;z-index:10000;background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:6px;box-shadow:0 4px 12px #0000004d;padding:4px 0;min-width:180px;outline:none}.menu-item[data-v-8c8dd4a7]{display:flex;align-items:center;width:100%;padding:8px 12px;background:none;border:none;color:var(--color-text-primary);font-family:var(--font-family-base);font-size:13px;text-align:left;cursor:pointer;transition:background-color .15s ease}.menu-item[data-v-8c8dd4a7]:hover:not(.disabled){background-color:var(--color-bg-hover)}.menu-item[data-v-8c8dd4a7]:focus{outline:2px solid var(--color-border-focus);outline-offset:-2px}.menu-item.disabled[data-v-8c8dd4a7]{opacity:.5;cursor:not-allowed}.menu-icon[data-v-8c8dd4a7]{margin-right:8px;font-size:14px;width:16px;text-align:center}.menu-label[data-v-8c8dd4a7]{flex:1}.menu-shortcut[data-v-8c8dd4a7]{margin-left:16px;font-size:11px;color:var(--color-text-secondary);opacity:.7}.virtual-scroll-container[data-v-9eef8071]{width:100%;height:100%;overflow-y:auto;overflow-x:hidden;position:relative}.virtual-scroll-spacer[data-v-9eef8071]{position:relative;width:100%}.virtual-scroll-content[data-v-9eef8071]{position:absolute;top:0;left:0;right:0;will-change:transform}.virtual-scroll-container[data-v-9eef8071]::-webkit-scrollbar{width:12px}.virtual-scroll-container[data-v-9eef8071]::-webkit-scrollbar-track{background:var(--scrollbar-track-bg)}.virtual-scroll-container[data-v-9eef8071]::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-bg);border-radius:6px}.virtual-scroll-container[data-v-9eef8071]::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover-bg)}.virtual-tree-view[data-v-b5659ed2]{width:100%;height:100%}.preview-workspace[data-v-6acf4bbb]{display:flex;flex-direction:column;height:100%;background-color:var(--color-bg-primary);color:var(--color-text-primary);font-family:var(--font-family-mono);outline:none;position:relative}.toolbar[data-v-6acf4bbb]{justify-content:space-between}.edit-mode-toggle.locked[data-v-6acf4bbb]{background-color:var(--color-bg-secondary);color:var(--color-text-secondary)}.edit-mode-toggle.locked[data-v-6acf4bbb]:hover{background-color:var(--color-bg-hover)}.edit-mode-toggle.unlocked[data-v-6acf4bbb]{background-color:var(--color-accent);color:var(--color-text-primary)}.edit-mode-toggle.unlocked[data-v-6acf4bbb]:hover{background-color:var(--color-accent-hover)}.preview-workspace[data-v-6acf4bbb]:focus{outline:2px solid var(--color-border-focus);outline-offset:-2px}.sr-only[data-v-6acf4bbb]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.focus-exit[data-v-6acf4bbb]{position:relative}.unsaved-indicator[data-v-6acf4bbb]{position:absolute;top:4px;right:4px;width:8px;height:8px;background-color:#f44;border-radius:50%;border:2px solid var(--color-bg-tertiary);animation:pulse-unsaved-6acf4bbb 2s ease-in-out infinite}@keyframes pulse-unsaved-6acf4bbb{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.9)}}.resizable-panel[data-v-fdc01963]{position:relative;display:flex}.resizable-panel.horizontal[data-v-fdc01963]{flex-direction:row}.resizable-panel.vertical[data-v-fdc01963]{flex-direction:column}.panel-content[data-v-fdc01963]{overflow:auto;flex-shrink:0}.resize-handle[data-v-fdc01963]{position:relative;flex-shrink:0;background-color:var(--resizer-color);transition:background-color var(--transition-base);cursor:col-resize;user-select:none;z-index:var(--z-index-base)}.horizontal .resize-handle[data-v-fdc01963]{width:var(--resizer-width);height:100%;cursor:col-resize}.vertical .resize-handle[data-v-fdc01963]{width:100%;height:var(--resizer-width);cursor:row-resize}.resize-handle[data-v-fdc01963]:hover,.resize-handle.dragging[data-v-fdc01963]{background-color:var(--resizer-hover-color)}.horizontal .resize-handle[data-v-fdc01963]:hover,.horizontal .resize-handle.dragging[data-v-fdc01963]{width:var(--resizer-hover-width)}.vertical .resize-handle[data-v-fdc01963]:hover,.vertical .resize-handle.dragging[data-v-fdc01963]{height:var(--resizer-hover-width)}.resize-handle-bar[data-v-fdc01963]{position:absolute;background-color:transparent;transition:background-color var(--transition-base)}.horizontal .resize-handle-bar[data-v-fdc01963]{top:50%;left:50%;transform:translate(-50%,-50%);width:2px;height:40px;border-radius:var(--radius-sm)}.vertical .resize-handle-bar[data-v-fdc01963]{top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:2px;border-radius:var(--radius-sm)}.resize-handle:hover .resize-handle-bar[data-v-fdc01963],.resize-handle.dragging .resize-handle-bar[data-v-fdc01963]{background-color:var(--color-text-bright)}.resize-handle.dragging[data-v-fdc01963]{cursor:col-resize}.vertical .resize-handle.dragging[data-v-fdc01963]{cursor:row-resize}.theme-switcher[data-v-d5f78076]{position:relative;display:inline-block}.theme-switcher-trigger[data-v-d5f78076]{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background-color:var(--color-bg-elevated);color:var(--color-text-primary);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-base);white-space:nowrap;user-select:none;min-width:140px}.theme-switcher-trigger[data-v-d5f78076]:hover{background-color:var(--color-bg-hover);border-color:var(--color-border-secondary);color:var(--color-text-bright);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.theme-switcher-trigger[data-v-d5f78076]:focus{outline:2px solid var(--color-border-focus);outline-offset:2px}.theme-switcher-trigger[data-v-d5f78076]:active{transform:translateY(0) scale(.98)}.theme-switcher-trigger.active[data-v-d5f78076]{background-color:var(--color-bg-hover);border-color:var(--color-accent-primary)}.theme-switcher-trigger .icon[data-v-d5f78076]{font-size:var(--font-size-lg);line-height:1}.theme-switcher-trigger .label[data-v-d5f78076]{flex:1;text-align:left;font-size:var(--font-size-sm)}.theme-switcher-trigger .dropdown-arrow[data-v-d5f78076]{font-size:10px;opacity:.7;transition:transform var(--transition-fast)}.theme-switcher-trigger.active .dropdown-arrow[data-v-d5f78076]{transform:rotate(180deg)}.theme-dropdown[data-v-d5f78076]{position:fixed;z-index:10000;background-color:var(--color-bg-secondary);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:var(--spacing-xs) 0;max-height:400px;overflow-y:auto;animation:dropdownSlideIn-d5f78076 .15s ease-out}@keyframes dropdownSlideIn-d5f78076{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.theme-group[data-v-d5f78076]{padding:var(--spacing-xs) 0}.theme-group+.theme-group[data-v-d5f78076]{border-top:1px solid var(--color-border-subtle);margin-top:var(--spacing-xs);padding-top:var(--spacing-sm)}.theme-group-title[data-v-d5f78076]{padding:var(--spacing-xs) var(--spacing-md);color:var(--color-text-tertiary);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.5px}.theme-option[data-v-d5f78076]{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--spacing-sm) var(--spacing-md);background:none;border:none;color:var(--color-text-primary);font-family:var(--font-family-base);font-size:var(--font-size-sm);text-align:left;cursor:pointer;transition:background-color var(--transition-fast)}.theme-option[data-v-d5f78076]:hover{background-color:var(--color-bg-hover)}.theme-option[data-v-d5f78076]:focus{outline:none;background-color:var(--color-bg-hover);box-shadow:inset 2px 0 0 var(--color-accent-primary)}.theme-option.active[data-v-d5f78076]{background-color:var(--color-bg-active);color:var(--color-text-bright);font-weight:var(--font-weight-semibold)}.theme-option .theme-name[data-v-d5f78076]{flex:1}.theme-option .check-icon[data-v-d5f78076]{margin-left:var(--spacing-md);color:var(--color-accent-primary);font-size:var(--font-size-md);font-weight:700}.theme-dropdown[data-v-d5f78076]::-webkit-scrollbar{width:8px}.theme-dropdown[data-v-d5f78076]::-webkit-scrollbar-track{background:var(--color-bg-secondary)}.theme-dropdown[data-v-d5f78076]::-webkit-scrollbar-thumb{background:var(--color-border-primary);border-radius:var(--radius-sm)}.theme-dropdown[data-v-d5f78076]::-webkit-scrollbar-thumb:hover{background:var(--color-border-secondary)}@media(max-width:768px){.theme-switcher-trigger .label[data-v-d5f78076]{display:none}.theme-switcher-trigger[data-v-d5f78076]{min-width:auto;padding:var(--spacing-sm)}.theme-dropdown[data-v-d5f78076]{min-width:200px!important}}.app[data-v-6dff0b2a]{display:flex;flex-direction:column;height:100%;background-color:var(--color-bg-primary);color:var(--color-text-primary)}.top-toolbar[data-v-6dff0b2a]{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm) var(--spacing-lg);background-color:var(--color-bg-tertiary);border-bottom:1px solid var(--color-border-primary);flex-shrink:0;min-height:var(--toolbar-height)}.app-title[data-v-6dff0b2a]{display:flex;align-items:center;gap:var(--spacing-sm);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-bright);margin:0}.app-title .icon[data-v-6dff0b2a]{font-size:var(--font-size-xl)}.main-content[data-v-6dff0b2a]{display:flex;flex:1;overflow:hidden;position:relative}.right-panel[data-v-6dff0b2a]{flex:1;overflow:hidden;position:relative}.right-panel.maximized[data-v-6dff0b2a]{position:absolute;inset:0;z-index:10}[data-v-6dff0b2a] .maximized{position:absolute!important;top:0;left:0!important;right:0;bottom:0;width:100%!important;z-index:10}[data-v-6dff0b2a] .maximized .panel-content{width:100%!important}[data-v-6dff0b2a] .maximized .resize-handle{display:none}.sync-btn[data-v-6dff0b2a]{position:relative;transition:all var(--transition-base)}.sync-btn.sync-enabled[data-v-6dff0b2a]{background-color:var(--color-success);border-color:var(--color-success-hover);color:var(--color-text-bright)}.sync-btn.sync-enabled[data-v-6dff0b2a]:hover:not(:disabled){background-color:var(--color-success-hover);border-color:var(--color-success-hover)}.sync-btn.sync-disabled[data-v-6dff0b2a]{background-color:var(--color-bg-elevated);border-color:var(--color-border-primary);color:var(--color-text-secondary);opacity:.7}.sync-btn.sync-disabled[data-v-6dff0b2a]:hover:not(:disabled){opacity:1;color:var(--color-text-primary)}.sync-icon[data-v-6dff0b2a]{transition:transform var(--transition-base)}.sync-btn.sync-enabled .sync-icon[data-v-6dff0b2a]{animation:pulse-icon-6dff0b2a 2s ease-in-out infinite}.sync-indicator[data-v-6dff0b2a]{position:absolute;top:6px;right:6px;width:8px;height:8px;background-color:var(--color-text-bright);border-radius:50%;animation:pulse-indicator-6dff0b2a 2s ease-in-out infinite}@keyframes pulse-icon-6dff0b2a{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}@keyframes pulse-indicator-6dff0b2a{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.8)}}@media(max-width:768px){.top-toolbar[data-v-6dff0b2a]{flex-wrap:wrap;padding:var(--spacing-sm) var(--spacing-md)}.app-title[data-v-6dff0b2a]{font-size:var(--font-size-md)}.app-title .icon[data-v-6dff0b2a]{font-size:var(--font-size-lg)}.sync-indicator[data-v-6dff0b2a]{top:4px;right:4px;width:6px;height:6px}}@media(max-width:480px){.app-title .icon[data-v-6dff0b2a]{display:none}}:root{--color-bg-primary: #1e1e1e;--color-bg-secondary: #252526;--color-bg-tertiary: #2d2d30;--color-bg-elevated: #3e3e42;--color-bg-hover: rgba(255, 255, 255, .05);--color-bg-active: rgba(255, 255, 255, .1);--color-text-primary: #cccccc;--color-text-secondary: #858585;--color-text-tertiary: #6c6c6c;--color-text-bright: #ffffff;--color-text-muted: #505050;--color-border-primary: #3e3e42;--color-border-secondary: #3c3c3c;--color-border-subtle: rgba(255, 255, 255, .1);--color-border-focus: #0e639c;--color-accent-primary: #0e639c;--color-accent-primary-hover: #1177bb;--color-accent-primary-active: #0d5a8f;--color-success: #0e7a0d;--color-success-hover: #0f8b0e;--color-warning: #f9a825;--color-warning-bg: #5a4a1d;--color-error: #f48771;--color-error-bg: #5a1d1d;--color-error-border: #c42b1c;--color-danger: #a1260d;--color-danger-hover: #b52e1f;--color-syntax-key: #9cdcfe;--color-syntax-string: #ce9178;--color-syntax-number: #b5cea8;--color-syntax-boolean: #569cd6;--color-syntax-null: #569cd6;--color-syntax-object: #858585;--color-level-0: #569cd6;--color-level-1: #4ec9b0;--color-level-2: #c586c0;--color-level-3: #dcdcaa;--color-level-4: #ce9178;--color-level-5: #9cdcfe;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 20px;--spacing-2xl: 24px;--spacing-3xl: 32px;--spacing-4xl: 40px;--font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;--font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;--font-family-mono: "Consolas", "Monaco", "Courier New", monospace;--font-size-xs: 11px;--font-size-sm: 12px;--font-size-base: 13px;--font-size-md: 14px;--font-size-lg: 16px;--font-size-xl: 18px;--font-size-2xl: 20px;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-tight: 1.2;--line-height-normal: 1.5;--line-height-relaxed: 1.75;--radius-sm: 3px;--radius-md: 4px;--radius-lg: 6px;--radius-xl: 8px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 2px 4px rgba(0, 0, 0, .4);--shadow-lg: 0 4px 8px rgba(0, 0, 0, .5);--shadow-xl: 0 8px 16px rgba(0, 0, 0, .6);--transition-fast: .15s ease;--transition-base: .2s ease;--transition-slow: .3s ease;--z-index-base: 1;--z-index-dropdown: 100;--z-index-sticky: 200;--z-index-fixed: 300;--z-index-modal: 400;--z-index-popover: 500;--z-index-tooltip: 600;--toolbar-height: 48px;--toolbar-bg: var(--color-bg-secondary);--toolbar-border: var(--color-border-primary);--tree-node-height: 28px;--tree-node-indent: 20px;--tree-node-icon-size: 16px;--scrollbar-width: 12px;--scrollbar-track-bg: var(--color-bg-primary);--scrollbar-thumb-bg: var(--color-bg-elevated);--scrollbar-thumb-hover-bg: var(--color-border-primary);--resizer-width: 4px;--resizer-hover-width: 8px;--resizer-color: var(--color-border-primary);--resizer-hover-color: var(--color-accent-primary)}:root{--breakpoint-xs: 480px;--breakpoint-sm: 640px;--breakpoint-md: 768px;--breakpoint-lg: 1024px;--breakpoint-xl: 1280px;--breakpoint-2xl: 1536px}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}html,body,#app{height:100%;overflow:hidden}body{font-family:var(--font-family-primary);font-size:var(--font-size-base);line-height:var(--line-height-normal);color:var(--color-text-primary);background-color:var(--color-bg-primary)}h1,h2,h3,h4,h5,h6{font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);color:var(--color-text-bright)}h1{font-size:var(--font-size-2xl)}h2{font-size:var(--font-size-xl)}h3{font-size:var(--font-size-lg)}p{margin:0}code,pre{font-family:var(--font-family-mono)}a{color:var(--color-accent-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-accent-primary-hover);text-decoration:underline}a:focus-visible{outline:2px solid var(--color-border-focus);outline-offset:2px;border-radius:var(--radius-sm)}button{font-family:inherit;font-size:inherit;line-height:inherit;cursor:pointer;border:none;background:none;color:inherit}button:focus-visible{outline:2px solid var(--color-border-focus);outline-offset:2px}button:disabled{cursor:not-allowed;opacity:.5}input,textarea,select{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;background-color:var(--color-bg-elevated);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-md);transition:border-color var(--transition-fast)}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--color-border-focus)}input:disabled,textarea:disabled,select:disabled{cursor:not-allowed;opacity:.5}::-webkit-scrollbar{width:var(--scrollbar-width);height:var(--scrollbar-width)}::-webkit-scrollbar-track{background:var(--scrollbar-track-bg)}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-bg);border-radius:calc(var(--scrollbar-width) / 2);transition:background var(--transition-fast)}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover-bg)}::-webkit-scrollbar-corner{background:var(--scrollbar-track-bg)}*{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb-bg) var(--scrollbar-track-bg)}::selection{background-color:var(--color-accent-primary);color:var(--color-text-bright)}::-moz-selection{background-color:var(--color-accent-primary);color:var(--color-text-bright)}:focus-visible{outline:2px solid var(--color-border-focus);outline-offset:2px}.text-primary{color:var(--color-text-primary)}.text-secondary{color:var(--color-text-secondary)}.text-tertiary{color:var(--color-text-tertiary)}.text-bright{color:var(--color-text-bright)}.text-muted{color:var(--color-text-muted)}.font-normal{font-weight:var(--font-weight-normal)}.font-medium{font-weight:var(--font-weight-medium)}.font-semibold{font-weight:var(--font-weight-semibold)}.font-bold{font-weight:var(--font-weight-bold)}.hidden{display:none!important}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.flex-1{flex:1}.gap-xs{gap:var(--spacing-xs)}.gap-sm{gap:var(--spacing-sm)}.gap-md{gap:var(--spacing-md)}.gap-lg{gap:var(--spacing-lg)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.toolbar{display:flex;align-items:center;padding:var(--spacing-sm) var(--spacing-md);background-color:var(--toolbar-bg);border-bottom:1px solid var(--toolbar-border);min-height:var(--toolbar-height);flex-shrink:0;gap:var(--spacing-sm)}.toolbar-section{display:flex;align-items:center;gap:var(--spacing-sm)}.toolbar-divider{width:1px;height:24px;background-color:var(--color-border-primary);margin:0 var(--spacing-xs)}.toolbar-spacer{flex:1}.toolbar-btn,.action-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background-color:var(--color-bg-elevated);color:var(--color-text-primary);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-base);white-space:nowrap;user-select:none}.toolbar-btn:hover:not(:disabled),.action-btn:hover:not(:disabled){background-color:var(--color-bg-hover);border-color:var(--color-border-secondary);color:var(--color-text-bright);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.toolbar-btn:active:not(:disabled),.action-btn:active:not(:disabled){transform:translateY(0) scale(.98);box-shadow:none}.toolbar-btn:disabled,.action-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.toolbar-btn.active{background-color:var(--color-accent-primary);border-color:var(--color-accent-primary-hover);color:var(--color-text-bright)}.toolbar-btn.active:hover:not(:disabled){background-color:var(--color-accent-primary-hover)}.toolbar-btn .icon,.action-btn .icon{font-size:var(--font-size-md);line-height:1}.toolbar-btn .label,.action-btn .label{font-size:var(--font-size-sm)}.toolbar-btn.focus-exit{background-color:var(--color-success);border-color:var(--color-success-hover);color:var(--color-text-bright)}.toolbar-btn.focus-exit:hover:not(:disabled){background-color:var(--color-success-hover)}.toolbar-btn.focus-discard{background-color:var(--color-danger);border-color:var(--color-error-border);color:var(--color-text-bright)}.toolbar-btn.focus-discard:hover:not(:disabled){background-color:var(--color-danger-hover)}.error-indicator{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-xs) var(--spacing-md);background-color:var(--color-error-bg);color:var(--color-error);border:1px solid var(--color-error-border);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);animation:pulse 2s ease-in-out infinite}.error-indicator .icon{font-size:var(--font-size-md)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.8}}.focus-breadcrumb{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background-color:var(--color-bg-tertiary);border-bottom:1px solid var(--color-border-secondary);font-size:var(--font-size-sm);flex-shrink:0}.breadcrumb-label{color:var(--color-text-secondary);font-weight:var(--font-weight-semibold)}.breadcrumb-path{color:var(--color-syntax-key);font-family:var(--font-family-mono);font-weight:var(--font-weight-medium)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:var(--spacing-4xl) var(--spacing-xl);color:var(--color-text-secondary);text-align:center;gap:var(--spacing-xl)}.empty-state p{margin:var(--spacing-sm) 0;font-size:var(--font-size-md)}.empty-state .hint{font-size:var(--font-size-sm);color:var(--color-text-tertiary)}.empty-actions{display:flex;gap:var(--spacing-md);flex-wrap:wrap;justify-content:center}.tree-container{flex:1;overflow-y:auto;overflow-x:auto;padding:var(--spacing-sm) 0;background-color:var(--color-bg-primary)}.tree-root{min-width:fit-content}.resizer{position:relative;flex-shrink:0;background-color:var(--resizer-color);transition:background-color var(--transition-fast);cursor:col-resize;user-select:none}.resizer.horizontal{width:var(--resizer-width);cursor:col-resize}.resizer.vertical{height:var(--resizer-width);cursor:row-resize}.resizer:hover,.resizer.resizing{background-color:var(--resizer-hover-color)}.resizer.horizontal:hover,.resizer.horizontal.resizing{width:var(--resizer-hover-width)}.resizer.vertical:hover,.resizer.vertical.resizing{height:var(--resizer-hover-width)}.spinner{display:inline-block;width:20px;height:20px;border:2px solid var(--color-border-primary);border-top-color:var(--color-accent-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.badge{display:inline-flex;align-items:center;justify-content:center;padding:2px var(--spacing-sm);background-color:var(--color-bg-elevated);color:var(--color-text-primary);border-radius:var(--radius-xl);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);line-height:1}.badge.success{background-color:var(--color-success);color:var(--color-text-bright)}.badge.warning{background-color:var(--color-warning);color:var(--color-text-bright)}.badge.error{background-color:var(--color-error-bg);color:var(--color-error)}.tooltip{position:absolute;z-index:var(--z-index-tooltip);padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--color-bg-tertiary);color:var(--color-text-bright);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);font-size:var(--font-size-xs);white-space:nowrap;pointer-events:none;box-shadow:var(--shadow-lg)}@media(max-width:768px){.toolbar{flex-wrap:wrap;padding:var(--spacing-sm)}.toolbar-btn .label,.action-btn .label{display:none}.toolbar-btn,.action-btn{padding:var(--spacing-sm)}.empty-state{padding:var(--spacing-2xl) var(--spacing-md)}}@media(max-width:480px){.toolbar,.toolbar-section{gap:var(--spacing-xs)}.breadcrumb-path{font-size:var(--font-size-xs)}}.tree-node-wrapper{user-select:none;position:relative}.tree-node{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-xs) var(--spacing-sm);min-height:var(--tree-node-height);border-left:2px solid transparent;cursor:pointer;transition:all var(--transition-fast);position:relative;font-family:var(--font-family-mono)}.tree-node:hover{background-color:var(--color-bg-hover)}.tree-node.selected{background-color:var(--color-bg-active);border-left-color:currentColor}.tree-node.selected:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background-color:currentColor;box-shadow:0 0 8px currentColor}.tree-node:focus-within{outline:2px solid var(--color-border-focus);outline-offset:-2px}.tree-node[data-level="0"]{padding-left:var(--spacing-sm);color:var(--color-level-0)}.tree-node[data-level="1"]{padding-left:calc(var(--spacing-sm) + var(--tree-node-indent) * 1);color:var(--color-level-1)}.tree-node[data-level="2"]{padding-left:calc(var(--spacing-sm) + var(--tree-node-indent) * 2);color:var(--color-level-2)}.tree-node[data-level="3"]{padding-left:calc(var(--spacing-sm) + var(--tree-node-indent) * 3);color:var(--color-level-3)}.tree-node[data-level="4"]{padding-left:calc(var(--spacing-sm) + var(--tree-node-indent) * 4);color:var(--color-level-4)}.tree-node[data-level="5"]{padding-left:calc(var(--spacing-sm) + var(--tree-node-indent) * 5);color:var(--color-level-5)}.tree-node[data-level="6"]{padding-left:calc(var(--spacing-sm) + var(--tree-node-indent) * 6);color:var(--color-level-0)}.tree-node[data-level="7"]{padding-left:calc(var(--spacing-sm) + var(--tree-node-indent) * 7);color:var(--color-level-1)}.toggle-btn{display:flex;align-items:center;justify-content:center;width:var(--tree-node-icon-size);height:var(--tree-node-icon-size);padding:0;background:none;border:none;color:var(--color-text-primary);cursor:pointer;transition:all var(--transition-fast);flex-shrink:0;border-radius:var(--radius-sm)}.toggle-btn:hover{color:var(--color-text-bright);background-color:var(--color-bg-hover)}.toggle-btn:active{transform:scale(.9)}.toggle-icon{font-size:10px;display:block;transition:transform var(--transition-fast)}.tree-node.expanded .toggle-icon{transform:rotate(0)}.tree-node.collapsed .toggle-icon{transform:rotate(-90deg)}.toggle-spacer{width:var(--tree-node-icon-size);flex-shrink:0}.type-icon{font-size:var(--font-size-sm);color:var(--color-text-secondary);font-weight:var(--font-weight-semibold);flex-shrink:0;width:20px;text-align:center;font-family:var(--font-family-mono)}.node-key{color:var(--color-syntax-key);font-weight:var(--font-weight-medium);font-size:var(--font-size-base);white-space:nowrap;flex-shrink:0}.node-key.editable{cursor:text;padding:2px 4px;border-radius:var(--radius-sm);transition:background-color var(--transition-fast)}.node-key.editable:hover{background-color:var(--color-bg-hover);text-decoration:underline;text-decoration-style:dotted;text-decoration-color:var(--color-syntax-key)}.key-input{padding:2px var(--spacing-sm);background-color:var(--color-bg-elevated);color:var(--color-syntax-key);border:1px solid var(--color-accent-primary);border-radius:var(--radius-sm);font-size:var(--font-size-base);font-family:var(--font-family-mono);font-weight:var(--font-weight-medium);outline:none;min-width:60px;box-shadow:0 0 0 2px #0e639c33}.key-input:focus{box-shadow:0 0 0 3px #0e639c4d}.node-value{font-size:var(--font-size-base);color:var(--color-text-primary);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.value-string{color:var(--color-syntax-string)}.value-number{color:var(--color-syntax-number);font-weight:var(--font-weight-medium)}.value-boolean{color:var(--color-syntax-boolean);font-weight:var(--font-weight-semibold)}.value-null{color:var(--color-syntax-null);font-style:italic;opacity:.8}.value-object,.value-array{color:var(--color-syntax-object);font-style:italic}.node-actions{display:flex;gap:var(--spacing-xs);opacity:0;transition:opacity var(--transition-fast);flex-shrink:0;margin-left:auto}.tree-node:hover .node-actions,.tree-node.selected .node-actions,.tree-node:focus-within .node-actions{opacity:1}.action-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background-color:var(--color-bg-hover);border:1px solid transparent;border-radius:var(--radius-sm);font-size:var(--font-size-sm);cursor:pointer;transition:all var(--transition-fast)}.action-btn:hover{background-color:var(--color-bg-active);border-color:var(--color-border-primary);transform:scale(1.1);box-shadow:var(--shadow-sm)}.action-btn:active{transform:scale(.95)}.copy-btn:hover{background-color:#0e639c33;border-color:var(--color-accent-primary)}.delete-btn:hover{background-color:#f4474733;border-color:var(--color-error-border);color:var(--color-error)}@keyframes slideDown{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.tree-node[aria-selected=true]{background-color:var(--color-bg-active)}.tree-node[aria-expanded=true] .toggle-icon{transform:rotate(0)}.tree-node[aria-expanded=false] .toggle-icon{transform:rotate(-90deg)}@media(prefers-contrast:high){.tree-node{border-left-width:3px}.tree-node.selected{border-left-width:4px;outline:2px solid currentColor}.node-actions{opacity:1}}@media(prefers-reduced-motion:reduce){.tree-node,.toggle-btn,.toggle-icon,.action-btn,.node-actions,.children{transition:none;animation:none}}@media print{.node-actions{display:none}.tree-node{break-inside:avoid}}