
.sql-dsl-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: 100px; 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 select { 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; display: none; }
.error-message:empty { display: none; }
.output-controls { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
#dslOutput { width: 100%; min-height: 100px; padding: 12px; border: 2px solid #e9ecef; border-radius: 6px; font-family: monospace; font-size: 14px; resize: vertical; background: white; }

.en-sql-dsl-style-2{margin-top:1rem;padding:10px 12px;background:#e7f5ec;border:1px solid #b7e1c6;border-radius:6px;color:#1e5631;}
.en-sql-dsl-style-3{margin-top:0.5rem;padding:10px 12px;background:#fff3cd;border:1px solid #ffe69c;border-radius:6px;color:#664d03;}
.en-sql-dsl-style-4{margin: 1.5rem 0;}
.en-sql-dsl-style-5{display:none;}