html{overflow-x:clip}body{overflow:visible;--bg-card:var(--surface);--bg-base:var(--paper);--text-main:var(--ink);--text-muted:var(--muted);--border-color:var(--line);--accent:#0087ac}.site-header{position:sticky;top:0;z-index:100}.sql-intro{position:relative;isolation:isolate}.sql-intro:before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:0 -20px -35px 25%;background:url("sql-art-v1.png") center right/cover no-repeat;opacity:.45;mask-image:linear-gradient(90deg,transparent,#000 40%,#000 90%,transparent),linear-gradient(transparent,#000 18%,#000 65%,transparent);mask-composite:intersect}[data-theme=dark] .sql-intro:before{opacity:.22;mix-blend-mode:screen}.sql-intro .editor-icon{background:linear-gradient(145deg,#72b8e4,#5067bb)}.sql-file-toolbar{display:flex;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);margin-bottom:24px}.sql-file-toolbar span{margin-right:auto;font-size:12px;color:var(--muted)}.sql-workspace{padding:0;gap:20px;height:680px;scroll-margin-top:100px;min-width:0}.editor-panel{min-width:0;min-height:0;display:grid;grid-template-rows:minmax(240px,.9fr) minmax(240px,1.1fr)}.editor-container,.results-container,.schema-panel{min-height:0;border-color:var(--line);box-shadow:none;border-radius:8px}.editor-toolbar{margin:0;background:var(--surface);flex:none;gap:10px}.editor-toolbar>div{flex-wrap:wrap}.btn-run{border-radius:7px;min-height:38px;font-size:12px;padding:9px 12px;background:#007da5;color:white}#btnExport{background:var(--surface)!important;color:var(--ink);border:1px solid var(--line)}#sqlInput{min-height:100px;flex:1;background:var(--surface);color:var(--ink);font:13px/1.7 Consolas,monospace}#editorLock{background:var(--surface)!important;backdrop-filter:none!important;border:1px dashed var(--line);text-align:center;padding:20px}#editorLock h3{font-size:22px!important;letter-spacing:-.5px}#editorLock p{line-height:1.7}.sql-dropzone{border:1px dashed var(--line);background:transparent}.sql-dropzone:hover{border-color:var(--line);background:transparent}.results-body{overflow:auto;min-height:0}.sql-table{border-collapse:separate;border-spacing:0;min-width:100%}.sql-table th{position:sticky;top:0;background:var(--surface);color:var(--muted)}.sql-table td{padding:10px 12px}.editor-guide{margin-top:70px}@media(max-width:760px){.sql-workspace{grid-template-columns:minmax(0,1fr);height:auto;padding:0}.schema-panel{max-height:300px}.editor-panel{grid-template-rows:300px 360px}.editor-toolbar{flex-wrap:wrap}.sql-intro:before{inset:0 -10px -20px 15%;opacity:.25}}

.sql-guide-panel{padding:18px 0;margin-bottom:24px;border-bottom:1px solid var(--line)}.sql-guide-panel summary{cursor:pointer;font-size:14px;font-weight:600}.sql-guide-panel p{font-size:13px;line-height:1.8;color:var(--muted);max-width:950px}.sql-example-controls{display:flex;gap:16px;flex-wrap:wrap;margin:20px 0}.sql-example-controls label{font-size:12px;display:flex;flex-direction:column;gap:8px}.sql-example-controls select{background:var(--surface);color:var(--ink);border:1px solid var(--line);padding:9px;border-radius:7px;max-width:100%}#examplePreview{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--surface);padding:16px;border:1px solid var(--line);border-radius:8px;font:13px/1.8 Consolas,monospace}.sql-example-controls label{min-width:0;max-width:100%}

.sql-example-controls input{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:9px 12px}.query-library-columns{display:grid;grid-template-columns:1fr 1fr;gap:30px;min-width:0}.query-library-columns section{min-width:0}.query-library-columns h3{font-size:15px}.query-library-columns article{border-top:1px solid var(--line);padding:15px 0}.query-library-columns strong{font-size:13px}.query-library-columns pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:110px;overflow:auto;font:12px/1.7 Consolas,monospace;color:var(--muted)}.query-library-columns button{margin-right:8px;margin-top:8px}@media(max-width:760px){.query-library-columns{grid-template-columns:1fr}}

.result-pagination{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--line);flex:none}.result-pagination span{margin-right:auto;font-size:12px;color:var(--muted)}.results-header{flex:none}.results-body{flex:1;min-height:0}