html, body {
  margin: 0;
  padding: 0;
  background: transparent;
  font-family: Arial, Helvetica, sans-serif;
}

.frame {
  width: 1280px;
  height: 720px;
  background: transparent;
  overflow: hidden;
}

.topbar {
  height: 54px;
  background: #1f5f7a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  font-weight: 700;
  font-size: 18px;
}

.weather {
  font-weight: 700;
  font-size: 16px;
  opacity: 0.95;
}
.weather .sep { margin: 0 10px; opacity: 0.6; }

.metabar {
  height: 36px;
  background: #1f5f7a;
  color: #dff3ff;
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 0 16px;
  font-size: 14px;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.metaItem { white-space: nowrap; }
.metaItem.right { margin-left: auto; }

.videoRow {
  height: 360px;
  display: flex;
  background: transparent;
}
.cam {
  flex: 1;
  border-right: 2px solid #111;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  font-weight: 700;
  font-size: 18px;
}
.camRight { border-right: none; }

.tableWrap {
  height: calc(720px - 54px - 36px - 360px);
  background: #e9eef2;
  display: flex;
  flex-direction: column;
}

.thead {
  display: grid;
  grid-template-columns: 120px 1.7fr 1fr 1fr 1fr;
  background: #7a8a97;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 12px;
}

.tbody {
  overflow: hidden;
  flex: 1;
}

.tr {
  display: grid;
  grid-template-columns: 120px 1.7fr 1fr 1fr 1fr;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  font-size: 14px;
  color: #1a1a1a;
}

.tr:nth-child(even) { background: #f4f7fa; }

.td.rank { font-weight: 800; }
.td.speed { font-weight: 700; }
.td.diff { font-weight: 700; }

.empty {
  padding: 18px 12px;
  color: rgba(0,0,0,0.55);
  font-weight: 700;
}