.json-formatter{max-width:920px;margin:2rem auto;padding:1.5rem;background:var(--gradient-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);position:relative;overflow:hidden}.json-formatter:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient-accent)}.json-formatter__panels{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.json-formatter__panel{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg-soft);overflow:hidden}.json-formatter__panel-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem;border-bottom:1px solid var(--color-border);padding:.75rem .9rem}.json-formatter__title{margin:0;font-size:.92rem;color:var(--color-secondary);text-transform:uppercase;letter-spacing:.05em;font-weight:700}.json-formatter__textarea{width:100%;min-height:320px;padding:1rem;border:none;outline:none;resize:vertical;font-family:var(--font-mono);font-size:.9rem;line-height:1.55;color:var(--color-primary);background:var(--color-bg)}.json-formatter__output{margin:0;min-height:320px;padding:1rem;overflow:auto;font-family:var(--font-mono);font-size:.9rem;line-height:1.55;background:var(--color-bg);color:var(--color-primary)}.json-formatter__output--placeholder{color:var(--color-muted)}.json-formatter__output-actions{display:flex;gap:.4rem}.json-formatter__icon-btn{border:1px solid var(--color-border);background:var(--color-bg);color:var(--color-secondary);width:2rem;height:2rem;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast)}.json-formatter__icon-btn:hover{color:var(--color-primary);border-color:var(--color-border-strong)}.json-formatter__controls{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem}.json-formatter__btn{border:none;border-radius:var(--radius-md);background:var(--gradient-brand);color:#fff;font-size:.9rem;font-weight:700;padding:.65rem 1rem;cursor:pointer;transition:transform var(--transition-fast)}.json-formatter__btn:hover{transform:translateY(-1px)}.json-formatter__btn--secondary{background:var(--gradient-accent)}.json-formatter__btn--ghost{background:var(--color-bg);color:var(--color-primary);border:1px solid var(--color-border-strong)}.json-formatter__status{margin:.85rem 0 0;font-size:.9rem;color:var(--color-secondary);min-height:1.35rem}.json-formatter__status--ok{color:#047857}.json-formatter__status--error{color:#b91c1c}.json-formatter__tok-key{color:#1d4ed8}.json-formatter__tok-string{color:#b45309}.json-formatter__tok-number{color:#7c3aed}.json-formatter__tok-boolean{color:#065f46;font-weight:600}.json-formatter__tok-null{color:#b91c1c;font-weight:600}@media(max-width:860px){.json-formatter__panels{grid-template-columns:1fr}.json-formatter__textarea,.json-formatter__output{min-height:260px}}@media(max-width:640px){.json-formatter{margin:1rem auto;padding:1rem}.json-formatter__controls{display:grid;grid-template-columns:1fr 1fr}}.dev-json-code{margin:.9rem 0 1.2rem;padding:1rem;background:var(--color-bg);border:1px solid var(--color-border-strong);border-radius:var(--radius-md);overflow-x:auto}.dev-json-code code{font-family:var(--font-mono);font-size:.86rem;line-height:1.55;white-space:pre;color:var(--color-primary)}.dev-json-faq{padding:4.5rem 1.5rem;max-width:800px;margin:0 auto;position:relative}.dev-json-faq:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);width:100px;height:3px;background:var(--gradient-brand);border-radius:var(--radius-full)}.dev-json-faq h2{font-size:2rem;font-weight:800;text-align:center;margin-bottom:3rem;letter-spacing:-.02em}.dev-json-faq__list{display:flex;flex-direction:column;gap:1rem}.dev-json-faq__item{background:#ffffffa6;backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.8);box-shadow:var(--shadow-sm),var(--shadow-inner-surface);border-radius:var(--radius-lg);padding:1.1rem 1.25rem}.dev-json-faq__item summary{color:var(--color-primary);font-size:1.02rem;font-weight:700;cursor:pointer;line-height:1.45}.dev-json-faq__item p{margin:.9rem 0 0;color:var(--color-secondary);line-height:1.65;font-size:.95rem}@media(max-width:640px){.dev-json-faq{padding:3rem 1rem}.dev-json-faq h2{font-size:1.6rem;margin-bottom:2rem}}