// ion-list {
//   margin: 10px;
// }

// ion-item {
//   cursor: pointer;
// }
ion-header {
  background-color: #f8f9fa; /* 设置头部背景颜色 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

ion-toolbar {
  --background: transparent; /* 使工具栏背景透明 */
}

ion-title {
  font-size: 1.5em; /* 设置标题字体大小 */
  font-weight: bold; /* 加粗标题 */
  color: #3880ff; /* 设置标题颜色 */
}

ion-button {
  --background: #3880ff; /* 设置按钮背景颜色 */
  --color: white; /* 设置按钮文字颜色 */
  font-size: 1em; /* 设置按钮文字大小 */
  border-radius: 5px; /* 设置按钮圆角 */
}

ion-button:hover {
  --background: #3171e0; /* 鼠标悬停时的背景颜色 */
}

ion-button:active {
  --background: #2c6bbf; /* 按钮按下时的背景颜色 */
}

ion-content {
  padding: 16px; /* 设置内容内边距 */
}

ion-list {
  margin: 0; /* 移除默认的 margin */
}

ion-item {
  background-color: #ffffff; /* 设置列表项背景颜色 */
  border-radius: 8px; /* 设置列表项圆角 */
  margin-bottom: 12px; /* 添加底部间距 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  transition: transform 0.2s; /* 添加过渡效果 */
}

ion-item:hover {
  transform: translateY(-2px); /* 鼠标悬停时上移 */
}

ion-modal {
  --background: #ffffff; /* 设置模态框背景颜色 */
}

ion-modal ion-header {
  background-color: #f8f9fa; /* 设置模态框头部背景颜色 */
}

ion-modal ion-title {
  color: #3880ff; /* 设置模态框标题颜色 */
}

ion-modal ion-button {
  --background: transparent; /* 设置模态框关闭按钮背景透明 */
  --color: #3880ff; /* 设置模态框关闭按钮文字颜色 */
}

ion-modal ion-content {
  padding: 16px; /* 设置模态框内容内边距 */
}