@import url('./tokens.css');
@import url('../styles/controls.css');
*{scrollbar-width:thin;scrollbar-color:#3b4d66 transparent}
[hidden]{display:none!important}
body{background:var(--connect-bg);color:var(--connect-text)}
.connect-high-contrast{--connect-border:#91a8c966;--connect-muted:#b5c4dc}
body.connect-embedded>header:first-of-type{display:none!important}
body.connect-embedded{min-height:0;margin:0;height:100dvh}
.connect-panelbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:9px 14px;border-bottom:1px solid var(--connect-border);background:#0d1827;flex:none;min-height:42px}
.connect-panelbar-label{color:var(--connect-muted);font-size:10px;text-transform:uppercase;letter-spacing:1px;margin-right:8px}
.connect-panel-toggle{font:12px system-ui;color:var(--connect-muted);background:transparent;border:1px solid var(--connect-border);padding:6px 10px;border-radius:7px;cursor:pointer}
.connect-panel-toggle[aria-expanded="true"]{color:var(--connect-text);background:#1c3049;border-color:#789bc64a}
.connect-panel-toggle:hover{color:var(--connect-accent)}
.connect-panel-toggle:focus-visible{outline:2px solid var(--connect-accent);outline-offset:2px}
.connect-embedded button,.connect-embedded input,.connect-embedded select{border-radius:7px}
.connect-embedded button{transition:background var(--connect-motion),border-color var(--connect-motion)}
.connect-embedded button:focus-visible,.connect-embedded input:focus-visible,.connect-embedded select:focus-visible{outline:2px solid var(--connect-accent);outline-offset:2px}
.connect-embedded aside{background:#111e2e;border-color:var(--connect-border)}
.connect-embedded .pane-label{background:#152338;color:var(--connect-muted)}
.connect-embedded .graph-workbench{background:#101d2e;border-color:var(--connect-border)}
.connect-embedded dialog{border:1px solid #6583a84d;border-radius:13px;background:#111e30;color:var(--connect-text)}
.connect-embedded dialog::backdrop{background:#030810a8;backdrop-filter:blur(3px)}
.connect-query-page{display:flex;flex-direction:column;overflow:hidden}
.connect-query-page>main{flex:1;min-height:0;width:100%;max-width:none;padding:0;overflow:hidden}
.connect-query-page #query-editor .config-head{display:none}
.connect-query-page #query-editor .config-area{height:calc(100% - 28px)}
.connect-query-page #run-query:not(:disabled){background:#294875;border-color:#86b1ef66;color:#ecf4ff}
.connect-panel-content:not([hidden]){animation:connect-panel-reveal var(--connect-motion) ease-out}
@keyframes connect-panel-reveal{from{opacity:.7}to{opacity:1}}
.connect-query-page h1,.connect-query-page h2{font-size:14px;font-weight:550;letter-spacing:0}
.connect-query-page #transform{gap:8px;align-items:end}
.connect-query-page #transform label{min-width:130px}
.connect-query-page #query-state,.connect-query-page #result-state{font-size:11px;color:var(--connect-muted);line-height:1.5}
.connect-query-page input,.connect-query-page button,.connect-query-page select{font-size:12px;padding:7px 10px}
.connect-embedded .architecture,.connect-embedded .instructions{font-size:11px;line-height:1.6;color:var(--connect-muted)}
@media(max-width:760px){.connect-embedded .palette{width:140px}.connect-embedded .inspector{width:180px}.connect-panelbar{gap:5px;padding:8px}}