:root { color-scheme: dark; font: 14px/1.4 "Segoe UI", system-ui, sans-serif; background:#111214; color:#f2f3f5; }
* { box-sizing:border-box; }
html,body { width:100%; min-height:100%; overscroll-behavior:none; }
body { margin:0; min-height:100vh; min-height:100dvh; background:#111214; }
button,input { font:inherit; }
button { color:inherit; }
.login { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login label{display:grid;gap:6px;text-align:left;margin:18px 0}.login input{width:100%;padding:12px;border:1px solid #41444a;background:#101114;color:#fff}.pair-code{display:block;font-size:34px;letter-spacing:.18em;margin:12px 0}.pair-request{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid #303238}.pair-request div{display:grid}.pair-request small{color:#aeb2ba}dialog{background:#1b1d21;color:#fff;border:1px solid #40434a;min-width:min(560px,90vw);padding:24px}.dialog-close{float:right}
.dialog { width:min(420px,100%); border:1px solid #34363a; background:#1a1b1e; padding:32px; box-shadow:0 18px 55px #0008; }
.wordmark { font-weight:800; letter-spacing:.18em; font-size:13px; }
h1 { font-size:28px; margin:28px 0 8px; }
p { color:#aeb2b9; }
input { width:100%; background:#101114; color:#fff; border:1px solid #41444a; padding:12px; margin:12px 0; }
.dialog button,.stop { border:0; padding:11px 15px; background:#3d73ff; font-weight:650; cursor:pointer; }
.error { color:#ff8585; min-height:20px; }
header { height:58px; display:flex; align-items:center; gap:22px; border-bottom:1px solid #303237; padding:0 18px; background:#18191c; }
.status { color:#99a0aa; margin-left:auto; }
.stop { background:#9f3038; }
.workspace { height:calc(100vh - 58px); height:calc(100dvh - 58px); display:grid; grid-template-columns:250px minmax(0,1fr); }
aside { border-right:1px solid #303237; padding:18px 12px; background:#16171a; overflow:auto; }
aside h2 { font-size:12px; color:#9da2aa; text-transform:uppercase; letter-spacing:.1em; padding:0 8px; }
.computers { display:grid; gap:4px; }
.computer { width:100%; display:flex; align-items:center; gap:10px; text-align:left; border:1px solid transparent; background:transparent; padding:10px; cursor:pointer; }
.computer:hover { background:#222428; }
.computer.selected { border-color:#5079dd; background:#20283b; }
.computer:disabled { opacity:.48; cursor:default; }
.computer span:last-child { display:grid; }
.computer small { color:#969ba4; }
.dot { width:8px; height:8px; border-radius:50%; background:#656a73; }
.dot.online { background:#58c98b; }
.stage { min-width:0; padding:18px; display:grid; grid-template-rows:minmax(0,1fr) auto; gap:10px; }
.screen { position:relative; display:grid; place-items:center; min-height:260px; overflow:hidden; background:#050506; border:1px solid #303237; outline:none; cursor:none; touch-action:none; user-select:none; -webkit-user-select:none; }
.screen:focus { border-color:#547dde; }
.screen img { width:100%; height:100%; object-fit:contain; }
#empty { position:absolute; color:#737983; }
.cursor { position:absolute; left:0; top:0; width:13px; height:18px; pointer-events:none; transform-origin:0 0; filter:drop-shadow(0 1px 1px #000); }
.cursor::before { content:""; position:absolute; width:0; height:0; border-top:17px solid white; border-right:10px solid transparent; }
footer { display:flex; justify-content:space-between; color:#a8adb5; }
.mobile-controls,.mobile-keyboard { display:none; }

@media(max-width:720px){
  html,body { overflow:hidden; }
  body { padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); }
  header { height:54px; padding:0 max(10px,env(safe-area-inset-left)); gap:10px; position:relative; z-index:3; }
  .wordmark { font-size:12px; }
  header .download,.status,header .stop { display:none; }
  .workspace { height:calc(100dvh - 54px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); }
  aside { border-right:0; border-bottom:1px solid #303237; padding:7px 8px; overflow:hidden; }
  aside h2 { display:none; }
  .computers { display:flex; gap:7px; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x proximity; scrollbar-width:none; }
  .computers::-webkit-scrollbar { display:none; }
  .computer { min-width:148px; min-height:48px; padding:8px 10px; scroll-snap-align:start; border-color:#2b2d31; background:#1a1b1e; border-radius:8px; }
  .computer.selected { border-color:#668cff; background:#222a3e; }
  .stage { padding:8px max(8px,env(safe-area-inset-right)) 6px max(8px,env(safe-area-inset-left)); grid-template-rows:minmax(0,1fr) auto auto; gap:7px; min-height:0; }
  .screen { min-width:0; min-height:0; width:100%; height:100%; border-radius:8px; }
  .screen img { position:absolute; inset:0; width:100%; height:100%; min-width:0; min-height:0; object-fit:contain; }
  .mobile-controls { display:grid; grid-template-columns:1fr 1fr 1fr; gap:7px; }
  .mobile-action { min-height:48px; border:1px solid #3a3d43; border-radius:8px; background:#222428; color:#f2f3f5; font-weight:650; }
  .mobile-action:active { background:#30333a; transform:translateY(1px); }
  .mobile-action.danger { border-color:#6e3035; background:#67272d; }
  .mobile-keyboard { position:fixed; left:8px; right:8px; bottom:max(8px,env(safe-area-inset-bottom)); z-index:10; width:calc(100% - 16px); min-height:48px; margin:0; resize:none; border-radius:8px; box-shadow:0 12px 40px #000b; }
  .mobile-keyboard.active { display:block; }
  footer { min-height:22px; gap:8px; font-size:12px; white-space:nowrap; overflow:hidden; }
  #selectedName { overflow:hidden; text-overflow:ellipsis; }
}

@media(max-width:720px) and (orientation:landscape){
  header { height:44px; }
  .workspace { height:calc(100dvh - 44px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); grid-template-columns:150px minmax(0,1fr); grid-template-rows:1fr; }
  aside { border-right:1px solid #303237; border-bottom:0; padding-left:max(7px,env(safe-area-inset-left)); }
  .computers { height:100%; display:grid; align-content:start; overflow-y:auto; overflow-x:hidden; scroll-snap-type:y proximity; }
  .computer { min-width:0; width:100%; }
  .stage { padding-top:6px; }
  .mobile-controls { grid-template-columns:repeat(3,minmax(90px,1fr)); }
}