: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, .face-recommendation-card {
  background-color: transparent;
}

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

.analysis-item, .recommendation-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;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.analysis-grid, .recommendation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  padding: 10px;
}

.item-label {
  font-weight: bold;
  margin-bottom: 5px;
}
/* results.page.scss */
.title-bold {
  font-size: 24px; /* 或者你喜欢的任何其他大小 */
  color: #333; /* 或者你喜欢的任何其他颜色 */
}
@media (min-width: 768px) {
  .container {
    flex-direction: row;
    justify-content: space-around;
  }

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