/* Author: fe-ui-builder */
/* V-04 `s-05-watch.html` 的必要演进：静态假页面换成真 canvas，并补可读断线态。 */
.watch-screen {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface);
}
.watch-title {
  padding: 12px 16px;
  color: var(--fg);
  font-size: var(--fs-nav-title);
  font-weight: 700;
}
.watch-vnc {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--fg);
}
.watch-vnc canvas {
  max-width: 100%;
  max-height: 100%;
  display: block;
  image-rendering: pixelated;
  pointer-events: none;
}
.watch-tag,
.watch-state {
  position: absolute;
  padding: 6px 11px;
  border-radius: 99px;
  background: var(--surface);
  color: var(--fg-body);
  font-size: var(--fs-meta);
}
.watch-tag {
  top: 12px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.watch-tag i {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--success);
}
.watch-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  color: var(--fg-body);
  font-size: var(--fs-meta);
}
.watch-controls span {
  flex: 1;
}
.watch-error,
.watch-loading {
  margin: 48px 20px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  color: var(--fg-body);
  background: var(--surface);
}
/* 降级卡的返回入口。容器没起时这是屏上唯一能点的东西，
   所以给它当按钮的体量，而不是一条混在正文里的蓝链。 */
.watch-back {
  display: inline-block;
  margin-top: 14px;
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: 99px;
  color: var(--fg);
  font-size: var(--fs-meta);
  text-decoration: none;
}