* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; font-family: -apple-system, "Segoe UI", Roboto, sans-serif; background: #0e1116; color: #e6e6e6; }
.topbar { display: flex; align-items: center; padding: 10px 16px; background: #14181f; border-bottom: 1px solid #1f242d; }
.brand { font-weight: 600; }
.status { margin-left: auto; font-size: 12px; color: #9aa4b2; }
.page { padding: 16px; max-width: 1200px; margin: 0 auto; }
.page.hidden { display: none; }
.card { background: #14181f; border: 1px solid #1f242d; border-radius: 10px; padding: 16px; margin-bottom: 12px; }
.card h2 { margin: 0 0 12px; font-size: 16px; }
.card input { display: block; width: 100%; padding: 10px 12px; background: #0e1116; border: 1px solid #2a3140; color: #e6e6e6; border-radius: 8px; margin-bottom: 8px; font-size: 14px; }
button { cursor: pointer; border: 0; padding: 10px 16px; border-radius: 8px; font-size: 14px; }
button.primary { background: #4f8cff; color: #fff; }
button.danger { background: #e5484d; color: #fff; }
button.ghost { background: transparent; color: #9aa4b2; border: 1px solid #2a3140; }
button.mini { padding: 4px 8px; font-size: 12px; background: #2a3140; color: #e6e6e6; }
button.toggle { background: #2a3140; color: #e6e6e6; }
button.toggle.on { background: #2f7d4a; }
.history { list-style: none; padding: 0; margin: 0 0 8px; }
.history li { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid #1f242d; }
.history li:last-child { border-bottom: 0; }
.history .rid { font-weight: 600; margin-right: 10px; font-family: monospace; }
.history .role { color: #9aa4b2; font-size: 12px; margin-right: auto; }
.history button { padding: 4px 10px; font-size: 12px; background: #4f8cff; color: #fff; }
.meta { font-size: 12px; color: #9aa4b2; }
.meta div { margin-bottom: 4px; }

.room-header { display: flex; align-items: center; gap: 12px; padding: 12px; background: #14181f; border-radius: 10px; margin-bottom: 12px; }
.room-header strong { font-family: monospace; font-size: 18px; margin: 0 4px; }
.room-header .grow { flex: 1; }

/* ===== 主舞台:被控端屏幕独占,rustdesk 风格 ===== */
#room.page {
  padding: 8px;
  max-width: none;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stage {
  position: relative;
  flex: 1;
  min-height: 0;
  background: #0a0c10;
  border-radius: 10px;
  overflow: hidden;
}
/* stage-inner 由 JS 在拿到首帧后写入精确像素宽高(等比缩放,无留白) */
.stage-inner {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: #000;
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.stage-inner #remoteScreen {
  position: absolute; inset: 0;
}
.stage-inner #remoteScreen video {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
  object-fit: contain;
}
.stage-empty {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  color: #6b7686;
  font-size: 14px;
  pointer-events: none;
}

.controls { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; align-items: center; }
.controls .grow { flex: 1; }
.log { background: #0a0c10; border: 1px solid #1f242d; border-radius: 8px; padding: 10px; font-size: 12px; max-height: 160px; overflow: auto; color: #9aa4b2; }
.log.hidden { display: none; }

/* ===== 远程控制覆盖层 ===== */
.ctrl-overlay {
  position: absolute; inset: 0;
  cursor: crosshair;
  touch-action: none;
  background: transparent;
  pointer-events: auto;
  z-index: 5;
}
.ctrl-overlay[hidden] { display: none; }
.ctrl-hint {
  position: absolute; left: 8px; top: 8px;
  background: rgba(0,0,0,.55);
  color: #cfd6e1;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  pointer-events: none;
}
button:disabled { opacity: .45; cursor: not-allowed; }