/* 全局样式 */
body {
  margin: 0;
  background: #cce7ff; /* 淡蓝色背景 */
  font-family: sans-serif;
}

/* 顶部 header */
.header {
  height: 3em;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-bottom: 1px solid #ccc;
  background-color: #fff;

  width: 98%;       
  margin: 0 auto;   
  border-radius: 4px;
}

.title {
  font-size: 22px;
  font-weight: bold;
}

.user {
  position: absolute;
  right: 10px;
  font-size: 12px;
}

/* 房间框 */
.block {
  height: 4em;
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;       /* 垂直居中文字 */
  justify-content: center;   /* 水平居中文字 */
  position: relative;        /* 为右侧图标绝对定位 */
  text-align: center;

  width: 98%;        
  margin: 0.5em auto;       
  background-color: #fff;
  border-radius: 4px;
  cursor: pointer;           
}

/* 房间文字容器 */
.block span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;       /* 文字水平居中 */
}

/* 房间第一行文字背景固定宽度 */
.block .first-line {
  display: flex;              /* 用 flex 容器使文字居中 */
  justify-content: center;     /* 水平居中 */
  align-items: center;         /* 垂直居中 */
  width: 10ch;                 /* 固定宽度5个字符 */
  height: 1.2em;              /* 高度略高于文字 */
  text-align: center;         
  color: #fff;                /* 字体颜色 */
  border-radius: 2px;         
  margin-bottom: 0.2em;       
}

/* 右侧图标 */
.block img {
  position: absolute;
  right: 1ch;       
  height: 2ch;      
  width: auto;      
  top: 50%;         
  transform: translateY(-50%);
}

/* 鼠标 hover 效果 */
.block:hover {
  background-color: #f5f5f5;
}