.json-format .output-container{border:1px solid var(--grey);flex-direction:column;width:50%;display:flex;position:relative;overflow:hidden}.json-format .output-box{background:#f8f9fa;border-bottom:1px solid #e1e5e9;flex-wrap:wrap;align-items:center;gap:12px;padding:8px;display:flex}.json-format #json-options{gap:8px;display:flex}.json-format .output-accept{background:var(--blue);color:#fff;cursor:pointer;border-radius:4px;justify-content:center;align-items:center;height:67px;padding:8px 12px;display:flex;position:relative}.json-format .output-accept:hover:not(:disabled){background:var(--blue-hover)}.json-format .output-accept:disabled{opacity:.5;cursor:default}.json-format .output-button{cursor:pointer;background:#fff;border:1px solid #d1d5db;border-radius:4px;padding:8px 16px;font-size:14px;transition:all .1s}.json-format .output-button.active{background:var(--dark);color:var(--text-light)}.json-format .output-button.active:hover{background:var(--dark)}.json-format .output-button:disabled{cursor:default;opacity:.5}.json-format .output-button:hover:not(:disabled){background:#f3f4f6}.json-format .output-buttons{gap:8px;height:100%;margin-left:auto;display:flex}.json-format .output-buttons button:disabled{opacity:.5;cursor:not-allowed}.json-format .output-buttons button{cursor:pointer;border-radius:4px;padding:8px 16px;font-size:14px;transition:all .2s}.json-format .output-buttons button.download-btn{background:var(--blue);color:var(--text-light)}.json-format .output-buttons button.download-btn:hover:not(:disabled){background:var(--blue-hover)}.json-format .output-stats{color:var(--text-grey);font-size:12px;font-family:var(--font-jet-mono);border-bottom:1px solid #e1e5e9;align-items:center;gap:12px;padding:8px;display:flex}.json-format .output-stats span{cursor:default;background:#edf2f7;border-radius:4px;padding:2px 6px}.json-format .output-buttons .copy-btn.success{color:#fff;background:#10b981;border-color:#10b981}.json-format .output-buttons .copy-btn.success:hover{background:#10b981}.json-format .clear-btn{color:#fff;background:#ef4444;border-color:#ef4444}.json-format .clear-btn:hover:not(:disabled){background:#dc2626}.json-format #keys-select,.json-format #option-select,.json-format #new-key-value,.json-format #new-key,.json-format #newkey-string-value{font-weight:700;font-family:var(--font-jet-mono)}.json-format #option-select,.json-format #new-key-value{text-transform:uppercase}.json-format #new-key,.json-format #newkey-string-value{cursor:initial;text-transform:initial}.json-format #new-key::placeholder,.json-format #newkey-string-value::placeholder{font-style:italic}.json-format .select-box{background:var(--blue);color:var(--bg);border-radius:4px;flex-direction:column;gap:4px;padding:4px 6px;display:flex}.json-format .select-box span{cursor:default;text-transform:uppercase;font-size:14px;font-family:var(--font-jet-mono);border-radius:4px;margin-left:4px}.json-format .key-input{background:#fff;border:1px solid #d1d5db;border-radius:4px;outline:none;padding:10px 16px;font-size:14px;font-weight:700}.json-format .accept-button{height:100%}.json-format .output-content{flex:1;display:flex;position:relative}.json-format .output-textarea{resize:none;width:100%;font-family:var(--font-jet-mono);background:#fff;border:none;outline:none;flex:1;padding:16px;font-size:14px;line-height:1.5}.json-format .output-textarea::placeholder{font-family:16px;color:var(--text-grey);font-style:italic}.json-format .output-textarea:focus{outline:none}.json-format .processing-indicator{color:#6b7280;justify-content:center;align-items:center;gap:8px;height:200px;display:flex}.json-format .spinner{border:2px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;width:16px;height:16px;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
.json-format-container{flex-direction:column;height:100vh;display:flex}.json-format{flex:1;display:flex}
@media (max-width:1860px){.json-format-container .input-container{width:35%}.json-format-container .output-container{width:65%}}@media (max-width:1430px){.json-format-container .input-container{width:100%}.json-format-container .output-container{flex:1;width:100%}.json-format-container .json-format{flex-direction:column}.json-format-container .input-textarea{min-height:320px;overflow:hidden}.json-format-container .output-textarea{min-height:400px;overflow:hidden}.json-format-container .output-box{gap:8px}.json-format-container .output-accept img{transform:rotate(90deg)}.json-format-container .output-head{background:var(--grey)}}@media (max-width:540px){.json-format-container .output-accept{height:48px}.json-format-container .output-head button,.json-format-container .output-head .select-box{width:100%}}@media (max-width:500px){.json-format-container .output-stats span{display:none}}@media (max-width:440px){.json-format-container .input-stats{display:none}}