.query-form-container{max-width:800px;margin:2rem auto;padding:2rem;background:#fff;border:3px solid #000000;border-radius:0;box-shadow:8px 8px #000;animation:fadeIn .4s steps(6,end)}.query-form-header{text-align:center;margin-bottom:2rem}.query-form-title{font-size:2rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#000;margin-bottom:1rem;padding-bottom:1rem;border-bottom:3px solid #000000}.query-form-title-img{height:1.4em;width:auto;vertical-align:middle;filter:grayscale(1) contrast(1.1)}.query-form-subtitle{font-size:.9rem;color:#000;line-height:1.5;text-align:left}.query-form-subtitle ul{padding:.8rem 1.5rem;list-style:square}.query-form-subtitle li{margin-bottom:.4rem}.query-form{margin-bottom:2rem}.input-group{margin-bottom:1.5rem}.input-label{display:block;font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#000;margin-bottom:.5rem}.input-label:before{content:"> "}.input-wrapper{position:relative}.question-input{width:100%;padding:1rem;border:2px solid #000000;border-radius:0;font-size:1rem;font-family:var(--font-mono);line-height:1.5;resize:vertical;min-height:80px;background:#fff;color:#000;transition:none}.question-input:focus{outline:none;box-shadow:4px 4px #000}.question-input.error{border-width:3px;border-style:dashed}.question-input:disabled{background:#fff;cursor:not-allowed;opacity:.5}.question-input::placeholder{color:#000;opacity:.45}.input-footer{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem;font-size:.8rem}.char-count{color:#000;font-weight:700}.char-count.warning{color:#000;text-decoration:underline}.error-message{color:#000;font-weight:700;text-transform:uppercase}.form-actions{text-align:center}.submit-button{display:inline-flex;align-items:center;gap:.5rem;padding:1rem 2rem;font-size:1rem;font-family:var(--font-mono);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#fff;background:#000;border:2px solid #000000;border-radius:0;cursor:pointer;box-shadow:4px 4px #000;transition:none;min-width:200px;justify-content:center}.submit-button .button-icon{filter:brightness(0) invert(1)}.submit-button:hover:not(:disabled){transform:translate(2px,2px);box-shadow:2px 2px #000}.submit-button:active:not(:disabled){transform:translate(4px,4px);box-shadow:0 0 #000}.submit-button:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:4px 4px #000}.submit-button.loading{cursor:wait}.button-icon{font-size:1.1rem}.spinner{display:inline-block;width:1rem;height:1rem;border:3px solid #ffffff;border-top-color:transparent;border-radius:0;animation:spin 1s steps(8,end) infinite}@keyframes spin{to{transform:rotate(360deg)}}.query-form-examples{margin-top:2rem;padding-top:2rem;border-top:3px solid #000000}.examples-title{font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#000;margin-bottom:1rem;text-align:center;filter:brightness(0)}.examples-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}.example-button{padding:.75rem 1rem;font-size:.85rem;color:#000;background:#fff;border:2px solid #000000;border-radius:0;cursor:pointer;transition:none;text-align:left;line-height:1.4;font-family:var(--font-mono);box-shadow:3px 3px #000}.example-button:before{content:"$ ";font-weight:700}.example-button:hover:not(:disabled){background:#000;color:#fff;transform:translate(1px,1px);box-shadow:2px 2px #000}.example-button:disabled{opacity:.4;cursor:not-allowed}@media (max-width: 768px){.query-form-container{padding:1.5rem;margin:1rem}.query-form-title{font-size:1.6rem}.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.35rem}.query-form-subtitle{font-size:.85rem}}.result-card{max-width:900px;margin:2rem auto;background:#fff;border:3px solid #000000;border-radius:0;box-shadow:8px 8px #000;overflow:hidden;animation:slideIn .3s steps(8,end)}.result-header{display:flex;justify-content:space-between;align-items:flex-start;padding:1.5rem;background:#000;color:#fff;gap:1rem;border-bottom:3px solid #000000}.result-question{display:flex;align-items:flex-start;gap:.75rem;flex:1}.question-icon{font-size:1.4rem;margin-top:.2rem;filter:brightness(0) invert(1)}.question-text{font-size:1rem;font-weight:700;line-height:1.4;margin:0}.new-query-button{display:flex;align-items:center;gap:.5rem;padding:.6rem 1rem;background:#fff;border:2px solid #000000;border-radius:0;color:#000;font-family:var(--font-mono);font-weight:700;text-transform:uppercase;font-size:.8rem;cursor:pointer;box-shadow:3px 3px #fff;transition:none;white-space:nowrap}.new-query-button:hover{transform:translate(2px,2px);box-shadow:1px 1px #fff}.button-icon{font-size:1rem}.result-tabs{display:flex;background:#fff;border-bottom:3px solid #000000}.tab-button{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem;background:#fff;border:none;border-right:2px solid #000000;color:#000;font-family:var(--font-mono);font-weight:700;text-transform:uppercase;font-size:.85rem;letter-spacing:.04em;cursor:pointer;transition:none}.tab-button:last-child{border-right:none}.tab-button:hover{background:#000;color:#fff}.tab-button:hover .tab-icon{filter:brightness(0) invert(1)}.tab-button.active{background:#000;color:#fff}.tab-button.active .tab-icon{filter:brightness(0) invert(1)}.tab-icon{font-size:1rem}.tab-content{padding:2rem;min-height:300px}.content-title{font-size:1.1rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#000;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}.sql-content{animation:fadeIn .2s steps(4,end)}.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:#000;border:2px solid #000000;border-radius:0;color:#fff;font-family:var(--font-mono);font-weight:700;text-transform:uppercase;font-size:.8rem;cursor:pointer;box-shadow:3px 3px #000;transition:none}.copy-button .copy-icon{filter:brightness(0) invert(1)}.copy-button:hover{transform:translate(2px,2px);box-shadow:1px 1px #000}.copy-button.copied{background:#fff;color:#000}.copy-button.copied .copy-icon{filter:brightness(0)}.copy-icon{font-size:.85rem}.sql-code{background:#000;border-radius:0;overflow:hidden;border:3px solid #000000}.sql-pre{margin:0;padding:1.5rem;overflow-x:auto;font-family:var(--font-mono);font-size:.9rem;line-height:1.5;color:#fff}.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:#fff;font-weight:700;text-decoration:underline}.explanation-content,.optimization-content{animation:fadeIn .2s steps(4,end)}.content-text{background:#fff;padding:1.5rem;border-radius:0;border:2px solid #000000;border-left:8px solid #000000}.content-text p{margin:0;line-height:1.6;color:#000;font-size:.95rem}.result-footer{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;background:#fff;border-top:3px solid #000000;gap:1rem}.result-meta{display:flex;gap:1.5rem}.meta-item{display:flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:700;color:#000}.meta-icon{font-size:.95rem}.result-actions{display:flex;gap:.75rem}.action-button{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#fff;border:2px solid #000000;border-radius:0;color:#000;font-family:var(--font-mono);font-weight:700;text-transform:uppercase;cursor:pointer;transition:none;text-decoration:none;font-size:.8rem;box-shadow:3px 3px #000}.action-button:hover{background:#000;color:#fff;transform:translate(2px,2px);box-shadow:1px 1px #000}.action-button:hover .action-icon{filter:brightness(0) invert(1)}.action-button.secondary{background:#fff}.action-icon{font-size:.85rem}@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:.95rem}.new-query-button{align-self:flex-end}.result-tabs{flex-wrap:wrap}.tab-button{min-width:120px;font-size:.8rem;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;border-right:none;border-bottom:2px solid #000000}}#table-container{background:#fff;border:3px solid #000000;border-radius:0;box-shadow:6px 6px #000;padding:0;margin-top:1.5rem;overflow-x:auto}#table-container table{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:.85rem}#table-container th,#table-container td{text-align:left;padding:10px 12px;border:2px solid #000000}#table-container th{background:#000;color:#fff;text-transform:uppercase;letter-spacing:.05em;font-weight:700}#table-container tbody tr:hover{background:#000;color:#fff}#results{display:block;white-space:pre-wrap;word-break:break-word;font-family:var(--font-mono);font-size:.85rem;color:#000}.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:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;text-align:center;border-bottom:3px solid #000000;animation:slideIn .3s steps(8,end)}.api-status-banner.checking{background:#fff;color:#000;border-bottom-style:dashed;animation:blink 1s steps(1,end) infinite}.api-status-banner.healthy{background:#fff;color:green}.api-status-banner.error{background:#fff;color:#c00;border-bottom-width:5px}.status-icon{font-size:1.1rem}.retry-button{margin-left:1rem;padding:.4rem .9rem;background:#fff;border:2px solid #000000;border-radius:0;color:#000;font-family:var(--font-mono);font-weight:700;text-transform:uppercase;cursor:pointer;box-shadow:2px 2px #000;transition:none}.retry-button:hover{transform:translate(2px,2px);box-shadow:0 0 #000}.loading-state{display:flex;justify-content:center;align-items:center;padding:4rem 2rem;text-align:center}.loading-content{max-width:400px}.loading-spinner{width:3rem;height:3rem;border:4px solid #000000;border-top-color:#fff;border-radius:0;animation:spin 1s steps(8,end) infinite;margin:0 auto 1.5rem}.loading-content h3{font-size:1.3rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#000;margin-bottom:.5rem}.loading-content p{color:#000;font-size:.95rem}.error-message{max-width:800px;margin:2rem auto;padding:2rem;background:#fff;border:3px solid #000000;border-radius:0;box-shadow:6px 6px #000;text-align:center;animation:fadeIn .4s steps(6,end)}.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.4rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#000;margin:0}.error-text{color:#000;font-size:1rem;line-height:1.6;margin-bottom:1.5rem}.app-footer{margin-top:auto;padding:2rem 0;background:#fff;border-top:3px solid #000000}.footer-text{text-align:center;color:#000;font-size:.9rem;margin-bottom:1rem}.footer-links{display:flex;justify-content:center;align-items:center;gap:1rem;flex-wrap:wrap}.footer-link{color:#000;text-decoration:underline;font-weight:700;text-transform:uppercase;font-size:.8rem;letter-spacing:.05em}.footer-link:hover{background:#000;color:#fff;text-decoration:none}.footer-separator{color:#000;font-weight:700}@media (max-width: 768px){.app-main{padding:1rem 0}.api-status-banner{flex-direction:column;gap:.5rem;padding:.9rem .5rem}.retry-button{margin-left:0;margin-top:.5rem}.loading-state{padding:2rem 1rem}.loading-content h3{font-size:1.15rem}.error-message{margin:1rem;padding:1.5rem}.error-header h3{font-size:1.2rem}.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:.75rem}.loading-state{padding:1.5rem .5rem}.error-message{margin:.5rem;padding:1rem}.error-header{flex-direction:column;gap:.5rem}.error-header h3{font-size:1rem}.error-text{font-size:.95rem}}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Courier New,Courier,monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.6;background:#fff;color:#000}:root{--bg: #ffffff;--fg: #000000;--border: 2px solid #000000;--border-thick: 3px solid #000000;--shadow-hard: 4px 4px 0 #000000;--shadow-hard-sm: 2px 2px 0 #000000;--font-mono: "Courier New", Courier, monospace;--primary-color: #000000;--secondary-color: #000000;--accent-color: #000000;--text-primary: #000000;--text-secondary: #000000;--text-light: #000000;--background-light: #ffffff;--background-card: #ffffff;--border-color: #000000;--shadow-sm: 2px 2px 0 #000000;--shadow-md: 4px 4px 0 #000000;--shadow-lg: 4px 4px 0 #000000;--radius-sm: 0;--radius-md: 0;--radius-lg: 0}.container{max-width:1000px;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(12px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes blink{0%,49%{opacity:1}50%,to{opacity:0}}.fade-in{animation:fadeIn .4s steps(6,end)}.slide-in{animation:slideIn .3s steps(8,end)}.pulse{animation:blink 1s steps(1,end) infinite}.status-icon,.button-icon,.tab-icon,.copy-icon,.action-icon,.meta-icon,.question-icon,.error-icon{filter:brightness(0)}@media (max-width: 768px){.container{padding:0 .5rem}}::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:#fff;border-left:2px solid #000000}::-webkit-scrollbar-thumb{background:#000;border-radius:0}::-webkit-scrollbar-thumb:hover{background:#000;border:2px solid #000000}
