*{box-sizing:border-box}
[hidden]{display:none!important}
body{width:100%;max-width:none;margin:0;padding:0;min-height:100vh;display:flex;flex-direction:column;background:var(--vb-swatch-111923);color:var(--vb-swatch-eaf0f8);font:var(--vb-type-px-14)/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:dark}
button,input,select{font:inherit}
button{cursor:pointer}
a{color:var(--vb-swatch-aaceff)}
:focus-visible{outline:2px solid var(--vb-swatch-8fb8f5);outline-offset:2px}
.topbar.grid-top{display:flex;align-items:center;gap:1rem;min-height:3.6rem;padding:.5rem clamp(.75rem,3vw,2rem);border-bottom:1px solid var(--vb-swatch-2b3848);background:var(--vb-swatch-171d29)}
.grid-top .brand{white-space:nowrap;font-size:var(--vb-type-rem-1);letter-spacing:-.03em}
.grid-top .brand span{color:var(--vb-swatch-91a0b3);font-weight:500}
.workspace-links{display:flex;align-items:center;gap:.2rem;flex:1;min-width:0}
.workspace-links a{padding:.46rem .72rem;border-radius:var(--r-control);color:var(--vb-swatch-91a0b3);font-size:var(--vb-type-rem-0-79);font-weight:650;text-decoration:none;text-transform:none;white-space:nowrap}
.workspace-links a:hover,.workspace-links a[aria-current="page"]{background:var(--vb-swatch-263749);color:var(--vb-swatch-eaf0f8)}
.grid-top #logout{border:1px solid var(--vb-swatch-2b3848);border-radius:var(--r-control);background:var(--vb-swatch-202e3d);color:var(--vb-swatch-eaf0f8);padding:.42rem .65rem;text-decoration:none;text-transform:none;white-space:nowrap}
.grid-heading{display:flex;align-items:end;justify-content:space-between;gap:1rem;padding:1.2rem clamp(.75rem,3vw,2rem) .65rem}
.grid-heading h1{margin:0;font-size:var(--vb-type-rem-1-5);letter-spacing:-.04em}
.grid-heading p{margin:.15rem 0 0;color:var(--vb-swatch-91a0b3);font-size:var(--vb-type-rem-0-8)}
#grid-count{padding:.28rem .55rem;border:1px solid var(--vb-swatch-2b3848);border-radius:var(--r-pill);color:var(--vb-swatch-8ee5ba);font-size:var(--vb-type-rem-0-72);font-weight:700;white-space:nowrap}
#layout select,.tile select{min-height:2.1rem;padding:.35rem .55rem;border:1px solid var(--vb-swatch-51647b);border-radius:var(--r-control);background:var(--vb-swatch-202e3d);color:var(--vb-swatch-eaf0f8)}
#layout button,.tile button{min-height:2.1rem;padding:.35rem .65rem;border:1px solid var(--vb-swatch-3a4b5e);border-radius:var(--r-control);background:var(--vb-swatch-202e3d);color:var(--vb-swatch-eaf0f8);font-weight:650}
#layout button:hover,.tile button:hover{background:var(--vb-swatch-263749);border-color:var(--vb-swatch-8fb8f5)}
#error{margin:0;padding:0 clamp(.75rem,3vw,2rem);color:var(--vb-swatch-ffadb5);font-size:var(--vb-type-rem-0-78)}
#grid-app{display:flex;flex:1;flex-direction:column;padding:0 0 1.2rem}
#layout{display:flex;align-items:end;gap:.65rem;flex-wrap:wrap;margin:.5rem clamp(.75rem,3vw,2rem) .85rem;padding:.65rem .75rem;border:1px solid var(--vb-swatch-2b3848);border-radius:var(--r-surface);background:var(--vb-swatch-18212d)}
#layout label{display:grid;gap:.2rem;color:var(--vb-swatch-91a0b3);font-size:var(--vb-type-rem-0-7);font-weight:650}
#layout button#refresh{margin-left:auto}
#tiles{display:grid;grid-template-columns:repeat(var(--columns,2),minmax(0,1fr));grid-auto-rows:auto;gap:0;align-content:start;border-top:1px solid var(--vb-swatch-2b3848)}
.tile{display:flex;flex-direction:column;min-width:0;margin:0;padding:0;overflow:hidden;border:0;border-right:1px solid var(--vb-swatch-2b3848);border-bottom:1px solid var(--vb-swatch-2b3848);border-radius:0;background:var(--vb-swatch-18212d)}
.tile:focus-within{border-color:var(--vb-swatch-8fb8f5)}
.tile-controls{display:flex;align-items:start;gap:.35rem;flex-wrap:wrap;padding:.35rem .65rem;border-bottom:1px solid var(--vb-swatch-2b3848);background:var(--vb-swatch-1d2a38)}
.tile-controls details{min-width:0;max-width:100%;margin:0;padding:.15rem .5rem;border:1px solid var(--vb-swatch-3a4b5e);border-radius:var(--r-control);color:var(--vb-swatch-c9defe);font-size:var(--vb-type-rem-0-72);background:var(--vb-swatch-202e3d)}
.tile-controls details[open]{flex:1 1 100%}
.tile-controls summary{cursor:pointer}
.tile header{display:flex;align-items:end;gap:.4rem;flex-wrap:wrap;padding:.5rem .65rem 0}
.tile label{display:grid;gap:.15rem;margin:0;color:var(--vb-swatch-91a0b3);font-size:var(--vb-type-rem-0-68);font-weight:650}
.tile label:first-child{flex:1;min-width:9rem}
.tile select{max-width:14rem}
.tile label:first-child select{width:100%;max-width:none}
.tile p{min-height:1.4em;margin:0;padding:.35rem .65rem .45rem;color:var(--vb-swatch-91a0b3);font-size:var(--vb-type-rem-0-72);overflow-wrap:anywhere}
.viewer-panel{position:relative;min-width:0;margin:0;border-top:1px solid var(--vb-swatch-2b3848)}
.desktop-panel[hidden]+.terminal-panel{display:flex;flex:1;flex-direction:column}
.viewer-overlay{position:absolute;inset:0;z-index:1;display:grid;place-items:center;padding:1rem;background:var(--vb-swatch-080d14eb);color:var(--vb-swatch-c9defe);font-size:var(--vb-type-rem-0-8);text-align:center;pointer-events:none}
.connection-badge{position:absolute;top:.55rem;right:.55rem;z-index:2;display:inline-flex;align-items:center;gap:.45rem;padding:.3rem .55rem;border:1px solid var(--vb-swatch-526174);border-radius:var(--r-pill);background:var(--vb-swatch-101b27e8);box-shadow:0 2px 10px var(--vb-swatch-0008);color:var(--vb-swatch-eaf0f8);font-size:var(--vb-type-rem-0-7);font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none}
.connection-badge::before{content:'';width:.42rem;height:.42rem;flex:none;border-radius:var(--r-pill);background:var(--vb-swatch-97a8bc)}
.connection-badge[data-state="connected"]::before{background:var(--vb-swatch-7ce5b2);box-shadow:0 0 0 3px var(--vb-swatch-7ce5b226)}
.connection-badge[data-state="disconnected"]::before{background:var(--vb-swatch-ff9eaa);box-shadow:0 0 0 3px var(--vb-swatch-ff9eaa26)}
.connection-badge[data-state="connecting"]::before{background:var(--vb-swatch-f5d18c);box-shadow:0 0 0 3px var(--vb-swatch-f5d18c26)}
.tile .screen{height:14rem;min-height:80px;padding:0;overflow:hidden;border:0;border-radius:0;background:var(--vb-swatch-080d14)}
.tile .desktop-screen{height:17rem}
.tile .desktop-panel[hidden]+.terminal-panel .terminal-screen{height:20rem;flex:1}
.screen .xterm{height:100%}
.tile .screen:fullscreen{width:100vw;height:100vh;border:0;box-sizing:border-box}
.tile .terminal-keys,.tile .desktop-controls{display:flex;gap:.2rem;flex-wrap:wrap}
.tile .terminal-keys,.tile .desktop-controls{padding:.35rem 0 .15rem}
.tile .terminal-keys button,.tile .desktop-controls button{min-height:1.8rem;padding:.16rem .4rem}
.tile .desktop-controls textarea{width:min(14rem,100%);min-height:1.8rem;padding:.18rem .4rem;border:1px solid var(--vb-swatch-51647b);border-radius:var(--r-control);background:var(--vb-swatch-202e3d);color:var(--vb-swatch-eaf0f8);font:inherit}
@media(max-width:740px){
 .topbar.grid-top{flex-wrap:wrap;gap:.35rem;padding:.5rem .75rem}
 .grid-top .brand{flex:1}
 .workspace-links{order:2;flex:0 0 100%;overflow-x:auto}
 .workspace-links a{padding:.38rem .55rem}
 .grid-heading{align-items:start;flex-direction:column;gap:.45rem}
 .tile .desktop-screen{height:max(12rem,35vh)}
 .tile .terminal-screen{height:max(10rem,28vh)}
 .tile select{max-width:70vw}
}