ion-content {
  --background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.background-pattern {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.1;
  background-image: 
    linear-gradient(30deg, #000000 12%, transparent 12.5%, transparent 87%, #000000 87.5%, #000000),
    linear-gradient(150deg, #000000 12%, transparent 12.5%, transparent 87%, #000000 87.5%, #000000),
    linear-gradient(30deg, #000000 12%, transparent 12.5%, transparent 87%, #000000 87.5%, #000000),
    linear-gradient(150deg, #000000 12%, transparent 12.5%, transparent 87%, #000000 87.5%, #000000),
    linear-gradient(60deg, #77777777 25%, transparent 25.5%, transparent 75%, #77777777 75%, #77777777);
  background-size: 80px 140px;
  background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0;
  pointer-events: none;
}

.user-card {
  margin-top: 20px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  
  .avatar-container {
    display: flex;
    justify-content: center;
    padding: 20px 0;
    
    ion-avatar {
      width: 100px;
      height: 100px;
      border: 3px solid #fff;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
  }
}

.feature-card, .settings-card {
  margin-top: 16px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  
  ion-item {
    --background: transparent;
    
    ion-icon {
      color: var(--ion-color-primary);
    }
  }
}

ion-list {
  background: transparent;
  padding: 0;
}

ion-item {
  --padding-start: 16px;
  --inner-padding-end: 16px;
  --background: transparent;
  
  &:last-child {
    --border-width: 0;
  }
} 