.json-formatter{max-width:1000px;margin:0 auto}.json-input-section{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-lg);margin-bottom:var(--space-lg)}.json-info{display:flex;justify-content:space-between;align-items:center;margin-top:var(--space-md);padding-top:var(--space-md);border-top:1px solid var(--border)}.validation-status{font-size:.875rem;font-weight:500}.validation-status.valid{color:var(--accent)}.validation-status.invalid{color:var(--danger)}.char-count{color:var(--text-muted);font-size:.875rem}.json-buttons{display:flex;gap:var(--space-md);margin-top:var(--space-lg);flex-wrap:wrap}.json-output-section{display:flex;flex-direction:column;gap:var(--space-md)}.view-mode-tabs{display:flex;border-bottom:1px solid var(--border)}.mode-tab{background:none;border:none;padding:var(--space-sm) var(--space-md);color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast);border-bottom:2px solid transparent;font-weight:500}.mode-tab:hover:not(:disabled){color:var(--text-primary);background:var(--glass)}.mode-tab.active{color:var(--accent);border-bottom-color:var(--accent)}.mode-tab:disabled{opacity:.5;cursor:not-allowed}.json-output{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-lg);max-height:500px;overflow:auto}.json-code{margin:0;font-family:var(--font-mono);font-size:.875rem;line-height:1.5;color:var(--text-primary);white-space:pre-wrap;word-break:break-all}.json-tree{font-family:var(--font-mono);font-size:.875rem;line-height:1.5}.json-object,.json-array{margin-left:var(--space-md)}.json-indent{margin-left:var(--space-lg)}.json-item{margin:var(--space-xs) 0}.json-key{color:var(--accent);font-weight:600}.json-string{color:#10b981}.json-number{color:#3b82f6}.json-boolean{color:#f59e0b}.json-null{color:#ef4444}.json-error{color:var(--danger);background:#ff4d6d1a;border:1px solid var(--danger);padding:var(--space-md);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:.875rem}@media(max-width:768px){.json-buttons{flex-direction:column}.json-info{flex-direction:column;gap:var(--space-sm);align-items:flex-start}.view-mode-tabs{overflow-x:auto}.json-output{max-height:300px}}.json-error .error-location{font-weight:700}.validation-status:not(.valid):not(.invalid){color:var(--text-muted)}.json-output-actions{display:flex;gap:var(--space-sm);margin-top:var(--space-md);flex-wrap:wrap}.json-error-message{margin-bottom:8px}.json-error-snippet{margin:0;padding:10px 12px;background:#0000000f;border-radius:var(--radius-md);overflow-x:auto;font-family:var(--font-mono);font-size:.85rem;line-height:1.5;white-space:pre}.snippet-line{display:block;color:var(--text-primary)}.snippet-caret{display:block;color:var(--danger);font-weight:700}.tool-guide{max-width:800px;margin:0 auto;padding:40px 0}.guide-section{margin-bottom:60px}.guide-section h2{color:var(--text-primary);font-size:2rem;margin-bottom:24px;font-family:var(--font-display);border-bottom:2px solid var(--accent);padding-bottom:8px}.guide-section h3{color:var(--text-primary);font-size:1.2rem;margin-bottom:12px}.guide-section p{color:var(--text-secondary);line-height:1.7;margin-bottom:16px}.guide-steps{display:flex;flex-direction:column;gap:32px}.step{display:flex;gap:24px;align-items:flex-start}.step-number{width:48px;height:48px;background:var(--accent);color:var(--bg-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem;flex-shrink:0}.step-content{flex:1;min-width:0}.step-content h3{color:var(--accent);margin-bottom:12px;font-size:1.3rem}.step-content p{color:var(--text-secondary);line-height:1.7;margin:0}.use-cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}.use-case{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:24px;transition:all .3s ease}.use-case:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:0 8px 24px #0000001a}.use-case h3{color:var(--text-primary);margin-bottom:12px;font-size:1.1rem}.use-case p{color:var(--text-secondary);line-height:1.6;margin:0}.faq-list{display:flex;flex-direction:column;gap:24px}.faq-item{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:24px;transition:all .3s ease}.faq-item:hover{border-color:var(--accent);box-shadow:0 4px 12px #0000001a}.faq-item h3{color:var(--text-primary);margin-bottom:12px;font-size:1.1rem}.faq-item p{color:var(--text-secondary);line-height:1.6;margin:0}.related-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}.related-tool{display:block;background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:24px;text-decoration:none;transition:all .3s ease}.related-tool:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:0 8px 24px #0000001a}.tool-icon{color:var(--accent);font-weight:600;font-size:1.1rem;margin-bottom:8px}.tool-description{color:var(--text-secondary);line-height:1.5;font-size:.9rem}.last-updated{text-align:center;padding:24px 0;border-top:1px solid var(--border);margin-top:60px}.last-updated p{color:var(--text-muted);font-size:14px;margin:0}@media(max-width:768px){.tool-guide{padding:20px 0}.guide-section h2{font-size:1.5rem}.step{gap:16px}.step-number{width:40px;height:40px;font-size:1rem}.use-cases,.related-tools{grid-template-columns:1fr}}@media(max-width:480px){.guide-section{margin-bottom:40px}.use-case,.faq-item,.related-tool{padding:16px}}