.html-table-generator{max-width:1200px;margin:0 auto;padding:20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;color:#333}.html-table-generator h1{text-align:center;margin-bottom:30px;color:#2c3e50}.html-table-generator .tabs{display:flex;border-bottom:1px solid #ddd;margin-bottom:20px;flex-wrap:wrap}.html-table-generator .tabs .tab-button{padding:12px 24px;background:none;border:none;border-bottom:3px solid rgba(0,0,0,0);font-size:16px;font-weight:500;cursor:pointer;transition:all .3s ease;color:#555;margin-right:10px}.html-table-generator .tabs .tab-button:hover{color:#3498db}.html-table-generator .tabs .tab-button.active{color:#3498db;border-bottom:3px solid #3498db}.html-table-generator .tabs .tab-button:focus{outline:none}.html-table-generator .tab-content{background-color:#fff;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.08);padding:24px;min-height:400px}.html-table-generator .editor-tab .controls{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.html-table-generator .editor-tab .controls .control-group{display:flex;align-items:center;gap:8px}.html-table-generator .editor-tab .controls .control-group label{font-weight:600;min-width:70px}.html-table-generator .editor-tab .controls .control-group input[type=number]{width:60px;padding:6px 10px;border:1px solid #ddd;border-radius:4px;font-size:14px}.html-table-generator .editor-tab .controls .control-group input[type=number]:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 2px rgba(52,152,219,.2)}.html-table-generator .editor-tab .controls .control-group .button-group{display:flex;gap:4px}.html-table-generator .editor-tab .controls .control-group .button-group button{width:30px;height:30px;display:flex;align-items:center;justify-content:center;background-color:#f5f5f5;border:1px solid #ddd;border-radius:4px;cursor:pointer;font-size:16px}.html-table-generator .editor-tab .controls .control-group .button-group button:hover:not(:disabled){background-color:#e9e9e9}.html-table-generator .editor-tab .controls .control-group .button-group button:disabled{opacity:.5;cursor:not-allowed}.html-table-generator .editor-tab .table-editor{overflow-x:auto;max-width:100%}.html-table-generator .editor-tab .table-editor .editor-table{width:100%;border-collapse:collapse}.html-table-generator .editor-tab .table-editor .editor-table td,.html-table-generator .editor-tab .table-editor .editor-table th{padding:8px;border:1px solid #ddd}.html-table-generator .editor-tab .table-editor .editor-table td input,.html-table-generator .editor-tab .table-editor .editor-table th input{width:100%;padding:6px 8px;border:1px solid #e0e0e0;border-radius:4px;font-size:14px}.html-table-generator .editor-tab .table-editor .editor-table td input:focus,.html-table-generator .editor-tab .table-editor .editor-table th input:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 2px rgba(52,152,219,.2)}.html-table-generator .editor-tab .table-editor .editor-table th{background-color:#f5f5f5}.html-table-generator .editor-tab .table-editor .editor-table tr:nth-child(2n) td{background-color:#fafafa}.html-table-generator .styles-tab .style-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}.html-table-generator .styles-tab .style-options .style-section h3{margin-top:0;margin-bottom:16px;font-size:18px;color:#2c3e50;border-bottom:1px solid #eee;padding-bottom:8px}.html-table-generator .styles-tab .style-options .style-section .style-group{margin-bottom:16px;display:flex;flex-direction:column;gap:6px}.html-table-generator .styles-tab .style-options .style-section .style-group label{font-size:14px;font-weight:500;color:#555}.html-table-generator .styles-tab .style-options .style-section .style-group input[type=number],.html-table-generator .styles-tab .style-options .style-section .style-group input[type=text],.html-table-generator .styles-tab .style-options .style-section .style-group select{padding:8px 10px;border:1px solid #ddd;border-radius:4px;font-size:14px}.html-table-generator .styles-tab .style-options .style-section .style-group input[type=number]:focus,.html-table-generator .styles-tab .style-options .style-section .style-group input[type=text]:focus,.html-table-generator .styles-tab .style-options .style-section .style-group select:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 2px rgba(52,152,219,.2)}.html-table-generator .styles-tab .style-options .style-section .style-group input[type=color]{width:100%;height:36px;border:1px solid #ddd;border-radius:4px;padding:2px;cursor:pointer}.html-table-generator .styles-tab .style-options .style-section .style-group.checkbox{flex-direction:row;align-items:center;gap:8px}.html-table-generator .styles-tab .style-options .style-section .style-group.checkbox input[type=checkbox]{margin:0;width:16px;height:16px}.html-table-generator .preview-tab .table-preview{overflow-x:auto;max-width:100%}@media(max-width:768px){.html-table-generator .preview-tab .table-preview .responsive-table{display:block;width:100%}.html-table-generator .preview-tab .table-preview .responsive-table tbody,.html-table-generator .preview-tab .table-preview .responsive-table td,.html-table-generator .preview-tab .table-preview .responsive-table th,.html-table-generator .preview-tab .table-preview .responsive-table thead,.html-table-generator .preview-tab .table-preview .responsive-table tr{display:block}.html-table-generator .preview-tab .table-preview .responsive-table thead tr{position:absolute;top:-9999px;left:-9999px}.html-table-generator .preview-tab .table-preview .responsive-table tr{border:1px solid #ccc;margin-bottom:10px}.html-table-generator .preview-tab .table-preview .responsive-table td{border:none!important;position:relative;padding-left:50%!important;text-align:left!important}.html-table-generator .preview-tab .table-preview .responsive-table td:before{position:absolute;left:6px;top:6px;width:45%;padding-right:10px;white-space:nowrap;font-weight:700;content:attr(data-label)}}.html-table-generator .code-tab .code-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.html-table-generator .code-tab .code-header h3{margin:0;font-size:18px;color:#2c3e50}.html-table-generator .code-tab .code-header .copy-button{padding:8px 16px;background-color:#3498db;color:#fff;border:none;border-radius:4px;font-size:14px;cursor:pointer;transition:background-color .2s ease}.html-table-generator .code-tab .code-header .copy-button:hover{background-color:#2980b9}.html-table-generator .code-tab .code-header .copy-button:focus{outline:none;box-shadow:0 0 0 2px rgba(52,152,219,.4)}.html-table-generator .code-tab .code-preview{background-color:#f5f5f5;border:1px solid #ddd;border-radius:4px;padding:16px;max-height:400px;overflow-y:auto;margin:0;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;font-size:14px;white-space:pre-wrap;word-break:break-all;color:#333;line-height:1.5}@media(max-width:768px){.html-table-generator{padding:10px}.html-table-generator .tabs .tab-button{padding:10px 15px;font-size:14px}.html-table-generator .tab-content{padding:16px}.html-table-generator .styles-tab .style-options{grid-template-columns:1fr}}