:root{--jf-color-bg:#f3f4f6;--jf-color-bg-input:#fff;--jf-color-text:#111827;--jf-color-text-secondary:#6b7280;--jf-color-border:#d1d5db;--jf-color-accent:#3b82f6;--jf-color-accent-hover:#2563eb;--jf-color-success:#10b981;--jf-color-error:#ef4444;--jf-color-warning:#f59e0b;--jf-spacing:4px}.json-formatter{background-color:var(--jf-color-bg);color:var(--jf-color-text);padding:calc(6 * var(--jf-spacing));max-width:1200px;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.json-formatter__header{margin-bottom:calc(8 * var(--jf-spacing));text-align:center;border-bottom:2px solid var(--jf-color-accent);padding-bottom:calc(6 * var(--jf-spacing))}.json-formatter__header h1{margin:0 0 calc(2 * var(--jf-spacing)) 0;color:var(--jf-color-accent);font-size:28px;font-weight:700}.json-formatter__header p{color:var(--jf-color-text-secondary);margin:0;font-size:16px}.json-formatter__main{gap:calc(6 * var(--jf-spacing));margin-bottom:calc(8 * var(--jf-spacing));flex-direction:column;display:flex}.json-formatter__section{padding:calc(5 * var(--jf-spacing));background:#fff;border-radius:8px;box-shadow:0 1px 3px #0000001a}.json-formatter__section-header{margin-bottom:calc(4 * var(--jf-spacing));justify-content:space-between;align-items:center;display:flex}.json-formatter__section-header h2{color:var(--jf-color-text);margin:0;font-size:18px;font-weight:600}.json-formatter__stats{gap:calc(3 * var(--jf-spacing));flex-wrap:wrap;display:flex}.json-formatter__stat{color:var(--jf-color-text-secondary);padding:calc(1.5 * var(--jf-spacing)) calc(3 * var(--jf-spacing));background-color:var(--jf-color-bg);border-radius:4px;font-size:12px;font-weight:600}.json-formatter__complexity{color:var(--jf-color-accent);font-weight:700}.json-formatter__error-badge{color:#fff;background-color:var(--jf-color-error);padding:calc(1.5 * var(--jf-spacing)) calc(3 * var(--jf-spacing));border-radius:4px;font-size:12px;font-weight:600}.json-formatter__textarea{width:100%;min-height:200px;padding:calc(3 * var(--jf-spacing));border:1px solid var(--jf-color-border);color:var(--jf-color-text);background-color:var(--jf-color-bg-input);box-sizing:border-box;resize:vertical;border-radius:4px;font-family:Monaco,Menlo,Courier New,monospace;font-size:13px;transition:border-color .2s,box-shadow .2s}.json-formatter__textarea:focus{border-color:var(--jf-color-accent);outline:none;box-shadow:0 0 0 3px #3b82f61a}.json-formatter__textarea::placeholder{color:var(--jf-color-text-secondary)}.json-formatter__error{padding:calc(3 * var(--jf-spacing));margin-top:calc(3 * var(--jf-spacing));color:var(--jf-color-error);background-color:#ef44440d;border:1px solid #ef444433;border-radius:4px;font-size:13px}.json-formatter__error strong{font-weight:600}.json-formatter__success{padding:calc(3 * var(--jf-spacing));margin-top:calc(3 * var(--jf-spacing));color:var(--jf-color-success);background-color:#10b9810d;border:1px solid #10b98133;border-radius:4px;font-size:13px;font-weight:500}.json-formatter__modes{gap:calc(2 * var(--jf-spacing));margin-bottom:calc(4 * var(--jf-spacing));display:flex}.json-formatter__mode-button{padding:calc(2.5 * var(--jf-spacing)) calc(3 * var(--jf-spacing));background-color:var(--jf-color-bg);color:var(--jf-color-text);border:1px solid var(--jf-color-border);cursor:pointer;border-radius:4px;flex:1;font-size:13px;font-weight:600;transition:all .2s}.json-formatter__mode-button:hover{border-color:var(--jf-color-accent);background-color:#e5e7eb}.json-formatter__mode-button--active{background-color:var(--jf-color-accent);color:#fff;border-color:var(--jf-color-accent)}.json-formatter__output-box{background-color:var(--jf-color-bg);border:1px solid var(--jf-color-border);padding:calc(3 * var(--jf-spacing));margin-bottom:calc(4 * var(--jf-spacing));border-radius:4px;max-height:400px;overflow-y:auto}.json-formatter__code{color:var(--jf-color-text);word-break:break-all;white-space:pre-wrap;margin:0;font-family:Monaco,Menlo,Courier New,monospace;font-size:12px;line-height:1.5}.json-formatter__action-buttons{gap:calc(2 * var(--jf-spacing));flex-wrap:wrap;display:flex}.json-formatter__button{min-width:120px;padding:calc(2.5 * var(--jf-spacing)) calc(3 * var(--jf-spacing));background-color:var(--jf-color-accent);color:#fff;cursor:pointer;border:none;border-radius:4px;flex:1;font-size:13px;font-weight:600;transition:background-color .2s,transform .1s}.json-formatter__button:hover{background-color:var(--jf-color-accent-hover);transform:translateY(-1px)}.json-formatter__button:active{transform:translateY(0)}.json-formatter__button:disabled{background-color:var(--jf-color-border);cursor:not-allowed;transform:none}.json-formatter__footer{text-align:center;border-top:1px solid var(--jf-color-border);padding-top:calc(4 * var(--jf-spacing));color:var(--jf-color-text-secondary);font-size:12px}.json-formatter__footer p{margin:0}.json-formatter__link{color:var(--jf-color-accent);font-weight:500;text-decoration:none}.json-formatter__link:hover{text-decoration:underline}@media (max-width:768px){.json-formatter{padding:calc(4 * var(--jf-spacing))}.json-formatter__header h1{font-size:24px}.json-formatter__modes,.json-formatter__action-buttons{flex-direction:column}.json-formatter__button{width:100%}}@media (max-width:480px){.json-formatter{padding:calc(3 * var(--jf-spacing))}.json-formatter__header h1{font-size:20px}.json-formatter__header p{font-size:14px}.json-formatter__section{padding:calc(4 * var(--jf-spacing))}.json-formatter__section-header{align-items:flex-start;gap:calc(2 * var(--jf-spacing));flex-direction:column}.json-formatter__stats{width:100%}.json-formatter__textarea{min-height:150px;font-size:16px}.json-formatter__code{font-size:11px}.json-formatter__mode-button{padding:calc(2 * var(--jf-spacing)) calc(2.5 * var(--jf-spacing));font-size:12px}}@media print{.json-formatter__header{border-bottom:none}.json-formatter__modes,.json-formatter__action-buttons{display:none}.json-formatter__output-box{max-height:none;overflow-y:visible}}