:root {
  --ion-color-primary: #3880ff;
  --ion-color-secondary: #eb445a;
  --ion-padding: 16px;
  --ion-border-radius: 16px; /* 更圆润的边角 */
  --ion-color-gold: #FFD700; /* 定义金黄色 */
}

ion-content {
  --background: url('/assets/images/BackGround.png') no-repeat center center / cover; /* 设置背景图像 */
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--ion-padding);
  border-radius: var(--ion-border-radius);
  color: var(--ion-color-gold); /* 文字颜色为金黄色 */
}

.horizontal-cards {
  width: 100%;
  max-width: 800px;
  margin-bottom: var(--ion-padding);
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); /* 增加卡片阴影和层次感 */
  background: transparent; /* 设置为透明背景 */
}

.captured-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--ion-border-radius);
}

.face-analysis-card {
  background-color: transparent; /* 设置为透明背景 */
}

.horizontal-content {
  padding: var(--ion-padding);
}

.analysis-item {
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--ion-color-secondary);
  border-radius: var(--ion-border-radius);
  background: linear-gradient(135deg, #eadef5 0%, #c1dcf8 100%); /* 渐变紫色背景 */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15); /* 增加阴影效果 */
  color: var(--ion-color-gold); /* 文字颜色为金黄色 */
}

.analysis-item p,
.recommendation {
  color: var(--ion-color-gold) !important; /* 强制设置文字颜色为金黄色 */
}

.recommendation {
  margin-top: 8px;
  padding: 12px; /* 增加内边距 */
  background: rgba(255, 255, 255, 0.6); /* 半透明白色背景，提升可读性 */
  border-radius: var(--ion-border-radius);
  font-size: 14px;
  color: var(--ion-color-gold) !important; /* 强制设置文字颜色为金黄色 */
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* 增加阴影效果 */
}

@media (min-width: 768px) {
  .container {
    flex-direction: row;
    justify-content: space-around;
  }

  .horizontal-cards {
    max-width: 45%;
  }
}
