/* Feminine SkinScan App Custom Styles */
body {
  background: #FFF8DC;
  color: #4A4A4A;
  font-family: 'Poppins', 'Raleway', sans-serif;
}
.hero {
  background: linear-gradient(135deg, #FFB6C1 0%, #FFF8DC 100%);
  border-radius: 1.5rem;
  box-shadow: 0 8px 32px rgba(221,160,221,0.08);
  padding: 2rem 1.5rem;
  margin-bottom: 2rem;
}
.btn-gradient {
  background: linear-gradient(90deg, #FFB6C1 0%, #DDA0DD 100%);
  color: #fff;
  border: none;
  border-radius: 2rem;
  font-weight: 600;
  transition: background 0.3s;
}
.btn-gradient:hover {
  background: linear-gradient(90deg, #DDA0DD 0%, #FFB6C1 100%);
}
.card {
  border-radius: 1.5rem;
  box-shadow: 0 2px 16px rgba(255,182,193,0.08);
  border: 2px solid #FFB6C1;
  background: linear-gradient(135deg, #FFF8DC 60%, #FFB6C1 100%);
}
.card .card-title {
  color: #DDA0DD;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.analysis-category {
  border-left: 6px solid #F0E68C;
  padding-left: 1rem;
  margin-bottom: 1.2rem;
  background: #fff8fa;
  border-radius: 1rem;
}
.analysis-category.skin-type { border-color: #FFB6C1; background: #fff0f6; }
.analysis-category.texture { border-color: #DDA0DD; background: #f8f0ff; }
.analysis-category.tone { border-color: #F0E68C; background: #fffbe0; }
.analysis-category.concerns { border-color: #FFB347; background: #fff7e6; }
.analysis-category.hydration { border-color: #A7E6F9; background: #e6fbff; }
.analysis-category.suggestions { border-color: #B2FFB6; background: #f0fff3; }
.analysis-category.score { border-color: #DDA0DD; background: #f8f0ff; }

.image-preview {
  border: 2px dashed #FFB6C1;
  border-radius: 1rem;
  background: #fff;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#camera-stream {
  border-radius: 1rem;
  width: 100%;
}
.upload-area {
  border: 2px dashed #DDA0DD;
  border-radius: 1rem;
  background: #fff;
  padding: 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s;
}
.upload-area.dragover {
  background: #FFB6C1;
  color: #fff;
}
.upload-area.progress-bar.bg-pink {
  background: linear-gradient(90deg, #FFB6C1 0%, #DDA0DD 100%);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
}
.badge.bg-warning {
  background: linear-gradient(90deg, #FFD580 0%, #FFB6C1 100%);
  color: #4A4A4A;
  font-weight: 500;
  border-radius: 1rem;
  padding: 0.4em 0.9em;
  box-shadow: 0 2px 6px rgba(255,182,193,0.08);
}
.analysis-icon {
  color: #FFB6C1;
  font-size: 1.2em;
  margin-right: 0.5em;
}
@media (max-width: 768px) {
  .hero { padding: 1rem; }
  .upload-area { padding: 1rem; }
}