:root { color-scheme:dark; --bg:#0b0e14; --side:#0d1119; --surface:#141923; --panel:#161c27; --stroke:#27303f; --text:#f1f3f8; --muted:#929dad; --accent:#9caaed; --positive:#66d6a8; --radius:16px; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-size:14px; }
button, input { font:inherit; }
button { cursor:pointer; }
button:disabled { opacity:.4; cursor:not-allowed; }
.hidden,[hidden] { display:none!important; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:238px minmax(0,1fr); }
.sidebar { background:var(--side); border-right:1px solid #242a35; padding:28px 17px; display:flex; flex-direction:column; gap:28px; }
.brand { display:flex; gap:12px; align-items:center; font-size:18px; font-weight:550; letter-spacing:-.6px; padding-left:5px; }
.brand b { font-weight:730; }
.brand-mark { display:grid; place-items:center; width:58px; height:58px; border:1px solid #9aabda66; border-radius:18px; background:linear-gradient(135deg,#252f4c,#171d2c); color:#e3eaff; font-weight:800; letter-spacing:-2px; box-shadow:inset 0 1px 1px #ffffff17; }
.brand-mark span { color:#a4b4ef; margin:0 1px; }
.brand-mark.small { width:39px; height:39px; border-radius:12px; font-size:13px; }
.sidebar-label,.eyebrow { font-size:10px; font-weight:750; letter-spacing:1.7px; color:#78869b; }
.sidebar-label { padding-left:15px; margin:13px 0 -18px; }
nav { display:grid; gap:7px; }
.nav { border:0; color:#a1aabb; padding:13px; background:transparent; display:flex; gap:12px; border-radius:9px; text-align:left; align-items:center; }
.nav span:first-child { font-size:17px; min-width:20px; }
.nav.active { background:#222a3c; color:#f2f4ff; }
.nav:hover,.logout:hover { background:#222838; color:white; }
.soon { margin-left:auto; font-size:10px; color:#8793a9; }
.sidebar-bottom { margin-top:auto; display:grid; gap:12px; padding:12px; }
.tiny-muted { font-size:10px; color:#6f7e93; letter-spacing:1px; }
.live-indicator { display:flex; gap:9px; align-items:center; color:#bbc7d9; font-size:12px; }
.live-indicator i,.status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#d7a367; }
.online i,.online .status-dot { background:var(--positive); box-shadow:0 0 0 3px #66d6a814; }
.logout { border:1px solid var(--stroke); background:transparent; color:#bac5d4; border-radius:9px; padding:10px; text-align:left; }
.workspace { width:100%; max-width:1600px; margin:0 auto; padding:28px clamp(18px,3vw,46px); min-width:0; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:26px; }
h1,h2,h3,p { margin-top:0; }
h2 { margin-bottom:0; font-size:29px; font-weight:690; letter-spacing:-1px; }
h3 { margin-bottom:0; font-size:16px; font-weight:650; letter-spacing:-.3px; }
.chevron { padding:0 7px; }
.top-actions,.device-cta,.toolbar-actions { display:flex; gap:10px; align-items:center; }
.pill,.protocol-pill { border:1px solid #354151; border-radius:30px; color:#c6d0dd; padding:9px 12px; font-size:12px; display:flex; gap:8px; align-items:center; }
.pill.offline .status-dot { background:#dca46c; }
.avatar { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#2e3453; color:#dfe4ff; font-weight:700; font-size:11px; }
.device-strip,.screen-wrap,.panel { border:1px solid var(--stroke); border-radius:var(--radius); background:var(--surface); }
.device-strip { display:flex; padding:17px 20px; align-items:center; gap:16px; margin-bottom:18px; }
.device-icon { width:47px; height:47px; border-radius:13px; display:grid; place-items:center; background:#232d44; font-size:26px; color:#ccd6ff; }
.device-meta { display:grid; gap:5px; }
.device-meta strong { font-size:15px; }
.device-meta span { color:var(--muted); font-size:12px; }
.device-cta { margin-left:auto; }
.protocol-pill { color:#a8b1c6; font-size:10px; letter-spacing:.8px; padding:7px 11px; }
.muted { color:var(--muted); font-size:12px; }
.screen-wrap { overflow:hidden; }
.screen-toolbar,.screen-footer { display:flex; gap:10px; align-items:center; justify-content:space-between; padding:12px 16px; min-height:59px; }
.toolbar-title { color:#c8d2dd; font-size:12px; display:flex; align-items:center; gap:9px; }
.toolbar-sep { color:#64728b; }
.toolbar-actions { flex-wrap:wrap; justify-content:flex-end; }
.ghost,.control-btn { border-radius:9px; padding:10px 12px; font-size:12px; border:1px solid #343e4e; color:#d8e0ef; background:#202735; }
.ghost:hover,.control-btn:hover { background:#30394b; }
.control-btn { background:#b6c3f6; border-color:#b6c3f6; color:#111a2a; font-weight:700; }
.control-btn.active { background:#263d3c; border-color:#47746b; color:#a8ead2; }
.screen { aspect-ratio:16 / 9; background:#07090e; min-height:250px; width:100%; position:relative; outline:none; display:grid; place-items:center; overflow:hidden; }
.screen:focus-visible { box-shadow:inset 0 0 0 2px var(--accent); }
.frame { max-width:100%; max-height:100%; width:100%; height:100%; object-fit:contain; user-select:none; touch-action:none; }
.screen-placeholder { text-align:center; max-width:330px; padding:20px; }
.placeholder-graphic { height:74px; width:74px; margin:0 auto 20px; display:grid; place-items:center; border:1px solid #43506d; border-radius:20px; background:#1b2436; font-size:40px; color:#a8b9e4; }
.screen-placeholder h3 { font-size:20px; margin-bottom:8px; }
.screen-placeholder p { color:#8e9aae; line-height:1.6; }
.drop-target { position:absolute; inset:16px; display:grid; place-items:center; border:2px dashed #b4c7ff; background:#101a2ee8; color:#e2e9ff; font-size:22px; font-weight:650; border-radius:12px; pointer-events:none; }
.screen-footer { min-height:42px; color:#93a1b5; font-size:11px; }
.bottom-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:18px; }
.panel { padding:21px; }
.panel-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:19px; }
.panel-heading .eyebrow { margin:0 0 8px; }
.mini-icon { display:grid; place-items:center; width:37px; height:37px; background:#242c40; border-radius:9px; font-size:19px; color:#bdc9fa; }
.info-row { display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid #283140; gap:6px; color:#95a2b4; font-size:12px; }
.info-row strong { font-weight:500; color:#dde4f0; }
.panel-note { font-size:12px; line-height:1.6; color:#7e8ca0; margin:14px 0 0; }
.quick-actions { display:flex; gap:12px; }
.action-card { flex:1; background:#1d2533; border:1px solid #333d4e; border-radius:11px; padding:13px; min-height:99px; text-align:left; display:grid; gap:5px; color:#e5eafa; }
.action-card:hover { border-color:#8a9ccf; }
.action-card span { color:#abbdf4; font-size:20px; }
.action-card small { color:#90a0b4; }
.page-footer { text-align:center; padding:27px 0; font-size:11px; color:#57657c; }
.login-layer { min-height:100vh; display:grid; place-items:center; padding:22px; }
.login-card { max-width:420px; width:100%; border:1px solid #2c3446; border-radius:20px; background:#161d29; padding:38px; box-shadow:0 20px 90px #00000055; }
.login-card .brand-mark { margin-bottom:28px; }
.login-card h1 { font-size:27px; letter-spacing:-.9px; margin:8px 0; }
.login-card .muted { font-size:13px; line-height:1.7; margin-bottom:28px; }
.login-card label { display:block; color:#cbd4e4; font-size:12px; margin-bottom:9px; }
.login-card input { width:100%; padding:14px; background:#0e131c; border:1px solid #364153; border-radius:10px; color:white; outline:none; margin-bottom:17px; }
.login-card input:focus { border-color:#9eb3e7; }
.primary { width:100%; border:0; background:#b9c6f3; color:#10182a; border-radius:10px; padding:14px; display:flex; justify-content:space-between; font-weight:750; }
.error { color:#f5a6a6; margin:10px 0 0; min-height:18px; }
.fineprint { color:#73839b; font-size:11px; line-height:1.6; margin:22px 0 0; }
.toast { position:fixed; bottom:25px; right:25px; background:#dce5fb; color:#0b1729; padding:14px 18px; border-radius:12px; box-shadow:0 10px 45px #0008; z-index:10; }
@media(max-width:1050px) { .app-shell { grid-template-columns:68px minmax(0,1fr); } .sidebar { padding:23px 8px; align-items:center; } .brand>span,.sidebar-label,.nav:not(.active),.nav.active:not(:first-child),.sidebar-bottom,.nav.active { font-size:0; } .nav.active span:first-child { font-size:20px; } .sidebar .brand-mark { width:40px; } .screen-toolbar { flex-wrap:wrap; } }
@media(max-width:700px) { .app-shell { display:block; } .sidebar { display:none; } .workspace { padding:17px 12px; } h2 { font-size:22px; } .topbar { margin-bottom:18px; } .pill { padding:7px; font-size:10px; } .device-strip { padding:12px; } .device-cta .protocol-pill { display:none; } .screen-toolbar { align-items:flex-start; gap:10px; flex-wrap:wrap; justify-content:center; } .toolbar-actions { justify-content:center; flex-wrap:wrap; width:100%; margin-top:8px; } .ghost,.control-btn { padding:12px 18px; min-height:44px; font-size:13px; border-radius:10px; } .screen { aspect-ratio:4/3; } .bottom-grid { grid-template-columns:1fr; } .screen-footer { flex-wrap:wrap; justify-content:center; gap:8px; text-align:center; } }
@media(prefers-reduced-motion:no-preference) { button,.nav { transition:background .15s ease,border-color .15s ease,transform .15s ease; } button:active { transform:scale(.985); } }

/* Focused file browser: functional rather than decorative. */
.transfer-browser { margin-top:16px; }
.file-list { display:grid; gap:8px; margin-top:17px; }
.file-item { display:flex; justify-content:space-between; align-items:center; gap:12px; border:1px solid #333d4e; background:#151d2a; border-radius:10px; padding:12px 14px; }
.file-item .filename { font-size:13px; color:#e2e8f5; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:75%; }
.file-item small { font-size:11px; color:#8e9fb7; }
.file-empty { padding:17px; font-size:13px; color:#a8b5cb; }
.file-item button { border:1px solid #43516a; border-radius:8px; padding:8px 12px; color:#dce6fa; background:#252f42; cursor:pointer; flex-shrink:0; }
.file-item button:hover { background:#34425c; }
.frame { touch-action:none; }
.screen { touch-action:none; }

.agent-list { display:grid;gap:8px;margin-top:14px;max-height:330px;overflow-y:auto; }
.agent-item { display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px;border-radius:10px;border:1px solid #303a4b;background:#171e2b; }
.agent-item strong { font-size:12px;font-weight:650; }
.agent-item span { color:#99a7bb;font-size:11px; }

/* Native terminal output remains inside xterm's text canvas. */
.terminal-panel { margin-top:16px; }
.terminal-panel .panel-heading { gap:14px; flex-wrap:wrap; margin-bottom:10px; }
.terminal-panel .terminal-actions { display:flex; flex-wrap:wrap; gap:8px; }
.terminal-panel .terminal-status { margin:0 0 12px; min-height:20px; }
.terminal-panel .terminal-canvas { height:380px; min-width:0; padding:10px; border:1px solid #303a4b; border-radius:10px; background:#0c1017; overflow:hidden; }
.terminal-panel .terminal-canvas .xterm { height:100%; }
.terminal-panel button:disabled { cursor:not-allowed; opacity:.45; }
.terminal-panel button:focus-visible { outline:2px solid #b9c6f3; outline-offset:3px; }
@media(max-width:700px) {
  .terminal-quick-actions { flex-wrap:wrap; }
  #terminalAction { flex-basis:100%; min-height:64px; }
  .terminal-panel .terminal-actions { width:100%; }
  .terminal-panel .terminal-actions .ghost { flex:1; padding:10px; min-width:85px; }
  .terminal-panel .terminal-canvas { height:340px; padding:8px; }
}

/* Account entry shares the workspace's local, system-font design. */
.login-card { max-width:460px; padding:clamp(24px,5vw,38px); }
.login-brand { display:flex; align-items:center; gap:13px; width:fit-content; color:var(--text); text-decoration:none; font-size:20px; font-weight:650; margin-bottom:30px; }
.login-brand .brand-mark { margin:0; width:48px; height:48px; font-size:17px; border-radius:14px; }
.login-brand small { display:block; font-size:10px; font-weight:500; color:var(--muted); letter-spacing:.5px; margin-top:3px; }
.login-card a { color:#c4d0ff; text-underline-offset:3px; }
.login-card .provider-links { display:grid; gap:10px; margin:20px 0; }
.login-card .provider-link { display:flex; align-items:center; justify-content:center; min-height:48px; padding:12px 18px; border:1px solid #45516a; border-radius:11px; text-decoration:none; color:var(--text); background:#20293a; font-weight:600; }
.login-card .provider-link:hover { background:#2a3549; border-color:#9caaed; }
.login-card :is(a,button,summary):focus-visible { outline:2px solid #b9c6f3; outline-offset:4px; }
.login-card #email-signin { border-top:1px solid var(--stroke); padding-top:20px; margin-top:20px; }
.login-card #email-signin h2 { font-size:15px; letter-spacing:0; margin-bottom:10px; }
.login-card #email-signin p { font-size:12px; line-height:1.55; color:var(--muted); }
.login-card #email-signin button { min-height:44px; padding:10px 16px; border:1px solid #45516a; border-radius:9px; background:#26324a; color:var(--text); margin:0 5px 6px 0; }
.login-card #email-signin :is(#email-send,#email-verify) { width:100%; background:#b9c6f3; color:#10182a; border:0; font-weight:650; }
.login-card #gateway-password-access { border-top:1px solid var(--stroke); margin-top:22px; padding-top:18px; }
.login-card summary { cursor:pointer; color:#b5c1d5; font-size:13px; padding:6px 0; }
.login-card details[open] summary { margin-bottom:16px; }
.login-card .pairing-entry { display:block; padding:14px 0 3px; font-size:13px; text-align:center; }
.login-card .account-signin > h2 { font-size:15px; letter-spacing:0; margin:0 0 10px; }
.login-card .account-signin > p { color:var(--muted); font-size:12px; line-height:1.6; }
.account-page { padding:clamp(18px,5vw,48px) 18px; }
.account-page main { width:100%; max-width:680px; margin:0 auto; padding:clamp(22px,4vw,38px); border:1px solid var(--stroke); border-radius:20px; background:var(--surface); }
.account-page h1 { font-size:clamp(23px,5vw,30px); letter-spacing:-.6px; }
.account-page h2 { font-size:19px; letter-spacing:-.3px; margin:24px 0 12px; }
.account-page p,.account-page li { color:#b5bfd0; line-height:1.65; overflow-wrap:anywhere; }
.account-page a { color:#c4d0ff; text-underline-offset:3px; }
.account-page button { min-height:44px; border:1px solid #45516a; background:#26324a; color:var(--text); border-radius:9px; padding:10px 16px; margin:4px 6px 4px 0; }
.account-page input { width:100%; border:1px solid #45516a; background:#0e131c; color:var(--text); padding:13px; border-radius:9px; margin:8px 0 12px; }
.account-page label { display:block; font-size:13px; }
.account-page :is(a,button,input):focus-visible { outline:2px solid #b9c6f3; outline-offset:3px; }
.account-page section { border-top:1px solid var(--stroke); margin-top:24px; padding-top:2px; }
.account-page #pairing-video { display:block; max-width:100%; width:100%; max-height:320px; object-fit:contain; background:#080a10; border-radius:12px; margin:12px 0; }
.account-page #pairing-comparison { font-size:24px; font-family:ui-monospace,monospace; letter-spacing:1px; color:var(--text); }
.account-page #computers-list { list-style:none; padding:0; }
.account-page #computers-list li { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:12px 0; border-bottom:1px solid var(--stroke); }

.login-card .login-brand { margin-bottom:18px; }
.login-card > .muted { margin-bottom:18px; }
.login-card .account-signin > h2,.login-card .account-signin > p:first-of-type { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

.remote-keyboard { padding:14px 16px; border-top:1px solid var(--stroke); background:#151e2d; }
.remote-keyboard label { display:block; font-weight:650; margin-bottom:5px; }
.remote-keyboard p { color:#b5c1d5; font-size:12px; line-height:1.5; margin:4px 0 10px; }
.remote-keyboard input { display:block; width:100%; min-height:46px; border:1px solid #566583; border-radius:9px; background:#0d1420; color:var(--text); padding:11px 13px; font-size:16px; margin:10px 0; }
.remote-keyboard input:focus-visible { outline:2px solid #b9c6f3; outline-offset:2px; }
.keyboard-special { display:flex; gap:6px; flex-wrap:wrap; }
.keyboard-special button { min-width:44px; min-height:44px; padding:8px 12px; }
#keyboardStatus:empty { display:none; }
@media(max-width:700px) {
  #app:has(#remoteKeyboardPanel:not([hidden])) :is(.topbar,.device-strip,.bottom-grid,.page-footer,.screen-footer,.toolbar-title) { display:none; }
  #app:has(#remoteKeyboardPanel:not([hidden])) .workspace { padding:8px; }
  #app:has(#remoteKeyboardPanel:not([hidden])) .screen-toolbar { min-height:44px; padding:8px; }
  #app:has(#remoteKeyboardPanel:not([hidden])) .toolbar-actions { width:100%; justify-content:space-between; }
  #app:has(#remoteKeyboardPanel:not([hidden])) .toolbar-actions .ghost:not(#keyboardBtn) { display:none; }
  #app:has(#remoteKeyboardPanel:not([hidden])) .screen { min-height:120px; }
}

/* Viewport mode also works when the mobile browser has no element Fullscreen API. */
#app.immersive { position:fixed; inset:0; z-index:100; display:block; height:100dvh; background:#07090e; overflow:hidden; }
#app.immersive .sidebar, #app.immersive .topbar, #app.immersive .device-strip,
#app.immersive .bottom-grid, #app.immersive .screen-footer, #app.immersive .toolbar-title { display:none; }
#app.immersive .workspace { padding:0; height:100%; }
#app.immersive .screen-wrap { height:100%; border:0; border-radius:0; display:flex; flex-direction:column; }
#app.immersive .screen-toolbar { flex:none; min-height:0; padding:8px max(8px,env(safe-area-inset-right)) 8px max(8px,env(safe-area-inset-left)); }
#app.immersive .toolbar-actions { margin:0; width:100%; justify-content:center; }
#app.immersive .toolbar-actions .ghost:not(#fullscreen):not(#keyboardBtn):not(#wakeDisplayBtn) { display:none; }
#app.immersive .screen { flex:1; min-height:0; aspect-ratio:auto; }
#app.immersive .remote-keyboard { flex:none; max-height:50%; overflow:auto; }

/* Both transports occupy the same fitted surface; video never intercepts remote pointer input. */
#frame, #videoFrame { grid-area:1 / 1; }
#videoFrame { pointer-events:none; }
#videoFrame[hidden] { display:none; }

/* Stable text-based performance summary; colors supplement labels. */
.stream-metrics-details { position:relative; font-size:12px; line-height:1.5; max-width:100%; }
.stream-metrics-details summary { cursor:pointer; min-height:24px; font-variant-numeric:tabular-nums; }
#streamMetrics { display:inline-block; min-width:345px; color:var(--muted,#a5acba); }
#streamMetrics[data-quality="good"] { color:#8ed9af; }
#streamMetrics[data-quality="fair"] { color:#f4ce81; }
#streamMetrics[data-quality="poor"] { color:#ffaaa5; }
.stream-metrics-glossary { position:absolute; right:0; z-index:20; width:min(360px,85vw); padding:16px; border:1px solid #525966; border-radius:10px; background:#171c25; color:#e6e9ef; box-shadow:0 8px 30px #0008; }
.stream-metrics-glossary p { margin:8px 0 0; }
@media(max-width:700px) { .top-actions {flex-wrap:wrap;} #streamMetrics {min-width:0; font-size:11px;} .stream-metrics-details {order:3;flex-basis:100%;} }
@media(max-width:700px) {
  .topbar {flex-wrap:wrap;gap:8px;}
  .topbar > .top-actions {width:100%;justify-content:flex-start;}
  .stream-metrics-details summary {white-space:nowrap;}
}