:root{--jf-primary-color: #8a2be2;--jf-primary-light: #9d4edd;--jf-primary-dark: #7209b7;--jf-bg-primary: #ffffff;--jf-bg-secondary: #f8f9fa;--jf-bg-tertiary: #e9ecef;--jf-text-primary: #212529;--jf-text-secondary: #6c757d;--jf-text-muted: #adb5bd;--jf-border-color: #dee2e6;--jf-border-light: #e9ecef;--jf-success: #28a745;--jf-error: #dc3545;--jf-warning: #ffc107;--jf-info: #17a2b8;--jf-shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .075);--jf-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);--jf-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .175);--jf-border-radius: 8px;--jf-border-radius-lg: 12px;--jf-spacing-xs: .25rem;--jf-spacing-sm: .5rem;--jf-spacing-md: 1rem;--jf-spacing-lg: 1.5rem;--jf-spacing-xl: 2rem;--jf-spacing-xxl: 3rem;--jf-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--jf-font-family-mono: "SF Mono", Monaco, Inconsolata, "Roboto Mono", Consolas, "Courier New", monospace;--jf-transition: all .3s cubic-bezier(.4, 0, .2, 1);--jf-transition-fast: all .15s ease-in-out}@media (prefers-color-scheme: dark){:root{--jf-primary-color: #9370db;--jf-primary-light: #a584e0;--jf-primary-dark: #7b5cd6;--jf-bg-primary: #1a1a1a;--jf-bg-secondary: #2d2d2d;--jf-bg-tertiary: #404040;--jf-text-primary: #ffffff;--jf-text-secondary: #b3b3b3;--jf-text-muted: #808080;--jf-border-color: #404040;--jf-border-light: #333333;--jf-success: #4caf50;--jf-error: #f44336;--jf-warning: #ff9800;--jf-info: #2196f3;--jf-shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .3);--jf-shadow: 0 .5rem 1rem rgba(0, 0, 0, .4);--jf-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .5)}}.jf-app *{box-sizing:border-box}.jf-app{font-family:var(--jf-font-family);color:var(--jf-text-primary);background-color:var(--jf-bg-primary);line-height:1.6;transition:var(--jf-transition)}.jf-header{background:var(--jf-primary-color);color:#fff;padding:var(--jf-spacing-lg) 0;text-align:center;position:relative}.jf-header-content{position:relative;z-index:1}.jf-title{font-size:1.75rem;font-weight:600;margin:0;display:flex;align-items:center;justify-content:center;gap:var(--jf-spacing-sm)}.jf-icon{font-size:1.5rem;opacity:.95}.jf-subtitle{font-size:.9rem;margin:var(--jf-spacing-xs) 0 0;opacity:.85;font-weight:400}.jf-main{padding:var(--jf-spacing-lg) var(--jf-spacing-md)}.jf-container{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:var(--jf-spacing-lg)}.jf-input-section,.jf-output-section{background:var(--jf-bg-secondary);border-radius:var(--jf-border-radius);padding:var(--jf-spacing-md);box-shadow:var(--jf-shadow-sm);border:1px solid var(--jf-border-color);transition:var(--jf-transition-fast);width:100%;min-height:300px;display:flex;flex-direction:column}.jf-input-section:hover,.jf-output-section:hover{box-shadow:var(--jf-shadow);border-color:var(--jf-primary-color)}.jf-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--jf-spacing-sm);padding-bottom:var(--jf-spacing-xs);border-bottom:1px solid var(--jf-border-light)}.jf-section-header h2{font-size:1.1rem;font-weight:600;margin:0;color:var(--jf-primary-color)}.jf-btn{padding:var(--jf-spacing-xs) var(--jf-spacing-md);border:none;border-radius:var(--jf-border-radius);font-size:.875rem;font-weight:500;cursor:pointer;transition:var(--jf-transition-fast);display:inline-flex;align-items:center;gap:var(--jf-spacing-xs);text-decoration:none;min-height:32px}.jf-btn-primary{background:var(--jf-primary-color);color:#fff}.jf-btn-primary:hover{background:var(--jf-primary-dark)}.jf-btn-secondary{background:var(--jf-bg-tertiary);color:var(--jf-text-primary);border:1px solid var(--jf-border-color)}.jf-btn-secondary:hover{background:var(--jf-border-color)}.jf-btn-outline{background:transparent;color:var(--jf-primary-color);border:1px solid var(--jf-primary-color)}.jf-btn-outline:hover{background:var(--jf-primary-color);color:#fff}.jf-btn:disabled{opacity:.5;cursor:not-allowed}.jf-btn.copying{background:#28a745;color:#fff;border-color:#28a745;transform:scale(.95);animation:copySuccess .3s ease-out}@keyframes copySuccess{0%{transform:scale(1);background:var(--jf-primary-color)}50%{transform:scale(.95);background:#28a745}to{transform:scale(.95);background:#28a745}}.jf-btn.copying:hover{background:#28a745;color:#fff}.jf-actions{display:flex;gap:var(--jf-spacing-sm)}.jf-input-wrapper{position:relative;height:240px;display:flex;flex-direction:column}.jf-textarea{width:100%;height:100%;padding:var(--jf-spacing-sm);border:1px solid var(--jf-border-color);border-radius:var(--jf-border-radius);font-family:var(--jf-font-family-mono);font-size:.8rem;line-height:1.4;background:var(--jf-bg-primary);color:var(--jf-text-primary);resize:none;transition:var(--jf-transition-fast)}.jf-textarea:focus{outline:none;border-color:var(--jf-primary-color);box-shadow:0 0 0 2px #8a2be21a}.jf-textarea::placeholder{color:var(--jf-text-muted)}.jf-error{color:var(--jf-error);font-size:.875rem;margin-top:var(--jf-spacing-sm);padding:var(--jf-spacing-sm);background:rgba(220,53,69,.1);border-radius:var(--jf-border-radius);border-left:4px solid var(--jf-error)}.jf-view-toggle{display:flex;background:var(--jf-bg-tertiary);border-radius:var(--jf-border-radius);padding:2px;border:1px solid var(--jf-border-color)}.jf-toggle-btn{padding:var(--jf-spacing-sm) var(--jf-spacing-md);border:none;background:transparent;color:var(--jf-text-secondary);border-radius:calc(var(--jf-border-radius) - 2px);cursor:pointer;transition:var(--jf-transition-fast);font-size:.875rem;font-weight:500}.jf-toggle-btn.active{background:var(--jf-primary-color);color:#fff;box-shadow:var(--jf-shadow-sm)}.jf-toggle-btn:not(.active):hover{background:var(--jf-border-light);color:var(--jf-text-primary)}.jf-unified-actions{display:flex;justify-content:flex-end;margin-bottom:var(--jf-spacing-sm);padding-bottom:var(--jf-spacing-sm);border-bottom:1px solid var(--jf-border-light);flex-shrink:0}.jf-action-group{display:flex;gap:var(--jf-spacing-xs)}.jf-content-area{flex:1;display:flex;flex-direction:column;min-height:0}.jf-output-wrapper,.jf-tree-wrapper{position:relative;min-height:240px;max-height:500px;display:flex;flex-direction:column;flex:1}.jf-output{background:var(--jf-bg-primary);border:1px solid var(--jf-border-color);border-radius:var(--jf-border-radius);padding:var(--jf-spacing-sm);font-family:var(--jf-font-family-mono);font-size:.8rem;line-height:1.4;overflow:auto;white-space:pre;color:var(--jf-text-primary);flex:1}.jf-tree-wrapper{background:var(--jf-bg-primary);border:1px solid var(--jf-border-color);border-radius:var(--jf-border-radius);padding:var(--jf-spacing-sm);overflow-y:auto;flex:1}.jf-tree-node{font-family:var(--jf-font-family-mono);font-size:.875rem;line-height:1.4}.jf-tree-item{padding:2px 0;cursor:pointer;border-radius:4px;transition:var(--jf-transition-fast);display:flex;align-items:center;gap:var(--jf-spacing-xs)}.jf-tree-expandable:hover{background:var(--jf-bg-secondary)}.jf-tree-toggle{color:var(--jf-primary-color);font-size:.75rem;width:12px;display:inline-block;transition:var(--jf-transition-fast)}.jf-tree-expanded .jf-tree-toggle{transform:rotate(0)}.jf-tree-key{color:var(--jf-primary-color);font-weight:600}.jf-tree-colon{color:var(--jf-text-muted);margin:0 var(--jf-spacing-xs)}.jf-tree-type{color:var(--jf-text-muted);font-style:italic;font-size:.8rem}.jf-tree-value{font-weight:500}.jf-tree-string{color:var(--jf-success)}.jf-tree-number{color:var(--jf-info)}.jf-tree-boolean{color:var(--jf-warning)}.jf-tree-null{color:var(--jf-text-muted);font-style:italic}.jf-tree-leaf{cursor:default}.jf-tree-children{border-left:1px solid var(--jf-border-light);margin-left:8px}@media (min-width: 768px){.jf-container{max-width:800px}}@media (max-width: 767px){.jf-main{padding:var(--jf-spacing-md) var(--jf-spacing-sm)}.jf-input-section,.jf-output-section{padding:var(--jf-spacing-sm);min-height:250px}.jf-input-wrapper,.jf-output-wrapper,.jf-tree-wrapper{height:200px}.jf-section-header{flex-direction:column;gap:var(--jf-spacing-sm);align-items:stretch}.jf-actions{justify-content:center}.jf-title{font-size:1.5rem;flex-direction:column;gap:var(--jf-spacing-xs)}.jf-view-toggle{width:100%}.jf-toggle-btn{flex:1;text-align:center}}@media (max-width: 480px){.jf-header{padding:var(--jf-spacing-lg) 0}.jf-title{font-size:1.75rem}.jf-subtitle{font-size:1rem}.jf-textarea{min-height:150px}.jf-output-wrapper,.jf-tree-wrapper{min-height:200px;max-height:400px}}.jf-textarea::-webkit-scrollbar,.jf-output::-webkit-scrollbar,.jf-tree-wrapper::-webkit-scrollbar{width:8px}.jf-textarea::-webkit-scrollbar-track,.jf-output::-webkit-scrollbar-track,.jf-tree-wrapper::-webkit-scrollbar-track{background:var(--jf-bg-secondary);border-radius:4px}.jf-textarea::-webkit-scrollbar-thumb,.jf-output::-webkit-scrollbar-thumb,.jf-tree-wrapper::-webkit-scrollbar-thumb{background:var(--jf-border-color);border-radius:4px}.jf-textarea::-webkit-scrollbar-thumb:hover,.jf-output::-webkit-scrollbar-thumb:hover,.jf-tree-wrapper::-webkit-scrollbar-thumb:hover{background:var(--jf-text-muted)}@media (prefers-contrast: high){:root{--jf-border-color: #000000;--jf-text-muted: #666666}@media (prefers-color-scheme: dark){:root{--jf-border-color: #ffffff;--jf-text-muted: #cccccc}}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}