*{box-sizing:border-box}
body{margin:0;background:#edf2fa;color:#16364c;font:13px/1.45 "Segoe UI",Arial,sans-serif}
header{height:46px;background:#12394a;color:#fff;display:flex;align-items:center;gap:20px;padding:0 max(20px,calc((100% - 1040px)/2))}
header a{color:#fff;text-decoration:none;border:1px solid #52707c;border-radius:6px;padding:4px 10px;font-size:12px}
header strong{font-size:14px}header strong span{font-weight:400;color:#c6d7e0}header .badge{margin-left:auto;color:#ffc357;font-size:12px}
main{width:calc(100% - 32px);max-width:1040px;margin:14px auto;display:grid;gap:8px}
h1{font-size:19px;line-height:1.25;margin:0}p{margin:3px 0 0;color:#587087}
.heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.heading p{font-size:12px}.eyebrow{display:none}
.card{background:#fff;border:1px solid #d7e1ef;border-radius:9px;overflow:hidden;min-width:0}
.connection{padding:10px 12px}.pickers{display:grid;grid-template-columns:.9fr 1.35fr 1.05fr auto;gap:10px;align-items:end}
label{font-size:12px;font-weight:600}
input,select{display:block;width:100%;height:32px;margin-top:4px;border:1px solid #c9d7e7;border-radius:6px;background:#fbfcff;padding:0 8px;color:#163b51;font:12px "Segoe UI",sans-serif;min-width:0}
button{border:0;border-radius:6px;padding:7px 11px;background:#123e52;color:#fff;cursor:pointer;font:600 12px/1.4 "Segoe UI",sans-serif;white-space:nowrap}
button:hover:not(:disabled){background:#20617a}button:disabled{opacity:.45;cursor:not-allowed}
.secondary{background:#f0f5fa;color:#24475d;border:1px solid #d6e1ed}.secondary:hover:not(:disabled){background:#e4edf7}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #e5a820;outline-offset:2px}
.context{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:7px;color:#5a7285;font-size:11px}
.tag{display:inline-block;background:#eaf2fc;border-radius:5px;padding:2px 7px;font-size:11px}
.bar{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;border-bottom:1px solid #e0e8f2;gap:10px;min-height:34px}
.bar h2{font-size:13px;margin:0}.bar>div{display:flex;align-items:center;gap:8px}.step{font-size:11px;color:#788b9e;margin-right:7px}.hint{font-size:11px;color:#657b90}
textarea{display:block;width:100%;height:100px;min-height:100px;max-height:240px;resize:vertical;border:0;background:#112638;color:#d9eeff;padding:10px 14px;font:13px/20px Consolas,monospace;tab-size:2;overflow:auto}
.toolbar{padding:7px 12px;display:flex;justify-content:space-between;align-items:center;gap:10px}.toolbar span{font-size:11px;color:#62778c}
#run{background:#f5b534;color:#142c40}
pre{margin:0;padding:10px 14px;height:132px;overflow:auto;font:12px/18px Consolas,monospace;white-space:pre;user-select:text;color:#24465e}
.footnote{padding:5px 12px;background:#f8faff;color:#657b90;font-size:11px}
#notice{min-height:17px;margin:0;font-size:12px;overflow-wrap:anywhere}#notice.error{color:#a23131}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
dialog{border:1px solid #ccd9e8;border-radius:12px;padding:22px;max-width:min(520px,calc(100% - 24px));color:#173a50}
dialog::backdrop{background:#081f36aa}dialog h2{margin-top:0}dialog .toolbar{padding:12px 0 0}
@media(min-width:901px) and (max-height:700px){main{margin:8px auto;gap:6px}.heading p{display:none}textarea{height:88px;min-height:88px;padding:4px 14px}pre{height:96px}.connection{padding:8px 12px}}
@media(max-width:900px){.pickers{grid-template-columns:1fr 1fr}.hint{display:none}main{max-width:760px}header{padding:0 16px}.heading p{max-width:350px}}
@media(max-width:520px){main{width:calc(100% - 20px);margin:10px auto}.pickers{grid-template-columns:1fr}.heading,.toolbar{flex-direction:column;align-items:stretch}.bar{flex-wrap:wrap}header{gap:10px}header strong{font-size:12px}header .badge{display:none}input,select{font-size:16px;height:38px}textarea{font-size:14px}.context{gap:6px}.bar>div{flex-wrap:wrap}}#result{height:132px;overflow:auto;position:relative;font:12px/18px Consolas,monospace;user-select:text}
#result pre{height:auto;min-height:0;overflow:visible;padding:8px 12px}
.sql-grid{table-layout:fixed;border-collapse:separate;border-spacing:0;font:12px/18px Consolas,monospace}
.sql-grid th{position:sticky;top:0;z-index:1;background:#eaf1fa;text-align:left;font-weight:600;padding:7px 12px;border-bottom:1px solid #ccd9e8}
.sql-grid th>span:first-child{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sql-grid td{padding:5px 12px;border-bottom:1px solid #e5edf5;border-right:1px solid #e5edf5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sql-grid tbody tr:nth-child(even){background:#f6f9fd}.sql-grid tbody tr:hover{background:#eaf4fa}
.column-resizer{position:absolute;right:0;top:0;width:10px;height:100%;cursor:col-resize;touch-action:none;border-right:2px solid #b5c7db}
.column-resizer:hover,.column-resizer:focus-visible{background:#f5b534;outline:none}.grid-footer{padding:3px 12px;color:#657b90;font-size:11px}
[hidden]{display:none!important}
@media(min-width:901px) and (max-height:700px){#result{height:96px}}

.sql-connection-actions{display:flex;gap:6px;flex-wrap:wrap}

/* Results are paginated only in the browser; every returned row stays searchable. */
#result{height:45vh;min-height:240px;resize:vertical}.result-tools,.grid-pages{display:flex;align-items:center;gap:10px;padding:8px;flex-wrap:wrap}.result-tools input{flex:1;min-width:220px}.grid-pages{position:sticky;left:0}.sql-grid th{box-sizing:border-box}.column-resizer{z-index:3;width:12px}.sql-grid td{white-space:pre-wrap;overflow-wrap:anywhere;vertical-align:top}

@media(min-width:901px){#result{height:clamp(96px,calc(100vh - 590px),360px);min-height:96px}.result-tools{padding:4px 8px}.result-tools input{margin-top:0}}