@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap";:root{--color-bg: #FAF7F2;--color-bg-elevated: #FFFFFF;--color-bg-subtle: #F3EDE5;--color-bg-muted: #EBE4DA;--color-coral: #FF6B6B;--color-coral-light: #FF8A8A;--color-coral-dark: #E55555;--color-teal: #2DD4BF;--color-teal-light: #5EEAD4;--color-teal-dark: #14B8A6;--color-text: #1A1A1A;--color-text-secondary: #5C5C5C;--color-text-muted: #9CA3AF;--color-success: #10B981;--color-error: #EF4444;--color-border: rgba(0, 0, 0, .08);--color-shadow: rgba(0, 0, 0, .04);--color-shadow-lg: rgba(0, 0, 0, .08);--syntax-key: #D946EF;--syntax-string: #059669;--syntax-number: #2563EB;--syntax-boolean: #DC2626;--syntax-null: #9CA3AF;--syntax-bracket: #64748B;--font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", "SF Mono", "Fira Code", "Monaco", monospace;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--transition: .18s ease}[data-theme=dark]{--color-bg: #0F0F0F;--color-bg-elevated: #1A1A1A;--color-bg-subtle: #252525;--color-bg-muted: #333333;--color-text: #F5F5F5;--color-text-secondary: #A3A3A3;--color-text-muted: #6B7280;--color-border: rgba(255, 255, 255, .08);--color-shadow: rgba(0, 0, 0, .3);--color-shadow-lg: rgba(0, 0, 0, .4);--syntax-key: #F0ABFC;--syntax-string: #34D399;--syntax-number: #60A5FA;--syntax-boolean: #FB7185;--syntax-null: #6B7280;--syntax-bracket: #94A3B8}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text);min-height:100vh;line-height:1.5;transition:background-color var(--transition),color var(--transition)}#app{display:flex;flex-direction:column;min-height:100vh;max-width:1600px;margin:0 auto;padding:var(--space-4);gap:var(--space-3)}.header{background:var(--color-bg-elevated);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-5);box-shadow:0 1px 3px var(--color-shadow),0 4px 12px var(--color-shadow-lg);border:1px solid var(--color-border)}.header-content{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}.logo{display:flex;align-items:center;gap:var(--space-3)}.logo-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:linear-gradient(135deg,var(--color-coral),var(--color-coral-dark));border-radius:var(--radius-sm);box-shadow:0 2px 8px #ff6b6b4d}.logo-icon svg{width:20px;height:20px;color:#fff}.logo h1{font-size:1.25rem;font-weight:700;color:var(--color-text);letter-spacing:-.02em}.header-controls{display:flex;align-items:center;gap:var(--space-4)}.control-group{display:flex;align-items:center;gap:var(--space-2);font-size:.8125rem;color:var(--color-text-secondary)}.control-group select{font-family:var(--font-sans);font-size:.8125rem;font-weight:500;padding:var(--space-1) var(--space-3);padding-right:var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg-subtle);color:var(--color-text);cursor:pointer;transition:all var(--transition);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}.control-group select:hover{border-color:var(--color-teal)}.control-group select:focus{outline:none;border-color:var(--color-teal);box-shadow:0 0 0 3px #2dd4bf26}.theme-toggle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg-subtle);color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition)}.theme-toggle:hover{background:var(--color-bg-muted);color:var(--color-text);border-color:var(--color-teal)}.theme-toggle svg{width:18px;height:18px}.theme-toggle .icon-sun,.theme-toggle .icon-moon{display:none}:root .theme-toggle .icon-sun{display:block}[data-theme=dark] .theme-toggle .icon-moon{display:block}[data-theme=dark] .theme-toggle .icon-sun{display:none}.status-card{background:var(--color-bg-elevated);border-radius:var(--radius-md);padding:var(--space-2) var(--space-4);box-shadow:0 1px 3px var(--color-shadow);border:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:44px;transition:all var(--transition)}.status-card.valid{border-left:3px solid var(--color-success)}.status-card.invalid{border-left:3px solid var(--color-error);background:linear-gradient(90deg,rgba(239,68,68,.05),transparent 40%)}.status-card.ready{border-left:3px solid var(--color-bg-muted)}.status-indicator{display:flex;align-items:center;gap:var(--space-2);font-weight:600;font-size:.875rem}.status-icon{width:8px;height:8px;border-radius:50%;background:var(--color-bg-muted);transition:background-color var(--transition)}.status-card.valid .status-icon{background:var(--color-success);box-shadow:0 0 8px #10b98166}.status-card.invalid .status-icon{background:var(--color-error);box-shadow:0 0 8px #ef444466}.status-details{font-size:.75rem;color:var(--color-text-secondary);font-family:var(--font-mono);max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.main-content{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);flex:1;min-height:0}.card{background:var(--color-bg-elevated);border-radius:var(--radius-lg);box-shadow:0 1px 3px var(--color-shadow),0 4px 12px var(--color-shadow-lg);border:1px solid var(--color-border);display:flex;flex-direction:column;overflow:hidden}.card-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);background:var(--color-bg-subtle)}.card-header h2{font-size:.8125rem;font-weight:600;color:var(--color-text);text-transform:uppercase;letter-spacing:.05em}.card-hint{font-size:.75rem;color:var(--color-text-muted)}.output-actions{display:flex;gap:var(--space-1)}.input-wrapper{flex:1;display:flex;position:relative;overflow:hidden}.line-numbers{font-family:var(--font-mono);font-size:.75rem;line-height:1.5;padding:var(--space-3);padding-right:var(--space-2);background:var(--color-bg-subtle);color:var(--color-text-muted);text-align:right;-webkit-user-select:none;user-select:none;border-right:1px solid var(--color-border);min-width:44px;overflow:hidden}.json-input{flex:1;font-family:var(--font-mono);font-size:.8125rem;line-height:1.5;padding:var(--space-3);border:none;background:transparent;color:var(--color-text);resize:none;outline:none;overflow:auto;white-space:pre;min-height:300px;-moz-tab-size:2;tab-size:2}.json-input::placeholder{color:var(--color-text-muted)}.error-highlight{position:absolute;pointer-events:none;background:#ef44441f;display:none}.error-highlight.visible{display:block}.output-wrapper{flex:1;overflow:auto;padding:var(--space-3);background:var(--color-bg-elevated)}.json-tree{font-family:var(--font-mono);font-size:.8125rem;line-height:1.4;white-space:pre;word-break:break-word}.json-tree .placeholder{color:var(--color-text-muted);font-style:italic}.json-node{position:relative}.json-line{position:relative;display:inline}.json-key{color:var(--syntax-key)}.json-string{color:var(--syntax-string)}.json-number{color:var(--syntax-number)}.json-boolean{color:var(--syntax-boolean);font-weight:500}.json-null{color:var(--syntax-null);font-style:italic}.json-bracket{color:var(--syntax-bracket);cursor:pointer;border-radius:2px;transition:background-color var(--transition)}.json-collapsible .json-bracket:hover{background:var(--color-bg-muted)}.json-comma,.json-colon{color:var(--syntax-bracket)}.clickable{cursor:pointer;border-radius:2px;transition:background-color var(--transition)}.clickable:hover{background:var(--color-bg-muted)}.clickable:active{background:var(--color-teal-light)}.json-property-line{position:relative;display:inline;padding-right:4px}.json-property-line:hover>.line-copy-btn{opacity:1}.line-copy-btn{position:absolute;right:-26px;top:50%;transform:translateY(-50%);opacity:0;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;background:var(--color-bg-subtle);border:1px solid var(--color-border);border-radius:4px;cursor:pointer;color:var(--color-text-muted);transition:all var(--transition);z-index:10}.line-copy-btn svg{width:12px;height:12px}.line-copy-btn:hover{opacity:1;background:var(--color-teal);border-color:var(--color-teal);color:#fff;transform:translateY(-50%) scale(1.1)}.line-copy-btn:active{transform:translateY(-50%) scale(.95)}.json-collapsible{-webkit-user-select:none;user-select:none;display:inline}.json-toggle{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;margin-right:3px;border-radius:3px;background:var(--color-bg-muted);color:var(--color-text-secondary);vertical-align:middle;transition:all var(--transition);flex-shrink:0;cursor:pointer}.json-toggle:hover{background:var(--color-teal);color:#fff}.json-toggle svg{width:10px;height:10px;transition:transform var(--transition)}.json-toggle.collapsed svg{transform:rotate(-90deg)}.json-content{display:inline}.json-content.collapsed{display:none}.json-preview{display:none;color:var(--color-text-muted);font-size:.75rem;margin-left:4px}.json-preview.visible{display:inline}.json-tree.partial{opacity:.7}.json-tree .error-text{color:var(--color-error);font-style:italic;background:#ef44441a;padding:2px 6px;border-radius:var(--radius-sm);font-size:.75rem}.toolbar{display:flex;gap:var(--space-2);padding:var(--space-3);background:var(--color-bg-elevated);border-radius:var(--radius-lg);box-shadow:0 1px 3px var(--color-shadow);border:1px solid var(--color-border);flex-wrap:wrap;justify-content:center}.btn{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-sans);font-size:.8125rem;font-weight:600;padding:var(--space-2) var(--space-4);border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition);white-space:nowrap}.btn:disabled{opacity:.4;cursor:not-allowed}.btn svg{width:16px;height:16px}.btn-primary{background:linear-gradient(135deg,var(--color-coral),var(--color-coral-dark));color:#fff;box-shadow:0 2px 8px #ff6b6b40}.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 16px #ff6b6b59}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-secondary{background:var(--color-bg-subtle);color:var(--color-text);border:1px solid var(--color-border)}.btn-secondary:hover:not(:disabled){background:var(--color-bg-muted);border-color:var(--color-teal)}.btn-icon{width:32px;height:32px;padding:0;justify-content:center;background:var(--color-bg-subtle);color:var(--color-text-secondary);border:1px solid var(--color-border);border-radius:var(--radius-sm)}.btn-icon:hover:not(:disabled){background:var(--color-teal);color:#fff;border-color:var(--color-teal)}.btn-icon svg{width:14px;height:14px}.toast-container{position:fixed;bottom:var(--space-6);left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:var(--space-2);z-index:1000;pointer-events:none}.toast{background:var(--color-text);color:var(--color-bg);padding:var(--space-2) var(--space-5);border-radius:var(--radius-md);font-size:.8125rem;font-weight:500;box-shadow:0 8px 24px var(--color-shadow-lg);animation:toast-in .25s cubic-bezier(.16,1,.3,1) forwards;pointer-events:auto}.toast.success{background:var(--color-success);color:#fff}.toast.error{background:var(--color-error);color:#fff}.toast.hiding{animation:toast-out .2s ease forwards}@keyframes toast-in{0%{opacity:0;transform:translateY(16px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toast-out{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-8px) scale(.95)}}@media (max-width: 900px){.main-content{grid-template-columns:1fr}.card{min-height:260px}.status-details{max-width:50%;font-size:.6875rem}}@media (max-width: 600px){#app{padding:var(--space-2);gap:var(--space-2)}.header-content{flex-direction:column;align-items:stretch;gap:var(--space-3)}.header-controls{justify-content:space-between}.logo h1{font-size:1.125rem}.status-card{flex-direction:column;align-items:flex-start;gap:var(--space-1)}.status-details{max-width:100%}.toolbar{padding:var(--space-2)}.btn{padding:var(--space-2) var(--space-3);font-size:.75rem}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-bg-muted);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}:focus-visible{outline:2px solid var(--color-teal);outline-offset:2px}::selection{background:var(--color-teal-light);color:var(--color-text)}[data-theme=dark] ::selection{background:var(--color-teal-dark);color:#fff}