:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#111813;color:#eef4e9}*{box-sizing:border-box}body{margin:0;height:100vh;display:flex;flex-direction:column}header,.toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 20px;border-bottom:1px solid #334036}header strong{font-size:20px}small{display:block;color:#a2b49f;font-size:11px;margin-top:3px}nav,.toolbar>div,.actions{display:flex;gap:6px;flex-wrap:wrap}button,a{font:inherit}button{cursor:pointer;color:#dce8d8;background:#263229;border:1px solid #465748;border-radius:8px;padding:8px 12px}button:hover,button[aria-pressed=true]{background:#526a32;color:white;border-color:#bddb75}button:disabled{opacity:.5;cursor:wait}a{color:#c4dc8d;font-size:13px}.toolbar{padding:9px 20px;background:#18221b}main{flex:1;min-height:0;display:grid;gap:8px;padding:8px;grid-template-columns:1fr}section{min-height:0;min-width:0;display:flex;flex-direction:column;border:1px solid #3a483b;border-radius:9px;overflow:hidden;background:#090c0a}section[hidden]{display:none}h2{font-size:13px;margin:0;padding:9px 12px;background:#243027}h2 span{float:right;color:#afbcaa;font-size:11px;font-weight:400}iframe{border:0;width:100%;flex:1;min-height:0;background:#fff}main[data-layout=split]{grid-template-columns:1fr 1fr}main[data-layout=all]{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}main[data-layout=all] section:first-child{grid-row:span 2}main[data-layout=pip]{grid-template-columns:3fr 1fr;grid-template-rows:1fr 1fr}main[data-layout=pip] section.focus{grid-column:1;grid-row:1 / 3}footer{font-size:11px;color:#9eaf9b;padding:6px 16px}aside{position:fixed;right:18px;top:125px;width:min(430px,calc(100vw - 36px));background:#202d24;border:1px solid #8baf63;border-radius:14px;padding:18px;box-shadow:0 16px 65px #000b;z-index:10}aside[hidden]{display:none}.panel-heading{display:flex;justify-content:space-between;align-items:center}.panel-heading h2{padding:0;background:none;font-size:19px}aside p{font-size:13px;line-height:1.5;color:#becdb7}label{display:block;font-size:12px;margin-bottom:7px}textarea{width:100%;height:190px;resize:vertical;background:#101914;color:white;border:1px solid #66775c;border-radius:8px;padding:12px;font:14px system-ui}.actions{margin-top:12px}button:focus-visible,a:focus-visible,textarea:focus-visible{outline:3px solid #d1ed88;outline-offset:3px}@media(max-width:800px){header{flex-wrap:wrap}main[data-layout=split],main[data-layout=all],main[data-layout=pip]{grid-template-columns:1fr;grid-template-rows:repeat(3,1fr)}main[data-layout=all] section:first-child,main[data-layout=pip] section.focus{grid-row:auto;grid-column:auto}}
.toolbar label{font-size:12px;align-self:center;margin:0 3px}.toolbar select{background:#16221a;color:#eaf4df;border:1px solid #66775c;border-radius:7px;padding:7px;max-width:140px}select:disabled{opacity:.45}#workspace-status{font-size:12px;color:#c4dc8d;padding:5px 16px;min-height:25px}section.focus{border-color:#bddb75}h2[role=button]{cursor:pointer}h2[role=button]:focus-visible{outline:2px solid #d1ed88;outline-offset:-3px}section[data-connection=CONNECTED] h2 span{color:#c4e394}section[data-connection=CLIENT_ERROR] h2 span,section[data-connection=TUNNEL_ERROR] h2 span{color:#ffb4a2}section:fullscreen{width:100vw;height:100vh;border:0;border-radius:0;display:flex;background:#090c0a}section:fullscreen h2{padding:7px 12px}
main section{position:relative}main section h2{position:absolute;top:10px;right:12px;z-index:1;max-width:calc(100% - 24px);padding:6px 10px;border:1px solid #65775f;border-radius:7px;background:#142018ed;pointer-events:auto}main section h2 span{display:inline;float:none;margin-left:8px}
#desktops{position:relative}

#desktops:fullscreen{display:grid;grid-template:1fr / 1fr;padding:0;background:#090c0a}#desktops:fullscreen section:not(.focus){display:none}

body > header{justify-content:flex-start;flex-wrap:nowrap;gap:8px;padding:6px 10px;overflow-x:auto;flex-shrink:0;white-space:nowrap}body > header strong{font-size:16px}body > header small{display:none}body > header nav,body > header .toolbar,body > header .toolbar > div{flex-wrap:nowrap;flex-shrink:0;gap:5px}body > header .toolbar{padding:0;border:0;background:none}body > header button,body > header select{font-size:12px;padding:5px 7px}body > header a{flex-shrink:0}
body > header .toolbar [hidden]{display:none}#fullscreen{font-size:18px;line-height:1;min-width:32px}


body > header{display:grid;grid-template-columns:minmax(max-content,1fr) max-content minmax(max-content,1fr)}body > header > nav{justify-self:center}body > header > .toolbar{justify-self:end}

#mobile-computer[hidden]{display:none}
@media (max-width:680px), (max-width:950px) and (pointer:coarse) and (max-height:550px){
 body{height:100dvh}
 body > header{grid-template-columns:auto minmax(0,1fr) auto;gap:5px;padding:4px 6px}
 body > header > nav,#layout-picker{display:none}
 #mobile-computer{width:100%;min-width:0;min-height:40px;background:#263229;color:inherit;border:1px solid #65775f;border-radius:7px}
 body > header strong{font-size:11px}
 body > header button{min-height:40px}
 #desktops{padding:3px;gap:0}
}