* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif; background: #f0f2f5; }

.sidebar {
  background: #001529;
  color: #fff;
}
.logo {
  height: 64px;
  line-height: 64px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.topbar {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #555;
}
.el-menu-vertical-demo {
  border-right: none;
  background: #001529;
}
.el-menu-vertical-demo .el-menu-item {
  color: rgba(255,255,255,0.85);
}
.el-menu-vertical-demo .el-menu-item.is-active {
  background: #1890ff;
  color: #fff;
}
.el-menu-vertical-demo .el-menu-item:hover {
  background: rgba(255,255,255,0.05);
}

.card-box { margin-bottom: 16px; }
.page-title { font-size: 20px; font-weight: 500; margin-bottom: 16px; }

.snapshot-img { max-width: 200px; max-height: 120px; border-radius: 4px; border: 1px solid #eee; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.status-online { background: #52c41a; }
.status-offline { background: #999; }
.status-running { background: #1890ff; }

.video-placeholder {
  width: 100%; height: 240px; background: #000; display: flex; align-items: center; justify-content: center; color: #fff;
}
.video-box {
  width: 100%; height: 240px; background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.video-img {
  width: 100%; height: 100%; object-fit: contain;
}