.sql-to-html-converter{max-width:1200px;margin:0 auto;padding:2rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;color:#333}.sql-to-html-converter header{text-align:center;margin-bottom:2rem}.sql-to-html-converter header h1{font-size:2.5rem;color:#2c3e50;margin-bottom:.5rem}.sql-to-html-converter header p{font-size:1.1rem;color:#7f8c8d}.sql-to-html-converter .converter-container{display:flex;flex-direction:column;gap:2rem}@media(min-width:768px){.sql-to-html-converter .converter-container{flex-direction:row}}.sql-to-html-converter .input-section{flex:1;display:flex;flex-direction:column}.sql-to-html-converter .input-section h2{margin-bottom:1rem;color:#2c3e50}.sql-to-html-converter .input-section textarea{flex:1;min-height:240px;padding:1rem;border:1px solid #ddd;border-radius:4px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.9rem;line-height:1.5;resize:vertical}.sql-to-html-converter .input-section textarea:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 2px rgba(52,152,219,.2)}.sql-to-html-converter .input-section .convert-button{margin-top:1rem;padding:.8rem 1.5rem;background-color:#3498db;color:#fff;border:none;border-radius:4px;font-size:1rem;font-weight:600;cursor:pointer;transition:background-color .3s ease}.sql-to-html-converter .input-section .convert-button:hover{background-color:#2980b9}.sql-to-html-converter .input-section .convert-button:active{transform:translateY(1px)}.sql-to-html-converter .input-section .error-message{margin-top:1rem;padding:.8rem;background-color:#fde8e8;color:#e53e3e;border-radius:4px;font-size:.9rem}.sql-to-html-converter .output-section{flex:1;display:flex;flex-direction:column;gap:1.5rem}.sql-to-html-converter .code-container,.sql-to-html-converter .preview-container{border:1px solid #eaeaea;border-radius:8px;overflow:hidden}.sql-to-html-converter .preview-container{display:flex;flex-direction:column}.sql-to-html-converter .preview-container h2{padding:1rem;margin:0;background-color:#f8f9fa;border-bottom:1px solid #eaeaea;color:#2c3e50}.sql-to-html-converter .preview-container .preview-area{padding:1rem;overflow:auto;max-height:300px}.sql-to-html-converter .preview-container .preview-area .empty-preview{color:#a0aec0;font-style:italic;display:flex;justify-content:center;align-items:center;height:100px}.sql-to-html-converter .code-container{display:flex;flex-direction:column}.sql-to-html-converter .code-container .code-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;background-color:#f8f9fa;border-bottom:1px solid #eaeaea}.sql-to-html-converter .code-container .code-header h2{margin:0;color:#2c3e50}.sql-to-html-converter .code-container .code-header .copy-button{padding:.5rem 1rem;background-color:#4a5568;color:#fff;border:none;border-radius:4px;font-size:.875rem;cursor:pointer;transition:background-color .3s ease}.sql-to-html-converter .code-container .code-header .copy-button:hover{background-color:#2d3748}.sql-to-html-converter .code-container .code-header .copy-button:disabled{background-color:#cbd5e0;cursor:not-allowed}.sql-to-html-converter .code-container .code-area{padding:1rem;overflow:auto;max-height:300px;background-color:#f8f9fa}.sql-to-html-converter .code-container .code-area pre{margin:0;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.9rem;line-height:1.5;white-space:pre-wrap;word-break:break-all}.sql-to-html-converter .code-container .code-area .empty-code{color:#a0aec0;font-style:italic;display:flex;justify-content:center;align-items:center;height:100px}.sql-to-html-converter .sql-result-table h2{font-size:1.2rem;margin-bottom:1rem;color:#2c3e50}.sql-to-html-converter .sql-result-table table{width:100%;border-collapse:collapse;font-size:.9rem}.sql-to-html-converter .sql-result-table table td,.sql-to-html-converter .sql-result-table table th{padding:.75rem;text-align:left;border:1px solid #e2e8f0}.sql-to-html-converter .sql-result-table table th{background-color:#edf2f7;color:#4a5568;font-weight:600}.sql-to-html-converter .sql-result-table table tr:nth-child(2n){background-color:#f7fafc}.sql-to-html-converter .sql-result-table table tr:hover{background-color:#ebf4ff}.sql-to-html-converter footer{margin-top:3rem;text-align:center;padding-top:1.5rem;border-top:1px solid #eaeaea;color:#a0aec0;font-size:.875rem}