.query-form-container{max-width:800px;margin:0 auto;padding:2rem;background:var(--background-light);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);animation:fadeIn .6s ease-out}.query-form-header{text-align:center;margin-bottom:2rem}.query-form-title{font-size:2.5rem;font-weight:700;color:var(--text-primary);margin-bottom:.5rem;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.query-form-title-img{height:1.5em;width:auto;vertical-align:middle}.query-form-subtitle{font-size:1rem;color:var(--text-secondary);line-height:1.3;text-align:justify}.query-form-subtitle ul{padding:.8rem 2.5rem}.query-form{margin-bottom:2rem}.input-group{margin-bottom:1.5rem}.input-label{display:block;font-size:1rem;font-weight:600;color:var(--text-primary);margin-bottom:.5rem}.input-wrapper{position:relative}.question-input{width:100%;padding:1rem;border:2px solid var(--border-color);border-radius:var(--radius-md);font-size:1rem;font-family:inherit;line-height:1.5;resize:vertical;min-height:80px;transition:all .2s ease;background:var(--background-light)}.question-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #667eea1a}.question-input.error{border-color:#e53e3e;box-shadow:0 0 0 3px #e53e3e1a}.question-input:disabled{background-color:var(--background-card);cursor:not-allowed;opacity:.7}.input-footer{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem;font-size:.875rem}.char-count{color:var(--text-light);font-weight:500}.char-count.warning{color:#d69e2e}.error-message{color:#e53e3e;font-weight:500}.form-actions{text-align:center}.submit-button{display:inline-flex;align-items:center;gap:.5rem;padding:1rem 2rem;font-size:1.1rem;font-weight:600;color:#fff;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));border:none;border-radius:var(--radius-md);cursor:pointer;transition:all .2s ease;box-shadow:var(--shadow-md);min-width:200px}.submit-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lg)}.submit-button:active:not(:disabled){transform:translateY(0)}.submit-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.submit-button.loading{cursor:wait}.button-icon{font-size:1.2rem}.spinner{display:inline-block;width:1rem;height:1rem;border:2px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin 1s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}.query-form-examples{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--border-color)}.examples-title{font-size:1.2rem;font-weight:600;color:var(--text-primary);margin-bottom:1rem;text-align:center}.examples-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}.example-button{padding:.75rem 1rem;font-size:.9rem;color:var(--text-secondary);background:var(--background-card);border:1px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;transition:all .2s ease;text-align:left;line-height:1.4;font-family:inherit}.example-button:hover:not(:disabled){background:var(--primary-color);color:#fff;border-color:var(--primary-color);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.example-button:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 768px){.query-form-container{padding:1.5rem;margin:1rem}.query-form-title{font-size:2rem}.examples-grid{grid-template-columns:1fr}.submit-button{width:100%;min-width:auto}}@media (max-width: 480px){.query-form-container{padding:1rem;margin:.5rem}.query-form-title{font-size:1.75rem}.query-form-subtitle{font-size:1rem}}.result-card{max-width:900px;margin:2rem auto;background:var(--background-light);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;animation:slideIn .4s ease-out}.result-header{display:flex;justify-content:space-between;align-items:flex-start;padding:1.5rem;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));color:#fff;gap:1rem}.result-question{display:flex;align-items:flex-start;gap:.75rem;flex:1}.question-icon{font-size:1.5rem;margin-top:.25rem}.question-text{font-size:1.1rem;font-weight:500;line-height:1.4;margin:0}.new-query-button{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background:#fff3;border:1px solid rgba(255,255,255,.3);border-radius:var(--radius-md);color:#fff;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.new-query-button:hover{background:#ffffff4d;transform:translateY(-1px)}.button-icon{font-size:1rem}.result-tabs{display:flex;background:var(--background-card);border-bottom:1px solid var(--border-color)}.tab-button{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem;background:none;border:none;border-bottom:3px solid transparent;color:var(--text-secondary);font-weight:500;cursor:pointer;transition:all .2s ease}.tab-button:hover{background:#667eea1a;color:var(--primary-color)}.tab-button.active{color:var(--primary-color);border-bottom-color:var(--primary-color);background:#667eea0d}.tab-icon{font-size:1.1rem}.tab-content{padding:2rem;min-height:300px}.content-title{font-size:1.3rem;font-weight:600;color:var(--text-primary);margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}.sql-content{animation:fadeIn .3s ease-out}.sql-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.copy-button{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--primary-color);border:none;border-radius:var(--radius-md);color:#fff;font-weight:500;cursor:pointer;transition:all .2s ease}.copy-button:hover{background:var(--secondary-color);transform:translateY(-1px)}.copy-button.copied{background:#38a169}.copy-icon{font-size:.9rem}.sql-code{background:#1a202c;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border-color)}.sql-pre{margin:0;padding:1.5rem;overflow-x:auto;font-family:Fira Code,Monaco,Consolas,monospace;font-size:.9rem;line-height:1.5;color:#e2e8f0}.sql-code-content{background:none;border:none;padding:0;margin:0;font-family:inherit;font-size:inherit;line-height:inherit;color:inherit}.sql-keyword{color:#63b3ed;font-weight:600}.explanation-content,.optimization-content{animation:fadeIn .3s ease-out}.content-text{background:var(--background-card);padding:1.5rem;border-radius:var(--radius-md);border-left:4px solid var(--primary-color)}.content-text p{margin:0;line-height:1.6;color:var(--text-secondary);font-size:1rem}.result-footer{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;background:var(--background-card);border-top:1px solid var(--border-color);gap:1rem}.result-meta{display:flex;gap:1.5rem}.meta-item{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--text-light)}.meta-icon{font-size:1rem}.result-actions{display:flex;gap:.75rem}.action-button{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--background-light);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-secondary);font-weight:500;cursor:pointer;transition:all .2s ease;text-decoration:none;font-size:.875rem}.action-button:hover{background:var(--primary-color);color:#fff;border-color:var(--primary-color);transform:translateY(-1px)}.action-button.secondary{background:transparent}.action-icon{font-size:.9rem}@media (max-width: 768px){.result-header{flex-direction:column;align-items:stretch;gap:1rem}.result-question{flex-direction:column;align-items:flex-start;gap:.5rem}.question-text{font-size:1rem}.new-query-button{align-self:flex-end}.result-tabs{flex-wrap:wrap}.tab-button{min-width:120px;font-size:.9rem;padding:.75rem .5rem}.tab-content{padding:1.5rem}.sql-header{flex-direction:column;align-items:stretch;gap:1rem}.copy-button{align-self:flex-end}.result-footer{flex-direction:column;align-items:stretch;gap:1rem}.result-meta,.result-actions{justify-content:center}}@media (max-width: 480px){.result-card{margin:1rem}.result-header,.tab-content{padding:1rem}.sql-pre{padding:1rem;font-size:.8rem}.result-tabs{flex-direction:column}.tab-button{min-width:auto}}#table-container{background-color:#f8f9fa;border-radius:12px;box-shadow:0 4px 12px #0000001a;padding:24px;margin-top:30px}#table-container table{width:100%;border-collapse:collapse}#table-container th,#table-container td{text-align:left;padding:12px;border-bottom:1px solid #dee2e6}#table-container th{background-color:var(--primary-color);color:#fff}#table-container tbody tr:nth-child(2n){background-color:#f2f2f2}#table-container tbody tr:hover{background-color:#e9ecef}.app{min-height:100vh;display:flex;flex-direction:column}.app-main{flex:1;padding:2rem 0}.api-status-banner{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:1rem;font-weight:500;text-align:center;animation:slideIn .4s ease-out}.api-status-banner.checking{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#fff}.api-status-banner.healthy{background:linear-gradient(135deg,#10b981,#059669);color:#fff}.api-status-banner.error{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}.status-icon{font-size:1.2rem}.retry-button{margin-left:1rem;padding:.5rem 1rem;background:#fff3;border:1px solid rgba(255,255,255,.3);border-radius:var(--radius-md);color:#fff;font-weight:500;cursor:pointer;transition:all .2s ease}.retry-button:hover{background:#ffffff4d;transform:translateY(-1px)}.loading-state{display:flex;justify-content:center;align-items:center;padding:4rem 2rem;text-align:center}.loading-content{max-width:400px}.loading-spinner{width:4rem;height:4rem;border:4px solid var(--border-color);border-top:4px solid var(--primary-color);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1.5rem}.loading-content h3{font-size:1.5rem;font-weight:600;color:var(--text-primary);margin-bottom:.5rem}.loading-content p{color:var(--text-secondary);font-size:1rem}.error-message{max-width:800px;margin:2rem auto;padding:2rem;background:#fef2f2;border:1px solid #fecaca;border-radius:var(--radius-lg);text-align:center;animation:fadeIn .6s ease-out}.error-header{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-bottom:1rem}.error-icon{font-size:2rem}.error-header h3{font-size:1.5rem;font-weight:600;color:#dc2626;margin:0}.error-text{color:#7f1d1d;font-size:1.1rem;line-height:1.6;margin-bottom:1.5rem}.app-footer{margin-top:auto;padding:2rem 0;background:var(--background-card);border-top:1px solid var(--border-color)}.footer-text{text-align:center;color:var(--text-secondary);font-size:1rem;margin-bottom:1rem}.footer-links{display:flex;justify-content:center;align-items:center;gap:1rem;flex-wrap:wrap}.footer-link{color:var(--primary-color);text-decoration:none;font-weight:500;transition:color .2s ease}.footer-link:hover{color:var(--secondary-color);text-decoration:underline}.footer-separator{color:var(--text-light);font-weight:300}@media (max-width: 768px){.app-main{padding:1rem 0}.api-status-banner{flex-direction:column;gap:.5rem;padding:1rem .5rem}.retry-button{margin-left:0;margin-top:.5rem}.loading-state{padding:2rem 1rem}.loading-spinner{width:3rem;height:3rem}.loading-content h3{font-size:1.25rem}.error-message{margin:1rem;padding:1.5rem}.error-header h3{font-size:1.25rem}.footer-links{flex-direction:column;gap:.5rem}.footer-separator{display:none}}@media (max-width: 480px){.app-main{padding:.5rem 0}.api-status-banner{padding:.75rem .5rem;font-size:.9rem}.loading-state{padding:1.5rem .5rem}.error-message{margin:.5rem;padding:1rem}.error-header{flex-direction:column;gap:.5rem}.error-header h3{font-size:1.1rem}.error-text{font-size:1rem}}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.6}:root{--primary-color: #092E44;--secondary-color: #2E79B6;--accent-color: #f093fb;--text-primary: #2d3748;--text-secondary: #4a5568;--text-light: #718096;--background-light: #ffffff;--background-card: #f7fafc;--border-color: #e2e8f0;--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem}.container{max-width:1200px;margin:0 auto;padding:0 1rem}.text-center{text-align:center}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.fade-in{animation:fadeIn .6s ease-out}.slide-in{animation:slideIn .4s ease-out}.pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@media (max-width: 768px){.container{padding:0 .5rem}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--background-light)}::-webkit-scrollbar-thumb{background:var(--primary-color);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--secondary-color)}