.xmljson-converter { max-width: 800px; margin: 0 auto; }
.tool-description { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; padding: 1.5rem; margin-bottom: 2rem; }
.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--text-color); }
.form-group textarea { width: 100%; min-height: 120px; padding: 12px; border: 2px solid #e9ecef; border-radius: 6px; font-family: monospace; font-size: 14px; resize: vertical; background: white; }
.form-group textarea:focus { outline: none; border-color: var(--primary-color); }
.form-group input[type="text"] { padding: 8px 12px; border: 2px solid #e9ecef; border-radius: 6px; font-size: 14px; background: white; }
.btn { background: var(--primary-color); color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; transition: background 0.3s ease; }
.btn:hover { background: var(--primary-color-dark); }
.btn-sm { padding: 8px 16px; font-size: 12px; }
.error-message { background: #ffe6e6; color: #d63384; padding: 12px; border-radius: 6px; margin: 1rem 0; border: 1px solid #f5c6cb; }
.output-controls { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
#outputData { width: 100%; min-height: 200px; padding: 12px; border: 2px solid #e9ecef; border-radius: 6px; font-family: monospace; font-size: 14px; resize: vertical; background: white; }

.en-xml-json-style-2{background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 6px; padding: 1rem; margin-bottom: 1.5rem;}
.en-xml-json-style-3{margin: 0 0 0.5rem 0; color: #856404;}
.en-xml-json-style-4{margin: 0; color: #856404;}
.en-xml-json-style-5{margin: 0.5rem 0 0 0;}
.en-xml-json-style-6{background: #007bff; color: white; text-decoration: none; padding: 0.5rem 1rem; border-radius: 4px;}
.en-xml-json-style-7{max-width:120px;display:inline-block;}
.en-xml-json-style-8{margin: 1.5rem 0;}
.en-xml-json-style-9{display:none;}