:root {
  --bg:#0f1115; --panel:#1a1d24; --line:#2a2e37;
  --fg:#e8eaed; --muted:#868d99; --accent:#3d7eff; --danger:#e5484d;
}
* { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--bg); color:var(--fg); font:15px/1.5 "Segoe UI", system-ui, sans-serif; }
.hidden { display:none !important; }

.screen { position:fixed; inset:0; }
#connect { display:grid; place-items:center; padding:20px; }

.panel {
  width:min(360px,100%); background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:28px; display:flex; flex-direction:column; gap:8px;
}
.panel h1 { font-size:20px; font-weight:600; margin-bottom:16px; }
label { font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); margin-top:10px; }
input {
  padding:11px 13px; background:var(--bg); color:var(--fg); border:1px solid var(--line);
  border-radius:7px; font-size:15px; outline:none;
}
#target { font-size:20px; letter-spacing:3px; font-variant-numeric:tabular-nums; }
input:focus { border-color:var(--accent); }
button {
  padding:11px 14px; background:var(--accent); color:#fff; border:0;
  border-radius:7px; font-size:14px; font-weight:500; cursor:pointer;
}
button:disabled { opacity:.5; cursor:default; }
#go { margin-top:20px; }
.msg { font-size:13px; color:var(--muted); min-height:20px; margin-top:12px; text-align:center; }
.msg.error { color:var(--danger); }

/* --- tela remota --- */
#remote { background:#000; }
#video {
  width:100%; height:100%; object-fit:contain; display:block;
  outline:none;
  /* Cursor local visível: feedback instantâneo. Sem isto o usuário só vê o
     ponteiro depois que ele volta pelo vídeo (~150ms de atraso percebido).
     O .hide-cursor esconde quando o host já desenha um cursor próprio. */
  cursor:default;
}
#video.hide-cursor { cursor:none; }
.toolbar {
  position:fixed; top:10px; left:50%; transform:translateX(-50%);
  display:flex; gap:6px; align-items:center; padding:5px;
  background:rgba(26,29,36,.82); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:10px;
  opacity:.15; transition:opacity .18s;
}
.toolbar:hover { opacity:1; }
.toolbar button { padding:6px 11px; background:transparent; font-size:14px; }
.toolbar button:hover { background:#2a2e37; }
.toolbar button.danger:hover { background:var(--danger); }
.pill { font-size:11px; color:var(--muted); padding:0 8px; font-variant-numeric:tabular-nums; }

.overlay {
  position:fixed; inset:0; display:grid; place-items:center;
  background:rgba(15,17,21,.9); font-size:15px; color:var(--muted);
}